colinh_7 Posted March 24, 2015 Share Posted March 24, 2015 Hello, I recently used this code that I got from a working fade in slider on the internet. The only thing I've changed are the images, the rest has stayed the same. When I load up the site in Safari it doesn't slide or fade, it just shows one image the entire time. What am I doing wrong? Heres the code I used from the internet HTML <div class="fadein"> <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"></div> CSS .fadein { position:relative; height:320px; width:320px;}.fadein img { position:absolute; left:0; top:0;} JS $('.fadein img:gt(0)').hide();setInterval(function () { $('.fadein :first-child').fadeOut() .next('img') .fadeIn() .end() .appendTo('.fadein');}, 4000); // 4 seconds Link to comment Share on other sites More sharing options...
justsomeguy Posted March 24, 2015 Share Posted March 24, 2015 The first thing you should do is check your browser's error console for messages. Have you included jQuery on the page? Link to comment Share on other sites More sharing options...
colinh_7 Posted March 25, 2015 Author Share Posted March 25, 2015 @justsomeguy, I'm not sure how to check my browser's error console. I'm pretty new to web design. and No, I'm pretty positive there is no jQuery, the rest of the code is pretty much just divs HTML <!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><link rel="stylesheet" type="text/css" href="home.css"><script>$('.fadein img:gt(0)').hide();setInterval(function () { $('.fadein :first-child').fadeOut() .next('img') .fadeIn() .end() .appendTo('.fadein');}, 4000); // 4 seconds</script></head><body><div id="container"><div id="topBar"><div id="navOne"><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin:130px;">DESIGNS</a><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin:20px;">GALLERY</a></div><div id="logo"><img src="../Images/Haube_White.png" width="356" height="154" /></div><div id="navTwo"><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin-left:90px;">ABOUT</a><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin-left:145px;">CONTACT</a></div></div><div id="content"><div id="contentTop"><div class="fadein"> <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"></div><div id="contentbottomOne"></div><div id="contentbottomTwo"></div></div><div id="footer"><img src="../Images/facebook.png" width="30px" height="30px" style="float:left;margin-left:10px;"/><img src="../Images/pinterest.png" width="30px" height="30px" style="float:left;margin-left:10px;" /><img src="../Images/houzz.png" width="30px" height="30px" style="float:left;margin-left:10px;" /></div></body></html> CSS @charset "UTF-8";/* CSS Document */body{ margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }#container { width:1400px; height:900px; margin:0 auto; background-image: url(../Images/background_image.jpg);}#topBar { width:1400px; height:180px; margin:0 auto;}#navOne { width:521px; height:17px; display:inline-block; margin-right:0px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 3px; font-size: 14px; margin-left:0px;}#navTwo { width:521px; height:20px; display:inline-block; margin:0px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 3px; font-size: 14px; margin-left:0px;}#logo { width:350px; height:150px; display:inline-block; margin-left:0px; padding-top:30px; }#content { width:1140px; height:563px; margin-left: auto; margin-right: auto; margin-top:50px; }#contentTop { width:1140px; height:400px; background-color: #0F0; margin-left: auto; margin-right: auto; margin-top:40px; }.fadein { position:relative; height:320px; width:320px;}.fadein img { position:absolute; left:0; top:0;}#contentbottomOne { width:562px; height:150px; background-color: #0F0; margin-top:15px; display:inline-block; }#contentbottomTwo { width:562px; height:150px; background-color: #0F0; display:inline-block; margin-left: 12px; margin-top:15px; }#footer { width:130px; height:30px; margin-left: auto; margin-right: auto; margin-top:38px; } Link to comment Share on other sites More sharing options...
justsomeguy Posted March 25, 2015 Share Posted March 25, 2015 That will be the problem then, you're trying to use jQuery without including it first. There are links in my signature for browser developer tools. Depending on the browser you're using, F12 might open them. If you check there then you'll see an error message saying something similar to $ is not defined or is not a function, that's because jQuery isn't there to define $. Check the example you're going off, look for <script> tags in the head section that include the jQuery library. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 25, 2015 Share Posted March 25, 2015 The second prroblem, is the jquery code will run before the element that it is targeting is rendered.You either have to use $(document).ready(function(){//place your jquery code here});Which will wait for page to be fully rendered, or place script tags with jq within it below targeted elements. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now