I'm trying trying to link to specific sections of the page below using the ID anchor tags. You can see they work when you're on this page: http://lastergroup.com/epe/epe19-240/dev/education.html, but when you navigate to other pages of this site, and click on any of the links on that dropdown menu, none work. What am I doing wrong? I have my IDs and links in place:
<div id="solarenergy">
Solar Energy
I found what was happening. After some research I learned that I have to use the anchor right before the div section I want to link to:
<a name="div1"></a>
Link
Related
i know <h2>Hamburger</h2> are good, but how about this:
<div><h2>Food » Hamburger</h2></div>
or thats are ok for google seo?
The tag with an anchor link inside it will work same as a normal tag for Google SEO. Both the methods are Ok, but the problem that can occur is your readers may go away because you added a hyperlink in the Heading text of your webpage. So, it is not a good practice to use hyperlinks in tags or any tag.
So I am trying to create a one page site and I only want the navigation links to scroll to anchor links upon click. I am wondering though why the activeClassName does not work when I click those anchor links. What I noticed is that the active link that shows upon clicking the anchor links is the parent link.
I have already tried using partiallyActive={false} to the parent link but still nothing happens.
So this is my code:
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/" partiallyActive={false}>
Home
</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/#portfolio">Portfolio
</Link>
</li>
I expect the "Portfolio" link to be highlighted upon click but the highlight remains on the "Home" link. The url changes too but the activeClassName does not transfer from "Home" to "Portfolio". What could be going on here? Does activeClassName not work for anchor links?
As explained on the Link docs, you can't use a hash with Gatsby's Link:
Neither <Link> nor navigate can be used for in-route navigation with a hash or query parameter. If you need this behavior, you should either use an anchor tag or import the #reach/router package —which Gatsby already depends upon— to make use of its navigate function...
Also note that if you set partiallyActive to true on the "/#portfolio" link, then the "/" link will be highlighted given that "/#portfolio" also matches "/".
I have the following link on my website:
<a href="/pages/getting-started-step-2-of-5" title="Next Step">
<span style="text-decoration: underline;">Next Step</span>
</a>
It works fine, however, would it be possible to change it so that when the link is clicked and the new page is opened it does not automatically scroll to the top of the page? i.e. the new page is in the same position as the previous page was?
Yes, if you read about Internal links.
Yes it is possible using HTML tags.
You should be using anchors.
You can have named anchors to jump to.
<a name ="jumphere">here</a>
You can jump to named anchors by using there names after a #.
http://somedns.com/index.php#jumphere
more info
Named anchors are no longer supported in HTML5 - use id instead in HTML5 pages.
On this site we've implemented Jquery Address to remember and load ajax content correctly
when using back/forward buttons in the browser.
The problem have arisen with links that has regular anchor points, that is:
<a href="product.php?prodid=5" name="product5" />a product link</a>
the purpose of this is of course to make brwoser scroll down to same position
you were before clicking the link and clicking back (this is a product listing page for the record).
Is there a way to exclude (or not include) certain links that jquery adress catches?
You could just exclude all of the links with a name attribute:
// Use this selector when initializing jQuery Address.
$('a:not([name])').address()
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.