lostprophetpunk Posted December 24, 2009 Share Posted December 24, 2009 Hello there, I have come across a problem whilst making a jquery slider. Now, I have tested this code on a test page, and it seems to work perfectly... <!DOCTYPE html> <html> <head> <script src="js/jquery.js" type="text/javascript" language="javascript"></script> <script src="http://jqueryui.com/latest/ui/effects.core.js"></script> <script src="http://jqueryui.com/latest/ui/effects.slide.js"></script> <style type="text/css"> #wrap { width: 400px; height: 450px; overflow: hidden; } #meh { width: 800px; height: 450px; background: #333333; position: relative; float: left; } #meh2 { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; } #meh3 { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; } </style> <script type="text/javascript"> $(document).ready(function(){ $("a.test").click(function(){ $("#meh").animate({"right": "+=400px"}, "slow"); }); }); </script> </head> <body> <div id='wrap'> <div id='meh'><div id='meh2'>srlkjdngklngrkegkoenoeho<br /><br />lsdknsdlfhnkldhn</div><div id='meh2'>srsd;lmg;smgsmglkjdngklngrkegkosdfl;mnds;klld;n;enoeho</div></div> </div> <br /><br /> <a href='#' class='test'>click</a> </body> </html> But when I try to implement it into my actual page...the divs do not show properly (no backgrounds or height/width set even though they are) and all is shown is the text from both divs... Here is the code for the actual page... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Minihobbs</title> <script src="js/jquery.js" type="text/javascript" language="javascript"></script> <script src="http://jqueryui.com/latest/ui/effects.core.js"></script> <script src="http://jqueryui.com/latest/ui/effects.slide.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a.about").click(function(){ $("#container").animate({"right": "+=400px"}, "slow"); }); }); </script> <style type='text/css' ref='stylesheet' media='screen'> html, body { margin: 0; padding: 0; } body { background: transparent url(images/bg.png) center center; } #wrapper { width: 940px; margin: auto; } #top { width: 940px; height: 100px; } #logo { width: 236px; height: 60px; background: transparent url(images/logo.png) no-repeat center center; margin-top: 20px; float: left; } #logo a:link { display: block; width: 236px; height: 60px; text-decoration: none; } #logo a:visited { display: block; width: 236px; height: 60px; text-decoration: none; } #logo a:active { display: block; width: 236px; height: 60px; text-decoration: none; } #logo a:hover { display: block; width: 236px; height: 60px; text-decoration: none; } #title { width: 394px; height: 36px; background: transparent url(images/name.png) no-repeat center center; float: right; margin-top: 30px; } #main { width: 940px; height: 600px; background: transparent url(images/mainbg.png) no-repeat center center; #mainwrap { width: 400px; height: 450px; overflow: hidden; } #container { width: 800px; height: 450px; background: #333333; position: relative; float: left; } #home { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; } #about { width: 400px; height: 450px; background: #888888; position: relative; margin-left: 400px; float: left; clear: both; } </style> </head> <body> <div id='wrapper'> <div id='top'> <div id='logo'><a href='#' title='Minihobbs Home'></a></div> <div id='title'></div> </div> <div id='main'> <div id='mainwrap'> <div id='container'> <div id='home'>srlkjdngklngrkegkoenoeho<br /><br />lsdknsdlfhnkldhn</div> <div id='about'>srsd;lmg;smgsmglkjdngklngrkegkosdfl;mnds;klld;n;enoeho</div></div> </div> <br /> <a class='about' href='#'>click</a> </div> </div> </body> </html> If anyone could help me out that would be awesome. Quote Link to comment Share on other sites More sharing options...
haku Posted December 25, 2009 Share Posted December 25, 2009 First, I'll tell you about a few problems unrelated to your issue: 1) You shouldn't use single quotes around HTML attributes. Some browsers don't play friendly with that. 2) You haven't put the required 'type' in your script tags. Script tags should look like this: <script src="path/to/file.js" type="text/javascript"></script> The type attribute is required. 3) You have used the deprecated 'language' attribute in one of your script tags. This tag should not be used, and the 'type' attribute should be used instead, as I have explained above. As to your problem - well you didn't close one of your CSS declarations with a closing parenthesis }. This means that the CSS attributes below it are not being read. The attributes below it are the ones that are for the divs in question, so they are not being read. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.