Plugin Author
malihu
(@malihu)
Hi,
The best way to do this would be to wrap the extra sections (3 and 4) with another target id and make ‘More’ link scroll to this id.
You can use plugin’s ps2id_wrap shortcode to easily wrap sections 3 and 4 with another element/id. For example:
[ps2id_wrap id='section-more'] sections 3 and 4 [/ps2id_wrap]
and then make your ‘Menu’ link like the ‘Home’, ‘Section 2’ etc. but with URL:
#section-more
Thread Starter
rlinn
(@rlinn)
mahilu,
Thanks for the suggestion. That does work for the highlighting, but it changes the functionality. I don’t really want to add in that extra <a> in the menu.
I thought that I would try to change the style through jQuery. I got as far as inserting the script, but I can’t get the click event to fire.
jQuery( "#menu-item-29" ).click(function() {
console.log("I clicked");
jQuery( "#menu-item-57" ).addClass( "myCustomClass" );
});
Seems like a workable solution, but my WP and jQuery knowledge is pretty thin. I understand that I’m getting away from a plugin specific question now, so let me know if you can help.
Thanks.
Plugin Author
malihu
(@malihu)
Try:
(function($){
$(window).load(function(){
$( "#menu-item-29" ).click(function() {
console.log("I clicked");
$( "#menu-item-57" ).addClass( "myCustomClass" );
});
});
})(jQuery);
Thread Starter
rlinn
(@rlinn)
Thanks. I’ve made some progress, and now I’m enqueuing my own menu.js to house the script (and not use a plugin to do it). The script that I have been testing is:
jQuery(document).ready(function($){
$( "#menu-item-28" ).click(function() {
alert( $( this ).text() );
$( "#menu-item-57" ).addClass("myNewClass");
});
});
The problem is actually with another plugin that I’m using for my Sticky Menu. This plugin ‘clones’ the #navbar to make the menu sticky when I scroll.
Inspecting the HTML shows that I have two nav bars.
<div id="navbar" class="navbar original" style="visibility: hidden;">
<div id="navbar" class="navbar cloned" style="position: fixed; top: 0px; margin-left: 0px; z-index: 99999; display: block; left: 0px; width: 1263px; margin-top: 0px; padding: 0px;">
The jQuery above is attaching to the #menu-item-28 of the original nav bar, but not the cloned nav bar.
However, the sticky menu plugin is cloning all your Page Scroll click events in /page-scroll-to-id/js/jquery.malihu.PageScroll2id.js?ver=1.6.0.
Can you think of why your jQuery is being cloned and mine is not? If not, I’ll ask the other plugin author about this.
Thanks.
Plugin Author
malihu
(@malihu)
I’m guessing the menu script is the sticky-menu-or-anything-on-scroll…
Its js file (stickThis.js) is included after ‘Page scroll to id’ scripts and that’s why it clones everything (events, data etc.).
Now, your menu.js is included after stickThis.js, so ‘sticky-menu-or-anything-on-scroll’ cannot clone the event as it’s not there (yet) when cloning happens.
You need to include menu.js before ‘stickThis.js’. If you’ve included menu.js with wp enqueue, you can set its dependencies (more info).
That’s my guess 🙂
Thread Starter
rlinn
(@rlinn)
Thanks mahilu,
I’ve tinkered with my wp_enqueue_script() function in functions.php. I’ve tried loading menu.js in the header and the footer, ahead of all the sticky menu .js <script>s and neither of these approaches replicated my js in the clone. I’ll ask the sticky menu author for some help and let you know how I go.
Thread Starter
rlinn
(@rlinn)
I now have the following code working.
jQuery(document).ready(function($){
$(document).on("click","#menu-item-28",function() {
//$( ".cloned #menu-item-28" ).click(function() {
alert( $( this ).text() );
$( ".original #menu-item-57" ).addClass("myNewClass");
$( ".cloned #menu-item-57" ).addClass("myNewClass");
});
});
It doesn’t really explain the cloning behaviour, but it does add the classes to the required menu item. Can you see any problems here?
Plugin Author
malihu
(@malihu)
No problems.
It does add the classes because of the way .on() is used on document. Using it like this (on document) instead of directly to #menu-item-28 it means that the event is delegated. Delegated events have the advantage that they can process events from descendant elements (in your case #menu-item-28) that are added to the document at a later time.
Thread Starter
rlinn
(@rlinn)
Thanks.
Now, I can see a problem myself, not with the code but with the solution in general. This will add the class on the click, but that means that the highlighting won’t work like the rest of the plugin’s built-in highlighting. That is, it will display the highlight on the click and not when the section is in the viewport. That’s not going to look good.
The pseudo-code for what I want is something like
$( section coming into the viewport ).detect(function() {
if ( the section is #3 or #4) {
$ ( the parent menu item ).addClass("highlight");
}
});
$( section going out of the viewport ).detect(function() {
if ( the section is #3 or #4) {
$ ( the parent menu item ).removeClass("highlight");
}
});
Your plugin must do the detect part already and use it to add mPS2id-highlight as required. Is there a way that I can use the same selector to run another block of code?
Thread Starter
rlinn
(@rlinn)
I’ve also been looking at the user defined callbacks. The onStart callback is probably already doing what I was trying to do with the click jQuery.
A callback like onHighlight that fired every time the highlight changed would solve the problem. I’ve looked at your source code and there’s no way that I’d be able to add that in myself.
I’m not making a feature request… just thinking out loud about solutions.
Thread Starter
rlinn
(@rlinn)
I’ve also been reading about user defined callbacks. It seems that onStart might do what I want my jQuery click to do. What I’m describing above would be the equivalent of onHighlight.
Plugin Author
malihu
(@malihu)
In this case, I think the best approach would be to toggle the class on window .scroll() event. You could do it by checking if mPS2id-highlight is present in elements #3 and #4 and toggle the class on the ‘More’ anchor accordingly
$(window).scroll(function(){
//elem: the element to toggle the highlight class
//hlClass: the highlight class name
var elem=$("#menu-item-57 a"), hlClass="mPS2id-highlight";
if($("#menu-item-29 a").hasClass(hlClass) || $("#menu-item-30 a").hasClass(hlClass)){
elem.addClass(hlClass);
}else{
elem.removeClass(hlClass);
}
});
Thread Starter
rlinn
(@rlinn)
malihu,
This is a great solution, and it worked with a simple copy and paste. Thank you for working through this with me. As a jQuery beginner, I’ve learned something (perhaps more than I needed to).
I’ll mark this as resolved but might check back in once I’ve moved the solution from the dev site to the live site so that you can see the end result.
Thread Starter
rlinn
(@rlinn)
OK, I finally grabbed an hour to make the changes on the live site.
The jQuery is:
jQuery(document).ready(function($){
$(window).scroll(function(){
//elem: the element to toggle the highlight class
//hlClass: the highlight class name
var elem=$("#menu-item-2654 a"), hlClass="mPS2id-highlight";
if($("#menu-item-2615 a").hasClass(hlClass) || $("#menu-item-2616 a").hasClass(hlClass) || $("#menu-item-2617 a").hasClass(hlClass)){
elem.addClass(hlClass);
}else{
elem.removeClass(hlClass);
}
});
});
jQuery(document).ready(function($){
$(document).on("click",".menu-item > a",function() {
$( this ).blur();
});
});
The CSS is:
/* Highlighting the main menu */
.mPS2id-highlight {
font-weight: bold;
padding-bottom: 10px !important;
border-bottom: 4px solid #9c3;
}
/* Remove highlight from submenu */
ul.nav-menu ul a {
font-weight: normal;
border-bottom: 0px;
}
