I want to hide the button ONLY if a specific div (.variable-item-3) has the class "selected".
The class "selected" is added when the li is clicked.
if($('.variable-item-3').hasClass('selected')) {
$('.button').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
You need to perform the test after you change the selected class. You're just running it once when the page is loaded, it won't automatically run again when the class changes.
You can use the .toggle() function with a boolean argument to make the visibility depend on a test.
$("li").click(function() {
$("li").removeClass("selected");
$(this).addClass("selected");
$(".button").toggle(!$('.variable-item-3').hasClass('selected'));
});
li.selected {
background-color: yellow;
}
.button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
Since you are already using javascript to add the .selected class, it's probably easier to use the javascript solutions suggested in the other answers. However, if you prefer using CSS (I personally prefer using CSS to Javascript whenever possible) and if the div you care about comes before the button you care about then you can actually just use CSS.
.variable-item-3.selected ~ .button {
display: none;
}
This assumes that .button and .selected are siblings. It gets more complicated if the two aren't siblings but it's still possible as long as an ancestor of .button is a sibling of .selected. In that case it would look something like this:
.variable-item-3.selected ~ div .button {
display: none;
}
If the HTML isn't structured so that either of these will work, then you'll need to use one of the other solutions that does it with javascript.
Related
I want to create some animations by using CSS3 transitions.
Imagine the following UL/LI element:
<ul>
<li class="green" id="green" style="display: none;">Contents 1</li>
<li class="red" id="red" style="display: none;">Contents 2</li>
<li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>
It's important to know that those elements are positioned horizontally next to eachother (display: inline-block).
Now, when I click on a button, I show those elements, that isn't an issue.
This is done with the following HTML code:
Make contents 1 visible
Make contents 2 visible<br/>
Make contents 3 visible
When I want to put an animation on it, I can do it by adding a certain class to the element and the CSS would like this:
.animate { transition: all linear 5s; opacity: 1; display: inline-block; }
But now, let's mark the LI elements as absolute, so they are all displayed at the same location.
What I would like to have now as an animation is the following:
When I enabled item 2 it just fades in.
When I then enable item 1, it fades in, and at the same time, item 2 should start moving to the right until item 1 has taken up all the required space it needs.
But, to make it difficult, neither of the items has a fixed with, because the content of the UL LI elements is dynamiccly.
Here's a fiddle to better understand it:
http://jsfiddle.net/dw4Lz8qe/
So, I would like to fade an item is, but if there's already an item visible, the visible item(s) should start moving to the right until the required space for the fading in element is fully taken.
So, I do hope that this question was clear.
Kind regards,
Animating font-size may solve your problem:
ul li {
display: inline-block;
opacity: 0;
font-size: 0px;
transition: all linear 0.5s;
}
.green {background-color: green;}
.red {background-color: red;}
.yellow {background-color: yellow;}
.animate {
opacity: 1;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#green').toggleClass('animate') ">Toggle contents 1</button>
<button onclick="$('#red').toggleClass('animate') ">Toggle contents 2</button>
<button onclick="$('#yellow').toggleClass('animate')">Toggle contents 3</button>
<ul class="padding: 0px; margin: 0px;">
<li class="green" id="green">Contents 1</li>
<li class="red" id="red">Contents 2</li>
<li class="yellow" id="yellow">Contents 3</li>
</ul>
As long as your <li> can have a fixed with, it works with css. Check your updated fiddle - you might want to use that to dive deeper into the matter. Problem is, you cannot transition between width: 0 and width: autoas this is not supported by any browser I know of.
http://jsfiddle.net/dw4Lz8qe/1/
This is my pen: http://codepen.io/anon/pen/IszKj
What I want to do is how it so when I click on either any status or any date I open up a hidden div which gives a list of options.
My question is, how do I approach this in the best way?
Do I have two different divs and then open the one which is relevant to the list item which was clicked:
<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>
Do I have one div and only show the content inside it which is relevant to that button?
<div style="hidden">
<span id="status">...</span>
<span id="date">...</span>
</div>
In addition to this, should I be using toggle or the traditional open / close function.
It would be nice for it to be degradable if JS is disabled.
Created a Fiddle for you:
http://jsfiddle.net/e4mQD/1/
HTML:
<div style="display: block;
height: 40px;">
<ul id="filter">
<li>
<span>Any status▾</span>
<ul class="options">
<li>Option1</li>
<li>Option2</li>
</ul>
</li>
<li>
<span>Any date▾</span>
<ul class="options">
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
</ul>
CSS:
#filter, .options {
list-style-type: none;
}
.options {
display:none;
}
.options li {
cursor: pointer;
}
JavaScript:
$('#filter li').click(function(){
$(this).find('.options').toggle();
});
display:hidden
is not valid css rule. You need to use display:none
My question is, how do I approach this in the best way?
In your particular use-case, it is better that you use different blocks for each of those options.
In fact, as #mh-itc pointed out, it is better if you use nested list i.e. ul instead of div inside those lis.
Also, you may use a instead of span.
It would be nice for it to be degradable if JS is disabled.
This can be achieved by deferring the display:none; until the JavaScript is loaded and run.
Demo: http://jsfiddle.net/abhitalks/928Dj/
Markup:
<div>
<ul id="filter">
<li>
Any status ▾
<ul class="opt">
<li><label><input type="checkbox" />Status 1</label></li>
<li><label><input type="checkbox" />Status 2</label></li>
</ul>
</li>
<li>
Any date ▾
<ul class="opt">
<li><label><input type="checkbox" />Date 1</label></li>
<li><label><input type="checkbox" />Date 2</label></li>
</ul>
</li>
</ul>
</div>
CSS:
ul {
margin: 0; padding: 0;
list-style: none;
}
#filter {
display: inline-block;
}
#filter > li {
display: inline-block;
margin-bottom: 12px;
padding-right: 12px;
vertical-align: top;
}
ul.opt.hidden {
display: none;
}
jQuery Code:
// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
});
Note: In the demo, un-comment the JavaScript code to see how it will behave when JavaScript is available. And comment out to see how it degrades when JavaScript isn't available.
If you want to keep accessibility in mind change the hidden status when loading the site with javascript, if you do that user that have add-ons like NoScript active get to see every option without loosing functionality.
People who use NoScript tend to dislike sites that force them to deactivate NS to use it properly.
For your solution I suggest to use two separate divs, with this you have the option to show both boxes at the same time and have a styled version that makes clear, that these are separate.
Add a class like "optionbox" to these and throw your css rules in there instead of making a rule with #date, #status
I am using it in a drop down menu system. on mouse hover on a link the image of a parent div got switched and on mouse out it reverts the image. this variable I am using in html. Is there a way I can put this variable in my css sheet and call through an id or class?
In <li> tag you can see the mouseover and mouseout, I want to give an class ot id to call this variable.
This is my html
<div onmouseover="changeImage(fashionSrc)" onmouseout="changeImage(fashionSrc1)">
<h3>Casuals</h3>
</div>
<ul>
<li onmouseover="changeImage(fashionSrc2)" onmouseout="changeImage(fashionSrc1)">Menu 1</li>
<li onmouseover="changeImage(fashionSrc3)" onmouseout="changeImage(fashionSrc1)">Menu 2</li>
<li onmouseover="changeImage(fashionSrc4)" onmouseout="changeImage(fashionSrc1)">Menu 3</li>
<li onmouseover="changeImage(fashionSrc5)" onmouseout="changeImage(fashionSrc1)">Menu 4</li>
<li onmouseover="changeImage(fashionSrc6)" onmouseout="changeImage(fashionSrc1)">Menu 5</li>
<li onmouseover="changeImage(fashionSrc7)" onmouseout="changeImage(fashionSrc1)">Menu 6</li>
</ul>
onMouseOver = "this.src="../your_path/image1.png"; //or anything else
onMouseOut = "this.src="../your_path/image2.png"; //or anything else
Consider unobstrusive javascript, link 1 link 2
Is there a way I can put this variable in my css sheet and call
through an id or class?
No afaik. What you can do is modify the element's class and define those in your CSS. You should use the :hover pseudo-class instead of JS tricks in this case anyway.
Here is the simple way to create a menu with drop-down. try this.
HTML like this.
<div class="drop-down">
<h2></h2>
<ul>
<li>Menu 1</li>
...
</ul>
</div>
Style like this.
.drop-down {
position:relative;
height:40px;
}
.drop-down h2 {
... //Some style for heading
}
.drop-down ul{
display:none;
position:absolute;
top:40px; // Equal to drop-down height;
left:0;
}
//Display the submenu, when hover
.drop-down:hover ul {
display:block;
}
I have some links within a div:
<div class="sidebar" id="sidebar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I load a stylesheet that has this:
.sidebar a {
text-decoration: none;
font-weight:normal;
}
.sidebar a:hover {
color: #FFF;
text-decoration: underline;
font-weight:bold;
}
This stylesheet is used on multiple pages. On some, I want to change the color of the "a" elements. Based on my research, I have tried this jquery to change the color of the "a" elements:
$("div.sidebar a").css({color : "#000000"});
But when I do this, I get this error: Object expected.
Holy cow, what in the world am I missing?
Are you sure jquery is loading on the pages where you get the Object expected error?
Looks like its working here.
http://jsbin.com/ekinuy/1/edit
Also note:
jquery IE8 $(document).ready "object expected" error
Working here: http://jsfiddle.net/8dk9F/
$(".sidebar a").css("color", "red");
Try this it should work for you. Some browsers are a little more finicky than others.
$('div.sidebar a').css({"color" : "#ccc"});
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item