Category Archives: CSS

use swf/flash as html/php page background

31 Sunday Oct 2010

Posted by in CSS, HTML

≈ 12 Comments


I just got a task, client want to use swf file as page background instead of images. Here is the detail how we can make the swf as page background.

I used 3 css classes in 3 divs. .container contain the whole page, .flash_background contain only the flash object and .content keep all the data.

CSS

.container{
   height: 600px;
   width:  800px;
   position: relative;
}

.flash_background{
   z-index: 1;
   position: absolute;
}
.content{
   z-index: 2;
   position: relative;
}

Here is HTML code 

<div class="container">
	<div class="flash_background">
		<object width="800" height="600">
			<param name="movie" value="swf/file_name.swf">
			<param name="wmode" value="transparent">
			<embed src="swf/file_name.swf" width="800" height="600" wmode="transparent"></embed>
		</object>
	</div>
<div class="content">
data will be here, images, texts etc can working properly  <br />
<br />
Hello World <br />
<br />
Hello WOrld <br />
<br />
Hello WOrld <br />
<br />
</div>
</div>

Done 🙂
Its working with IE, FF, Chrome very well.

set & reset form text value onfocus, onblur, onclick using javascript

25 Monday Oct 2010

Posted by in CSS, JavaScript

≈ 23 Comments


This is simple but sometime its kill our valuable time.
for text field sometime we need to use label as text value, so when mouse click on it the text value should hide, if user doesn’t give any value and point the mouse another field its display value. 

<input type="text" 
          onfocus="javascript:this.value==this.defaultValue ? this.value = '' : ''"  
          onblur="javascript:this.value == '' ? this.value = this.defaultValue : '' " 
          value="First Name"  
/>

or
HTML: 

<input type='text' value='First Name' onfocus='javascript:check_text_onfous(this)' onblur='javascript:check_text_onblur(this)' />

Javascript:

function check_text_onfocus(obj)
{
    if(obj.value == obj.defaultValue) 
        obj.value = '';
}
function check_text_onblur(obj)
{
    if(obj.value=='')
        obj.value = obj.defaultValue;
}

its works with me on IE,FF,Chrome 🙂

jQuery Mega Menu Customization and Fixed Conflict with jQuery UI

14 Wednesday Apr 2010

Posted by in CSS, JavaScript, jquery, jQuery UI

≈ 6 Comments

Tags

, , , ,


Recently I’ve used jQuery Mega Menu on a site. The default style for this menu it appear from left corner to below the link/button when mouse is over. But I wanted it appear above the link/button when mouse is over, here is the code we need to change  on line 76 of jkmegamenu.js file


//existing line
// megamenu.offsety= megamenu.$anchorobj.offset().top
//Change to
megamenu.offsety= megamenu.$anchorobj.offset().top - (megamenu.$menuobj.outerHeight() + megamenu.$anchorobj.outerHeight())

Just subtract top position with total of menu object height and anchor so the bottom line of new box will appear just above the link/button.

But I got some problem when I was adding this code to a page where already have jQuery UI  items, both jquery ui tabs/accordion/dialog…etc. and mega menu wasn’t work. After check the mega menu js file I got the solution, we just need to comemnted out or remove the following line at the begianing of file


//jQuery.noConflict();

Done, everything working with me properly hope it will work with you as well 🙂

make top and bottom position fixed in IE 6

13 Wednesday Jan 2010

Posted by in CSS

≈ 3 Comments

Tags

, , , , ,


Position fixed is not supported by IE 6, I searched about it in many sites and get the following to be fixed.

here is the html code

<html>
<body>
<div id='banner'>
Top always fixed
</div>
<div id='contents'>
Put your contents here
</div>
<div id='footer'>
Footer or other contents
</div>
</body>
</html>

here is the css for above html

* html #banner
{
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
padding-bottom:2px;
padding-top:2px;
background:#000000;
height:35px;
width:100%;
 z-index:1000;
}
* html #footer
{
position: absolute;
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
height: 32px;
 width: 100%;
font-size: 12pt;
background: #000000;
overflow: hidden;
 z-index:1000;
}

You can do the rest of thing as your own. The two css gives you to fixed the position in IE 6, for the other browser you can easily use “Position:Fixed;” its work with me hope it’ll work for you 🙂