I am developing a website and would like to add some jQuery functionality to a page. Basically, the page has a sidebar with a menu (showing all sections of this one page). I have added the functionality that when you click a menu item, the main section scrolls down to the proper section.
I've managed to add an active class on these menu items when they are clicked using jQuery. See:
$('#category-list li a').click(function(){
$('#category-list li a').removeClass("category-list-active");
$(this).addClass("category-list-active");
});
But I'd like to add the same functionality for when the user scrolls down the page (AKA when one section hits the top of the page, the corresponding menu item get's the active state class).
Since the site is in development for a client, I can't really show it but if I need to I can re-create something similar.
Thanks in advance,
Andy
You can try something like this
var fl = $("#your-section").offset().top;
$(window).scroll(function() {
if(this.scrollTop() > fl) {
// do your stuff
}
})
You may have to play with the offset to find the exact position where the transition should take place.
Related
By default, clicking a UIkit nav accordion submenu row will close any already open submenu as it opens its own. But if you click a non-submenu nav row, it does NOT close already open submenus. The docs (https://getuikit.com/docs/nav#accordion) perform the same way.
I find this behavior inconsistent and undesirable. Ideally there's be be a UIkit.nav(element).reset(); method to close all open menu items, but none seems to exist.
My guess is that I need to use the built-in click event, but I have no idea how to approach this. UIkit JS docs and examples are few and far between, adding to the challenge.
My workaround is here ... https://codepen.io/neokio/pen/OrMNZY ... which basically involves finding the index via ...
var open_index = $('#left-col > div > ul > li.uk-open').index('.uk-parent');
... and then UIkit's native toggle method ...
UIkit.nav('.uk-nav-default').toggle(open_index, true);
Thanks to #zzseba78 on gitter.im for helping me refine the index.
Just as a little pre-info, I'm running a Volusion e-commerce site that has internal page HTML locked down, so I am unable to add any ID's or classes to internal page elements.
The default HTML provided by Volusion puts a table out of order for my design on my category pages. I have a bit of script that targets that table on my product category pages, and moves it. The problem is that the script is run after the page is loaded, causing a "jumping" effect as the table is moved via jquery.
The simple solution would be to hide the table first via css, and then have the jquery show the element after it has been moved, however, I am unaware of how to accomplish this.
Here is the moving script. It first detects if the user is on a category page via a URL check. It then finds the first child table inside the #content_area element, and moves it.
<script type='text/javascript'>
$(function () {
if (location.pathname.indexOf("-s/") != -1) {
var table_to_move = $("#content_area").find("table").first();
$("#content_area").find("form").before(table_to_move).show();
$('#jmenuhide').insertBefore('.refinement_price_section');
}
else {
}
});
</script>
I have tried targeting the element via css, and hiding it, and then re-showing it after the script has run. However, since I can only reference it through css selectors, and not an ID or class, the page will end up hiding the wrong table, as the table orders change when the script is run.
Anyone have any idea how I can smooth out this table movement? Thanks!
You can view this script in action at: http://www.yandasmusic.com/Folk-Instruments-s/1821.htm
My question is similar to the one Robert Anderson asked. That was solved beautifully by David Thomas. Here's that JS Fiddle demo.
$('a.button').click(function(e){
e.preventDefault();
$('a.clicked').removeClass('clicked');
$(this).addClass('clicked');
});
But instead of toggling one link color on click, I'd like to toggle three separate colors for three separate link buttons, on each click returning the other links to their default color. Basically exactly what the JS Fiddle does, but toggling three classes rather than one. I'm still a jquery novice and can't make it happen.
More details: these are div links on the page's navbar, so the user isn't navigating to a new page. The idea is that the link button to div1 or div2 will be "lit up" or "colored" on the top nav bar to make clear what section the user is looking at.
http://jsfiddle.net/f36Wq/26/
Simple way - store the click class you want on a data tag on the link and then retrieve it for use.
$('a.button').click(function(e){
e.preventDefault();
$('a').removeClass('clicked clicked2 clicked3');
var $this = $(this), cls = $this.data('clckcls');
$(this).addClass(cls);
});
I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.
In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/
Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?
I've implemented a lava lamp style navigation menu (from here) to work with my WordpPress blog's navigation menu. This function needs to select an id or class for the navigation menu link it is supposed to hover over. I set this up in the function's code to select <li class="current_page_item">, which is a class applied by WordPress to the navigation list element that corresponds to the page you're on.
The problem is that when you're on a post permalink page, category page, or on an older page, the lava lamp function doesn't work because none of the navigation list items have the current_page_item class since they're not pages that are reached by the navigation menu.
On these pages (any page not on the nav menu), I just want the slider to default to the "home" link.
The simplest solution I could think of would be to write a piece of javascript & jQuery that does the following before I run the lava lamp function: if no <li> has class="current_page_item", then addclass "current_page_item" to first <li> I just don't know enough JS or jQuery to write this.
Thanks.
You can't!
Nahhh just kidding, do it this way,
$(function(){
var $menu = $('ul#menu');
// look for <li class="current_page_item"> , .length would return greater than zero if there is matched element.
if (! $menu.find('.current_page_item').length ) {
// add the class on the first child if no matched...
$menu.children('li:first-child').addClass('current_page_item');
}
});