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');
});
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
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();
}
});
});
When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});
Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});
<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});
You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});
Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});
What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors
Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
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); })
}