It's little complicated for me (even to explain) but I try.
I have a footer with couple of specific links which should:
direct users to another page
and then to specific tab by adding a class "active".
That another page has tabs which works with "active" classes. So if user clicks one of the tab it becomes active (as it gets class "active"). Now I somehow need a solution so if user clicks on a link in footer (no matter the page) it directs to that page and also makes that certain tab active.
E.g I have tabs "Wood", "Stone", "Sand" which all gets the same "active" class after it has been clicked. Now I have a footer with same links "Wood", "Stone", "Sand". And if user clicks on one of the links in footer (no matter the page) it should be directed to that specific tab.
Basically I can direct user to those tab section as it has id (link-url#id) but can't figure out how to also add class so it becomes active.
I thought this could be done with js or jquery but as I searched for solution it seems it's not possible. I can also use PHP (if it's server side related) but not sure how.
EDIT:
Thanks for guidance! I managed to create one solution. Not sure if it's the best but it works as needed.
direct users to another page - just add regular url with id to a link. E.g "mypage.com/pagename#wood
And then to specific tab by adding a class "active" - code below
jQuery(document).ready(function( $ ){
// if url includes my page name with id
if (window.location.href.indexOf("pagename#wood") > -1) {
// add class active to div which has id of wood and remove active class from other siblings
$('#wood').addClass("active").siblings().removeClass('active');
// add class active to tab content div which has id of wood-content and remove active class from other siblings
$('#wood-content').addClass("content-active").siblings().removeClass('content-active');
}});
This is NOT possible with classes, because the class in HTML is an attribute that can be same for many tags, and if it works with the class the browser confuse which class you call, so it is a general rule that every browser follow it.
It is possible only with ID, as you said.
you can see this link for different between ID and CLASS.
For a single web application you can create a function that will triggered every load of the page, something like
function handlerTag () {
const url = new URL(document.baseURI)
const hash = url.hash.replace('#', '')
// add your logic for the 'active' class
}
url API
**you can change as per your logic. or you might have #Key with url find it and add class **
$(document).ready(function () {
$(function () {
debugger;
$('.side-navbar a').each(function () {
var currenturl = $(this).attr("href");
if (currenturl.indexOf('?') > 0) {
currenturl = currenturl.split('?')[0];
}
if (currenturl == window.location.pathname) {
$(this).parent().addClass("active");
}
});
}); });
HTML
<nav class="side-navbar box-scroll sidebar-scroll">
<ul class="list-unstyled">
<li>
Dashboard
</li>
</nav>
direct users to another page - just add regular url with id as a link. E.g "mypage.com/pagename#wood
And then to specific tab by adding a class "active" - code below
jQuery(document).ready(function( $ ){
// if url includes my page name with id
if (window.location.href.indexOf("pagename#wood") > -1) {
// add class active to div which has id of wood and remove active class from other siblings
$('#wood').addClass("active").siblings().removeClass('active');
// add class active to tab content div which has id of wood-content and remove active class from other siblings
$('#wood-content').addClass("content-active").siblings().removeClass('content-active');
}});
Related
I have a script where clicking on a particular div (eg id=packtoa) will (amongst other things) .addclass('show') to listview items with a class which matches the id of the div clicked.
Which works great, but then I'll want the next div (id=packfhag) to do the same thing, and then the next one. So I've got the same script many times in my js with just the id & class name changed.
I'm sure there's a stupidly obvious way to automate this so that any div with an id starting with "pack" will trigger this script, pull the div id, and insert it into the script where the name of the class is called.
And I'm sure I'm close with trying to adapt this script:
$("div[id^=pack]").each(function() {
var match = this.id.match(/\w+$/)[0];
$(this).addClass('show');
});
But I just can't crack it. Either something above is wrong, or I'm inserting it into the wrong place in the script:
// Tears of Ameratsu menu functions
$(document).bind('pageinit', function() {
// When link is clicked
$('#packtoa').click(function() {
// collapse the expansions menu
$("#expansionsmenu").click();
// hide everything except this expansion
$(".hidden").removeClass('show');
$(".packtoa").addClass('show');
// clear the search, and trigger a blank search
$('input[data-type="search"]').val('');
$('input[data-type="search"]').trigger("keyup");
});
});
What am I missing?
// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");
The best option is to use class attribute, add class attribute to all those div, and then
$('.commonClass').addClass('show');
For Example :
// this is for testing
// say you click
$('#test').on('click',function(){
$('.testclass').addClass('show');
});
.testclass{
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>
<input type='button' value='Click me to view div' id='test' />
I've got a navigation set up with links to anchors on specific page.
This works when on that specific page, but how can I add the class when coming from another page on my site?
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".sub-menu > li > a").on("click", function(){
$("a.active").removeClass("curlink");
$(this).addClass("curlink");
});
});
});
</script>
Simply pass one more hidden input element say with id navigator
when you are clicking on a link with id #a1 then set this hidden element value to "a1"
Send this element with form
On receiver page check for value of this element say $("#navigator").val();
On the basis of the value of this, which is "a1" in this case, set CSS of link with id a1 whatever you want, using $("#a1").css();
Another method is that on every hyperlink add a GET parameter and receive on the receiver side and on the basis of its value set CSS.
Let's say there are 3 links with id a1,a2,a3
Add a parameter say cameFrom in href URL e.g. href=".../*.html?cameFrom=a1" for link a1 and href=".../*.html?cameFrom=a2" for link a2 and so on
On receiver page get its value by using this function:
function param(name){
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
Use param(cameFrom) and get result.
Link to this function
There are many ideas/ways to achieve this, but if you have separate file which contains navigation code then you can do one way,
you can put in a hidden element with value of id of the <a> tag of menu of navigation. So when you land on the page and found that id value from the hidden field in jquery, you can make that <a> of navigation activated. I mean you can apply active class to that menu.
Tell me if this is not clear, I would try to make it simple.
In simple words,
Add one hidden element in your separate pages like <input type="hidden" value="about_us" id="nav-menu">
And in your master page,put jquery to get this value like:
var nav_menu = $('#nav-menu').val(); so in nav_menu you will have about_us as its value.
Now, in main master view file, you can write jquery to add active class for relevant manu like: $('.sub-menu > li > a').removeClass('active');$('#'+nav_menu).addClass('active');
How can I target another ID when the page reloads? For below example, from another page it will bring parameter and redirects to this page, if the parameter is "EM" the page will auto target the module "eMOTOR" .
https://test.e-cover.com.my/shk/test/test2.jsp
You can use a common class for example button and to get the id use e.target.id . To reload the url use window.location.replace
$('.button').on('click', function(e){
window.location.replace("https://test.e-cover.com.my/shk/test/test2.jsp?target="+e.target.id);
//alert(e.target.id);
});
You can put the parameter in query parameter eg:https://test.e-cover.com.my/shk/test/test2.jsp?target=EM. After that there are 2 options: (1) read it in the servlet and render class active to the tab or (2) do the same thing using js
EDIT
There may be a better way if you check the library doc, but you definitely can select the tab with jquery:
$('.search-box li').removeClass('active')
$('.search-box li').eq(1).addClass('active') // index 1 = eMOTOR
Of course it would be better if you add an id or class to the li, eg emotor:
$('.search-box li').removeClass('active')
$('.search-box li.emotor').addClass('active')
I need to have an accordion element disabled until the user enters some stuff in another accordion element. I have this setting for the HTML:
...
<ul>
<li><a id="subject_link" href="#subject"> Paciente </a></li>
<li><a id="general_link" href="#general" class="disabled">Información General</a></li>
</ul>
...
It has a bunch of other elements but to make a point I think this will suffice.
Notice that general link has a "disabled" that is meant to prevent the user to go navigate into that part of the HTML without doing some stuff first. This is currently being done like this:
$(".disabled").click( function(){
$( "#subject_link").click()// Scroll screen to target element
alert("You need to enter subject ID first");
});
The above code alerts the user to enter the ID first and returns him to the corresponding accordion element. Then, when the user enters the subject id, I trigger the class removal:
if($("#tab0").valid()){
$.post( url , values);
// alert( "Data Loaded: " + str );
$("#general_link").removeClass("disabled");
$("#general_link").click();
The above removes the class successfully (both the markup "class=disabled" that no longer appears and styling suggest that) but clicking on the now not-disabled element still triggers the function meant for ".disabled" (alerts the user for missing ID and navigates to corresponding element).
What am I missing here???
Or use event delegation so when an event occurs the target element will be re-checked again against the selector. So use this instead:
$(document).on("click", ".disabled", function(){
$( "#subject_link").click()// Scroll screen to target element
alert("You need to enter subject ID first");
});
NOTE: the document here could be any of the parents of .disabled element. The closest that parent is the more quicker the ckeck will be. (I don't know about the rest of your HTML, so if you have that UL inside a DIV that can be selected then put that selector instead of document in the above code)
You have to use .off() method to detach that functionality:
$("#general_link.disabled").off("click");
$("#general_link").removeClass("disabled");
I have a series of link on my pages with random a:hover classes so they display different colors on mouse over.
When a link is clicked its set to a different class so that it looks highlighted or active.
I need to create a script that first saves the class of the clicked link and then after it is changed and a new link is clicked finds the highlighted element and changes it back to the original class it was before changing the new active link.
What is the best way to store the class of the link until the new link is called.
Something like:
Get the class of the previous highlighted link from a variable?
Set the previous link to its original class.
Store the current class of the new link.
Set the element as the current highlighted link.
var old_link = null;
function store(ele){
old_link = {
cn: ele.className,
r: ele
}
}
function restore(){
old_link.r.className = old_link.cn;
}
I'd do this slightly differently.
For any links that you want included, they should all have the same class, let's say 'link-class'.
When you click on a particular link you'll want to add the class of 'selected' to that link, but first you'll want to remove the 'selected' class from all links on the page with the class of 'link-class'.
In jquery it would look like
$('a.link-class').click(function() {
$('a.link-class').removeClass('selected');
$(this).addClass('selected');
});