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
Related
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
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.
I have embedded a ecwid store in my webage via iframe.
Whenever I load the page, ecwid automatically scrolls to the iframe, instead of the top of the page.
As seen here (ecwid: how to force the scroll position), ecwid's solution for this is to add the following DIV inside the {body} tag:
<div id="ecwid_product_browser_scroller"></div>
I've made a fiddle to try to make it work, but it won't happen. I do know that people have used the same code to force the bar not to scroll down, so I must be doing something wrong.
Here's the fiddle: fiddle
Notice that the store is forcing the bar to scroll down. I would like it to stay at the top so customers actually see the banner.
UPDATE:
Still don't know why the DIV does not work here fiddle. What am I missing?
We did manage to make it work inside the new fiddle but it does not work in my website
I think u want to do this
add jquery as i have done
http://jsfiddle.net/v3g20qxd/7/
I have added the pageYOffset and scrollBy in this
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.
I have a single page website which has large divs as a section/page. I have managed to get the anchors to work etc however the problem I am having is that the CSS a:active does not work in this scenario because the actual div is not linked to the anchor link at the top.
There is a span above each div which is the height of the header so that the sections do not get hidden behind it.
I was wondering if there is any way (using CSS/JavaScript) to get the anchor links to change color by themselves when the user is on a specific section of the page.
A similar example is on this web page if someone wants to see it, this site actually uses an indicator rather than changing the links color. However I'm sure they're using JS because when I do inspect element in Google Chrome, as the indicator moves the CSS also changes position.
I guess you can.
$('#specific-section').bind('mouseenter', function(){
$('a').css('color','yellow');
}).bind('mouseleave', function(){
$('a').css('color','white');
});