Okay this problem is pretty straight forward. I'm trying to call a this tele_in function that I have but I can't get it to run. I'm not sure what the heck I have to do. I dropped an alert in the area where I tried calling the function and it worked... What am I missing? Here is the code: The function I'm trying to call is right at the top there called "tele_in". The place I'm trying to call it has been commented out down towards the bottom. What am I doing wrong here?
Var SpriteVis;
jQuery(document).ready(function tele_in($) { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
});
jQuery(function ($) {
$(window).scroll(function () {
if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/Teleport-Sprite.png)',
'height': '188px',
'width': '52px',
'left': '330px'
});
$("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
});
}), 80;
SpriteVis = false;
} else {
//I need to call the "tele_in" function here .
}
});
});
You'll have to pull that function declaration out of the jQuery call:
function tele_in($) { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
});
Query(document).ready(tele_in);
A function created with a function instantiation expression (as in your case) does not have its name exported to the local scope. The name is only visible from inside the function.
By moving that to a function declaration statement, you create a symbol in the containing scope that is visible throughout.
Note that because of the way you've defined that function, you'll have to call it like this:
tele_in($);
or else the value of $ in the function will be undefined.
You have to declare the function outside the jquery ready handler:
function tele_in () {
// ...
}
jQuery(document).ready(tele_in);
$ is available in the global scope and needn't be passed as an argument to tele_in (unless you use multiple jquery objects, i have no experience with that scenario, not even whether it's viable).
Since nothing is going to happen until tele_in is defined at document ready, just combine everything:
Var SpriteVis;
jQuery(document).ready(
function tele_in() { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
$(window).scroll(function () {
if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/Teleport-Sprite.png)',
'height': '188px',
'width': '52px',
'left': '330px'
});
$("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
});
}), 80;
SpriteVis = false;
} else {
tele_in();
}
});
});
Related
I don't know much about Boostrap and I tried finding the answer online but without success.
I'm building a website for the little company I work for based the the following template:
https://dcrazed.com/bent-app-landing-page-template/
I've customized the texte a little bit of the layouts but my boss wants the menu bar to be always visible. In the template the bar wil appear has you start scrolling down and always be hidden on the home page. I have managed to make it appear and stay on after the first scroll by changing the If conditions of the script.
//MENU APPEAR AND HIDE
$(document).ready(function() {
"use strict";
$(window).scroll(function() {
"use strict";
if ($(window).scrollTop() > 1000) {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
} else {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
}
});
});
Even when changing the conditions of the If it still needs a least one scroll to appear.
If you add trigger('scroll') you should be able to see it immediately.
$(window).scroll(function(){
// some code
}).trigger('scroll')
Option 1 (JS):
If you still want to use js, you could wrap your logic/method into a function like resizeHandler, then call it on page load resizeHandler();
OR as #a.barbieri said use .trigger('scroll')
$(document).ready(function() {
"use strict";
//scroll handler
$(window).scroll(resizeHandler);
//init
resizeHandler();
function resizeHandler(){
if ($(window).scrollTop() > 1000) {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
} else {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
}
}
});
Option 2 (CSS):
use a media query to determine screen size to show and hide.
Using media queries
A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
REF: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I tried to add this JS code on Magento 1.9 , but nothing happens when i click on add to cart button.
I added code in XML file ( i see that is ok when i see source code in page via browser ) :
and added this JS in folder JS/Carrello/cart.js :
$('.btn-cart').on('click', function () {
var cart = $('.skip-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');
setTimeout(function () {
cart.effect("shake", {
times: 2
}, 200);
}, 1500);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
I followed this guide :
http://codepen.io/ElmahdiMahmoud/pen/tEeDn
First of check any conflicts with prototype.
if that's the case replace $ with jQuery
Also, could you please explain how did you add your code using xml?
Im trying to get a div move up and down from its current position during a mouse hover event - I have the followng but it only works once and then stops as opposed to continually cycling?
tiptitle.stop(true, true).animate({
'top': '5px'
}, 100).stop(true, true).animate({
'top': '0px'
}, 100);
make an infinite loop
function animate(isOpen) {
tiptitle.stop().animate({'top': isOpen ? '5px' : '0px'}, 100, function() { animate(!isOpen); })
}
Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});
If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/
The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});
If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});
Is it possible to style inline the div .trigger on the following code and set its display to block?
$('.trigger').toggle(function() {
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
});
You can simply use $('.trigger').css('display', 'block');
if you want to implement it inside your toggle function you can do something like this :
$('.trigger').toggle(function() {
$(this).css('display', 'block');
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
$(this).css('display', 'none');
});