Here is my scenario, my sub pages are not recognizing the parent, probably cause I set the structure bad, however going to back to fix that is not an option for now, problem the menu parent is getting the parent class in the wrong places....
So what I need to achieve...
if I have this url structure: domain.com/products/.... assign "current" class to menu X...
If I have this other: domain.com/sales/..... assign "current" class to Y....
I know I can do it via javascript, however I lack of knowledge of it, I'm just looking for a solid starting point.
I would appreciate any help.
Thanks in advanced.
You can check the url and do your class assignment like this:
if(document.location.href.indexOf('products') > 0){
$("#somediv").addClass("current");
}
Without providing some sample of you're structure I can't really put together a more meaningful sample but you can see maybe how this would work out.
Related
I want navbar to underline the currently visited page just like in the below picture-
A way I find works for me is to just check the path current url of the page with location.pathname and compare it with whatever you want to name it, and then apply the appropriate class to it.
Here is some example code:
const pathMap = {
'/': document.getElementById('home_nav'),
'/about': document.getElementById('about_nav'),
'/contact': document.getElementById('contact_nav'),
'/projects': document.getElementById('projects_nav'),
};
const path = location.pathname;
if (pathMap[path]) {
pathMap[path].classList.add('active');
}
You have to add this code to wherever your navbar is located. Keep in mind there might be better ways to do this, but if you only run this code where your navbar exists then there should be no problem. Another draw back is that this way does not support nested paths, so lets say you are at /projects/cat-hotel then it won't work properly, of course you can do some RegEx to solve this but I am just showing you an example.
I have used these two solutions and they worked just fine for me.
https://css-tricks.com/forums/topic/how-to-keep-the-page-highlighted-on-the-nav-bar/
https://css-tricks.com/forums/topic/highlight-nav-links-when-scrolling-the-page/
Hello I currently have this inline JS on my wordpress navigation menu
login
I was told it is better to use a regular menu item then just give it a class then target the class with some JS. I tried searching for examples but can't find that works for me. Could someone share a sample code to point me in the right direction?
thanks
I think this is what you are told.
var link = document.querySelector(".js-link");
link.addEventListener("click", (e) => {
e.preventDefault();
//do whatever you want hear
console.log("redirect to another page");
});
Google
The way you do will make your code messy, hard to read and maintain. So we should separate html, css and js code. And to make your javascript and style not affect each other when you change your code, you should naming the class which you want to use javascript different with class you want to style.
For example I using class "js-link" just for javascript, not to style it. If I want to style the link I will add another class for it.
The Question and Codes
I am struggling with the below code:
$('.rdsubs-mysubscriptions table tbody tr td a').each(function() {
var subItem = $(this).html();
//console.log(subItem);
var subItemStripped = subItem.substring(12);
console.log(subItemStripped);
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
}); // end of each function
When I check the console for subItemStripped then it shows this:
Framework
Content
Slideshow
Which means (in my head at least ;-)) that for each span that is inside the body it should find one of these subItemStripped and where it finds a match it should add the class hello but this is not happening.
Actually, nothing is happening.
When I change this line:
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
to
$('body').find('span:contains("Framework")').addClass('HELLO');
It works nicely. So am I putting the variable subItemStripped wrongly in there or has it something to do with the .each() function.
I tried the below things to make it work
With the above code I tried a couple of variations before I came here:
$('body').find('span:contains(subItemStripped)').addClass('HELLO');
$('body').find("span:contains('subItemStripped')").addClass('HELLO');
I also tried it with completely different sets of code I gathered from other SO posts but none of those worked. Why I don't know.
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).addClass("hello");
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).css("font-size", "6px");
Why do I need this
I know I don't have to explain why I need this but it could be useful in coming up with other great ideas if the above is not feasible.
I have a webpage and on that page is a menu filled with products that a user can download if he/she has access.
Each menu item has a span with the title in it. Those titles are built up like: Framework Content Slideshow
On this same page is also a component that shows all the users subscriptions.
With the above code, I look to all the subscriptions of the user. Which returns
CompanyName Framework CompanyName Content CompanyName Slideshow
Then I Strip .substring(12) all the parts that I know are not present inside the menu. Which leaves me with Framework Content Slideshow
At this point, I know that some menu titles and the stripped item are the same and for every match, I want to add a class upon which I can then add some CSS or whatnot.
Hopefully, the question is clear and thanks to everyone in advance for helping me out.
#gaetanoM You are completely right. Right after I posted the question I came on this site:
jQuery contains() with a variable syntax
And found the answer which is the same as you are saying!
$('body').find("span:contains('" + subItemStripped + "')").addClass('HELLO');
Thanks so much!
#gaetanoM Can you make your comment in an answer? Then I can select it as the accepted answer. I am answering this question now just to make sure it has an answer. As people get punished for asking questions that don't get answers.
I have this multi-tiered accordion slider for listing schedules. The problem I am having is once you navigate to the third tier, the entire list disappears and has some weird space at the top. If you follow this link -- Pool League Demo
You can see what I mean once you navigate to the schedules tab. Once there, if you click monday 9 ball > Week 1 , you will see exactly what I mean. Any help is very much appreciated :)
Also, on a side note, I am using scrollIt.js and for some reason am having problems with the active class. When applied, it doesn't do what it is supposed to, and this happens multiple times throughout the page, even in the schedules section which doesn't use scrollit.js. If anyone knows how to get the active class to work, I would really appreciate the help on that as well.
Thanks in advance!!
For your second answer, please try adding the activeClass: 'active' parameter to the $.scrollIt() function call.
e.g. :
$.scrollIt({
activeClass:'active'
});
and make sure the class name you mention has some CSS attached to it.
e.g. :
a.active {
background: #000;
color: fff;
}
I'm trying to get a class to appear on a specific button withing a handlebar view based on a property binding. I'm doing something that is like the Todo app that ember.js has on their site (http://emberjs.com/examples/todos/) and I'm trying to make the "Clear Completed" button disappear based on the value of a property.
I have a jsfiddle showing kind of what I'm going for here (http://jsfiddle.net/boushley/XEdNg/). If I add a className inside of the #view tag it shows up fine. But if I add a clasNameBindings it doesn't work the way I expect. Am I going about this wrong or is something broken here?
Aaron
I remember I had similar problems with classNameBindings too.
Try this instead: http://guides.sproutcore20.com/using_handlebars.html#binding-class-names-with-bindattr.
// Javascript for the view
App.AlertView = SC.View.extend({
priority: "p4",
isUrgent: true
});
// Template
<div {{bindAttr class="priority"}}>
Warning!
</div>
// Emits the following HTML
<div class="p4">
Warning!
</div>
If you just want to show/hide the button, then try binding the isVisible property.
isVisibleBinding: 'App.pageController.myProperty'
Hope this helps.
I discussed this here https://github.com/emberjs/ember.js/issues/322 and one of the people on the project helped with this, giving a clear way of how to perform this here https://github.com/emberjs/ember.js/issues/322#issuecomment-3332477 (http://jsfiddle.net/aNZSD/) In essence I needed to create a view that extends ButtonView and place the properties I want on this new view. This is the way it should work, I just wasn't seeing this properly.
Hope this makes it clearer for someone else.