So I have a number of dropdown links on my main navigation that need to link to other landing pages and scroll or show specific part of that page, like an article or a specific service. I have went through a lot of examples here but can't get this to work:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data#broadband/'">BROADBAND & MANAGED INTERNET</a>
The above link should anchor to this div on another page:
<div class="row broadband-block" id="#broadband">
At the moment it lands on the page it needs but doesn't go to the anchor div that it's supposed to,but it does add #broadband to the url in the browser. What am I doing wrong and what would be the best solution, as I have quite a few links like that to do?
Your problem is the ID attribute. Remove the # from your ID and it should fix your problem:
<div class="row broadband-block" id="#broadband">
<div class="row broadband-block" id="broadband">
Or adjust your 'a' tag and add an extra '#' to the front of your url:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data##broadband/'">BROADBAND & MANAGED INTERNET</a>
Also, javascript onclick not needed unless this is what your application environment requires, it can all be done inside href attribute.
you should do this
<a class="dropdown-item" href="/voice-data/#broadband">BROADBAND & MANAGED INTERNET</a>
just use the href instead of onclick.
and the ids should match, at the current state you should be using ##broadband
while you should use the id as follows:
<div class="row broadband-block" id="broadband">
Edit: #pointy pointed it out (no pun intended)
Related
Hello recently I'm facing a new problem. I used a custom html code in the middle section of my website. After implement the html my website automatically go to that section after loading. I think this is the culprit:3
<div class="results" id="results">
<a class="domain" href="#" id="domain">helloworld.com</a>
</div>
Here there is an hash tag that force browser to go to this particular section. That is to say I used "javascript:void(0)" instead of # but nothing improved.
My question is how can I push browser to say header and not to follow that result id.
Simple use javascript
It will changes hash in url from anything to your required header
Make sure your header has the id attribute header.
window.location.hash = "header";
You can prevent the browser to follow a link (with an assigned href) with some simple JS code:
document.getElementById("domain").onclick(e => e.preventDefault());
Where e is the Click event object.
Although a javascript:void(0) on the href property should do the trick too.
You should probably also set the link's rel property to nofollow, like this:
<a class="domain" href="#" id="domain" rel="nofollow">helloworld.com</a>
href # is not appending to end of URL
I have written the html page on which one of the anchor tag has href "#". Whenever I am clicking on it, # is not appending at the end of URL path in browser. Same functionality is working in different websites. Please suggest..
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-location-pin"></i>
</a>
</li>
My current url is "http://localhost:8080/add/AddDocument.html"
After clicking on the link i should get "http://localhost:8080/add/AddDocument.html#"
But i am getting this "http://localhost:8080/add/#"
This issue is solved.
There is <base href=”/”> tag present in my html which was loading alternative html link while clicking on href="#".
Thanks for all your help.
Usually, it is to link to part of a page ('#about'). If it is just there instead of being empty('#' vs. ''), it prevents the page from being reloaded on click.
Normally, you define it like this:
<div id="about"></a>
In order for your href to have a clickable link ie a web address, by placing the hashtag symbol, you refer the element (image,text, video etc) as a href if the website link is either not yet available or if it’s in the same page you can use the hashtag followed by the id name.
Also please check your routing.
Need to know how to hide the link "IWS" when accessing to certain country base on URL
www.xxx.com/US/en - it will show up IWS link
www.xxx.com/SG/en - it will hide up IWS link
<div class="linklist-title">Policy & Services</div>
<div class="linklist">IWS
<a target="_blank" href="http://.com">PS</a>
WSP
WSA
ACC
</div>
Are you using jQuery? If so, try something like:
if(location.href.match(/sg/i)) {
$('.linklist:contains("IWS")').hide();
}
You should think about using a more generalized title for this kind of issue.
I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)
This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.
Is there a way of using javascript/jquery to test if a clicked hyperlink is going to the current page (ie anchor tags) vs going to a different page.
If my current url page is http://www.mypage.com/mypage/index.html
If so, I want to ignore these instances:
<a href="#">
<a href="index.html#anchor5">
<a href="#mytitle1">
<a href="//www.mypage.com/mypage/index.html#anchor1">
<a href="mailto:xxxxxxxx#gmail.com>
<a href="tel:+12344555">
And also ignore other instances that I might have missed above that references the current page with a href tag.
Thanks