• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Category Archives: CSS

use swf/flash as html/php page background

31 Sunday Oct 2010

Posted by Sarwar 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.

Advertisement

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

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

25 Monday Oct 2010

Posted by Sarwar in CSS, JavaScript

≈ 22 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 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

jQuery Mega Menu Customization and Fixed Conflict with jQuery UI

14 Wednesday Apr 2010

Posted by Sarwar in CSS, JavaScript, jquery, jQuery UI

≈ 6 Comments

Tags

conflict, customization, jkmegamenu, jquery, menu


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 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

make top and bottom position fixed in IE 6

13 Wednesday Jan 2010

Posted by Sarwar in CSS

≈ 3 Comments

Tags

bottom, CSS, html, IE6, Position Fixed, Top


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 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • RT @ESPNUK: If Erling Haaland wanted to match Cristiano Ronaldo's 700 league goals, he'd have to score 40 goals a season until the year 203…    1 month ago
  • RT @Cristiano: Great team effort and a good victory. We stand together. Let’s go, United! 💪🏽 https://t.co/GnjAR3oM3s    3 months ago
  • RT @Cristiano: Hard work always pays off 🙏🏽💪🏽 https://t.co/kMqIpB2nfV    5 months ago
  • RT @realDonaldTrump: Just finished a very good conversation with President Xi of China. Discussed in great detail the CoronaVirus that is r…    2 years ago
  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    6 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    6 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • Mr Griever on Access session data in a model -cakephp
  • apnarahimyarkhan on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • Toko Kunci Pintu Murah on set & reset form text value onfocus, onblur, onclick using javascript
  • nevitaputri1.doodlekit on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Blog at WordPress.com.

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Follow Following
    • sarwar's weblogs
    • Join 328 other followers
    • Already have a WordPress.com account? Log in now.
    • sarwar's weblogs
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
%d bloggers like this: