We Keep Coding

Jquery: functions calls when the page loads - javascript

I have a complex function called animated(). Now this function has to affect 2 different DOM elements: one when the page loads, and the second one when I click on it.
$("li div").click(animated);
How can I make it happen for at the start in any case on another <div>?
Something like:
$("li div").animated();
I know that's not right, so how can I do something like that?
thanks for the answers....any way I'm pretty new with Jquery so i'm gonna copy the my code here so yous have an idea about what is going on...this code works perfectly but is redundant and I'm sure there is a way to reduce it.
here is the jquery code
$(document).ready(function() {
var wrapperheightanim = $(window).height(); // check the dimension of the window to see how many rectangles i can fit
var locid = window.location.hash.replace("!", ""); // save the location id in case the user starts from a page that is not the home
$(window).resize(function() {
wrapperheightanim = $(window).height();
});
//rollover
$("li").hover(
function () {
$("img", this).fadeIn(500);
},
function () {
$("img", this).fadeOut(500);
}
);
//click on the navbar
function animated() {
var titletemp = $(this).attr("id"); // save the id in a temp var
var title=titletemp.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color = $(this).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").fadeIn(1);
$("img", this).fadeOut(1);
// create the main container
$(this).css("z-index", 99);
$(this).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(this).css("z-index", 3);
$("li").not(this).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(this).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(this).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(this).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(this).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(this).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(this).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(this).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(this).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(this).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(this).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
locid = window.location.hash.replace("!", "");
}
function animated2() {
var titletemp2 = $(locid).attr("id"); // save the id in a temp var
var title2=titletemp2.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color2 = $(locid).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").remove();
// create the main container
$(locid).css("z-index", 99);
$(locid).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(locid).css("z-index", 3);
$("li").not(locid).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(locid).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n2) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title2 + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n2();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color2
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
}
$("li").click(animated);
animated2();
});
as you can see the functions animated and animated2 are exactly the same with the difference
that one happens to the div when i click, one happens to a certain div when i load the page..hope with the code it's easier. my problem is how to write the function once and execute it once when i click on one element, and once when the page load on the specific element saved in the variable locid..

You can't do $('li div').animate() because your function is not a property of a jquery object (unless you implement it as so - like a plugin).
You can trigger the event click you just defined though:
$('li div').click(); // or $('li div').trigger('click');
This will execute your animatedevent handler attached with $("li div").click(animated);

Let's say your function looks like this:
function animate()
{
// do complex stuff to 2 DOM nodes
}
To run that function on whenever a <div> inside a <li> is clicked, do this:
$('li div').click(function() {
animate();
});
If you want to run animate when the page loads, do this:
$(function() {
animate();
});
Edit: On the other hand, if your function looks like this:
function animate(domElement)
{
// do complex stuff to domElement
}
To run that function on any <div> inside a <li>, when it is clicked, do this:
$('li div').click(function() {
animate(this);
});
And if you want to run the function on page load, on all the <div>s that are inside <li>s, do this:
$('li div').each(function(index, element) {
animate(element);
});

Related

my image cannot to move to the place that I set.
this is some code that i found in https://codepen.io/anon/pen/REvbEZ it not working when i try to apply into my code.
I have try to change some movement but its does not working at all.
$('.add-to-cart').on('click', function () {
var cart = $('.shopping-cart');
var imgtodrag = $(this).parent('.item').find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
});
Let the product image move to the cart image after i press the add to cart button.
This is for the user to know the product is successfully added to the cart.

I recently just started getting into html and was wondering how can I implement the following code and be more efficient and use an arrayList.
<!--
This was me just trying to play around with arrays and elements
var elements = document.getElementsByClassName("[id^=pop]");
var arr = jQuery.makeArray(elements);
-->
var p = $("[id^=pop]");
var position = p.position();
$("[id^=pop]").hover(function() {
$(this).css("cursor", "pointer");
$(this).animate({
width: "400px",
height: "400px",
top: position.top*.7,
left: position.left*.7
}, 150);
}, function() {
$(this).animate({
width: "300px",
height: "300px",
top: position.top,
left: position.left
}, 150);
});
As of now, when an image id equals pop0, and then another one equal pop1. They both will animate to the first image's height and width. How can I use an array so every img has its own position and won't be based off the first image that is loaded but rather their own top and left coordinates?

As mentioned in the comments, you need to move your position variable from outside of your hover event handlers to inside your hover event handlers. This will set the context to the currently hovered item.
Currently your p variable stores an array of all elements beginning with an ID that starts with pop. Then you are storing a reference to the first element's position and never updating by setting the value of position outside of your hover event handlers.
Here's an example with a small bit of caching so you're not always querying the DOM.
var $pop = $( '[id^=pop]' );
$pop.hover( function hoverIn() {
var $this = $( this ),
pos = $this.position();
$this
.css( 'cursor', 'pointer' ) // <= Possibly do this via CSS.
.animate( {
width: '400px',
height: '400px',
top: pos.top * 0.7,
left: pos.left * 0.7
}, 150 );
}, function hoverOut() {
var $this = $( this ),
pos = $this.position();
$this.animate( {
width: '300px',
height: '300px',
top: pos.top,
left: pos.left
}, 150 );
} );

I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});

you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')

If you do not know what position:sticky is, watch this 20 second long video: https://www.youtube.com/watch?v=jA67eda5i-A .
This CSS feature was in talks in W3 and implemented in gecko I believe. But that is besides the point, the point is that not all browsers support it and I really want that functionality.
Is there any way I can get this using a mix of CSS and/or javascript and/or jquery?

There is an easy jquery plugin for this:: http://stickyjs.com/

To avoid using a plugin, i have created the following javascript method using jquery 1.8+.
The first argument is the element that you want to set sticky.
The second argument is optionnal and is a boolean to enhance the browser performance by setting a small timeout of 300ms.
function simulateSticky(elt, timeout) {
var move = function() {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - scrollTop - $(window).height();
var eltTop = elt.parent().offset().top;
var eltBottom = $(document).height() - eltTop - elt.parent().outerHeight();
if (scrollTop < eltTop) { // Top case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "auto",
left: "0px",
});
}
else if (scrollTop >= eltTop && scrollBottom >= eltBottom) { // Middle case
elt.css({
position: "fixed",
width: elt.parent().outerWidth(),
top:"0px",
right: "auto",
bottom: "auto",
left: "auto",
});
}
else { // Bottom case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "0px",
left: "0px",
});
}
};
// Use of a timeout for better performance
if (timeout) {
var timeoutId;
$(window).scroll(function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
move();
}, 300);
});
}
else {
$(window).scroll(move);
}
// Initial call
move();
}

Can somebody please tell me how to arrange the caption above the image in the jsfiddle below as I can not seem to do it. The caption is currently below the image. Thanks in advance.
Sample Code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
I hope this helps

Here is an updated FIDDLE.
The relevant line is this one:
.css('top', -h.toString() + 'px');
It positions the div for the text, and to change the position above the image, I just placed a negative sign in front of h.toString(). You could finely adjust the position by multiplying the h.toString() by a coefficient like -.8 or -.92 to make finer adjustments. It may be problematic putting it above the image, because you'll have to adjust the position based on the height of the text div.