I've only been coding a couple of months and I'm struggling to figure out why this JS/jQuery wont run on a simple website I've been trying to create. I'm using Adobe Brackets and the live preview uses Chrome. Everything runs smoothly in Chrome, but when I open the index file with IE/FF JS/jQuery doesn't run at all.
Code as follows:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="modernizr.custom.55043.js"></script>
<script type="text/javascript">
function testimonialcontainer() {
$(".testimonialcontainer #1").show("fade", 500);
$(".testimonialcontainer #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".testimonialcontainer img").size();
var
count=2;
setInterval(function() {
$(".testimonialcontainer #" + count).show("slide", {direction: 'right'}, 500);
$(".testimonialcontainer #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
};
</script>
HTML
<div class="testimonialcontainer">
<img src="testimonials/test1.png" id="1" />
<img src="testimonials/test2.png" id="2" />
<img src="testimonials/test3.png" id="3" />
</div>
CSS
.testimonialcontainer {
width: 795px;
height:175px;
position: absolute;
margin-top: 1000px;
margin-left: 102px;
border-top: 4px solid black;
border-bottom: 2px dotted black;
}
.testimonialcontainer img {
width: 756px;
height: 155px;
display: none;
padding: 10px;
}
Thanks in advance!
N
Numbers alone do not work as names for div's in IE/FF.
Related
I'm currently working through this tutorial from helpingdev, but have come up against a brick wall - I've followed every step so far as i can tell and have the interface working - however when i run the page the image doesn't change, it simply stays on the first one.
the video is over three years old, so I'm guessing something in the syntax just need's to be changed - i just can't figure out what even with chrome dev tools.
Thanks for your help.
Here's the html, css, and js for the page:
html:
<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>
Previous
Next
</div>
<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>
</body>
</html>
css:
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}
a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}
js:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();
});
function startSlider(){
count = $("#slider > img").length;
loop = setInterval(function(){
if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;
}
$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
},3000);
}
This
$("slider > img").fadeOut(300);
Should be
$("#slider > img").fadeOut(300);
You missed a # in front of slider
Also remove the code loop = you are assigning a function to the loop variable but never executing it. So what you need is to run it rather than assigning it. Removing the assignment will execute that block of code.
I have an image slider.
Unfortunately,
The image slider gets stuck on the second image.
I want the image slider to cycle through images in an infinite random loop.
How do I do this?
Here is my jsfiddle:
http://jsfiddle.net/rAqcP/248/
---------------------------------------
JS Code
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
setInterval(function () {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide',{direction:'right'},500);
$('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);
if(count==slidecount){
count=1;
}else{
count=count+1;
}
},6500);});
DIV CODE
<div class = "slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png"/>
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png"/>
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png"/>
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png"/>
</div>
CSS CODE
.slider {
width: 20%;
height: 30%;
overflow:hidden;
border: 1px solid black;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;
}
.slider img {
display:none;
}
You never define slidecount. It is used only in your if statement. You never define count. Its first use is in the same if statement.
I'm not sure if you did so, but you can watch the console output (keyboard shortcut F12) to see what errors occur in your code. In your original code the error was that count was undefined. It only shows the first error, so it would have shown an error about slidecount after you fixed the one with count.
Note: There was nothing in your code that was random. So, I am unsure as to what you were intending to make random.
The following will work (JSFiddle):
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide', {
direction: 'right'
}, 500);
$('.slider #1').delay(5500).hide('slide', {
direction: 'left'
}, 500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
var slidecount = 4;
setInterval(function() {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide', {
direction: 'right'
}, 500);
$('.slider #' + counterIndex).delay(5500).hide('slide', {
direction: 'left'
}, 500);
if (counterIndex >= slidecount) {
counterIndex = 1;
} else {
counterIndex++;
}
}, 6500);
});
.slider {
width: 20%;
height: 30%;
overflow: hidden;
border: 1px solid black;
background-image: url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat: no-repeat;
background-position: center;
}
.slider img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png" />
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png" />
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png" />
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png" />
</div>
i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>
try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>
Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>
I have a function that alters the size of a div when I click on it. Now I have to write the onclick command in my html page, but I want it to stand in the extern .js file.
Now in html:
<div id="box1" class="kaesten" onclick="changeSize('box1')"> Title 1 </div>
What I want:
<div id="box1" class="kaesten" > Title 1 </div>
Tried something in jquery but it didn't work:
function changeSize(id) {
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style', 'display:block');
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
changeSize(this.id);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function() {
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style', 'display:none');
}
$(document).ready(function() {
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});
.kaesten {
width: 240px;
height: 300px;
background-color: darkgrey;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align: top;
text-shadow: 3px 3px 4px #777;
float: left;
margin-left: 30px;
}
.absoluteclass {
position: absolute;
background-color: darkgrey;
width: 600px;
height: 600px;
left: calc(30%);
display: none;
}
<div id="box1" class="kaesten">title1</div>
<div id="box2" class="kaesten">title2</div>
<div id="box3" class="kaesten">title3</div>
<div id="box4" class="kaesten">title4</div>
<div id="dummy" class="absoluteclass"></div>
I know it works in the fiddle, but I don't know why it doesn't work on my homepage without writing the function in the div's.
I guess the problem is that you are trying to assign the onclick event handler before the DOM is actually rendered and ready. My suggestion is to wrap your "initialization code" inside a $(document).ready() method. As follows:
$(document).ready(function() {
// Apply the on click event handlers here, using jQuery or not
// For instance:
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});
if you want to pass the id from jquery to your function you should do it like this:
$(function(){
$(".kaesten").click(function(){
changeSize($(this).attr("id"));
});
});
you can use .css in jquery
$(function(){
$(".kaesten").click(function(){
$(this).css({'width' : '600px' , 'height' : '600px'});;
});
});
I am creating an image collage/patchwork. I'm using masonry.js to lay out the content how I need, and a script I found on this very site to change the div contents randomly (between two images).
However, I would like a simple way to animate this image switch, but my javascript/jquery knowledge is very limited.
Below is the complete code for my site:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<style>
#container {
width: 350px;
height: 420px;
border: solid 1px #000;
}
.item {
width: 105px;
height: 105px;
margin: 0;
float: left;
}
.item_2 {
width: 245px;
height: 105px;
margin: 0;
float: left;
}
.item_3 {
width: 245px;
height: 210px;
margin: 0;
float: left;
}
</style>
<script type="text/javascript">
var logSwitch =[
"<img src='apps/TRA-100.gif' />",
"<img src='apps/logistics.gif' />",
];
setInterval(function() {
var i = Math.round((Math.random()) * logSwitch.length);
if (i == logSwitch.length) --i;
$("#logistics").html(logSwitch[i]);
}, 5 * 1000);
</script>
</head>
<body>
<div id="container">
<div class="item_3"><img src="apps/auto.gif" /></div>
<div class="item"><div id="logistics"><img src="apps/TRA-100.gif" /></div></div>
<div class="item"><img src="apps/marine.gif" /></div>
<div class="item"><img src="apps/its.gif" /></div>
<div class="item_2"><img src="apps/Entertain.gif" /></div>
<div class="item_2"><img src="apps/meteor.gif" /></div>
<div class="item"><img src="apps/aviation.gif" /></div>
</div>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
columnWidth : 300
);
});
</script>
</body>
</html>
Can anyone advise we what direction to head in? This fiddle: (http://jsfiddle.net/jWcLz/1/) looks quite simple, but I have no idea how to implement it.
Thanks in advance.
Right now you replace the HTML within #logistics, but nothing is done to make it fade. The way the demo jsfiddle you linked to works is by calling fadeOut() on the parent element and when that's done calling a fadeIn() function on that same element, while also giving it new content.
Here's how you can do the same thing in your code:
Replace...
$("#logistics").html(logSwitch[i]);
...with...
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
Edit: if you don't want the content to be switched randomly, don't make it random! Instead, set i outside of setInterval() and then just change i within it.
var i = 0;
setInterval(function() {
i++;
if (i == logSwitch.length) {
i = 0;
}
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
}, 5000);