hi guys can any one have idea whenever i click from footer link a new page will be open and the will scroll to a specific content below is the screen shot. Condition is the website is in yii framework and nothing others.
You can create an anchor in your HTML with <a id="some-content"></a> and change the location to some/action#some-content.
using <a> you can create that functionality
<a id="travel">Travel Privileges</a>
and try to add #travel in the location bar
Ex:
http://somedomain/privileges#travel
Related
So, I want to refer to a particular part of a page, in react js
as we do using a Link .
But when I do it using an <a> anchor tag, the page is getting reloaded.
I dont want the page to reload and scroll down to that required part of the page.
For example, open reactjs documentation. : ReactDocs
and scroll down, There you see a Try React Heading, just as we hover on it, we do see a link icon , and clicking on it, we just scroll down and Try React Heading is the top part of the Page now.
Is there a way we can achieve that using the <Link>from React-Router-Dom </Link>
I want that feature, in react without reloading the page.
thanks in advance :)
I have seen on some landing pages on some websites that when you scroll down it jumps to the content regardless of how much you scrolled.
How would that be achievable with HTML/CSS/Javascript?
Thanks.
You should make in html id's to specified links, like that:
<a id="example1" href="#">TEST link1</a>
now in javascript you should get the position of this link by locating with DOM.
Here you can read about it: https://www.w3schools.com/jsref/dom_obj_all.asp
On 'scroll' event you can provide this on link position.
I'm using Bootstrap to create a single page portfolio, I'm using bookmark links to navigate the page, however I want the page to land earlier than the position it lands on, I am pointing to the div I assigned the Id to it. is there anyway to do it?
Let's say, you want to go to footer on click of Goto Footer link
Goto Footer
Then, the footer block should have
<div id="footer-block">Page Footer</div>
I've seen a few sites offer a tool that allows users to drag a button to their favorites bar and then when they click on it, no matter what site they are on, a div of some form would pop up on the page. When I looked at the url of the button that I had dragged onto my favorites bar, I realized that it was actually javascript code.
How is this effect accomplished?
This is called a "bookmarklet". You can create a hyperlink that contains the necessary JavaScript code, which they drag into their bookmark toolbar.
It is as simple as creating a hyperlink on your page containing the JavaScript as its href. For example:
<a href='javascript:alert("you clicked a bookmarklet");'>Drag me to your bookmarks</a>
See it in action at JSFiddle...
In order to make it look like a button, CSS is applied (borders, background color, etc.).
Try typing this in the location bar of your browser, when you press return the javascript will execute automatically:
javascript:alert('hi');
Bookmark 'scriptlets' work using the same notion. If you have an <A> tag as follows on your page:
<a href="javascript:alert('hi');" >Hello Scriptlet</a>
And you drag it onto your bookmarks bar, you'll create a scriptlet with the same behaviour.
When you hover over a hyperlink you see in the corner of your browser the url you're gonig to. I'm using javascript to navigate through my tabs div. When I hover over the tab I see the url. I would like to hide this. Is this possible?
Link to example
Don't do it! Clients like to see where links are going. This behavior isn't up to you.
The only thing you could reasonably do is set the link to go to nowhere, and set the onclick attribute with sourcecode that does a window.location.
If you don't use the "href" attribute, the link won't show up.
Simply do this:
<a id="tab1">Tab 1</a>
$('#tab1').click(function(event) {
switchTabs();
});
This will register a click event (using jQuery) on the link without displaying any URL to the user. This is the proper way for handling links that don't redirect the user.
Hide Text
Then in that function you can have a switch case statement which uses window.location to send the user to another page.
Downsides to this include alienating your users which disable Javascript, and search engines probably won't follow this link.