rlinn

Sorry Shawon,

The weekend interrupted our conversation. I have purged my LiteSpeed cache and am still getting an error on PageSpeed

<input type="text" name="g-recaptcha-hidden" class="wpforms-recaptcha-hidden" style="position: absolute !important; clip: rect(0px, 0px, 0px, 0px) !important;" data-rule-hcaptcha="1">

This seems to be like a problem with the WPForms plugin that should be addressed in a future release? Perhaps it’s not important. I know WPForms is a powerful plugin that has been developed with care and expertise for many years. But installing a plugin to fix a plugin doesn’t seem great to me, because WPCode looks complicated in itself.

Thanks

Thanks Shawon,

That didn’t work.

Thanks Paolo

I can confirm that for a subscriber, the redirect works correctly.

Thanks for your reply. I had tried that previously except I had used = instead of == after looking at get_post_type().

I have been able to modify your code to get the template working. Thank you.

Thanks for your reply. Your code gives neither the_content nor the_excerpt. I have a feeling that when is_search is TRUE then all the other conditionals (like is_singular and is_page) are FALSE.

I think that I’m going to need to use get_post_type() somehow.

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;
}

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.

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.

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.

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?

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?

Mark,

This is a link to my development site.

I have the following code working. I’m still not sure how the cloning works, when it happens and why it’s not cloning my event, but perhaps that is a problem for another day.

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");
  });
});

Thanks for your help.

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.

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.