Home : Forums : Webmasters' Lounge : Help my opening page jumps and I think it is a jquery conflict

Help my opening page jumps and I think it is a jquery conflict

You are currently not logged in. You can view the forums, but cannot post messages.

22-Mar-12 03:26

Delete

Edit

tinalouise50

No stars yet

Posts: 6

From: Kingston Upon Thames, Surrey, UK

Hello All,

Please could someone lend me a helping hand as I am going crazy with this. I have set up my opening page and it is pretty simple but that is what I want. Unfortunately the .hide.delay.fadeIn is working great on one level and then the last line causes the page to jerk slightly just before the menu reaveals. My old web designer has my remote site details so it is not up just local. Here is the code.

Html/jquiery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="CSS/OpenNR-2.css" rel="stylesheet" type="text/css" media="screen">

<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script>
$(document).ready(function(){
$('#slideshow').cycle({ timeout:6000
});

fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
$('#NR-small').hide().fadeIn(3000);

$('#cost-tit').hide().delay(2000).fadeIn(2000).delay(2000).fadeOut(1000)

$( init );
function init() {
$('#Nav-Menu').hide()
$('#Nav-Menu').delay(8000).fadeIn(3000);

}

});

</script>

</head>

<body>

<div id="wrapper">

<div id="slideshow">

<img class="pics" src="IMAGES/beauty and fashion-3.jpg"/>
<img class="pics" src="IMAGES/good landscape xerox NR.jpg"/>
<img class="pics" src="IMAGES/seb couple with dressformNR.jpg"/>

</div>

<div id="NR-small">
<img src="IMAGES/ A -NR BW good 154.jpg"/>
</div>

<div id="cost-tit">
<img src="IMAGES/cost title 1.jpg"/>
</div>


<div id="Nav-Menu">

<ul>
<li><a href="#">SHOW REELS</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

<ul>
<li><a href="#">BIOGRAPHY</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

<ul>
<li><a href="#">CV/RESUME</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

<ul>
<li><a href="#">PORTFOLIO</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

<ul>
<li><a href="#">BLOG</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

<ul>
<li><a href="#">CONTACT</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul> 
</li> 
</ul> 

</div>

</div>
</body>
</html>

And here is the CSS:

@charset "UTF-8";
/* CSS Document */

body { background-color:#000000; }

#wrapper { width:900px; background-color:#000000 ;margin:auto;padding-top:30px;

}

#NR-small {width:184; height:87px; text-align:center; margin-top:35px; }

#cost-tit { text-align:center;margin:29px;}

#slideshow { width:525px; margin-left:auto; margin-right:auto;}

h1 { color:#CC66CC;}


.book-pics { margin-too: 50px;}

#Nav-Menu { margin-top:30px;
padding:0px;
}

#Nav-Menu ul { margin:0;
padding:0;
line-height:30px;}

#Nav-Menu li { margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#000;}

#Nav-Menu ul li a { text-align:center;
font-family:"Times New Roman", Times, serif;
text-decoration:none;
font-weight:100;
height:30px;
width:150px;
display:block;
color:#FFF;

}

#Nav-Menu ul ul{ position:absolute;
visibility:hidden;
top:30px;

}
#Nav-Menu ul li:hover ul { visibility:visible;}

#Nav-Menu li:hover { background-color:#000;}

#Nav-Menu li:hover ul li a:hover { background-color:#0000;
color:#FF0000; }

#Nav-Menu a:hover { color:#FF0000; }

.clearFloat { clear:both;
margin:0
padding:0}

a.menu-titles:hover {color:#FF0000;}
/*****************end mnu css*********************/

It is a work in progress but the jquery jerking thing has to be sorted before I can move forward. Also this works great in all browsers except IE. Any ideas.

I would so so appreciate any help as I am a real novice and so want to learn.

Many many thanks in advance.

Tina

--
tina nail

23-Mar-12 03:47

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@tinalouise50: Please use the <> (code) button when pasting code.

Please post the URL of the page with the problem, otherwise I can't easily test it.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

23-Mar-12 05:21

Delete

Edit

tinalouise50

No stars yet

Posts: 6

From: Kingston Upon Thames, Surrey, UK

Hi Matt,

Thanks so much for getting back to me!

When I test the page in safari here is the link:

file:///Users/Nail/Desktop/Nail-Rockett/TMPMDJE7H.htm

I am not sure whether you can see this so I will also try repasting using the code button.

I would sooooo appreciate it if you could help me out with this!

Tina


[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="CSS/OpenNR-2.css" rel="stylesheet" type="text/css" media="screen">

<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script>
$(document).ready(function(){
$('#slideshow').cycle({ timeout:6000
});

		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	$('#NR-small').hide().fadeIn(3000);
	
	$('#cost-tit').hide().delay(2000).fadeIn(2000).delay(2000).fadeOut(1000)
	
	$( init );
	function init() {
  $('#Nav-Menu').hide()
  $('#Nav-Menu').delay(8000).fadeIn(3000);



	
	}

});

	
	
  
 </script>
  








</head>


<body>


<div id="wrapper">

<div id="slideshow">

<img class="pics" src="IMAGES/beauty and fashion-3.jpg"/>
<img class="pics" src="IMAGES/good landscape xerox NR.jpg"/>
<img class="pics" src="IMAGES/seb couple with dressformNR.jpg"/>

</div> 
 
 <div id="NR-small"> 
<img src="IMAGES/ A -NR BW good 154.jpg"/>
</div>



<div id="cost-tit">
<img src="IMAGES/cost title 1.jpg"/>
</div>
<!--start of menu-->

<div id="Nav-Menu">

<ul>
<li><a href="showreels.html">SHOW REELS</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->







<ul>
<li><a href="biography.html">BIOGRAPHY</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->



<ul>
<li><a href="#CV/Resume.html">CV/RESUME</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->



<ul>
<li><a href="#Portfolio.html">PORTFOLIO</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->




<ul>
<li><a href="#blog.html">BLOG</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->



<ul>
<li><a href="#Contact.html">CONTACT</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>  <!--End inner UL-->
</li> <!--End main UL-->
</ul> <!--End of unordered list-->


</div>





</div>
</body>
</html>
 

and here is the CSS

@charset "UTF-8";
/* CSS Document */

body     { background-color:#000000;  }

#wrapper { width:900px; background-color:#000000 ;margin:auto;padding-top:30px;


		   

}

#NR-small {width:184; height:87px; text-align:center; margin-top:35px;  }



#cost-tit { text-align:center;margin:29px;}


#slideshow { width:525px;  margin-left:auto; margin-right:auto;}

h1 { color:#CC66CC;}






<!--CLASS TAGS-->
.book-pics { margin-too: 50px;}

#Nav-Menu { margin-top:30px;
			padding:0px;
			}
			
#Nav-Menu ul { margin:0;
			   padding:0;
			   line-height:30px;}
			
#Nav-Menu li { margin:0;
			   padding:0;
			   list-style:none;
			   float:left;
			   position:relative;
			   background-color:#000;}
			   
#Nav-Menu ul li a { text-align:center;
					font-family:"Times New Roman", Times, serif;
					text-decoration:none;
					font-weight:100;
					height:30px;
					width:150px;
					display:block;
					color:#FFF;
					
}

#Nav-Menu ul ul{ position:absolute;
				 visibility:hidden;
				 top:30px;
				
}
#Nav-Menu ul li:hover ul { visibility:visible;}



#Nav-Menu li:hover { background-color:#000;}   

#Nav-Menu li:hover ul li a:hover { background-color:#0000;
								    color:#FF0000; }  

#Nav-Menu a:hover { color:#FF0000;     }      

.clearFloat { clear:both;
			  margin:0
			  padding:0}   

a.menu-titles:hover {color:#FF0000;}
/*****************end menu css*********************/

[/code]



[code]

[/code]

--
tina nail

23-Mar-12 05:23

Delete

Edit

tinalouise50

No stars yet

Posts: 6

From: Kingston Upon Thames, Surrey, UK

Matt sorry just thought of this. I do not have any reset in their yet, but I don't think that would make a huge difference. As I said I am really new at this and struggling through but keen to improve!

Thanks so much

Tina

--
tina nail

23-Mar-12 15:21

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Hi Tina,

You need to upload your page to a public web server so that we can see it. Don't forget to upload your CSS file(s) and any images too.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

08-May-12 01:34

Delete

Edit

tinalouise50

No stars yet

Posts: 6

From: Kingston Upon Thames, Surrey, UK

Hi Matt,

Thanks for getting back to me.

You can look at the page at:

http://www.nailandrockett.com/new/ALL%20HTML/index.html

I would really appreciate any help.

Thanks so much

Tina

--
tina nail

17-May-12 04:51

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@tinalouise50: I'm guessing you're using a browser window that isn't very tall, causing the scrollbar to appear when the menu appears? This will cause the page to move to the left to accommodate the scrollbar. This is expected behaviour.

To avoid the jump, set a height on your wrapper div so that it's at least as tall as the slideshow + logo + menu. This will ensure that the content height doesn't change once the menu is shown, and the scrollbar won't suddenly appear when the menu reveals.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

17-May-12 06:37

Delete

Edit

tinalouise50

No stars yet

Posts: 6

From: Kingston Upon Thames, Surrey, UK

Matt you are brilliant! That worked like a treat. Had no idea about the browser window height thing!!

I cannot thank you enough for your help.

Have a great weekend.

Tina

--
tina nail