Docs

[tarekr]

Hello,

I would like to add a function to a button on my Home page
The function i want is on clicking the button to open the SF menu icon.
The SF menu is configured to slide on click but i want to add a button in the middle of the page having the function on clicking it to click the SF menu icon. In other word a click which triggers another icon click.

How to do it?

Many Regards,

[Christopher]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[tarekr]

Hi,
It is just a java script code to add in Cornerstone customization panel for Java.

I will do it alone.

Ok.

[Nabeel A]

Thank you for understanding!

[tarekr]

Hello,

I added a button using Cornerstone on my page https://tarekrabaa.com/about
After trying the Javascript code to open the icon on SF menu, the function is not working.

I tried this on another platform, the code works normally when i click the button it opens the side menu but when i add the code to Cornerstone, it is not working at all.

Please I need to know if Cornerstone support Javascript and why the click function is not working.

The ID i used for getElementByID is sfm-sidebar

Regards,

[Rad]

Hi there,

You mean this code?

document.getElementById("button1").addEventListener("click", function(){
document.getElementById("sfm-sidebar").style.width="100px";
});

It will not really work, and I’m not sure how it works on another platform. Because opening the menu is not just about adding the width, it also related to opacity and animation. Please replace it with this

jQuery( function($) {

$('#button1').on('click',  function() {

$('.sfm-navicon-button').trigger('click');

} );

} );

And it may not work due to caches, you have Autoptimize, RocketLoader, and probably CloudFlare too. I see that you’re still working on your site, then I recommend disabling all those cache and optimization plugins while you’re working on your site. Optimization is like polishing, do it only once you’re done with the development.

Thanks.

[tarekr]

Hello.
I tried the code. It is working on jsfiddle.net

Many Regards,
Tarek

[tarekr]

The problem is in the class name.
I tried the function provided on something else using the element ID i was able to click another button on click but i am not able to get the efficient class name of the icon since it is not working on Cornerstone.

I deactivated Cloudflare

[tarekr]

Hello,

It is WORKING NOW…….I changed the class for the icon and now it is working with your code.
It took some time, but at last it is working on my laptop

I added this url <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script&gt; before the code.
Still one problem, it is not working on mobile phone. I added ‘touchstart click’ but still not working.

Many Regards,
Tarek

[Rue Nel]

Hi Tarek,

Upon checking your homepage, there is a JS error. Please edit your page back in Cornerstone. You will need to update the custom JS code you have inserted and make use of this code instead:

 (function(){
  $(document).ready(function() {
    $(document).delegate('.open', 'click', function(e) {
        $(this).addClass('oppenned');
        e.stopPropagation()
    });
    $(document).delegate('body', 'click', function(e) {
        $('.open').removeClass('oppenned')
    });
    $(document).delegate('.cls', 'click', function(e) {
        $('.open').removeClass('oppenned');
        e.stopPropagation()
    })
  });
})(jQuery);

Hope this helps.

[tarekr]

Hello Rue,

1. Do update the code in Cornerstone while editing the page or i update in theme editor.

2. Do i add the code you provided to the previous code i already added?

My Regards,

[Joao]

Hi There,

You should replace the code.

If you added the code on Appereance > Customizer > Custom > JS – replace it there

If you addded the code on Cornerstone > Settings> custom JS – replace it there.

Hope it helps

Joao

[tarekr]

Hi,

I tried but it is not working.
The previous function worked only on Laptop browsers and not on mobile phones. On Laptop i am using click which works with click. But click function is not working on touch screens.
Also the delegate() method was deprecated in version 3.0.
If you click the button tarekrabaa.com/about , it is triggering the menu click on the Laptop but not on mobile phones
Any other way?

Rgds

[Rad]

Hi there,

Please remove this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

You can’t override WordPress jQuery with another jQuery without noConlict() declaration. And WordPress’s jQuery has that.

And for the fix, please change your code to this

jQuery( function($) {

$('#button1').on('click',  function() {

$('.sfm-navicon-button').click();
$('.sfm-navicon-button').tap();

} );

} );

SuperFly doesn’t use touchstart, touchend, and click events on mobile. But tap event.

Thanks!

[tarekr]

Hello Rad,

You are an expert.
Now it is working on both Laptop and all mobile phones.
I know now that with X-theme i can do what i want with the help of the support team.

Last issue with click function. I need to add another button for x-btn-widgetbar menu (located on the right hand corner of my home page tarekrabaa.com).
Do i use the same jquery expression to open the menu on clicking or taping the button?

Many Many Regards,
Tarek

[Author]

Posts