How to hide a back button (in nav menu) if current page was opened with target="_blank".
in usual case this page is called as:
<a href="/about_us/" class="nav-li" >About Us</a>
in another case it is called with:
<a href="/about_us/" class="nav-li" target="_blank" >About Us</a>
The code at the target page for the back button is:
<label class="nav-li" for="back">Back</label>
<input class='Back' id = "back" type=button value="Back" onClick="history.go(-1)">
How to hide this button if opened as blank ???
Whole project is on Django
Just hide the button if the history object has a length of null less than 2 . This could be done with a css-class, pure css or direct with JS
[EDIT]:
I would add this to the onload event of the new form.
function init(){
if(history.length < 2){
document.getElementById('Back').style.display = none;
}
}
[...]
<body onload="init()">
[...]
You should heck the history object if the length is less or equal to 1 so it haven't a history, so you can hide your btn
window.onload = function (){
var hasHistory = history.length <= 1; //if has an history;
document.getElementById('cacca').style.display = hasHistory ? "none" : "block";
}
Related
I have a navbar like this:
Here is the relevant navbar HTML:
<div class = "navbar">
<a class = "active" href ="{% url 'keiji-home' %}">home</a>
<a href ="#" onclick = "makeActiveLink('communities-tag')"
id="communities-tag">
communities
</a>
feeling lucky
about
<div class = "navbar--right">
login/signup
</div>
</div>
I want to have the red background (class = "active") on the link (such as "home","communities","feeling lucky",...) when I am on that page. Ie: when on "about", the red background would be on about.
I am new to JS: here is my attempt so far from looking at other questions:
function makeActiveLink(id)
{
var selectedLink = document.getElementById(id);
selectedLink.classList.className += "active";
}
Then on the link, for example "communities":
<a href ="#" onclick = "makeActiveLink('communities-tag')"
id="communities-tag">
However, this is not correct.
Furthermore, I would like the "active" class to be removed from the previous link, ie when going from "home" to "about", the class should be removed from "home" and put on "about".
Not sure if this helps, but I am using Django (again new to that) to run this site.
This is what you are possibly trying to achieve:
function makeActiveLink(obj)
{
var links = document.getElementsByName("nav");
links.forEach(function(item) { item.classList.remove("active"); }
obj.classList.add("active");
}
And then in html:
home
communities
...
selectedLink.classList.className += "active"; delete "+"
And for the link "Home", made a name class="active done" and in the css, add .done {background: ...(your color)} and change the class with JS in your funtion.
I hope it's clear for you.
element.classList.className is invalid since they are different things.
This code should do the trick:
function makeActiveLink(id) {
//Remove 'active' from old link
var oldLink = document.getElementByClassName("active")[0];
oldLink.classList.remove("active");
//Add 'active' to new link
var selectedLink = document.getElementById(id);
selectedLink.classList.add("active");
}
getElementByClassName() searches for elements containing a certain class and returns a collection of elements, hence the [0] at the end.
Beware this does mean you can't use the active class anywhere else on the page. If this is an issue, consider renaming it to something like active-nav.
As a side-note, consider including all your code (including html) in a snippet to make it easier to help.
simply:
<div class="navbar">
<a class="active" href="{% url 'keiji-home' %}">home</a>
<a href="#" > communities </a>
feeling lucky
about
<div class="navbar--right"> login/signup
</div>
document.querySelectorAll('div.navbar > a').forEach((lnk,_,A)=>
{
lnk.onclick=_=>A.forEach(a=>a.classList.toggle('active',(a===lnk)))
})
I am not able to save active class for a div on page reload, when I click button in first div then its active class is removed and next class is made active. But when the page reloads in second div, how to save active class for second div when page is reloaded . i tried using local storage but i dunno that.
<div class="divs active" id="first">
<h1> first div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-first">Next - 2</a>
</div>
<div class="divs" id="second">
<h1> second div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-second"/>Next -3 </a>
</div>
<div class="divs" id="third">
<h1> third div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-third"/>Next -1</a>
</div>
<script>
$(document).ready(function(){
$('#btn-first').click(function(){
$('.divs').removeClass('active');
var activeID = $('#second').addClass('active');
console.log(activeID);
localStorage.setItem("activeDIV", activeID);
//var reloadactiveDIV = localStorage.getItem("activeDIV");
// var activeID = $('#second');
// localStorage.setItem('activeTab', $activeID );
// var activeTab = localStorage.getItem('activeTab');
// if (activeTab) {
// $('.divs').removeClass('active');
// $('#second').addClass('active');
// }
});
$('#btn-second').click(function(){
$('.divs').removeClass('active');
$('#third').addClass('active');
});
$('#btn-third').click(function(){
$('.divs').removeClass('active');
$('#first').addClass('active');
});
});
</script>
To achieve this you can store the index of the active div in local storage, instead of the entire jQuery object, and then re-set the active class on the element within the index of localStorage when the page is next loaded.
Also note that you can DRY up the logic by using a single event handler for all the buttons. You can find the parent .divs and retrieve the next one, looping back to the first if there is no next sibling. Try this:
$(document).ready(function() {
// set active on click:
$('.btn-link').click(function(e) {
e.preventDefault();
var $parentDiv = $(this).closest('div');
var $nextDiv = $parentDiv.next('div');
var $divs = $('.divs').removeClass('active');
if (!$nextDiv.length)
$nextDiv = $divs.first();
$nextDiv.addClass('active');
localStorage.setItem("activeDiv", $nextDiv.index('.divs'));
});
// set active on load:
var activeIndex = localStorage.getItem("activeDiv");
if (activeIndex)
$('.divs').removeClass('active').eq(activeIndex).addClass('active')
});
Working Example
Note that I couldn't place a working example in a SO Snippet as it has restrictions in place on accessing localStorage.
I'm getting an array of a tags by class selector and i want to click all these links
for example
$('.sample') returns
<a class="sample" href......</a>
<a class="sample" href......</a>
<a class="sample" href......</a>
when i call $('.sample').click() only clicks first element of array
.get(0) will lets you target first element in the array:
$('.sample').get(0).click();
Because when you do $('.sample').click() then first anchor element in the list will execute the click() and it will start to navigate to the specified href in the anchor, that is where document starts to unload and loads a new document in the window.
Detect the siblings and then click them like this:
$('a.sample').click(function(e) {
var curLink=$(this);
if (curLink.hasClass('clicked')) {
setTimeout(function(){
curLink.removeClass('clicked');
},500);
return false;
} else {
curLink.addClass('clicked');
$('p').append("<br>Clicked: " + curLink.text() + ';');
curLink.siblings().each(function() {
$(this).click();
});
}
})
.clicked{color:purple}
a{cursor:pointer}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="sample">1st link</a><br>
<a class="sample">2nd link</a><br>
<a class="sample">3rd link</a>
<p></p>
The timeout will remove the class allowing you to reclick them again. You can also delay each click by placing a similar timeout inside of the each loop.
I am writing a single page app with several divs that have the attribute data-roll="page". Pushing buttons fires ajax queries and the user is redirected to divs down the document like this
<body>
<div data-role="page" id="menu">
//bunch of nav buttons like <a href="#faculty">
</div>
<div data-role="page" id="faculty" data-theme="b">
//dynamicly loaded list of faculty
</div>
and so on.
I want to return to the menu div on refresh but no amount of scrolling
seems to work. Here is my JS with two attempts at getting back to the menu page on page load.
document.ready = init;
function init(){
var button = $('#facultyButton')
,facList = $('#facultyList')
,search = $('#facSearch')
,monikerBox = $('.monikerBox')
,events = $('#events')
,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
,html = "";
//executed on init
$('html').scrollTop(0);
//events
$(window).on('load',function(){
$('html').scrollTop(0);
});
button.click(function(){
var value = "a";
search.html( "" );
facultyAjax(value);
});
I also tried window.location= menu url (home) in various functions with disastrous results!
Set the window.location you want the user to view with the location object on the load event.
I put this in the html.
<body onload="location.href='#menu'">
this is probably an easy one, but I am new to JavaScript.
When I click on a tab which has a special id, I want that id saved in a variable. So far, so good. But if I click on a other button I want that button to work with that previous id oft he tab. How am I using the return statement correctly?
Thanks!
// 0 = no tab
var myTabID = 0
function doNewTab(newTabID)
{
// If the tab has not been set
if(myTabID <> 0){
// Do whatever you want with the tab ID in here
alert(myTabID);
}
// Set new tab ID
myTabID = newTabID;
}
Then in your HTML:
<a onclick="doNewTab(1)" href="#">Tab1</a><br />
<a onclick="doNewTab(2)" href="#">Tab2</a><br />
<a onclick="doNewTab(3)" href="#">Tab3</a><br />
var tabId = 0
function buttonClick(obj) {
tabId = obj.id
}
<button onclick="buttonClick(this)">Button</button>