I am having issues in closing the active div in my site. When I click menu you will see that a menu panel will slide from the left of the screen. As of now the only way to close it would be to click the x button. But I also have the ability for when you click footer a div will slide up from the bottom. Everything works, but the problem I am having is when the menu is open and you click footer the div will cover the menu instead of closing the menu. Same goes the other way around, when the footer is open and you click menu it will open up as well instead of closing the footer.
I would like for one div to open while closing the other open div. How would go about doing this?
Here is the JS and the full code of the site http://jsfiddle.net/8en2D/21/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
/* 1. FOOTER SLIDEUP
-----------------------------------------------------------------------------------------------
===============================================================================================*/
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});
I was able to tweak your jQuery a bit to make this work. See jsfiddle here. Below I have put the two main functions that I modified.
$('#menu').click(function () {
//new jquery
if ($('header').is('.open')) {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').removeClass('open');
});
if ($('.navFooter button').hasClass('activetoggle')) {
$('.navFooter button').removeClass('activetoggle').addClass('footerButton').text('Footer');
}
}
//back to your exisitng code
if (window.status == 0) {
$('#slidingMenu').stop().animate({
left: '0px'
}, 500);
window.status = 1;
$('body, html').css('overflow', 'hidden');
$('#slidingMenu').addClass('open');
} else {
$('#slidingMenu').stop().animate({
left: '-100%'
}, 500);
window.status = 0;
$('body, html').css('overflow-y', 'scroll');
$('#slidingMenu').removeClass('open');
}
});
$('#more').click(function () {
//new jquery
if ($('#slidingMenu').is('.open')) {
$('#slidingMenu').stop().animate({
left: '-100%'
}, 500);
window.status = 0;
$('body, html').css('overflow-y', 'scroll');
$('#slidingMenu').removeClass('open');
}
//back to existing code
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
The list of issues that contributed to your problem is pretty long and I am fairly certain you still have some extraneous code in the fiddle that is still unnecessary.
Multiple .click() functions - all of your code for the click event of
an element should do in one function
Missing or incorrect jQuery selectors - in one area I found $('')
Lacked a notification class that the menu was open (you had this
implemented for the footer (which was called header)
Related
I am looking for to mimic the same scroll behavior the new Flickr website has at https://www.flickr.com/#section-1.
No matter how hard or fast you move your mouse scroll wheel the result is the same.
I know this is a kind of parallax website but I am more interested in the scroll control.
This is what I am doing right now using this plugin https://github.com/ultrapasty/jquery-disablescroll:
var mypos = $(window).scrollTop();
var up = false;
var newscroll;
$(window).scroll(function () {
newscroll = $(window).scrollTop();
if (newscroll > mypos && !up) {
$(window).disablescroll(); //disable scroll
//$('body').addClass('stop-scrolling'); //a css that inputs an overflow hidden
$('#video_bkg').stop().animate({
height: 'toggle',
opacity: 'toggle'
}, 500);
up = !up;
} else if(newscroll < mypos && up) {
$('#video_bkg').stop().animate({
height: 'toggle',
opacity: 'toggle'
}, 500, function() {
$(window).disablescroll('undo'); //reenable scroll
});
up = !up;
}
mypos = newscroll;
});
But none of this equals the Flickr's effect.
Here's an example that does this using the fullPage jQuery plugin.
Use
$(document).ready(function() {
$('#fullpage').fullpage();
});
to initialize the script.
I have a script that I wrote:
jQuery(function($) {
$('.count').countTo({
from: 0,
to: '400',
speed: '3000',
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
I need that script only to run when the container div is visible.
<div class="container">
<div class="count"></div>
</div>
To clarify, the div will always be visible, but when the user scrolls it in to view. Any ideas?
http://www.windycitydigital.net/iconvert/ - Example, at the bottom of the page those counters automatically start. I don't want that script to initiate until the user scrolls into view of them.
Here is an example with the alert activated only when the #mydiv is in view:
This works as you asked. Make sure the window is small so #midiv is not in view from the beginning. And after you scroll down, after the entire #mydiv is visible it will activate the alert from the scroll event.
http://jsfiddle.net/u3eCG/7/
divScroll = $("#mydiv").offset().top + $("#mydiv").height();
$(window).scroll(function(){
lastLineScroll = $("body").scrollTop() + $(window).height();
if (divScroll < lastLineScroll) {
alert("Div is visible");
$(window).unbind("scroll");
}
});
What code shoud hide/show div?For example you can use this code to show div
$('.container').show(0, onContainerVisible);
function onContainerVisible(){
jQuery(function($) {
$('.count').countTo({
from: 0,
to: '400',
speed: '3000',
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
}
if your browser compatibility requirements support it... MutationObserver might be a good candidate here
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
you could do something like this..
function isViewed(selector) {
var viewport = $(window),
item = $(selector);
var viewTop = viewport.scrollTop(),
viewBtm = viewport.scrollTop() + viewport.height(),
itemTop = item.offset().top,
itemBtm = item.offset().top + item.height();
return ((itemTop < viewBtm) && (itemTop > viewTop));
};
var counter = setInterval(function() {countdown()}, 500);
var countdown = function() {
console.log('are you there?');
if(isViewed('#mydiv')) {
clearInterval(counter);
console.log('yes i am here.'); // call countdown here
}
};
here is a jsfiddle to demonstrate
http://jsfiddle.net/pixelchemist/aLT7w/
http://bvh.delineamultimedia.com/?page_id=2 -> if you click the first image there is a gallery in the dropdown… which is what I want. But, if you close it and re-open it. it goes to a static image.
So there is a function statement in this js I'm working with and can't seem to figure it out what the problem is. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js
Here is the function...
$('.superbox').on('click', '.superbox-list', function (e) {
//allows for superbox to work inside of quicksand
$('ul.filterable-grid').css({
overflow: 'visible'
});
var currentimg = $(this).find('.superbox-img');
// cleanup
superbox.find('.title').remove();
superbox.find('.description').remove();
superbox.find('.royalSlider').appendTo(superboximg);
//superbox.find('.royalSlider').appendTo($(this)); // remove the slider from previous events
//superbox.find('.royalSlider').remove();
var imgData = currentimg.data();
superboximg.attr('src', imgData.img);
if (imgData.title) {
superbox.append('<h3 class="title">' + imgData.title + '</h3>');
}
if (imgData.description) {
superbox.append('<div class="description">' + imgData.description + '</div>');
}
//royal slider fix
var sliderData = currentimg.siblings('.royalSlider'); // grab the slider html that we want to insert
if (sliderData.length > 0) { // show the slider if there is one
superbox.append(sliderData); // clone the element so we don't loose it for the next time the user clicks
superboximg.css('display', 'none');
} else { // if there is no slider proceed as before
if (imgData.img) {
superboximg.attr('src', imgData.img);
superboximg.css('display', 'block');
}
}
if ($('.superbox-current-img').css('opacity') == 0) {
$('.superbox-current-img').animate({
opacity: 1
});
}
if ($(this).next().hasClass('superbox-show')) {
superbox.toggle();
} else {
superbox.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop: superbox.position().top - currentimg.width()
}, 'medium');
});
If you re-open the page, the browser will just load the url (http://bvh.delineamultimedia.com/?page_id=2 ) again from scratch. If you want to re-display something, you have to change the url and make sure that JavaScript picks it up. This is commonly done with window.location.hash.
Creating an accordion - on the slide - the elements underneath the element that is sliding seem to move down a px and then back up, creating a juddering effect.
$(document).ready(function() {
//Promos banners rotation and accordion
$(function(){
var $accordionList = $('.accordion').find('li');
var numberOfItems = $accordionList.length;
var currentItem = 0;
// Set first item to active
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {});
// Loops through promos
var infiniateLoop = setInterval(function() {
if(currentItem == numberOfItems - 1){
currentItem = 0;
}
else {
currentItem++;
}
// Remove active class, if is has it, and close content
$accordionList.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {
});
}, 4000 );
// Click to show promo
$accordionList.on('click', function () {
// Stop rotation
clearInterval(infiniateLoop);
var $accordionHead = $(this);
// Remove active class, if is has it, and close content
if($accordionHead.hasClass('active')) {
// Do nothing
}
else {
$accordionHead.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionHead.addClass('active').find('.content').slideToggle(800, function() {
});
};
});
});
});
Fiddle here demonstrating the problem
I've seen some suggestions that you fix the height of the content div - but the site is responsive so that won't work.
Ya, I've had this problem before to. My favorite fix is to just make my own .slideToggle()
div = $('div');
height = div.height();
width = div.width();
$('div').click( function() {
if ($(this).hasClass('hidden')) {
$(this).animate({height: "0", width: "0"}, 200).hide().addClass('hidden');
} else {
$(this).animate({height: height, width: width}, 200).show().removeClass('hidden');
}
});
You could even wrap it in a prototype function if you wanted to.
The problem is my menu jumps when new page is loaded (the selected menu item should be perfectly centred. The menu uses the code:
$(document).ready(function(){
/* Menu klik animatie II */
$("nav#menu a").click(function(e) {
e.preventDefault();
var dit = $(this);
$(this).parent().siblings().removeClass("current_page_item");
$(this).parent().addClass("current_page_item");
geselecteerd = $('#menu li.current_page_item').sumOuterWidth(true);
voor = $('#menu li.current_page_item').prevAll().sumOuterWidth(true);
vader = $('#menu').parent().width();
invoegen = parseInt(((vader-geselecteerd)/2)-voor);
$('nav#menu').prev().animate({
width: invoegen + 'px',
}, {
duration: 400,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$('#content').fadeTo('fast', 0.01, function() {
document.location = $(dit).attr('href');
});
}
});
});
/* Menu uitlijning: geselecteerde item centraal */
$.fn.sumOuterWidth = function(useMargins) {
var sum = 0;
this.each(function() {
sum += $(this).outerWidth(useMargins);
});
return sum;
};
geselecteerd = $('#menu li.current_page_item').sumOuterWidth(true);
voor = $('#menu li.current_page_item').prevAll().sumOuterWidth(true);
vader = $('#menu').parent().width();
invoegen = parseInt(((vader-geselecteerd)/2)-voor);
$('#menu').before("<div style='width:" + invoegen + "px;float:left'> </div>");
});
I can't really think what I did wrong; the width (from the div before the menu) should be the same on the animated one (before new page is loaded) and on the new loaded page.
Anybody an idea about this?
When I use a different font (Varela Round -> Google web fonts) it doesn't happen.
This jQuery syntax runs the code when the DOM is ready.
$(document).ready(function(){ }
In certain cases you'll want the whole page (and it's image dependencies) to be loaded before your code runs. In those cases us the following:
$(window).load(function() { //code })