I have an image, and when the div it is inside is mousedover, I want a slideshow-type thing to start, where it fades to the first image, fades to the second image, fades to the third etc... and on mouseout it fades back to the original image.
I tried using the Cycle plugin with jQuery, but the site I'm using is hosting an incompatible version of jquery, and it is unfortunately uneditable. So, I tried to make my own, but there are so many problems.
HTML:
<div class="pro_feature" onmouseover="cyk()" onmouseout="norm()">
<div><img id="cykimg" src="sweet2.jpg" /></div>
<span>
<h2>Sweet</h2>
<p>lots of text</p>
View Products
</span>
</div><!-- end pro_feature -->
The JS:
function cyk(){
setTimeout(one1(),3000);
setTimeout(two2(),6000);
setTimeout(three3(),9000);
setTimeout(four4(),12000);
}
function one1(){
$("#cykimg").attr("src","/SXW-AOC-1D.jpg");
}
function two2(){
$("#cykimg").attr("src","/SXW-AOVB-1D.jpg");
}
function three3(){
$("#cykimg").attr("src","/SXW-CC-1D.jpg");
}
function four4(){
$("#cykimg").attr("src","/SXW-SCCS-1D.jpg");
}
function norm(){
$("#cykimg").attr("src","/sweet2.jpg");
}
The Problems:
It immediately goes to the last image, called by four4();
It does not fade
It does not cycle through
I've been searching for quite a long time for a solution, but I really haven't found anything that has gotten me remotely close (excluding Cycle, which I can't use). Any help or input is appreciated. I would be fine using jQuery if that is possible/easier.
You need to provide the function itself as a callback, and instead it is called when setting the timeout.
So instead of :
setTimeout(one1(),3000);
It should be
setTimeout(one1, 3000);
It looks like the functions aren't being called inside your setTimeout correctly. you can try something like:
setTimout(function () {
one1();
},1000);
Here's a fiddle with a small example that might help: http://jsfiddle.net/JeffreyTaylor/WTUA5/2/
Related
I'm looking for a working example of lazy-loading of images within datatables that continues to work after clicking on a column heading to change the sorting.
The method I've had the most success with uses the jquery.lazyload plug:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
});
</script>
Here's how I reference the image:
<img class="lazy" data-original="https://example.com/image.jpg" width="50" height="50" />
The lazy loading works fine if I never change the sorting. However, if I decide to change the sorting of the table by clicking on one of the column headings, the lazy loading stops working and any images that were not downloaded at this point will remain blank when I scroll them into view.
I wasn't born a javascript or jQuery expert, so had to learn from examples here on SO and elsewhere. But this problem stumps me. From my research, I see a lot of comments and snippets about how it is possible, but no actual working example that proves this is supported.
jquery-lazyload images in jquery-databables
https://datatables.net/forums/discussion/1959/image-thumbs-in-table-column-lazy-loading
I wont rattle off the numerous other links I found here and elsewhere, I just need some kind soul to help.
Use drawCallback option to define a function that will be called every time DataTables performs a draw.
For example:
$('.table-data').DataTable({
drawCallback: function(){
$("img.lazy").lazyload();
}
});
See this jsFiddle for code and demonstration.
I'm sort of stuck with this one seeing as I don't have access to your backend or more information about your circumstances but I think what will work will be to call your lazy load code in the draw event like this:
$(document).ready(function() {
$("img.lazy").lazyload();
$('.table-data').DataTable({
"drawCallback": function(){
$("img.lazy").lazyload();
setTimeout(function(){
$(window).trigger("scroll")
}, 1000);
}
});
});
I've got an example up here, but I think you might be using server-side processing?
I need some help with my code, This is what my HTML looks like:
<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div>
<div class="main"></div>
CSS:
.main {
display:none;
}
So, the loading Gif Is shown, and then when the page fully loads, it should do this:
function loader() {
setTimeout(function () {
$("#main").fadeIn("fast");
$("#loader").fadeOut("fast");
}, 1000);
};
But all it does, is that the loader div disappears, then the main div appears like it should for a split second, then just dissappears. Thanks in advance for any help. #:)
I think you mean for the loader to fade out after main has faded in, in which case you'll need to take advantage of the callback argument.
You can also use delay() rather than setting a timeout.
You should also use $(document).ready() rather than invoking the function in the onload="" handler.
$(function(){
$('.main').delay(1000).fadeIn('fast', function(){
$('.loader').fadeOut('fast');
});
});
Noted by Blauharley: You are targeting elements with an ID of main (and loader), whereas the elements in your markup use classes.
So in our school project we are creating an image gallery on web. I want to have three blocks with images, where all three blocks rotates between three images (a total of 9).
Like this [] [] [] where each block is an "image block", and in these three imageblocks the images will rotate between more images.
The thing is I found a code snippet which worked. The first answer.
Link: How to change image-background after sometime?
This code worked for one of my imageblocks. So I copyed the function and changed the function name, and it worked for two of them. Now I did exactly the same thing with the third, but then the image rotation stops on all three.
It says . Then it stops. If I remove one of the three "changeimage"s, it will work, and two will rotate, but when all three are there, none of them work.
Anyone wants to recreate my problem?
My HTML (Very short version, note that imglinks are not the real links, but a sample):
<body onload='changeimage(2); changeimage2(2); changeimage3(2);'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>
My javascript is exactly the same as in the link, except that I copyed and pasted it three times, and changed the name of the functions to what is in onload in the code snippet. I changed the myimage id, the function name in set time out and the image sources.
Everything works just fine. But when I use all three of them at the same time it wont work. Two of them will work together no matter which two, but all three wont work at the same time.
TLDR; wont work together, but two and one by themselves will.
Any suggestions? :) Ask if you didnt understand and I will try to explain even better.
The function you posted depends on an external variable "imageID". If you duplicated the function 3 times, then you need to duplicate the external variable too.
Example bellow:
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
var imageID2=0;
function changeimage2(every_seconds){
//change the image
if(!imageID2){
document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
imageID2++;
}
else{if(imageID2==1){
document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
imageID2++;
}else{if(imageID2==2){
document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
imageID2=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
var imageID3=0;
function changeimage3(every_seconds){
//change the image
if(!imageID3){
document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
imageID3++;
}
else{if(imageID3==1){
document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
imageID3++;
}else{if(imageID3==2){
document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
imageID3=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
I am not so sure whether the problem is that onload can contain a list of functions to call or whether rather something in your script (which is missing here) is wrong. In any case, having a list of function in the onLoad seems not to be a good practice. I would write one dedicated function that handles onLoad and call those 3 functions from there.
So the html would look like this
<body onload='onLoadHandler()'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>
Your script would then look like this:
function onLoadHandler(){
changeimage(2);
changeimage2(2);
changeimage3(2);
}
// rest of your script
</script>
Further I would assume that having three changeimage functions is unessecary. They probably do three times almost the same just for different images. So in a next step I would reduce them to one single function, and pass the changing part as parameter to the function. Something like this.
<script type='text/javascript'>
function onLoadHandler(){
changeimage(2,'myimage');
changeimage(2,'myimage2');
changeimage(2,'myimage3');
}
function changeimage(numberParameter, imageId){
// your logic usining imageId instead of a fixed, hardcoded id
}
</script>
From looking at that code you've linked to, my immediate guess is that you haven't redeclared the imageID variable for each function to have its own, that could be causing issues.
However, I should note that redeclaring the function as you've described is the wrong way to go about this - the whole point of a function is that the code is reusable, and so you don't have to re-write it. As suggested by Daniel, using an additional parameter for the image DOM id is the best way to solve that problem.
I've re-written the function here with the logic improved slightly and allowed for re-use of the function:
http://jsfiddle.net/Ebp75/
I'm using the JavaScript setinterval method, but the DIV appears slowly. Could someone please tell me how to remove the fadein effect? I need for it to appear immediately.
Here is my code:
<script>
setInterval(
function()
{
$('#lista').show().load('pagination.php').fadeIn('slow');}, 0);
</script>
Wow that is a simple question, and one that you could have learned quickly by reading a bit of jQuery documentation. But no matter.
$('#lista').show().load('pagination.php');
You see, you're already showing the element with id lista and then loading some html into it. No need to have the fadeIn on the end.
A possibly better way to achieve the same thing, however only showing the element once the data is loaded, is to pass a callback to the load method:
$('#lista').load('pagination.php', function(){ $(this).show();} );
I need to put a dynamic content on a div using javascript script. This div is on the top of the page so it will load first before other things below it. And there are really lot's of things down there. So, when I put the script on the ready() or onload, the div will be empty for 2 -3 seconds while other things are displayed. So, I tried putting the onload or ready() to this div.
//example div, which is on the header part of the page
<div id="cont1">
something goes here
</div>
//... and there are a lot of other things going down here.
I tried putting the onload="alert('test')" on the div tag
<div id="cont1" onload="alert('test')">
and also the jquery method
<script>
$("cont1").ready(function(){
alert("test");
});
</script>
Both methods don't work, as the alert is triggered only after the whole page is displayed.
but if I put the alert("test"); script immediately after closing the above div, it works fine (as the other things on the page is not displayed yet when the alert is showing).
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
But this method is kind of a bad design isn't it? So, any other way to achieve this?
If you want a javascript action to fire after a specific DOM element has loaded, simply place it immediately after the element, as you noted:
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
Some may disagree, but this is not bad design. As long at whatever occurs in this script pertains only to elements which occur prior to it in the HTML document, everything should be kosher. The DOM is loaded linearly in the order it appears in the document, so there is no case in which the script coming after #cont1 would occur prior to #cont1. If the script is lengthy, you could put it in a function in a header include then call the function there instead.
onload and the meta-event of "ready" apply the the entire DOM document, not just any DOM node, which is what you are attempting here.
I would stick with jQuery's $(document).ready(...) for code that requires the DOM to be present.
onload is unfortunately on the window only.
However, I have written a jQuery plugin called waitForImages that will fire a callback when images have loaded inside any container.
This is a bit half way but you can have a img of a single pixel same color as the background at the end of the div and have an onload on the img.