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');
Related
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');
}});
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 am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
I have this variabele.
var href = $(this).attr('href');
I get the href from a link. Now i have a lot of display none div's on the page. I want to check if the div have the same id. The id that is in the href. Then the div must be show.
How can i make that check?
Concatenate your href variable with a number sign to produce a jQuery ID Selector, and call .show() on your returned object:
$('#' + href).show();
From my understanding you have a bunch of hidden DIVs that you want to show based on the anchor ID. the code below should work however you should not have more than one ID on a page no matter what element it is assigned to. Best practice is to use classes. It would work the same.
// create a click function for the anchor tag
$('a').click(function(){
//grab the id of the selected anchor tag if if has one if not it will be undefined.
// $(this) represents the current anchor tag in the scope of the click function.
var href = $(this).attr('id');
// look for any other element with the same id and set it to show.
$('#'+href).show();
// cancel the anchor page action.
return false;
});
that's True when using JQuery Selector you can Use Exact
$('#' + href + '').show();