Jump to content

positioning background -> jQuery involved


george
 Share

Recommended Posts

I am trying to position the background of a div block my css code for the block is

#imgmilestone { display:none;   background:#FFFFFF url(../images/milestone.jpg) no-repeat top right;   width:230px; height:307px; text-align:center; clear:left; }

The display is changed to inline-block in a jQuery function as follows:

$projbut.hover(function(){  $("#imgmilestone").css ( { "display":"inline-block", "position":"relative", "clear":"left", "background-position":"right"  } );	 },function(){  $("#imgmilestone").css( {"display":"none"} );})

I just tried changing the jQuery css property by removing the inline-block and changing that to just block, removed position reatibe and removed clear left. These changes had no effect. The site is here , and the blue buttons activate the div with the background images

Link to comment
Share on other sites

in javascript the attributes have to camel cased.
YES! in javascript, NOT in jquery javascript. 1)background:#FFFFFF url(../images/milestone.jpg) no-repeat top right;should bebackground:#FFFFFF url(../images/milestone.jpg) no-repeat right top;2)$projbut.hover(function(){if 'projbut' is supposed it a id ref it should be $("#projbut").hover(function(){ IF class $(".projbut").hover(function(){3) by just specifying one position property "background-position":"right"the image will position itself center right,
Link to comment
Share on other sites

I tried the suggestions given, but my problem persists. I have a simplified page that just demonstrates the problem here. All the code is in this one file. The goal is to position the background position to the right side of the container. Thanks

Edited by george
Link to comment
Share on other sites

you are restricting the width of the container to the same width of the background image, the right image positioning will force it to right edge of this container, which is not the right edge of spacer container, you need to remove the width completely so the this container block element will stretch to the total width available of the spacer parent container. or use jquery to make the image width: auto; on hover of triggering element, and return width, after hover off. Edit: Also inline-block will cause the container if changed to width: auto; to shrink down to content within it, usually paragraph elements, images (not background images), since most of your element are empty they will shrink to zero width. so i would use

<script type="text/javascript">$(document).ready(function(){  $whatbut = $('h4#What');  $estibut = $('h4#Esti');  $assubut = $('h4#Assu');  $projbut = $('h4#Proj');   var holdwidth="";   $whatbut.hover(function(){  holdwidth=parseInt($('#imggoose').css ("width"));  $('#imggoose').css( {'display':'block' , 'width': 'auto'} );	  },function(){   $('#imggoose').css( {'display':'none', 'width': holdwidth+'px'} );  })  $estibut.hover(function(){  holdwidth=parseInt($('#imgclockspiral').css ("width"));   $('#imgclockspiral').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto' } );	  },function(){   $('#imgclockspiral').css( {'display':'none', 'width': holdwidth+'px'} );  })  $assubut.hover(function(){  holdwidth=parseInt($('#imgporpose').css ("width"));   $('#imgporpose').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto'  } );	  },function(){   $('#imgporpose').css( {'display':'none', 'width': holdwidth+'px'} );  })  $projbut.hover(function(){  holdwidth=parseInt($('#imgmilestone').css ("width"));   $('#imgmilestone').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto'  } );	  },function(){   $('#imgmilestone').css( {'display':'none', 'width': holdwidth+'px'} );  })})</script>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...