I guess I need help. I'm trying to work with jQuery and I don't know much, but I'm having this problem with the "color active" of the menu.
Here is an simplified version of my work: http://jsfiddle.net/paulakfleck/aZGKz/
Here is the whole work (complete): http://nartecrobotica.com.br/g4/
As you can see, when I click in the menu, the "active color" works, but when I scroll the page or open the page, do not.
I guess the big mistake is in this line:
if($(window).scrollTop() == $("#g-4")){...}
I put the #g-4 as an example, but isn't working too.
I try other answers at Stackoverflow, but I'm unable make that work.
Some light, please?
If you want your menu to change as you scroll, you could try this:
$('.grid').each(function () {
if ($(window).scrollTop() > $(this).position().top - ($(this).height() / 2)) {
$('.myList a').removeClass('active');
$('.myList a#menu' + $(this).attr('id').split('-')[1]).addClass('active');
}
});
Updated your jsfiddle here.
are u looking for this ..
If yes then i am using .offset().top to compare.
one problem that was $(window).scrollTop() gives the scrollbar postion in integer and your divs position is fixed hence you need to do a range check before you apply the class.
Check demo
Related
I looked through this website for similar question, but couldn't find any.
So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
It kind of works, but the movement of it is really weird.
When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
It's hard to explain in writing, so please see the website and see what I'm talking about.
Below is the website I'm working on.
Test website
I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.
Below is the jquery code:
$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
$("#top-bar").addClass('animated-header');
} else {
$("#top-bar").removeClass('animated-header'); }
});
$("#clients-logo").owlCarousel({
itemsCustom : false,
pagination : false,
items : 5,
autoplay: true,
})
});
Thanks for the help in advance!
Nice website!
Take a look at your header element, you will see that you already put the animated-header class there which causes the problem. Here is your code:
<header id="top-bar" class="navbar-fixed-top animated-header">
What you can do is simply remove that class, and your script above will help deal with adding/removing this class base on the scrollTop value. Something like this will help:
<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->
We are setting our scroll position back to zero, so this works fine. Add this,
$(document).ready(function () {
$('html,body').animate({
scrollTop : 0
},10);
});
$(document).ready(function () {
$(window).scroll(function(){
if($(window).scrollTop() >= 70){
$("#top-bar").addClass("animated-header");
}
if($(window).scrollTop() <= 70){
$("#top-bar").removeClass("animated-header");
}
});
});
I'm attempting a horizontal scroll with the mouse wheel, but doesn't seem to work.
Here is my Fiddle
My main class .selector is the one with scrollable overflow
This is JS I am trying to initialise the scroll with
$('.selector').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
This is the example I am using for horizontal scroll https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Thanks in advance for any help!
EDIT: Thanks all, I forgot jQuery in the Fiddle yeah sorry, but when I was testing on localhost I was using jQuery 1.11.1 so maybe that was the case. Cheers guys
You just forget to add JQuery to your html
http://jsfiddle.net/902tjbzz/
jquery.js : http://code.jquery.com/jquery-2.1.4.min.js
Try this:
$('.selector').mousewheel(function(e, delta) {
$(this).scrollLeft(this.scrollLeft + (-delta * 40));
e.preventDefault();
});
Also, you did not include jQuery in your fiddle.
EDIT
Actually, the only problem was that you did not include jQuery, your initial code works fine.
First thing: in yor jsfiddle you forget to include jquery.
The second thing: I changed $('.selector').mousewheel(function(e, delta) { to $('.selector').on("mousewheel", function(e, delta) { and only then I could see that event is triggered.
Also check your scrollLeft property update logic. Don't forget about direction (left, right), so in some case you should add value insead of subtract it
I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.
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">
I have a div that is fixed position that I want hidden once the page is scrolled to a certain position. Is there any way to do this with jQuery/Javascript?
Yep, something like this should do the trick:
var max_scroll = 300;
$(document).scroll(function(){
if($(this).scrollTop() >= max_scroll)
{
$('#my_div').fadeOut();
}
});
$(document).scroll(function(){
if($(document).scrollTop()>100){
$("#myElement").hide();
}
}
edit: Oop, I see someone already posted a working solution,