Off-canvas menu closing after click to a link

[dragosct]

If in the off-canvas menu exists a tags that are targeting an element from the same page and you click on them, the off-canvas menu will remain open after click. In the following lines of code I will put a way that will make off-canvas to close after click.

1. In the html page you have to insert the following attributes on a tags: data-scroll="true" and data-id="#something" like this: <a href="" data-scroll="true" data-id="#something"></a> for properly working javascript functions from the step 2. Then you must put an id="something" attribute on you're targeted element for example <div id="something"></div>.

2. You need to go in assets/js/ct-paper.js on line 100 and put the following code:

$('a[data-scroll="true"]').click(function(e){
        var scroll_target = $(this).data('id');
        var scroll_trigger = $(this).data('scroll');

        if(scroll_trigger == true && scroll_target !== undefined){
            e.preventDefault();

            $('html, body').animate({
                 scrollTop: $(scroll_target).offset().top - 50
            }, 1000);
        }
 });

 $('.navbar-collapse a[data-scroll="true"]').click(function(){
        setTimeout(function(){
            if(gsdk.misc.navbar_menu_visible == 1) {
                $('html').removeClass('nav-open');
                gsdk.misc.navbar_menu_visible = 0;
                $('#bodyClick').remove();
                 setTimeout(function(){
                    $toggle.removeClass('toggled');
                 }, 550);
            }
        }, 550);
  });

[IanBarker103]

Hi There,

I ubderstand how to add the IDs to links:

<a href="" data-scroll="true" data-id="#something"></a>

Where do you add the ID to your targeted element?

Here is a link to my build so far: http://www.ianbarkerdesign.co.uk/test/offcanvas-menu/

Any help with this would be much appreciated.

Regards,
Ian

[dragosct]

Hi @IanBarker103 ,

I opened your project and now I will attach modified js code that you must to overwrite with the old one that I wrote for you in the first comment. After you overwrite the code you have to add just the attribute data-scroll="true" on your a link. I hope that will help you.

Regards,
Dragos

$('a[data-scroll="true"]').click(function(e){
        var scroll_target = $(this).attr('href');
        var scroll_trigger = $(this).data('scroll');

        if(scroll_trigger == true && scroll_target !== undefined){
            e.preventDefault();

            $('html, body').animate({
                 scrollTop: $(scroll_target).offset().top - 50
            }, 1000);
        }
 });

 $('.navbar-collapse a[data-scroll="true"]').click(function(){
        setTimeout(function(){
            if(gsdk.misc.navbar_menu_visible == 1) {
                $('html').removeClass('nav-open');
                gsdk.misc.navbar_menu_visible = 0;
                $('#bodyClick').remove();
                 setTimeout(function(){
                    $toggle.removeClass('toggled');
                 }, 550);
            }
        }, 550);
  });

[IanBarker103]

Hi dragosct10,

I really appreciate you getting back to me and your help. I have updatd the code you suggested in the post abouve but the menu still doesn't close on click :-(

off_canvas.zip

I have attched my working files if you have time to look at it again for me.

I am only using this template for the Off-canvas menu so don't really need all of the other Js in the ct-paper.js file.

I do really appreciate your help as this is over my head really :-)

Thanks,
IanBarker103

[dragosct]

Hi @IanBarker103,

I watch over your files and I made a test and for me it's working. I will give you a link to see that the off-canvas from your project is closing after click. If something else it's not working please let me know because maybe I didn't understand the real issue that you have.

Regards,
Dragos!

video.zip

[IanBarker103]

Hi dragosct10,

Yes i have watched your video and this is exactly what i want it to do. Do you have the link to the files that you looked at?

Thanks again,
IanBarker103

[dragosct]

@IanBarker103, it's the same file that you gave it to me, I didn't made any changes. I just opened the index.html page and I saw that everything is working fine. I think maybe the problem is that the javascript is loading a little bit harder and you must refresh the page and then will work.

Best,
Dragos!

[IanBarker103]

Hi, Yes i get the same result but this only works when you refresh the page. Is there anyway to make this work without the need to refresh the page as must users will not refresh a web page?

There is also a lot of script in the ct-paper.js file that i don't need.

Thanks,
IanBarker103

[dragosct]

Hi @IanBarker103! I just update ct-paper.js with some modifications and now I think everything will work fine. All you need to do is to overwrite the old ct-paper.js file with the new one. Relating to the functions that you don't need in ct-paper.js you can delete all of them which you consider that aren't important for your project. Please let me know if everything is working fine!

Regards,
Dragos

ct-paper.js.zip

[IanBarker103]

Hi, that's perfect you are a superstar :-)

[IanBarker103]

Hi dragosct10,

I am having issues getting my contact form to work now. It works fine if i remove the ct-paper.js file. Only if you have time could you take a quick look at my files for me? Really don't worry if you don't have time as you have helped me enough already :-)

Regards,
Ian
build.zip

[dragosct]

Hi @IanBarker103,

Don't worry if I can I will help you with pleasure, but please tell me what is the problem more exactly because I have looked over your project and I don't figure out what is the problem with contact form.

Regards,
Dragos

[IanBarker103]

Hi dragosct10,

I have currently commented out the

`<!-- Contact Form JavaScript

<script src="js/jqBootstrapValidation.js"></script> <script src="js/contact_me.js"></script>-->`

at the bottom of the index.html page. When I tried to test this with the Contact us form in place nothing happens. When i remove the ct-paper.js file from the index.html file then re-test the form everything works ok. I have been testing this on my server.

So i'm just not sure what is in the ct-paper.js file that is conflicting with the Contact Form.

Thanks again and please ask for more description if i'm still not clear :-)

Regards,
Ian

[IanBarker103]

Hi dragosct10,

Do you know if you will be able to fix the contact form issue i have with my site?
I will just have to remove the off-canvas menu if not.

Regards,
Ian

[dragosct]

@IanBarker103 we've checked and it seems we get the same message if we have or not the ct-paper.js

From what we see the issue is coming from contact_me.php. Can you please check that file? Also can you send us some print screens with the ct-paper.js not working and without it working?

Best,
Dragos

[IanBarker103]

Ok thank you. Let me get the form working on my server then i will send you an update.

Regards,
Ian