repositioning element when browser size changed

[sweetysweety]

hi,i have a website like:http://www.terranartworks.com/testsite/tsv1/i want to do that repositioning red point,when browser size has changed.i mean that think about you clicked one of 3 buttons on bottom.red point comes sliding and position at the middle of button.then you reduce the width of browser.the red point is stays at the first position.but it should reposition according to reduced amount.how can i do this with jquery?

[dsonesuk]

Either reload the page, or rerun the script that positions the red point using resize()

 $(window).resize(function(){ ///example window.setTimeout('location.reload()', 500); ///reload page after 1/2 second });

[sweetysweety]

i don't want reload page.i just want to slide right or left the redpoint as the browser width change.

for example the page loaded and then i click first button on bottom of page.

the red point will comes to the middle of that button.

then i reduce the width of browser.

the red point stays the first position.

but the button is repositioned.

so if the red point stays on first location that it placed,this means that it is not staying on the middle of button.

 

like http://www.terranartworks.com/testsite/tsv1/islerimiz.html

 

 

as you see,i changed browser size and red point stays at the right of second button.i don't want to see this attitude.i want to reposition red point at the middle of second button again.

Edited August 27, 2013 by sweetysweety

[dsonesuk]

THEN as i SAID it needs to run the script code that positions the red DOT and BACKGROUND to the new position, which should be the code that is executed when the menu anchor is clicked.

[sweetysweety]

you mean this:

$(function() {	var offset,center,width,newCenter=3;        		$mainNav1 = $("#point");    $mainNav1.append("<li id='red'></li>");	    var $redPoint = $("#red");    $redPoint        .width($redPoint.width())        .height($redPoint.height())			$("#menuButtons .menuItem a").live({			click:function() {				$(window).resize(function(){				offset=$(this).offset();				width=$(this).width();				center=(offset.left+width/2)-newCenter;				$redPoint.stop().animate({left:center});				 window.setTimeout('location.reload()');				 			});				}			}); });

or this:

$(function() {	var offset,center,width,newCenter=3;        		$mainNav1 = $("#point");    $mainNav1.append("<li id='red'></li>");	    var $redPoint = $("#red");    $redPoint        .width($redPoint.width())        .height($redPoint.height())		$(window).resize(function(){			$("#menuButtons .menuItem a").live({			click:function() {				offset=$(this).offset();				width=$(this).width();				center=(offset.left+width/2)-newCenter;				$redPoint.stop().animate({left:center});				 				}			}); 			window.setTimeout('location.reload()');				 			});});

i try either way but it didn't work.i put location to my path of jquery code but it didn't work too.

i search on the internet and some examples uses function for it.do i have to use function for it?

[dsonesuk]

This is the code that positions it AFTER click event is triggered

 

offset=$(this).offset(); width=$(this).width(); center=(offset.left+width/2)-newCenter; $redPoint.stop().animate({left:center});

 

BY inserting the click event inside the resize() you are telling it after a resize of browser window is detected, run this code which will WAIT FOR A CLICK EVENT BEFORE DOING ANYTHING, do you really want to do this? think about! use your little grey cells.