I have the following code for sliding down my submenus,
$('#nav-menu > ul#nav > li').hover(function(){
var $this = $(this);
$this.siblings('li').find('.subnav-hover').stop().slideUp(200 , function(){
$this.children('.subnav-hover').stop().slideDown();
});
}, function(){
$(this).children('.subnav-hover').stop().slideUp();
});
I use the above code for multiple sites and it works absolutely fine, but on the following site --> link here, it does't quite work smoothly.
If you hover over the tab "Deficiency" , multiple times , you will see that the 2nd or 3rd time the submenu ul does't come into full view , because the height is not calculated correctly. In earlier sites i noticed slideDown() had issues with the property transition or when a fixed height was given, but in this case i am unable to locate the problem , and i am not sure why my slidedown() is not working.
Related
I’m looking for help on a project I’m working on and I can’t seem to figure it out. I’ve searched and tried various scripts as well as no conflict scripts. I’m hoping someone can help me out.
I have a single page that anchors from the nav to content on the page. When you hover over an image in the middle of the page, you can click to an off canvas page. I’ve got this working, however I would like to have smooth scrolling when you click on the main navigation at the bottom of the page. It seems that the off canvas anchors and the smooth scrolling script don’t work together. I’m very new to jquery and javascript, so I can’t seem to make it work.
I found this code for the smooth scrolling (right now I have this commented out), but when i place this code on the page, it breaks the nav anchors:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Is there another code that can work on my page? You can inspect my page here:
http://ebresearch1.wpengine.com/index.html
Also, I’m having trouble with having my nav icons have an active state on them.
I’m using this code:
jQuery('.nodes a').click(function () {
jQuery(this).find('.inactive-circle').toggleClass('active hide');
});
But it only toggles the active and non active states. I want them to stay active only until you click on another nav item.
Tablet problem:
On another note, my mobile/tablet hamburger links in nav don’t close nav after clicked. It just stays open. I can’t seem to trigger the off canvas to close after clicking on a link.
I know this is a lot of information, but I’m stuck. If I need to provide more information, please let me know and i’ll post it.
Thanks!
quick one for your second problem:
jQuery('.nodes a').click(function () {
jQuery('.nodes a').find('.inactive-circle').removeClass('active hide');
jQuery(this).find('.inactive-circle').addClass('active hide');
});
not quite sure how your divs and css are set up here as it feels like it could be simpler somehow, but the main principle with this is to first make all of your .nodes a divs inactive and then make this one active.
for third problem, this is a bit of a hack but to avoid meddling with your offCanvas script you can trigger a click on the hamburger when a menu div is clicked:
jQuery('#0 a').click(function () {
jQuery('#rightBurger').trigger('click');
});
hope that helps, gotta run but will come back come back and attempt the main one if no one else does.
I use fullPage js script for my website. I have a problem.
I have some jquery that is changing my header elements when the visitor scrolls
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");}
});
Basically this is the jquery that is changing my header.
All was working good till I had to make my website sectioned with fullpagejs. This script is hiding my scroll bar and if the scroll bar isnt visible, my jquery from above isnt starting because he doesn t know that the visitor is scrolling or because the scroll bar isnt visible.
In fullPagejs I can show the scrollbar so my header elements will show with :
scrollBar: true
If I add this line of code the scrollbar is visible and my jquery starts working.
The problem is that if I make the scroll bar visible, my website is going between sections with some lag (like framing). Any ideeas how I can solve this problem or If it s a posibility to hide the scroll bar but to be able to change my header on scroll ?
You can check the website without scrollbar here: http://bit.ly/1AGcZvd
And with scrollbar here: http://bit.ly/1C6VH8m
The one with scrollbar have some lag, deelay, I don t know how to name it ..
Cheers!
You don't need to use scroll bar to make it work.
If you are using scrollBar:false, then you should be using the callbacks provided by fullpage.js such as afterLoad which get executed after you reach a section.
You could even use the CSS class added by fullPage.js to the body element of the page on section change. And deal just with CSS for all it... which would be faster.
But if you still prefering to show the scrollBar and to deal with jQuery instaed of with CSS, then take into account that your code is being executed hundreds of times on every scroll and that's what causing the lag... you should better optimize it...
Something like this, which checks for a flag, would optimize it a lot:
var hasChanged = false;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 1 && !hasChanged) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");
hasChanged = true;
}else{
//whatever
//...
hasChanged = false;
}
});
And if you still want to improve it more, you could just use Javascript instead of jQuery.
But personally I would just deal with CSS.
There is a fixed-height div, which has scrollbar. When its only-child element ol being scrolled to the bottom, the ol needs to load more new li.
I'm using jQuery infinite-scroll plugin.
I can't get the plugin to work in the aforementioned situation on desktop browsers.
In iOS, it sorta works, and is buggy. When I scroll the ol to the bottom, it doesn't load. And then when I try to scroll the ol more (it actually can't be scrolled more), it successfully loads.
Here is a simple demonstration of my code.
Here is the demonstration code.
Taken from the infinite-scroll documentation:
To scroll inside an element having overflow, use the local behavior.
So rather than having a #container element that has the overflow, just use the infinite scroll on the list:
$('#container').infinitescroll({
behavior: 'local',
binder: $('#container'),
bufferPx: 0,
navSelector : '#nav', // selector for the paged navigation
nextSelector : '#nav a', // selector for the NEXT link (to page 2)
itemSelector : 'li' // selector for all items you'll retrieve
});
Having the ol as the #container:
<ol id="container">
Here's a working example and there's the relevant documentation.
EDIT
It seems that to use the local behaviour, you need to override a method responsible for determining if the scroll is near the bottom (although this doesn't seem to appear anywhere in the documentation). There is a file in the repository /behaviors/local.js that would need to be included to make this work, but I tried it and is doesn't seem to work properly. So instead you can use this code to take care of the those computations:
jQuery.extend(jQuery.infinitescroll.prototype, {
_nearbottom_local: function infscr_nearbottom_local()
{
var opts = this.options;
var binder = $(opts.binder);
return (binder.scrollTop() + binder.innerHeight() >= binder[0].scrollHeight - opts.bufferPx);
}
});
I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :(
I've searched and searched for answers and tried out too many approaches and not getting anywhere... :( I bet I'm missing something very obvious or simple, hoping someone might be able to help...
ok - the problem:
I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand.
Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden.
That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'(
Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour.
Everything is working as intended for the showing and hiding of my menu - BUT....
The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred.
However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?!
I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something....
I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here....
the website: webeyedea.info
here's my JS code, following the link to jQuery:
// check for window size size on page load and show relevant content only
$(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow', function() {
// Animation complete.
});
$('ul').addClass('view');
});
UPDATE: SEE JSFIDDLE
When you call .show() on an element it sets the display property to the previous value and if it does not exist I believe it takes the default browser value which may be inline in your case. Try setting it explicitly to block.
I'm not sure what is doing what here since I don't have a mobile to test it, but could you try to replace your hide/show with a css function that toggle between display:none and display:block ?
Like this :
$('#toggle-nav').css('display','none');
$('#toggle-nav').css('display','block');
ALMOST ! NOT SOLVED
one solution, thanks to Vlad Radulescu (on Forrst) ~ via this jsfiddle fork
$('a#toggle-nav').css('display','none');
// Show the menu if Window width is less than 420
$(window).resize(function() {
if ( $(window).width() > 420 ) {
$('#toggle-nav').css('display','none');
$('nav ul').show();
}
else {
$('#toggle-nav').css('display','block');
$('nav ul').hide();
}
});
// Slide the Menu on smaller screens
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow');
});
See my revised fiddle
http://jsfiddle.net/HWmp3/9/
I tested this on the iphone simulator and it works. My test was I copied the codes to a local file and tested. I put all the js inside of document.ready
make sure you have the meta in the header
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
Hi while developing a lightbox for a website it seems I made an error in the creation of my code somewhere.If I click the lightbox two times it works normaly and everything is well.But when I try to open it a third time a bug seems to interfere.I have posted the code for the entire website on jsFiddle :
http://jsfiddle.net/Ywpdh/
Pay attention only on the "Login" button on the top right corner.When the Login button is clicked the lightbox appeares you can close it by clicking on the top right rectangle.The bug only appeares after the login button is clicked a third time.At this point the small rectangle seems to behave as if it's container is given the overflow:hidden property something that is not true.I have tested the code on all modern browser I get the same bug.Can someone please tell me what's going on?
Using firebug, the conatiner does get overflow: hidden when the exit div is clicked the 2nd time.
After reducing the code and commenting out It was the animation of width and height that are causeing the problem.
searching google for jquery aminate caused overflow: hidden i came accross this SO post
jQuery .animate() forces style "overflow:hidden"
So it appears you have to reset the overflow yourself
Updated your Fiddle
function lighbox(){
var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
var body = $('body');
body.css('overflowY','hidden');
$('div#bg-lightbox').fadeTo('slow',0.9)
$('div#lightbox').css({
'left':width,
'top':height,
'overflow': 'visible' // *** added this line
}).stop()
.animate({
'width':'+=500px',
'height':'+=250px',
'left':'-=300px',
'top':'-=200px',
'opacity':'1'
}, 'slow' , 'swing')