We Keep Coding

Is there a way to disable href link / links if the user is already on the page the href link / links leads to, without using JQuery?

So I have something like this in my html:
<a id="one" href="/index.html"> HOME </a>
<a id="two" href="/something.html"> SOMETHING </a>
<a id="three" href="/again.html"> AGAIN </a>
and if for example user is on page linked "..../index.html" and tries to click on "HOME" link button, it does nothing or fake redirects or its disabled to be clickable, same goes for other href buttons if the user is already on the page the buttons are redirecting to, and user tries to click on them, I have been looking everywhere but all solutions for this problem requires you to use JQuery, and I would like to not use libraries as much as possible, any solutions?

For simplicity, add a class to all menu links in which you want this behavior
<a class="locationLink" id="one" href="/index.html"> HOME </a>
<a class="locationLink" id="two" href="/something.html"> SOMETHING </a>
<a class="locationLink" id="three" href="/again.html"> AGAIN </a>
And check this:
var links = document.getElementsByClassName("locationLink");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
break;
}
}
Basically, you get all links and check only your locationLinks. If the current url is equals to the href, you add an event listener that blocks the navigation. Maybe you need some debugging in the "location.href == link.href" because relative/absolute urls (you can refer to https://stackoverflow.com/a/44547904/18452174) but it's working.
If your menu can change dynamically, you can try this other approach:
document.addEventListener("click", function (event) {
var link = event.target;
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
}
}, false);
You do the same but check the condition in each document click instead only one time in document load.

Javascript click button function under certain div

This is the code of a button in one html page
<a class="btn" role="button" href="#">Click me</a>
I have this javascript code to click a button with a certain class
var clickBtn = document.getElementsByClassName('btn');
for(var i=0;i<clickBtn.length;i++)
{
clickBtn[i].click();
}
This code clicks every button with the class "btn" in ALL the page.
But there are some other buttons in the same page with the same class.
So i want my javascript code to be modifided to click
only a certain button in a certain div.
The code with the div is
<div class="inside">
<span>
<a class="btn" role="button" href="#">Click me</a>
</span>
</div>
Any idea of how can i modify my javascript code to click only the button inside that div??
Thanks for your time.

You can use querySelectorAll()
Array.from(document.querySelectorAll('.inside .btn')).forEach(btn => {
alert(btn.innerHTML)
btn.click();
});
Or without es6:
[].slice.call(document.querySelectorAll('.inside .btn')).forEach(function(btn) {
alert(btn.innerHTML)
btn.click();
});
DEMO
Updated for your comment (Can you update your code that if there is an id in the span like not to click the button?):
[].slice.call(document.querySelectorAll('.inside .btn')).forEach(function(btn) {
if (btn.parentNode.id != 'clicked') {
alert(btn.innerHTML);
btn.click();
}
});
or you can use querySelectorAll() with a :not condition to avoid the if check:
Array.from(document.querySelectorAll('.inside span:not([id="clicked"]) .btn'))
.forEach(btn => {
alert(btn.innerHTML)
btn.click();
});

If you want a non-jQuery solution, you can use getElementById to get the div, and then getElementsByClassName to get all the buttons within that div.
var insideDiv = document.getElementById("inside");
var buttonsInsideDiv = insideDiv.getElementsByClassName();

var parentDiv = clickBtn[i].parentNode;
var clickBtn = document.getElementsByClassName('btn');
for(var i=0;i<clickBtn.length;i++)
{
var parentDiv = clickBtn[i].parentNode;
if(parentDiv == yourDiv)
{
clickBtn[i].click();
}
}
I am not sure, var parentDiv = clickBtn[i].parentNode will work. But the idea is the same.

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});

Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.

How can I use this button in both the body and footer?

I would like to have the button in both the body and footer but it seems like it can't access the menu and if I paste the menu in the footer as well it doesn't let you click the footer one and instantly closes the one inside the body.
<!-- Connect Menu -->
<div id="menu">
<nav>
<a href = "mailto:adamshort1994#gmail.com" target = '_blank'>
<img border = '0' src = 'images/emailicon.png'></a>
<a href = "http://uk.linkedin.com/in/shortadam/" target = '_blank'>
<img border = '0' src = 'images/linkedinicon.png'></a>
<a href = "https://twitter.com/addrumm" target = '_blank'>
<img border = '0' src = 'images/twittericon.png'></a>
</nav>
</div>
The button's function:
<a id="openMenu">CONNECT</a>
<script>
$("#openMenu").click(function() {
var menu = $("#menu");
if ($(menu).is(":visible")) {
$(menu).animate({width: 0}, 1000, function() {
$(menu).hide();
});
} else {
$(menu).show().animate({width: 100}, 1000);
}
});
</script>
How would I go about putting the button in the footer and have the two scripts work together?

Your issue is being caused because you're using multiple of the same ids which must be unique. Change them to use classes instead.
<a class='openMenu'>CONNECT</a>
...
<a class='openMenu'>CONNECT</a>
JS
Refer to the button using the . character.
$(document).ready(function () {
$(".openMenu").click(function() {
var menu = $("#menu");
if ($(menu).is(":visible")) {
$(menu).animate({width: 0}, 1000, function() {
$(menu).hide();
});
} else {
$(menu).show().animate({width: 100}, 1000);
}
});
});
After looking at your source, the problem is occurring because you're setting up the event multiple times. Just add the above JavaScript once to your code, not once per button, as it attaches the event to both buttons. I put it in document ready to ensure both buttons are loaded when it's called.
The reason that both buttons act differently is because the when the first $(".openMenu").click() is setup only first first button exists, on the second one both buttons do. So it calls the show and then hide code immediately for the first button.

Analysing button in html to check if can register for events

I want to register for events on a button in a web page using javascript addEventListener or something equivalent. But the web page doesn't appear to have standard form buttons. The html snippet below is the html markup for what appears as a button on the page.
I want to detect mousedown (or mouseclick or equiv). Is there any way I could detect the user clicking on this button?
<a href="javascript:" id="WIN_0_536870914" arid=536870914 artype="Control" ardbn="Dial" artcolor="null" class="btn btn3d arfid536870914 ardbnDial" style="top:247; left:115; width:46; height:21;z-index:1001;">
<div class="btntextdiv" style="top:0; left:0; width:46; height:21;">
<div class="f1" style=";width:46">Dial</div>
</div>
</a>

The only tricky bit will be getting the elements from the DOM in the first place. If you know the id then it's trivial to get this specific button:
var elem = document.getElementById('WIN_0_536870914');
elem.addEventListener('click', function () {
alert('click!');
});
http://jsfiddle.net/ugsYB/
Although you probably want to target all the buttons by their class:
var elems = document.getElementsByClassName('btn');
var i;
for(i = 0; i < elems.length; i++) {
var elem = elems[i];
elem.addEventListener('click', function () {
alert('click!');
});
}
http://jsfiddle.net/ugsYB/1/ (Note: there are cross browser issues with getElementByClassName)
Of course, jQuery makes this sort of thing trivial:
$('.btn').click(function () { alert('click!'); });
http://jsfiddle.net/ugsYB/2/
But it might be overkill for your needs.