bounce animation using constructor? - javascript

I want to give a bounce animation to each individual hair on mouseover.the animation part is done on the first hair,but i don`t want to give events to each and every hair image.
So here is my question,I am using constructor in my javascript code.Is it possible that I create a method in my prototype and make instances of it? So basiclly I dont want to fire 10 events or 10 addEventListeners,I want a smart way out of this.
How do I complete my task,as in every hair should bounce on mouseover of itself only
My code:
HTML:
<div class="main">
<div class="hair">
<img src="images/single.png" id="hair1" width="13" height="40" >
<img src="images/single.png" id="hair2" width="13" height="40">
<img src="images/single.png" id="hair3" width="13" height="40">
<img src="images/single.png" id="hair4" width="13" height="40">
<img src="images/single.png" id="hair5" width="13" height="40">
<img src="images/single.png" id="hair6" width="13" height="40">
<img src="images/single.png" id="hair7" width="13" height="40">
<img src="images/single.png" id="hair8" width="13" height="40">
<img src="images/single.png" id="hair9" width="13" height="40">
</div>
<div class="face">
<img src="images/ec_logo.png">
</div>
Javascript:
(function(){
hair=function (){
return this;
};
hair.prototype={
bounce:function(){
//code for some bounce animation
}
};
})();
document.getElementById('hair??').addEventListener("mouseover",???,false);????????//this is the part i am confused about,how to give same animation to every single hair by using object instances???


// one event listener for whole 'haircut'
document.getElementsByClassName('hair')[0].addEventListener('mouseover',
function(objEvent)
{
var elImg = objEvent.target;
if (elImg.nodeName == 'IMG')
{
objEvent.stopPropagation();
console.log(elImg.getAttribute('id')); // just for debug
// xxx.bounce(elImg) or whatever you want
}
}, false);


You can delay the bounce using setTimeout:
(function(){
// "private" vars
var delayPace = 100;// ms
var instanceCount = 0;
hair = function (){
// don't need to return this if it's going
// to be instantiated via the new keyword
this.delay = instanceCount * delayPace;
instanceCount++;
};
hair.prototype={
delay : 0,
bounce : function(){
this.stop();
this._t = setTimeout(this._bounce, this.delay);
},
_bounce : function(){
// this is were the actual magic happens
},
stop : function(){
if(this.t){
clearTimeout(this.t);
}
// other code to stop the animation
}
};
})();
// keep all your hairs in one place!
var hairs = [];
// instantiate them
hairs.push(new hair());
//...
hairs.push(new hair());
var onHover = function(){
hairs.forEach(function(h){
h.bounce();
});
}

Related

Time delay in js function load

There seems to be a time delay before the below mention functions starts to work. I'm not able to identify why it is so. Could anybody guide me on this??
The images do show initially but without the fade in or fade out effect but once all the images are done going the first loop, the animation works.
JS:
$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});
HTML:
<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>

You have a couple issues in your code.
.imageClass are the <img>... You have to use the container's class, which is .slidesDiv.
You have to use the callback of the animations... Now, both .fadeIn() and .fadeOut are executing at the same moment.
Your timing is wrong... The animations are taking 6 seconds, but you have set the interval to 5,5 seconds.
See comments in code for the details.
$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {
// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
// Fade In the next image
$(this).next("img")
.fadeIn(3000);
// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

Animate function calls multiple times

i have created a simple JavaScript file in which i have 2 images.
here person can either swipe left or right & accordingly images swipes
here is my code,
$('#landscapeimage1').swiperight(function (event) { //here lanscapeimage1 is canvas on which i have drawn an image.
var width = window.innerWidth;
var slide = "+=" + width + "px";
$('#landscapeimage').animate({'left': -width}, 1, function () {
$('#landscapeimage1').animate({"left": slide}, "fast", function () {});
$('#landscapeimage').animate({"left": slide}, "fast", function () {
currentImage = getPreviousImage();
currentCanvas = "landscapeimage";
drawImage();
$(this).unbind(event);
return false;
});
return false;
});
return false;
});
initially when i swipe it works properly but if i visit same image then it calls same function again & again until unvisited images does not comes & if i have visited all images then it goes to infinite loop.
i don't understand why this happens.
i have tried to stop animate & unbind swipe function but it also not working.
<div data-role="page" id="imagepage">
<div class="whiteBackground" id="landscapeimage" style="position: relative;">
<canvas id="image" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
<div class="whiteBackground" id="landscapeimage1" style="position: relative;">
<canvas id="image1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
</div>
After debugging i have found that animate function calling multiple times not swipe function but i can't figure out why? please help me out.
does any body know why this happens?

Add one or two pictures to the jQuery Slider

I need to add a jQuery slider to my website and I found this one met my requirement. But the slider just show 3 pictures, how to add one or two other pictures to the slider?
Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/
The html code
<div id="preview-slider">
<div id="preview-slide-1" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/01.jpg"></a></div>
<div class="preview-hide" id="preview-slide-2" style="display: block;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/02.jpg"></a></div>
<div class="preview-hide" id="preview-slide-3" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/03.jpg"></a></div>
<div id="preview-slider-line">
<ul id="preview-slider-holder">
<li class="preview-first">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im1" alt="" src="images/01.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 1</a></span></li>
<li class="preview-second">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im2" alt="" src="images/02.png" style="top: -15px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 2</a></span></li>
<li class="preview-third">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im3" alt="" src="images/03.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 3</a></span></li>
</ul>
</div>
</div>
The javascript code
(function($){
$(document).ready(function() {
var ready = true, position = 1, timer = null, domer = $('ul#preview-slider-holder > li');
var anima = function () {
if (!ready) {
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
if($(this).is(':animated')){
$(this).stop(true, true);
}
});
}
ready = false;
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
$('img', this).animate({"top": "-15px"}, 200);
$('#preview-slide-' + (position + 1)).fadeIn(600, function(){
ready = true;
});
$('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true, false).animate({'top': '0px'}, 200);
position = ++ position % 3;
};
timer = setInterval(function(){anima.apply(domer)}, 2000); // interval time
domer.mouseover(function () {
timer == null || clearInterval(timer);
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
anima.apply(this);
});
domer.mouseout(function () {
timer = setInterval(function(){anima.apply(domer)}, 2000);
});
});
})(jQuery);
I tried to add a li element , but it didn't work. I think I need to modify the javascript code. But I am not good at the programming, will someone tell how to do?

While I agree with DevlshOne, that many other quality sliders are out there. To answer the OP's question, you have to fix the code to not have hard-coded positions. Instead, I chose to use the index method present with jQuery.
Here is the jsFiddle that shows 4 images working (though I used the original code, so no actual images are displayed).
http://jsfiddle.net/a5yqx/
The key changes to the code are from:
position = ++ position % 3;
...
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
To:
position = ++position % domer.length;
...
position = $(this).index();
Since I don't have the CSS to accompany it, I'm not sure what else you'll need to keep your style up, but good luck.
Last note, I changed the image size from your default to 10x10 in order to see it on my screen in the fiddle.

Can I optimize this jQuery 'toggle' image source function?

I have this functionality witch i am not sure is the best. It is actually working. I'm asking because i couldn't find any 'copy-paste' solution over the net so i wrote this. There no need to suggest other CSS solutions, i am stuck with the <a href><img>text</a> structure and i am UNABLE to write .css (all this because of back-end coding restrictions/ ' they are overwhelmed : lol ' )
javascript (an easy way to let the client build his own icon set [stuck with .png]) :
$(".list-habiliy").on({
mouseenter: function(){
$('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('.png', '-o.png'));
},
mouseleave: function(){
$('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('-o.png', '.png'));
}
},"a");
html (the list of <a> can come up to 30 elements) :
<div class="list-habiliy">
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name1.png" alt="" width="24" height="24" />Some text1
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name2.png" alt="" width="24" height="24" />Some tex2t
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name3.png" alt="" width="24" height="24" />Some text3
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name4.png" alt="" width="24" height="24" />Some text4
</div>
The goal of the function is to replace the icon <img> from within an <a> by adding/removing '-o' text from image source. I'm wondering, should i use the .each(), the hover() for performance reason ?
jsFiddle :
http://jsfiddle.net/5dpaA/
Is this the best way to do it ?
Thanks for all your advices.
[Finaly]:
Explained by user #Xotic750 [accepted answer] (Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches..)
This was somehow the only optimisation i could make.
thanks to user #codelio [i can't accept 2 answers] for is shortened code writing :
$(".list-habiliy a").on({
mouseenter: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('.png','-o.png');
},
mouseleave: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('-o.png','.png');
}
});

Here is another solution, uses jquery event delegation, so only 1 event handler (well 2, one for mounseenter and one for mouseleave) attached to list-habiliy, if you had multiple such structures then you could attach it to document,body and change the selectors to list-habiliy a,img. Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches as we are now assuming that your html pattern does not deviate from that which you have stated. Still, would be pretty difficult to measure it's improvement as it is a user fired event, but it should be faster than your jquery only methods.
HTML
<div class="list-habiliy">
<img class="icone" src="http://placehold.it/64x64/&text=.png1" alt="" width="64" height="64" />Some text1
<img class="icone" src="http://placehold.it/64x64/&text=.png2" alt="" width="64" height="64" />Some tex2t
<img class="icone" src="http://placehold.it/64x64/&text=.png3" alt="" width="64" height="64" />Some text3
<img class="icone" src="http://placehold.it/64x64/&text=.png4" alt="" width="64" height="64" />Some text4
</div>
Javascript
$(".list-habiliy").on("mouseenter", "a,img", function (evt) {
var target = evt.target;
if (target.nodeName === "IMG") {
target.src = target.src.replace('.png', '-o.png');
} else {
target.firstChild.src = target.firstChild.src.replace('.png', '-o.png');
}
}).on("mouseleave", "a,img", function (evt) {
var target = evt.target;
if (target.nodeName === "IMG") {
target.src = target.src.replace('-o.png', '.png');
} else {
target.firstChild.src = target.firstChild.src.replace('-o.png', '.png');
}
})
On jsfiddle

this will allways find the hovered child which is your img, and it's fast!
$(".list-habiliy a").on({
mouseenter: function (e) {
//faster is not possible!
var elm=e.delegateTarget.firstChild, src=elm.src.replace('.png','-o.png');
elm.src=src;
},
mouseleave: function (e) {
//same a bit jQuery stylish
var elm=e.delegateTarget.firstChild, src=elm.src;
$(elm).attr('src',src.replace('-o.png','.png'));
}
});
sorry there is a shorter one. :)
$(".list-habiliy a").on({
mouseenter: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('.png','-o.png');
},
mouseleave: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('-o.png','.png');
}
});

The way you have it works perfectly, and I couldn't say using .hover() will have any performance benefits and .each() is unnecessary. In fact:
Calling $(selector).hover(handlerInOut) is shorthand for:
$(selector).on("mouseenter mouseleave", handlerInOut);

I would probably store the $('img.icone', this) query in a variable so that it's not doing two queries inside each of the mouseenter / mouseleave functions.
It also increases readability and reduces potential problems should this be cut/pasted onto other areas:
$(".list-habiliy").on({
mouseenter: function () {
var imgIcon = $('img.icone', this);
imgIcon.attr("src", imgIcon.attr("src").replace('.png', '-o.png'));
},
mouseleave: function () {
var imgIcon = $('img.icone', this);
imgIcon.attr("src", imgIcon.attr("src").replace('-o.png', '.png'));
}
}, "a");
JS Fiddle demo: http://jsfiddle.net/5dpaA/3/

Hover is implemented like this (as seen here):
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
So no performance here. Avoiding delegation would create a lot of handlers instead.
What you can actually do is add something like this at the end of your html:
<div id="hidden-img">
<img class="icone" src="http://placehold.it/64x64/&text=-o.png1" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png2" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png3" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png4" alt="" width="64" height="64" />
</div>
And add some CSS:
#hidden-img {
margin-left: -9999px;
}
I think it's Opera that won't load images if they're hidden.

trying to create simple Slide show method in Javascript

I have been trying to create a basic JavaScript snipped to slide images forward and back on a webpage when links are clicked.
Here is my js code in the <head> section of the webpage:
<script type="text/javascript">
//if browser does noe support getElementbyId then exit
var step = 1;
if ( !document.getElementById ) {
return;
}
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
function slideForward()
{
//files are named as image1, image2....
step++;
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
}
function slideBack()
{
step--;
var src = 'images/gallery_images/image'+step'.jpg';
document.getElementById('photos').src = src;
}
</script>
I bind the 2 functions for moving backwards using onclick in a tag like:
<a onclick="slideBack()">
<img src="images/gallery_06.jpg" alt="" name="left" width="26" height="90" id="gallery_06" />
</a>
<a onclick="slideForward()">
<img src="images/gallery_07.jpg" alt="" name="right" width="27" height="90" id="gallery_07" />
</a>
Any suggestions on what I am missing? Nothing is being returned.

Categories

Resources