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
Related
I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();
A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.
Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');
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();
}
});
});
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); })
}
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');
});