I'm using a shop CMS that allows me to apply a side menu for all product categories, let's call them Necklaces and Rings, that CMS also has an option to add "New" and "Promotions" to that side menu globally, however what I cannot do is specify where I want these "New" and "promotions" to be. For example I want them to be displayed in Rings category but not in Necklaces.
This is a rough sketch how the website is made:
<div class="menu" id="side_menu">
<ul class="standard">
<li id="category_newstuff">New</li>
<li id="category_14">Collection1
<li id="category_14">Collection2
<li id="category_14">Collection3
<li id="category_14">Collection4
<li id="category_promotions">Promotions</li>
</div>
What I want to achieve:
If the page is: rings.html then find "li id="category_newstuff" and apply "style="display"none">
I'm sorry if this is all gibberish lol.
Just add a class on your body tag. For example, the page you want to apply the style to, will have <body class="with-style"> and in the css file, you can simply write .with-style .category_newstuff { display: none; }, or just find .with-style .category_newstuff via JS and hide it.
Related
Fairly often I get the request to update all instances of a color on a site to a different color
For example:
Across the entire website, for any element that it currently #51284F (text, buttons, etc,) please update the color to #4F9CEC
Of course, this would normally be done with CSS in the style sheet. However, this is a very large website with hundreds of pages, and we aren't sure exactly which elements are currently set to #51284F, and which pages might contain an element that is set to #51284F. Additionally, this request comes up often, so it would be helpful to have an efficient way to change all the colors at once as opposed to manually going through each page and writing CSS for every element that needs a color update.
So, using JavaScript, is there any way to search the entire website for any element that is currently set to #51284F and update its color to #4F9CEC?
The HTML would look something like this:
<div class="header-default" data-widget-name="header-default" data-widget-id="template-header1">
<ul class="tels">
<li class="tel phone1 collapsed-show" data-click-to-call="Sales">
<span class="type">Sales</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone2 " data-click-to-call="Service/Parts">
<span class="type">Service/Parts</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone3 " data-click-to-call="Body Shop">
<span class="type">Body Shop</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone4 " data-click-to-call="Local">
<span class="type">Local</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
</ul>
</div>
The CSS would look like this:
.header-default .tels { color: #51284F; }
Unfortunately, these are template sites, so we don't edit the HTML on a site-by-site basis. The HTML itself pulls from the particular template that the site is on
Thank you so much!
Maybe something like this?.. I'm not sure there is no syntax mistake. But you could try
$('*').filter(function () {
var selectColor = 'rgb(0,0,0)';
return ($(this).css('color') == selectColor);
}).css('color', "some new color");
It would be helpful if you could provide the code of the elements you are looking to update. Specifically their html and css formats.
Just click the folder with the right mouse button in sublime text and click FIND IN FOLDER, a box will appear in the bottom with "FIND" and "REPLACE" values, set find to #51284F and replace to #4F9CEC. Save all.
try something like this
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
[style*="color: red;"] {
font-size: 50px;
}
</style>
</head>
<body>
<div class="second" style="color: red; background-color: black;">The first div element.</div>
<div class="my-test">The second div element.</div>
</body>
</html>
I've spent the past several hours trying to work out a hover effect for 2 separate links on a site I'm working on. The links aren't even remotely related in the HTML, so I'm unable to use CSS (as far as I can see) to achieve the effect. It's nothing more than a simple hover effect to change the color of two separate links on hove, regardless of which one the user hovers over. There are no images at this point, only text - I'm hoping it stays that way (I'm looking at you, graphic designer wife).
The html involves a bootstrap navbar & a link on the home page of a WordPress site, so the architecture is something like this:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="abt" href="#">About</a></li>
<li><a class="prc" href="#">Work</a></li>
<li><a class="exp" href="#">Testimonials</a></li>
<li><a class="ofc" href="#">Locations</a></li>
<li><a class="con" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<section id="content" role="main">
<article id="post-10" class="post-10 page type-page status-publish hentry">
<header class="header">
<h1 class="entry-title">Home</h1> <a class="post-edit-link" href="#post.php?post=10&action=edit">Edit This</a></header>
<section class="entry-content">
<div class="links">
<li><a class="abt" href="#/about/"><span class="pg abt1">
<p>About</p>
<p></span></a></li>
I'd like to focus on the "About" sections for this - I'm pretty sure that I need either jQuery or JS to accomplish what I'm after but I'm a rank beginner in both!
Alright, so you're right. You need jQuery. First of all, what you should do is give the two link tags the same class, let's say foo. Give both link tags the class foo. Then, use jQuery to target them both.
Now, id you want it to change the color permanently on hover, use THIS:
$('.foo').hover(function(){
$('.foo').css('color', 'red');
});
Feel free to change red to whatever color you like. Now, if you want the color to change only while being hovered over, use this:
$('.foo').mouseenter(function(){
$('.foo').css('color', 'red');
});
$('.foo').mouseleave(function(){
$('.foo').css('color', 'black');
});
in the second chunk, change black to whatever the original color is. If you are unfamiliar with how to use JQuery, add the following tag into your code below the CSS stylesheet (if applicable)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This makes the browser read the jQuery. If you don't have this, the browser can't read the jQuery.
Then, copy and paste either one of the two bits of jQuery into a file, save it as a .js file, and then attach it via <script> tag after the tag listed above. Alternatively, put the jQuery between two script tags as such:
<script type='text/javascript'>
//one of the two blocks of JQuery here
</script>
Put that in your code After the tag that allows you to use jQuery.
EDIT: I received a request for code to make them different colors. The code would look like this:
First of all, you can keep or remove the class. Then assign them separate IDs , say id_1 and id_2. Then, using the first method:
$('#id_1').hover(function(){
$(this).css('color', 'red');
});
$('#id_2').hover(function(){
$(this).css('color', 'red');
});
This would change the color permanent when hovered on. Using the second method to change the color while being hovered on:
$('#id_1').mouseenter(function(){
$(this).css('color', 'red');
});
$('#id_1').mouseleave(function(){
$(this).css('color', 'black');
});
then do the same thing, but switch id_1 for id_2 and change the colors to whatever. The first color is the color being changed to, and the second one the color being set back to the original.
jsfiddle.net/8KgRd
I'm trying to select the first header in my main container and add a class to it. But I want this to be dependent on what section of the website they are on.
For example. If they are on the "EAST Core" page, I want the header to be orange.
The HTML is populated by the backend so I can't hardcode the classes in.
HTML
<ul id="mainNav" class="nav navbar-nav">
<li class='linked'>EAST Program
</li>
<li class='active linked'>EAST Core
</li>
<li class='linked'>Get More Involved
</li>
<li class=''>Sponsors & Exhibitors
</li>
<li class=''>Newsroom
</li>
</ul>
<div id="mainbar">
<h1>This is the title I want to add a class to.</h1>
</div>
.
JAVASCRIPT
if ($("#mainNav li:nth-child(2)"): hasClass("active")) {
$("#mainbar h1:first-child").addClass("orangeHead");
};
UPDATE: Solved by:
if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
$("#mainbar h1:first-child").addClass("orangeHead");
}
One way would be:
$("#mainNav li:nth-child(2).active")
.closest("#mainNav").next()
.find("h1:first-child").addClass("orangeHead");
Another way (your original way with syntax error fixed):
// this is probably the "better" way to do it of the two
if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
$("#mainbar h1:first-child").addClass("orangeHead");
}
You can get the index of the active navigation element, and then update the other element based on this information, e.g.:
var colorClasses = ['redHead', 'orangeHead', 'blueHead', 'greyHead', 'purpleHead'],
index = $("#mainNav").children(".active").index();
$("#mainbar").addClass(colorClasses[index]);
This is a bit more modular than your code and will be easier to maintain (no need to have different code on different pages, this will work on all pages). Basically the index of the active element just needs to line-up with the index of the colors array for the class that gets added to the #mainbar element.
you can toggle the class of header depending on the active state of you li
$("#mainbar h1:first-child").toggleClass("orangeHead", $("#mainNav li:nth-child(2)").hasClass("active"));
it's interesting how you can have different ways to achieve the same result. Here is another option
toOrange = $("#mainNav").find("li").eq(1);
if( toOrange.is(".active") ){
$("#mainbar > h1").addClass("orangeHead");
}
See JSFIDDLE
I personally give preference to the .eq() method over pseudo classes, which is (arguably) faster in many cases.
I'm currently using a service for autocompleting my search boxes. However, for all the autocompleted results that show up, there's always a <div> ad on the bottom following the <li>s. Something like this:
<ul>
<li class="menu-item""></li>
<li class="menu-item""></li>
<li class="menu-item""></li>
<div style="text-align:center;border-top:1px solid black;"></div>
ad
</ul>
However, this is loaded dynamically using JS so I don't know how I would write jQuery to hide() it. Is there a way I could dynamically hide it when someone does a search?
You could do something like this in your CSS:
ul>* {display:none}
ul>li {display:block}
After all, it is only valid for <ul> elements to have <li> children, so you should be able to hide everything else as invalid.
If you are sure of the structure, you can always address it in jquery as
$("ul").find("a,div").hide()
Best would be of course css, as Kolink answered.
For my website project I am using ASP.NET MVC "Razor". Learning as I go.
I have 5 or 6 pages on my site, and one page that is on another site. I want users to feel like they are using the same site for all.
There is a typical HTML menu for the pages which follows the standard pattern of using a XHTML unordered list and CSS to layout:
<ul id="menu">
<li class="selected">Home</li>
<li>cek.log</li>
<li>Services</li>
<li>Charlie's Stuff</li>
<li>Contact</li>
</ul>
Elsewhere on SO I found questions similar to mine, where people wanted to track the selected menu item, but within a dynamic page. For example:
Javascript Changing the selected Menu items class
But this approach won't work in my case because in my case the user is not changing a selection on one page, but navigating to another page completely.
How can this be done?
...and I figured it out.
I used Razor to implement this on the server side.
First I implemented a function on my _SiteLayout.cshtml page (the template all pages use):
#functions {
public string Selected(string PageTitle) {
if (Page.Title == PageTitle)
return "selected";
else
return "";
}
}
Then I used this function in my list:
<ul id="menu">
<li class="#Selected("Home")">Home</li>
<li class="#Selected("cek.log")">cek.log</li>
<li class="#Selected("Services")">Services</li>
<li class="#Selected("Charlie's Stuff")">Charlie's Stuff</li>
<li class="#Selected("Contact")">Contact</li>
</ul>
Works perfectly. On my external page, I just hand-coded it since it's based on Wordpress and not Razor.