I have this html
<div>
<span data-disabled class="myclass"> like </span>
<span class="myclass"> unlike </span>
</div>
scss is like this
myclass{
visibility: visible;
cursor: pointer;
&[data-disabled] {
visibility: hidden;
}
}
and based on click I am doing this
this.select('like').attr('data-disabled', true);
this.select('unlike').removeAttr('data-disabled');
It is working fine but my like and unlike are shown next to each other and they hide and become visible at their original position.
Is there any way to have same position and when I hide and unhide then they overwrite each other.
The problem is with the visibilty property you are using. You have to use display:none so that the item will not consume the space when hidden.
instead of
visibility: hidden;
use
display: none;
You can read more about it here.
Try JQuery Toggle function to achieve this task:
$(function(){
$(".myclass").click(function () {
$(".myclass").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="myclass"> like </span>
<span class="myclass" style="display:none"> unlike </span>
</div>
Related
I was in the middle of self studying HTML, CSS and JavaScript when at my job, an interviewer came to me and suggested to study jQuery as it was the “standard” now days.
So I decided to do that and started to migrate my own web page project for a future game I'm going to make, to jQuery, and it is pretty easy to understand so far and made me compress 150 or so lines of javaScript into 70 (more or less).
Now I am trying to add a class to a button when clicked using jQuery,
for that I am using:
$(this).addClass("buttonActive");
In CSS, the button is:
.menu .buttonActive {
background-color: #222629;
}
When clicking the button, the buttin does change color, and that is perfect, but I wanted to make so that the color changes to the original one once I click another button, but it is not working.
For that I am using:
$("#buttonClicked").removeClass("buttonActive");
I also tried adding another class together when removing the buttonActive but it didn't work.
$("#buttonClicked").removeClass("buttonActive").addClass("buttonNotActive");
.buttonNotActive {
background-color: #10394E;
}
Try this example:
First remove buttonActive class from all buttons except the clicked one
Toggle buttonActive class for the clicked button
$(".myButton").click(function() {
$(".myButton").not($(this)).removeClass('buttonActive');
$(this).toggleClass("buttonActive");
})
.menu .buttonActive {
background-color: #222629;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button class="myButton">My button</button>
<button class="myButton">My button</button>
<button class="myButton">My button</button>
</div>
I didn't understand well. Like this?
$("#buttonClicked").click(function(){
$(this).addClass("buttonActive");
})
$("#change").click(function(){
$("#buttonClicked").removeClass("buttonActive");
})
.menu .buttonActive {
background-color: #222629;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="buttonClicked">Button</button>
<button id="change">Change</button>
</div>
Add a class to each of the elements that would be clicked. Use that class for the click function. When that element is clicked, remove the active class from the elements, and apply it to the element that was clicked.
In this example when you click on one of the elements its background will change to red. If you click on another element, it returns to its original color.
$( ".menu-item" ).click(function() {
$(".menu-item").removeClass("buttonActive");
$(this).addClass("buttonActive");
});
.item-1 {
background-color: green;
}
.item-2 {
background-color: orange;
}
.item-3 {
background-color: purple;
}
.menu p {
color: #fff;
}
.buttonActive {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="menu">
<p class="item-1 menu-item">Item 1</p>
<p class="item-2 menu-item">Item 2</p>
<p class="item-3 menu-item">Item 3</p>
</div>
Thanks to everyone who answered.
Thanks to the ideas, I thought of selecting all buttons from my page and removing the buttonActive class
$(:button).removeClass("buttonActive");
$(this).addClass("buttonActive");
I have the following code on a Wordpress Woocommerce website which outputs "From £189.00"
I am trying to remove the word "From". I'm sure there must be a simple way using something like .price:pre {display:none;}.
<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>
How can I hide the word "From" from this code, ideally using CSS? I am open to javascript in the functions.php as an alternative.
Due to the restrictive nature of Wordpress and the code it outputs, I'm unable to edit the snippet above. I have to manipulate the above code in CSS or in the functions.php
You can use font-size to hide the text, then overwrite it for the child span elements like so:
.price {
font-size: 0px;
}
.price span {
font-size: 16px;
}
<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span>
</p>
Since this is already said to be impossible, have a look at https://stackoverflow.com/a/23247837/1587329. Short answer:
.price>.woocommerce-Price-amount
{
visibility: visible;
}
.price
{
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
jsfiddle thanks to #Anthony's comment.
Like this:
.price {display:none;}
<p class="price">From: </p>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
£
</span>189.00
</span>
change the format of your html
<p class="price"><span class="from">From:</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>
and apply css like
.price .from {display:none;}
I'm having some problem with my code, the last error is replace only some html elements have overflow: hidden; to overflow: none;, i can use javascript or css to do it, but i don't know how at this time. Please help me!
Is there anyway to select elements that have css style overflow: hidden; in javascript or css?
UPDATE 2: (everything came ok!)
Thanks Pranav C Balan, Michael_B have gave some awesome answers.
var ele = $('.selector').filter(function() {
return $(this).css('overflow') == 'hidden';
})
ele.css('color', 'red');
.overflow {
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=selector>1</div>
<div class="selector overflow">2</div>
<div class=selector style="overflow:hidden">3</div>
<div class=selector>1</div>
<div class="selector overflow">4</div>
<div class=selector>5</div>
You can use filter() for that
var ele = $('.selector').filter(function() {
return $(this).css('overflow') == 'hidden';
})
ele.css('color', 'red');
.overflow {
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=selector>1</div>
<div class="selector overflow">2</div>
<div class=selector style="overflow:hidden">3</div>
<div class=selector>1</div>
<div class="selector overflow">4</div>
<div class=selector>5</div>
Using CSS only, if the overflow: hidden is declared in the HTML element (i.e., inline), you can target the style attribute and make the match using attribute selectors.
HTML
<div class="..." id="..." style="overflow: hidden;"> ... </div>
CSS
div[style*="overflow:hidden"], div[style*="overflow: hidden"] { ... }
The asterisk * tells CSS to match a div with a style attribute that contains the substring "overflow:hidden" or "overflow: hidden".
I have a series of "icons" that I show in my template.
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div class="icon">
<i>1</i>
<span>2</span>
</div>
</div>
I have the following css to show span when .icon is hovered over and hide i.
.icon:hover i { display: none; }
.icon:hover span { display: block; }
However, I also want to be able to show every single instance of span when $scope.options == true. So I added the following:
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
But now, my :hover is broken and doesn't end up showing the span.
Is there a way to override the ng-show so that my css will still display:block when it is hovered?
plunker
You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an or to have it show when a second variable goes true.
HTML:
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon">
<i ng-hide="options || checkbox">1</i>
<span ng-show="options || checkbox">2</span>
</div>
</div>
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show
use the $scope.options value to add a class to your .icon div, then make a more specific CSS rule to overrride the :hover event.
<div class="icon" ng-class="{ override: $scope.options == true }">
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
</div>
And in your CSS:
.icon.override:hover i { display: block; }
.icon.override:hover span { display: block; }
Check this code: http://jsfiddle.net/ZXN4S/1/
HTML:
<div class="input">
<input type="text" size="50" id="test_input">
<input type="submit" value="send" id="test_submit">
</div>
<ul>
<li class="clear">
<div class="comment">
<div class="image">
<img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
</div>
<div class="info">
<div class="name">Name</div>
<div class="text">text</div>
<div class="timestamp">timestamp</div>
</div>
</div>
</li>
</ul>
jQuery:
$(document).ready(function() {
$("#test_submit").click(function() {
$.post('/echo/json/', function(data) {
last = $("ul li:first-child");
new_line = last.clone();
new_line.hide();
last.before(new_line);
new_line.slideDown('slow');
});
return false;
});
});
If you try to insert some text in the input field and click on the submit you can see the issue I'm talking about. When it slides down the height of slide is wrong and the effect is ugly. But if you remove the div info it works well. How can I fix?
Setting:
ul li .info {
float: left;
}
did it for me (tested in chrome)
This trick seems to solve the issue:
ul li .info {
float: right;
width: 485px; // fixed width to the div
}
The problem is simply the layout model. You can add overflow:hidden to give layout to an element in most browsers:
ul li .info {
overflow: hidden;
}
Will also solve it. You could fix your width optionally as well, but it's not required.
Bonus pedantic help that you didn't actually ask for:
You're using "return false" to prevent the default event. There's a function for that, which is more efficient in terms of how events bubble. Simply pass the event into the function (you can use any name you want, but I call it "event" for clarity) and then call preventDefault() on it:
$("#test_submit").click(function(event) {
event.preventDefault()
// ... the rest of your code ... //
});
After playing in JS Fiddle, this seems to have done the trick:
In your CSS, ul li .info { }
Add: height: 50px;