Prevent Skrollr.js from scrolling to specific anchors - javascript

im using Skrollr.js for my website im working on for some smooth scrolling to links.
On the same page im making a form with two tabs, Sign up or Log in, which are anchors as well. So now if you click on the tabs to switch between Sign up or Log in, the page will scroll down to the Id's of the form and I cant prevent it from doing that. I guess there is a conflict with Skrollr or something.
Is there a way to disable Skrollr for specific functions or can i disable anchor scrolling for specific links?
I used jquery for event.preventDefault() but that doesnt work
Any ideas? Alternatives?
Thanks

Hmm, use other markup for the tabs, not anchor and change using javascript? also don`t use any id, class, data attribute that you use for skrollr on them.

Related

Weglot link hooks not working (on sticky header)

I am using Weglot (weglot.com) for translation on my site (aigle.ca). I'm using link hooks since their widget was not working properly.
https://developers.weglot.com/technologies/javascript#link-hooks
Which is fine, however when you scroll down on the page, our menu becomes sticky, and the links no longer work, they just anchor to the top of the page (due to it being a hash). I've also noticed that the "active" language does not show properly on scroll.
I've tried using e.preventDefault(); to stop this behavior, but that didn't work. I can't figure out why a sticky header would stop the plugin from working.
Does anyone know what would be causing it, or how to fix it?
It seems your sticky header is built dynamically so it destroys event listener on the Weglot button.
Can you replace in the link #Weglot-xx by javascript:Weglot.switchTo('xx')
For the style, you can also use a rule like
html.fr a.top_link[data-dropdown-rel='fr'] { text-decoration: underline }
Best

Trigger ZenScroll from external link

Is it possible to use ZenScroll (https://github.com/zengabor/zenscroll) to link in and scroll to a specific section from an external site? E.g. clicking example.com/#somesection on the first page and have it trigger with, say, the window history object?
Any ideas/directions are much appreciated.
There isn't a clean way to do it but you can work around it if you can control how the external site links to you site, and you don't mind if no scroll will happen in case JavaScript doesn't work in the user's browser.
Example:
External site links to https://yoursite.com/#somesection
However, the page https://yoursite.com/ doesn't have the any element with id somesection, so the browser won't automatically scroll anywhere.
Your custom JavaScript on this page detects that window.location.hash was set to #somesection which translates to #mysection so you invoke an animated scroll to that element:
if (window.location.hash==="#somesection") zenscroll.to(document.getElementById("mysection"))

Click event is not working smoothly in jquery mobile

I am working on the jquery mobile app and i use many pages for it.I move to next page and come back to some page then click is not working perfectly as first time i go to the same page click event working smoothly .so please help me.
I am not very sure if this works.May be this is happening due to rough page transitions. Try turning off all the page transitions of jquery mobile.As it is not very smooth with page transition.
Add this attribute to your anchor tags where you need to navigate. page-transition="none"
Also try the backface-visibility:none; in css.as given in this link
Update:
Disabling the ajax may help.
Add data-ajax="false" to your the <div> of page.

How can I preserve the state of my website after jQuery is executed?

I have a website that implements jQuery plugins like horizontal sliders and other java script elements. After clicking on link that is towards the right of the website, the page will slide that panel in which the link is contained over and drop down additional text. It will also redirect to another page. I want the user to be able to return to the website exactly as it was seen before redirection.
I looked into deep linking but found it insufficient; from what I've seen it relies on Ajax which I would like to avoid. If it can be done only with jQuery that would be optimal. How could this be implemented?
For reference, I am using the Spry Sliding Panels to slide to the new panel, and jQuery's slideDown() and after both these actions are clicked I'd like to save the current page's state in the browser's history.

Detect state of object from previous page

I'm working on a mobile site that is just a bunch of .html pages in structure.
In the header of the site I have a simple Show/Hide button that uses jquery toggle() to show or hide the banner. Works perfectly but when you switch to another page obviously the banner is displayed as it can't tell that on the previous page you chose to "hide" the banner as it's rendering a new .html page.
Anyways the question is with javascript, can I detect something about the previous page to indicate that the banner should be "shown" or "hidden" when loading the next page.
My initial thought was to fire something like a specific hash tag which could be picked up using JS and indicate that the banner should remain hidden or shown (depending on the hash). I'm just not in love with the hash idea as it is at best an ugly hack.
Any thoughts on how to detect a property of the previous page that I can then use in jquery or js to operate on the banner show/hide property?
You could save the status of the banner (opened or closed) in a cookie.
For info on JavaScript cookies, see here: http://www.quirksmode.org/js/cookies.html
Store.js is built for this. It's a cross-browser javascript library for storing variables locally.
https://github.com/marcuswestin/store.js

Categories

Resources