I'm using jQuery and HTML to make a slideshow, but I'm having some trouble: one image shows up, and the other slides don't. I can't figure out where the issue is. Has anyone experienced a similar issue?
Here's the 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>JQuery Slider</title>
<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$('#img1').show("fade", 500);
$('#img2').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);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" />
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" />
<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" />
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" />
</div>
</body>
</html>
Use this...
$(document).ready(function(){
$('#img1').show("fade", 500);
$('#img2').delay(500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$("#img"+count).show("slide", {direction:"right"}, 500);
$("#img"+count).delay(500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
});
And see this jSfiddle example
Related
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've be working on a website which already has CSS elements and have tried to put a slider in a small css box, but isn't working for some reason. I'm using Jquery from Google API which i linked in the head tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="mystyle.css" type="text/css"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!---Link to Jquery Library--->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/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);
}
</script>
</head>
<body onload="slider();">
<div id="RightColContainer">
<div id="RightColContent">
<div class="slider">
<img id="1" src="Slider/Image/Image1.jpg" border="0" alt="Razer Keyboard"/>
<img id="2" src="Slider/Image/Image2.jpg" border="0" alt="Microsoft Office"/>
<img id="3" src="Slider/Image/Image3.jpg" border="0" alt="Razer Mouse"/>
</div>
</div>
</div>
Try to wrap your code inside $(window).load(function() {....}) and remove the function slider from onload function of your body.
$(window).load(function () {
$(".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);
}
});
It should be simple image slider...
Why, o why doesn't this work? I followed some tutorial "to the letter", but it's video tutorial on youtube so I don't have their working code on some site to compare, but nevertheless, by their instruction and my week knowledge, I can't find mistake...
<html>
<head>
<title>JQuery test</title>
<style type="text/css">
.slider {
width:500px;
height:250px;
overflow:hidden;
margin:30px auto;
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center;
}
.slider img {
width:800px;
height:350px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}, 6500);
}
}
</script>
</head>
<body onload="Slider()">
<div class="slider">
<img id="img1" src="img/1.jpg" />
<img id="img2" src="img/2.jpg" />
<img id="img3" src="img/3.jpg" />
</div>
</body>
</html>
you have misplaced your } bracket for else and setInterval
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}
}, 6500); //<---here
}
I am having 2 issues with my code:
I want to limit the effects of the script to the div <div id="photo">
How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.
This is my code hope you can help.
<!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>
<style type="text/css">
.selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
#cret {
position:relative;
z-index:3;
border-style:solid; border-width:5px; border-color:#000000;
padding: 10px 10px 10px 10px;
margin:auto;
width:620px;
height:420px;
}
img {
position:static;
z-index:1;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
</head>
<body>
<script type="text/javascript"/>
$(document).ready(function() {
$('img').width('10%').height('10%');
$('img').on("click", function() {
$(this).wrap('<div id="cret"/>');
$(this).animate({width:'600px', height:'400px'}).addClass("selected");
});
$(document).on("click", function(){
$("img").unwrap();
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
$(document).on("click", function(){
$('img').animate({width:'10%', height:'10%'}).removeClass("selected");
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
});
</script>
<div id="photo">
<img src="image source"/>
<img src="image source"/>
</div>
</body>
</html>
To limit the scope of the selector, you can specify a more precise jquery selector
instead of $('img') $('#photo img'); it will affect only img present in photo id div.
you should review your selector and the animate will be more effectively use in correct one...
like put your animate only on img.selected.
Hope it helps http://api.jquery.com/category/selectors/
I have this code below. It works fine in safari however in IE the background just revolves once and stops on pink.
What am I missing?
Hope someone can help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Iridescent Ideas</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<center>
<img src="logo.png" alt="Coming Soon" width="557" height="430" border="0" usemap="#Map" style="margin-top:100px;">
<map name="Map">
<area shape="rect" coords="106,377,454,406" href="mailto:gareth#iridescentideas.com" alt="Email">
</map>
</center>
<script type="text/javascript">
var colors = Array('#66ccff', '#ff99ff'); //List the hex codes you want to loop through here.
var color_index = 0;
var interval = 5000; //How long the color blend transition lasts. (in milliseconds, 1000 = 1 second)
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
else { color_index++; } //Lets move to the next color in the colors array.s
bg_color_tween();
});
}
$(document).ready(function() {
if( $(window).width() > 1024 ) {
//Kicks off the background color tweening.
bg_color_tween();
}
});
</script>
</body>
</html>
You could try setTimeout to delay the execution of the animation ever so slightly
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == (colors.length-1)) { //If we are at the end of the colors array go back to the beginning.
color_index = 0;
} else { //Lets move to the next color in the colors array.s
color_index++;
}
setTimeout('bg_color_tween', 5);
});
}
In IE9 its working normally. There should be no problem. Are you testing in local or server environment?