Active Anchor Link Colour Change On The Header - javascript

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

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

Anchor links not working with JS generated content

I am using Mustache.js to generate content. Another page contains anchor links that link to content generated by Mustache. The anchor links from the other page are not scrolling the browser to the appropriate content. I assume this is happening because the content has no height when the page first loads. The content height will vary, so I cannot hard code the height. Any ideas on a simple solution? This appears to be Chrome only (so far), and happens only occasionally.
I ended up setting a height for the elements in question.

Sliding page transitions with new content pre-loaded underneath

I am working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.

Seamless page loads

I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.

How to move to the foot of the web page dynamically

I have been asked to move the focus of the web page to the bottom of the page from the click of a button. I've tried using Focus() but that doesn't seem to work, which I think is something to do with the Postback.
Does anyone have any other ideas how to do this?
Add an anchor (A tag) just above the footer (or at the top of the footer content), and assign a name to it; e.g.
<a name="footer"></a>
This will not be visible. However, it allows you to add #footer to the URL and the browser will scroll down to it. For example, add another link:
see footer
Test how it works on this example:
How to move to the foot of the web page dynamically
Notice #9115063 in the URL above.
If you look at the source of this page, close to the top of this answer, you'll find this:
<a name="9115063"></a>

Categories

Resources