CODEWITHSUNDEEP
jqueryhtmlcss
Rambo
Rambo

Reputation: 23

Exact same jquery code works in one html document and not another

I'm trying to use the EXACT SAME jQuery code. It works in one html document but not in the second. I'm using CSS in these documents as well. Both the CSS and the jQuery code are not in external files. I feel like the solution is probably something simple so forgive me for my lack of knowledge. I will leave the jQuery code, the CSS code, the html code that isn't functioning with the jQuery and exactly how it looks in the document(all in one). I will list them in that exact order.

JQUERY CODE:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".showr").click(function(){
    $(".vidr").css('visibility','visible');
    $(".vids").css('visibility','hidden');
  });
  $(".shows").click(function(){
    $(".vidr").css('visibility','hidden');
    $(".vids").css('visibility','visible');
  });
    $(".left").click(function(){  
    $(".showr").animate({"left":"-=110px"},"slow");
    $(".shows").animate({"left":"-=110px"},"slow");
  });
    $(".right").click(function(){  
    $(".showr").animate({"left":"+=110px"},"slow");
    $(".shows").animate({"left":"+=110px"},"slow");
  });
});
</script>

CSS CODE:

<style type="text/css">
html,body
{
padding:0;
margin:0;
height:1200px;
overflow-y:scroll;
}
body
{
overflow-x:hidden;
overflow-y:hidden;
}
.stretch
{
width:100%;
height:1200px;
position:relative;
z-index:-2;
}
.topmenu
{
position:relative;
top:-2400px;
left:100px;
z-index:-1;
}
.videoplayer
{
position:relative;
top:-3600px;
left:100px;
z-index:-1;
}
.videoscroller
{
position:relative;
top:-4800px;
left:100px;
z-index:-1;
}
.twitterfeed
{
position:relative;
top:-8755px;
left:100px;
z-index:-1;
}
.slider
{
position:relative;
left:263px;
bottom:3050px;
z-index:0;
overflow:hidden;
width:485px;
height:160px;
margin:0px; 
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.left
{
position:relative;
left:208px;
bottom:3175px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:black;
border:solid 1px #c3c3c3;
}
div.right
{
position:relative;
left:761px;
bottom:3272px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:white;
border:solid 1px #c3c3c3;
}
div.videos
{
position:absolute;
left:210px;
top:138px;
z-index:1;
width:592px;
height:383px;
margin:0px; 
padding:5px;
}
iframe
{
position:absolute;
left:20px;
top:20px;
}
img.showr
{
position:absolute;
z-index:2;
}
img.shows
{
position:absolute;
left:180px;
z-index:2;
}

</style>

HTML 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" />
    <title>Untitled Document</title>
</head>

<body>
<div><img src="Background2IBSTV.jpg" class="stretch"/>
</div>
<div style="position:relative; top:-1200px; left:100px;" class="stretch"><img src="railsIBSTV.png"/>
</div>
<div class="topmenu"><img src="Top_MenuIBSTV.png"/>
</div>
<div class="videoplayer"><img src="video_playerIBSTV.png"/>
<div class="videos">
<iframe class="vidr" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/nwYYaqs_yM4" frameborder="0" allowfullscreen></iframe>
<iframe class="vids" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/fO4aXYETHxE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="videoscroller"><img src="video_scrollerIBSTV.png"/>
<img src="left_arrowIBSTV.png" style="position:relative; left:-22px; bottom:1200px;"/>
<img src="right_arrowIBSTV.png" style="position:relative; left:22px; bottom:2400px;"/>
<div class="slider">
<img src="rampage-jackson.jpg" class="showr" width="165" height="150">
<img src="Professional.jpg" class="shows" width="165" height="150">
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="twitterfeed"><img src="twitter_feedIBSTV.png"/><p style="position:relative; left:455px; bottom:450px; font-size:35px; color:lightgrey;">Twitter</p>
</div>
</body>
</html>

ALL IN ONE (Exactly how it looks in document)

<!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" />
    <title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".showr").click(function(){
    $(".vidr").css('visibility','visible');
    $(".vids").css('visibility','hidden');
  });
  $(".shows").click(function(){
    $(".vidr").css('visibility','hidden');
    $(".vids").css('visibility','visible');
  });
    $(".left").click(function(){  
    $(".showr").animate({"left":"-=110px"},"slow");
    $(".shows").animate({"left":"-=110px"},"slow");
  });
    $(".right").click(function(){  
    $(".showr").animate({"left":"+=110px"},"slow");
    $(".shows").animate({"left":"+=110px"},"slow");
  });
});
</script>
<style type="text/css">
html,body
{
padding:0;
margin:0;
height:1200px;
overflow-y:scroll;
}
body
{
overflow-x:hidden;
overflow-y:hidden;
}
.stretch
{
width:100%;
height:1200px;
position:relative;
z-index:-2;
}
.topmenu
{
position:relative;
top:-2400px;
left:100px;
z-index:-1;
}
.videoplayer
{
position:relative;
top:-3600px;
left:100px;
z-index:-1;
}
.videoscroller
{
position:relative;
top:-4800px;
left:100px;
z-index:-1;
}
.twitterfeed
{
position:relative;
top:-8755px;
left:100px;
z-index:-1;
}
.slider
{
position:relative;
left:263px;
bottom:3050px;
z-index:0;
overflow:hidden;
width:485px;
height:160px;
margin:0px; 
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.left
{
position:relative;
left:208px;
bottom:3175px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:black;
border:solid 1px #c3c3c3;
}
div.right
{
position:relative;
left:761px;
bottom:3272px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:white;
border:solid 1px #c3c3c3;
}
div.videos
{
position:absolute;
left:210px;
top:138px;
z-index:1;
width:592px;
height:383px;
margin:0px; 
padding:5px;
}
iframe
{
position:absolute;
left:20px;
top:20px;
}
img.showr
{
position:absolute;
z-index:2;
}
img.shows
{
position:absolute;
left:180px;
z-index:2;
}

</style>
</head>

<body>
<div><img src="Background2IBSTV.jpg" class="stretch"/>
</div>
<div style="position:relative; top:-1200px; left:100px;" class="stretch"><img src="railsIBSTV.png"/>
</div>
<div class="topmenu"><img src="Top_MenuIBSTV.png"/>
</div>
<div class="videoplayer"><img src="video_playerIBSTV.png"/>
<div class="videos">
<iframe class="vidr" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/nwYYaqs_yM4" frameborder="0" allowfullscreen></iframe>
<iframe class="vids" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/fO4aXYETHxE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="videoscroller"><img src="video_scrollerIBSTV.png"/>
<img src="left_arrowIBSTV.png" style="position:relative; left:-22px; bottom:1200px;"/>
<img src="right_arrowIBSTV.png" style="position:relative; left:22px; bottom:2400px;"/>
<div class="slider">
<img src="rampage-jackson.jpg" class="showr" width="165" height="150">
<img src="Professional.jpg" class="shows" width="165" height="150">
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="twitterfeed"><img src="twitter_feedIBSTV.png"/><p style="position:relative; left:455px; bottom:450px; font-size:35px; color:lightgrey;">Twitter</p>
</div>
</body>
</html>

Upvotes: 2

Views: 264

Answers (1)

amelvin
amelvin

Reputation: 9051

I think that the problem is with the version of jquery and/or clashes between inline styles and stylesheet styles.

I set up a jsfiddle and if you run your HTML and jquery nothing happens on jquery 1.2.6 but the code works OK on jquery versions 1.3.2, 1.4.4, 1.5.2, 1.6.

I didn't include the css in the fiddle because you have inline styles as well as using a stylesheet - the clashes between the two break the page on js fiddle, so I guess there are conflicts causing unwanted side-effects.

I would switch to using helper methods rather than directly referencing CSS styles; so use:

$(".vidr").hide();

rather than:

$(".vidr").css('visibility','hidden');

And you might want to look at the jquery animate function because I'm not sure whether your use of it is achieving what it is you want it to.

Upvotes: 2

Related Questions