Develop Reference

How to prevent browser to follow href='#'

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

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.

How to load hyperlinked file to a targeted/certain a div dynamically?

I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.
Here are my links
<div id = "panel">
<p>
<a href = "home.html" target = "display">
<font color ="white">Home</font
</a>
<a href = "resort.html" target = "display">
<font color ="white">Resort</font>
</a>
<a href = "hotel.html" target = "display">
<font color = "white">Hotel</font>
</a>
<a href = "food.html" target = "display">
<font color ="white">Food</font
</a>
<a href = "rates.html" target = "display">
<font color="white">Rates</font>
</a>
<a href="reservation.html"target="display
<font color="white">Reservation</font>
</a>
<a href = "contact.html" target = "display">
<font color = "white">ContactUs</font>
</a>
</p>
</div>
This is where the content should be put in
<div id="display">
<iframe name="display"></iframe>
</div>

If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:
<name = "display">
To:
<iframe name="display">
I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.
There is no <name> tag in HTML, but there is a name attribute
Edit to explain iframes:
iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.
Making an iframe larger is no different than making any other element larger: just change it's CSS.

I have tried this. Use this code <JsFiddle Link> :
At first load the jQuery:at the top of the code
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.
<script>
$("a").on("click", function(){
//alert($(this).attr("href"));
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>
NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.

yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).
i think this will clear your query.
https://www.freshdesignweb.com/free-one-page-wordpress-themes/

Google Tag Manager - CSS selector challenge

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.

How to change a word in a h2 when certain page is clicked on

I'm trying to change a certain word in the title of a page dynamically with javascript depending on which link in the nav is clicked on. So for instance, if the "Asia" link is clicked I want the h2 to display: "You are in Asia" or if the "Europe link is clicked I want the h2 to say: "You are in Europe."
The html for the nav bar:
<div id="zone-nav">
<a href="" id="surge-btn"</a>
<a href="" id="latin-btn"</a>
<a href="" id="africa-btn"</a>
<a href="" id="asia-btn"</a>
</div>
The html I have thus far for the title that needs to be changed: `
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>`
I know I need to write a function to determine what link is pressed, but I am a little confused on how to approach this.

if you add some extra markup to your html, you can use a single jQuery event handler:
<div id="zone-nav">
<a class="zone-select" href="" id="surge-btn">Surge?</a>
<a class="zone-select" href="" id="latin-btn">Latin</a>
<a class="zone-select" href="" id="africa-btn">Africa</a>
<a class="zone-select" href="" id="asia-btn">Asia</a>
</div>
now the event handler:
$(document).ready(function() {
$(".zone-select").on("click", function() {
$("#zoneName").html($(this).html());
};
});

Firstly you need to deal with your duplicate id here:
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>
Note we cannot have the same id otherwise we don't know how to get an element by it's id. So remove the uneeded one on the h2:
<h2>You are in <span id="zoneName"></span></h2>
Then add event's to your a tags:
<div id="zone-nav">
<a onclick="update('Surge')" id="surge-btn" >item1</a>
<a onclick="update('Latin')" id="latin-btn" >item2</a>
<a onclick="update('Africa')" id="africa-btn" >item3</a>
<a onclick="update('Asia')" id="asia-btn" >item4</a>
</div>
Note: This can be done purely in JavaScript or be done easily in jQuery. But since you did not mention it I will not be using jQuery. We could iterate through by ClassName and have the links be a class, but that's no more simple then the way above.
For the JavaScript we need to return false to prevent the default behavior of a anchor tag:
function update(text) {
document.getElementById("zoneName").innerHTML = text;
return false;
}
Here is a working Fiddle
Would there be a way to keep the updated text in the even if the page reloads?
Yes there is a way to do this without having to use a server-sided language. What I will do is use HTML 5 web storage, note this will only work for browsers that support HTML 5 (which is all of the modern ones), you can use cookies if you need support for older browsers that work similarly for the following example. In this case I will be using sessionStorage which saves the information even until the browser is closed.
I will emulate a href to the same page for the <a> tags, we need to do this because we need to save out information before we move to a new page. After I save I will call location.reload() that will act as a refresh. Note that you could make this move to an entirely new page as well, just include the script on the new page and use window.location.href = "newPageUrl" ( jsfiddle prevents me from moving to a new page ).
The HTML will be the same but the JavaScript will be updated as followed:
window.onload = function() { // When the page loads
if(sessionStorage.zoneName) { // Check if the session exist
// update the page with the session info
document.getElementById("zoneName").innerHTML = sessionStorage.zoneName;
}
}
function update(text) {
sessionStorage.zoneName = text; // store the text into a session called "zoneName"
location.reload(); // reload the page
return;
}
Here is a working Fiddle

Here's an example of what you could do for the africa-btn (this will require jQuery, I hope that's alright):
$(document).ready(function() {
$("#africa-btn").on("click", function() {
$("#zoneName").html("Africa");
};
// Other buttons here
});
What this is doing is attaching an action to the "click" event of the africa-btn anchor tag. When it's clicked it should update the span's html as described above. You can add further click events in a similar way.
Using $("#africa-btn") to bind the click event is a way to do it specifically for that one button, so you'll have to do it for each id.

This would update the selected zone in the dom
<div id="zone-nav">
<a id="africa-btn" onclick="updateZone('africa'); return false;"> </a>
<a id="asia-btn" onclick="updateZone('asia'); return false;"> </a>
</div>
function updateZone(countryName){
document.getElementById('zoneName').innerText = countryName;
return false;
}

are you looking for something like this :
Simple html and javascript only:
http://jsfiddle.net/q9L37c32/
Asia