I'm trying to make a javascript slideshow using some javaquery the first image doesn't fade in like it should and so obviously none of the other images slide or out either. This is my first attempt at making one of these so I'm not quite sure why it isn't working I've looked over and over at the code to make sure I've spelled everything correctly and all the proper punctuation, but I guess I could still be missing something. Anyway my code.
HTML5
<head>
<title>Home Styles</title>
<link rel="stylesheet" href="CSS/index.css" type="text/css"/>
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<link rel="shortcut icon" href="Images/favicon-logo-HS.ico"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="JS/slider.js"></script>
</head>
<body onload="Slider();" class="body">
<div class="slider">
<img id="1" src="Images/slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="Images/slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="Images/slide_image3.jpg" alt="Electronic Deals"/>
</div>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
width: 990px;
height: 270px;
border: 0;
display: none;
}
javascript
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction: 'right'},500);
$(".slider #"+count).delay(5500).hide("slide", {direction: 'left', 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
So there are several things going on with your JS that might be the issue here. First off a quick JShint tells me there are some syntax errors (missing semicolons and the like). But I think the real issue is that you're using some of these methods with non default easings but not defining new ones.
For example .hide() doesn't have a 'slide' easing. http://api.jquery.com/hide/. I would read through the api for .show() and .hide() you probably need to replace them with .animate()
Here is a solution that may work for you: EXAMPLE FIDDLE
HTML:
<div class="slider">
<img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
<img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
<img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
</div>
JS:
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
I use setTimeout() instead of setInterval() because of personal preference (interval can overlap function calls). You could also remove the .fadeIn()in my example and replace it with .animate() to get that horizontal slide effect you wanted.
After looking at this in jsfiddle and removing all the extra stuff that jsfiddle doesn't want, I noticed you are missing a closing bracket. I don't understand how you could not be getting console errors cause this is a syntax error:
function Slider() {
$("#a1").show("fade",500);
$("#a1").delay(5500).hide("slide", {direction: 'left'}, 500);
}
http://jsfiddle.net/mF7wv/
Related
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
As you may know, I'm very new to HTML and JS.
I tried to make an image move when you click on it, but for a some reason it doesn't work. Can someone take a look at it?
(It's my first day of learning Javascript! Please keep this in mind)
Javascript
var main = function() {
$('document.Image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
HTML
<html>
<head>
<title>JS Test</title>
</head>
<body>
<img height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You need to invoke/call main function
documemt.Image was invalid selector. Give class as .image to element which can be selected using $('.image')
To apply left css property in .animate(), element must be absolute/relative/fixed positioned. Review the updated css
var main = function() {
$('.image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
main();
.image {
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class='image' height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
there is multiple mistake in your code... here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img').click(function(){
$(this).animate({'margin-left': "300px"})
});
});
</script>
</head>
<body>
<img style='margin-left:100px' src='' alt='no image' />
</body>
</html>
i m sure it helps u...
I am receiving the error '$ is undefined' from the first selector of js file.
I have added JQuery reference as a local file or google CDN. Also I have tried to put it at the beginning and end of the HTML file.Have also checked the network part of the console to check if the JQuery is loading correctly.but seems it does not recognize the $. Have also tried to putthe whole JS file in $(document).ready(function () )
The function works correctly but I am still receiving the error.
I have tried that with different browsers and different systems.
$(document).ready(function () {
var currentIndex = 0;
var itemAmt;
function cycleItems() {
var item = $('.imageContainer div').eq(currentIndex);
$('.imageContainer div').hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function () {
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function () {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = $('.imageContainer div').length - 1;
}
cycleItems();
});
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
How can I make it working error free?
Javascript files load in the order that they are added to the page. The first javascript file you've added is ../Homepage/slider.js and I'm guessing that it uses jQuery to do whatever it does. This means it's referencing $ at some point. But wait: jQuery hasn't been loaded yet! This causes the error you saw, because the browser might have started downloading jQuery already, but won't execute it until any preceding scripts are finished.
If you move jQuery to the top (and you probably only need to include it once, rather than 4 times at the top and 4 times at the bottom), this should fix your problem.
Better yet, move all of your script declarations to the bottom of the page, which means they won't block the rest of the page from rendering.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/Slider.js"></script>
</body>
</html>
You could also use something like requireJS to ensure the load order of scripts, but that is an advanced topic well beyond the scope of what you're doing here.
You must add the jquery library only once. Since your jquery code is inside $(document).ready(function(){ and }), you can can add it anywhere on your html code, but before any library which use jquery (maybe your slider.js does)
jquery should be included before all other scripts depending on it...
I suppose this is the issue causing $ is undefined error...
I have been working on my carousal slider I have got images showing now.
But can not get it to slide the first image should fade and reset slide.
I have the current Ajax / jquery from Google. It should be able to slide. Not sure whats wrong.
Live Example: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
<link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$(".carousel #1").show("fade", 500);
$(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".carousel img").size();
var count = 2;
setInterval(function() {
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
$(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1
}
}, 1700);
})
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="carousel">
<img id="1" class="active" src="images/image1.jpg" border="0" alt="" />
<img id="2" src="images/image2.jpg" border="0" alt="" />
<img id="3" src="images/image3.jpg" border="0" alt="" />
</div>
</div>
</div>
</div><!-- . Container -->
</body>
</html>
Slider CSS
.carousel {
width: 100%;
height: 350px;
overflow: hidden;
background-image: url('../images/loading.gif');
background-repeat: no-repeat;
background-position: center;
}
.carousel img {
width: 100%;
height: 350px;
display: none;
}
I believe the problem is due to this line of code:
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
You are actually returning a function reference instead of an object there, I think the right line should be:
$(".carousel #"+count).show("slide",{direction: 'right'}, 500);
Still, I would simply use jQuery.animate() instead, and perhaps a whole different approach. Check the updated code, I've made some enhancements too:
$(document).ready(function() {
var images = $(".carousel img");
var timeout = 5000; // 5 seconds
var max = images.length;
var slide = function(index) {
var img = $(images[index]);
// first show the image
img.animate({left: "0"}, 500, function() {
// specify timeout to change image
setTimeout(function() {
// hide current image
img.animate({left: "100%"}, 500, function() {
// reset state to start over
img.css("left" , "-100%");
});
if (++index == max) {
index = 0; // start over
}
// recursive call
slide(index);
}, timeout);
});
};
slide(0);
});
I changed this CSS rules too:
.caoursel {
position: relative;
}
.carousel img {
position: absolute;
width: 100%;
height: 350px;
left: -100%;
}
Live demo: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
I recommend using some third party carousel, like Bootstrap's carousel: http://getbootstrap.com/javascript/#carousel
I'm wondering how to stop an animation made with jQuery timers. I think I have tried everything, I would really like your help.
<!DOCTYPE html>
<html>
<head>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<title>HeartMath - Danmark</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js' type='text/javascript'></script>
<script src='inc/jquery.timers-1.1.2.js' type='text/javascript'></script>
<script type="text/javascript" >
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
}; var fixgeometry = function() {
/* Some orientation changes leave the scroll position at something
* that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();;
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(document).ready(function() {
$(window).bind("orientationchange resize pageshow", fixgeometry);
var animationSpeed = 3500;
var animationHeight = $(window).height() * 0.70;
$("input[type='radio']").bind( "change", function(event, ui) {
if($(this).val() == "true") {
startAnimation(animationSpeed);
$(this).log("animationen burde starte");
}
else {
stopAnimation();
$(this).log("animationen burde stopppe");
}
}).log("der blev trykket");
function startAnimation(animationDuration) {
$(".breather").everyTime(10, function(){
$(".breather").animate({top:animationHeight}, animationDuration).animate({top:"0"}, animationDuration);
}).log("startAnimation");
};
function stopAnimation() {
$(".breather").stopTime().stop().log("stopAnimation");
};
});
</script>
<style type="text/css">
html, body {
width: 100%;
}
div.breather {
display: block;
position:relative;
}
}
</style>
<link href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="jquery-mobile/hm-mobile-theme.css">
</head>
<body>
<div data-role='page' data-theme='a'>
<div class='header' id="header" data-role='header'> <img src="img/hm-logo.png" style="margin:0px auto;" height="40" /> </div>
<div class='content' data-role='content'>
<div class="breather">landscape!</div>
</div>
<div class='footer' data-role='footer'>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="ignition" id="start" value="true" />
<label for="start">Start</label>
<input type="radio" name="ignition" id="stop" value="false" checked="checked" />
<label for="stop">Stop</label>
</fieldset>
</div>
</div>
</div>
</body>
</html>
What happens now is that when i press stop.. the animation just reverses and loops again
When you call .stop() to stop the jQuery animation, change it to .stop(true) to clear the animation queue (docs here). I'm not sure why there is a queue, but it looks like it has something to do with the timers plugin that you are using. Use queue().length to see how many animations are left in the queue.
Please make sure that the stopAnimation is being called by adding some debugging (console.log()). You call stopAnimation without an argument, but the function has an argument, that's not used.
So add some debugging to stopanimation and the if(val==false) statement. If that all works as expected we can continue the search.