I've met this problem nowadays. I have a div which contains li-img (5of them) and when I try to reappear it with the slideDown animation 3/10 its smooth on mozilla and over 11/11 in chrome. The code and computer is the same and the exact problem is that the slidedown is smooth but the images are not slowing appear as the div appear, sometimes are completely invisible and then suddenly appear. Its not a matter of asyc coding cause i even tried to setTimeout(300) between append and animation but append is synchronous. The only plugin in mozilla is ad-block as in my chrome too. (I know that mozilla considered more heavy browser while chrome considered faster but eats more ram). The code is this (i really dont think its code problem)
$(document).ready(function(){
//classes
var $wrapper= $(".wrapper");
var $header=$wrapper.find(".header");
var $center = $wrapper.find(".center");
var $quiz=$center.find(".quiz");
// buttons-li
var $header_li= $header.find("ul li");
//other elements
var $quiz=$wrapper.find(".quiz");
var $rope = $wrapper.find("#rope")
var $popup;
function getQuiz(){
$.get('./php/get_quiz.php',function(data)
{
$quiz.append("<ul>"+data+"</ul>");
//setTimeout(ropeAnimation,100);
ropeAnimation();
toImgsAddPointer();
$rope.unbind('click');
$rope.removeClass('pointer');
});
}
function submitAnswer(){
var id = $(this).attr("id");
$.get('./php/result.php',{'choice':id},function(data){
var $ul= $center.find("ul");
$ul.remove();
$quiz.append("<ul>"+data+"</ul>");
toImgsAddPointer();
});
}
function clickEvent(){
var purple= '#5061FF';
var white = 'white';
var red= 'red';
var black = 'black';
$(this).css('background-color',purple).css('color',white);
$(this).siblings().css('background-color',red).css('color',black);
if(this.id==1){
var div = "<div class='popup'><object data='./pdf/math1.pdf'></object></div";
}else{
var div = "<div class='popup'><object data='./pdf/math2.pdf'></object></div";
}
$wrapper.prepend(div);
$popup=$(".popup");
$popup.on('click',closePopup);
}
function closePopup(){
$popup.remove();
}
function ropeAnimation(){
$rope.animate({"height":'200px'},100);
$quiz.slideDown(500);
$rope.animate({"height":'50px'},700);
}
function toImgsAddPointer(){
var $img = $quiz.find("li img");
$img.addClass("pointer");
$img.on('click',submitAnswer);
}
$header_li.on('click',clickEvent);
$header_li.addClass("pointer");
$rope.addClass("pointer");
$rope.on('click',getQuiz);
});
The animation is in get_quiz() with ropeanimation().
Related
I have an imagemap of the Netherlands with an overlay effect on some of the areas. I can accomplish this effect in multiple ways:
1) Load every image. Set all but 1 image on 'display:none' and run JS (onMouseOver(str)) to display the image that one has the mouse on and hide all others.
css:
.verberg {
display: none;
}
JS:
var nederland = $('#Nederland');
var map1= $('#Friesland');
var map2= $('#Groningen');
var map3= $('#Drenthe');
var allmaps = $('.kaartje');
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var imgnamen = [nederland, map1, map2, map3]
var i = kaartnamen.indexOf(str);
if (i > -1) {
elementje = imgnamen[i];
allmaps.addClass('verberg');
elementje.removeClass('verberg');
}
}
2) Load one image and use JS (onMouseOver(str)) to change the source of the image.
JS:
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var urlsrc = ['nl.png','fr.png','gr.png','dr.png']
var i = kaartnamen.indexOf(str);
if (i > -1) {
newsrc = urlsrc[i];
$("#Nederland").attr("src","http://xxxxxxx/maps/"+ newsrc);
}
}
When I use the first method, everytime I load the page the image blinks when I hover an area for the first time. If I hover that area for a second time it doesn't until I reload the page again.
When I use the second method the image never blinks.
Can someone explain this different behaviour to me? I find it a bit counterintuitive. With the first method every image is already loaded, while with the second method the images are loaded when the mouse is on a specific area. It seems to me that the first method must be smoother, but it isn't...
I'm having an issues where I cannot get my code to rotate multiple images in a cycle for my image gallery (just a bunch of images i got on google). I can however to get 1 image to cycle through the images but everything iv tried to get it to work with more than one has failed. Any help/ tips would be useful. Im in college for web development and i understand the basics of javascript it just seems when it comes to creating applications i have a bit of trouble.
Here is a link to my code: jsFiddle
$(document).ready(function () {
var img = document.images;
// Holds the image collection
var counter = 0;
var imgArray = [];
imgArray[0] = "http://www.zeroprox.tk/temp/images/img1.png";
imgArray[1] = "http://www.zeroprox.tk/temp/images/img2.jpg";
imgArray[2] = "http://www.zeroprox.tk/temp/images/img3.png";
imgArray[3] = "http://www.zeroprox.tk/temp/images/img4.jpg";
imgArray[4] = "http://www.zeroprox.tk/temp/images/img5.jpg";
imgArray[5] = "http://www.zeroprox.tk/temp/images/img6.png";
imgArray[6] = "http://www.zeroprox.tk/temp/images/img7.jpg";
imgArray[7] = "http://www.zeroprox.tk/temp/images/img8.png";
$("#left-arrow").click(function () {
if (counter < 0) {
counter = imgArray[counter] - 1;
} else {
counter--;
}
img[1].src = imgArray[counter];
});
// Left arrow... Previous
$("#right-arrow").click(function () {
counter = (counter + 1) % imgArray.length;
img[1].src = imgArray[counter];
});
// right arrow... Next
});
JSFiddle
Check this, it should solve your problem ;)
You were replacing every time the same image, now creates a new one and remove another.
Also added div#imagelist to use as a image container and access easier from JavaScript
var newImg = $(document.createElement("img"));
newImg.attr("src",imgArray[counter]);
$("#imagelist img").last().remove();
$("#imagelist").prepend(newImg);
how to make picture fly to the browser window and then fade out. I need that one picture fly into the browser window from left side,and then fade out. and then next picture. I have five picture. I need them do this one by one, over and over. Followed is my code: It is not work fine.
Method 1: Five pictures in five and with id as "#Slogan0", "#Slogan1", ...,etc. At the beginning, "left" is "-1000px", and the first one is "display" as "block", the others "none", so that I can change them to make them disappear."moveNext" is to change pictures.
var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){
moveNext();
}
function moveNext(){
cf.moveTo("next");
if($(sloganid).css("display") == "block") {
slogannum = (slogannum+1)%5;
$(sloganid).css("display","none");
sloganid=sloganidPre+slogannum;
$(sloganid).css("display","block");
$(sloganid).animate({left:"30px"});
$(sloganid).css("opacity","0.2");
}
setTimeout(moveNext, 1500);
}
Method2:
Create new element to the parent node.
var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;
window.onload = function(){
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});
moveNext();
}
function moveNext(){
cf.moveTo("next");
$("#sloganparent:first-child").empty();
slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
var i=0;
for (i=-1000; i<30; i++) {
document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);
}
Jquery seems not to get the element which is created dynamically. Two methods are not work fine. Anyway I just want to know how to deploy the pictures as the titile said. Any method is fine. tks for ur consideration.
As I hover a small img, I read it's larger image attribute, and create that image to display.
The problem is that I want to set Timeout before to display the image.
And while waiting for that timeout, we suppose to already have set an src to make it load early.
For some reason it never works in IE. ie, it only triggers the load even on the second time I hover the small image. I've no idea what has gone wrong with it, I had very similar animation on the other page it has been working just fine with a timeout.
Any ideas?..
$(document).ready(function(){
var nn_pp_trail=0;
$('div.nn_pp_in').hover(function(){
var limg=$(this).children('img').attr('limg');
var img=new Image();
//img.src=limg;
img.className='nn_pp_z';
img.src=limg;
var a=(function(img,par,limg){
return function(){
nn_pp_trail=window.setTimeout(showtrail,50);
$(img).one('load',(function(par){ //.attr('src',limg).
return function(){
// alert('loaded');
window.clearTimeout(nn_pp_trail);
hidetrail();
var width=this.width;
var height=this.height;
var coef=width/313;
var newHeight=height/coef;
var newHpeak=newHeight*1.7;
var nn=par.parents('.tata_psychopata').nextAll('.nn_wrap').first();
var pheight=nn.height();
var ptop=nn.position().top-2+pheight/2-1;
var pleft=nn.position().left+90+157-1;
$(this).appendTo(nn).css('left',pleft+'px').css('top',ptop+'px')
.animate({opacity:0.6},0)
.animate({opacity:1,top:'-='+newHpeak/2+'px',height:'+='+(newHpeak)+'px',left:'-=10px',width:'+=20px'},130,(function(newHeight,newHpeak){
return function(){
$(this).animate({left:'-='+(156-10)+'px',width:'+='+(313-20)+'px',height:newHeight+'px',top:'+='+(newHpeak-newHeight)/2+'px'},200,function(){});
}
})(newHeight,newHpeak)
);
}
})(par)
).each(function(){
if(this.complete || this.readyState == 4 || this.readyState == "complete" || (jQuery.browser.msie && parseInt(jQuery.browser.version) <=6))
$(this).trigger("load");}); ;
}
})(img,$(this),limg);
window.setTimeout(a,20); //if I set 0 - it loads all the time.
//if I set more than 0 timeout
//the load triggers only on the 2nd time I hover.
$(this).data('img',$(img));
},function(){
});
});
img.src=limg;
This was the problem, in IE we need not to set src as we create an image object, but first attach load event to it, and only then set attr src, and then trigger complete with an each, eg:
img.one(load, function(){}).attr('src','i.png').each(function(){ /*loaded? then it's complete*/ });
Hope someone learn on my mistakes :-)
Thank you, this helped me a lot. I had a similar situation.
As you said: First the "load"-event, then the "src" for IE.
// This was not working in IE (all other Browsers yes)
var image = new Image();
image.src = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now display it
});
// This was working well also in IE
var image = new Image();
imagSrc = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now resize and display
}).attr('src',imageSrc);
This code is meant for a real estate website I am updating for my company. Basically, There is a table with the property name, address, etc, and an image. Originally, I was coding this website in ASP.net switch over to regular Javascript for a few reasons (hosting overhead etc).
Sections of this code are from a few different tutorials out there, one of which is an ASP.net modal div image "enlarger" tutorial, which is sort of the basis combined with a few other sites. I have yet to comment in their names etc, but I plan on giving them credit in the code. Thier links are below before I post my code.
http://archive.aspsnippets.com/post/2009/07/06/Image-Gallery-using-ASPNet-GridView-control.aspx
My code is essentially as follows (I will trim the fat and excess line breaks in the style section):
First are the modal style tags from that tutorial by Mudassar Khan (partially relevant):
<style>
body {margin:0;padding:0;height:100%;}
.modal {display: none;position: absolute;top: 0px;left: 0px;background-color:black;z-index:100;opacity: 0.8; filter: alpha(opacity=60);-moz-opacity:0.8;min-height: 100%;}
&#divImage{display: none;z-index: 1000;position: fixed;top: 0;left: 0;background-color:White;height: 550px;width: 600px;padding: 3px;border: solid 1px black;}
<style>
Then comes his script, which I may have tweaked here and there:
<script type="text/javascript">
function LoadDiv(url) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
img.src = url;
var tcopy = img.src.slice(0,(img.src.length-4)) + "_big.png";
img.src = tcopy;
img.onload = function () {
imgFull.src = tcopy
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 650) / 2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
imgLoader.style.display = "block"; // I added as it seems to bring back the loader gif
if (bcgDiv != null) {
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
}
</script>
Now All this above script gets called upon a onClick Event Handler on an image of each of the real estate companies properties. This will work well to both preload images with the little animated gif and the close button works fine. It works on more than one image, BUT if the image is already preloaded, I cant think of a way to force the redisplay of an already preloaded image if a user clicks on the photo, then clicks close to hide the div tag and then clicks on the same preloaded image.
That event handler looks like this:
img onClick="return LoadDiv(this.src);" src="http://www.ourcompany.com/images/prop_thumbs/Some_plaza.png" style="min-width:200 px;max-height:150 px;max-width:200 px;"
I thought global booleans would work, but then I realized, theres no telling which and what is preloaded, so the boolean might not help if you can't pass something meaningful back and forth.
I'm not asking any one to do my work for me, however I would appreciate suggestions in the right direction.
Regards and TIA!
You could make a array of all of the images with key values of loaded. For instance.
image_list = {image1:false,image2:true,image3:false};
true and false being loaded or not loaded. When an image is clicked just update the array.
image_list[image1] = true;
Did this really quick, so my syntax might be off, feel free to correct me or berate me...
Yay!!! Figured it out with the help of both jhanifen and the guy who did the tutorial I used (he actually emailed me). My code is below (its an excerpt, but you'll get the idea):
images = new Array(30);
//need to define each image to be in array
images[0]="website/images/prop_thumbs/property1_big.png";
images[1]="website/images/prop_thumbs/property2_big.png";
images[2]="website/images/prop_thumbs/property3_big.png";
//This continues for some time
imagesLoaded = new Array(30);
// per stack overflow person suggestion make array of bool values; initialize them all to false on page load
function onLoadScript() {
for (i = 0; i < imagesLoaded.length; ++ i)
{
imagesLoaded [i] = false;
}
}
// the above is called onLoad in body tag
// Changes the script for Loading the Div tag are below:
function LoadDiv(imgNum) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
img.src = images[imgNum];
if(imagesLoaded[imgNum] = true)
{ // this statement triggers same as onload below!
imgFull.src = img.src
imgFull.style.display = "block";
imgLoader.style.display = "none";
}
img.onload = function () {
imgFull.src = img.src
imgFull.style.display = "block";
imgLoader.style.display = "none";
imagesLoaded[imgNum] = true;
};
The rest of the document is the same except I changed the onClick event handler for the property images to LoadDiv(and some sequential number);
Thanks to all for your help! Particular props to both Mudassar Khan and jhanifen!