Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have the following scripts which add a class to an element on hover.
I am a bit of a newbie when it comes to JS so as you can see from the code below I have used the same script for each individual ID. I am sure there must be a way to have on script that does the same job.
The reason I have written a separate script for each is because my original script would add the ".slidein" class to each "#project-box" rather than just the one that was hovered over.
The Script's
<script>
$("#project-box-one")
.mouseenter(function(){
$(".project-overlay-one").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-one").removeClass("slidein");
});
$("#project-box-two")
.mouseenter(function(){
$(".project-overlay-two").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-two").removeClass("slidein");
});
$("#project-box-three")
.mouseenter(function(){
$(".project-overlay-three").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-three").removeClass("slidein");
});
</script>
An example of the HTML for a "project-box"
<div id="project-box-one">
<div class="project-overlay-one">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
And the CSS"
.project-box {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
#project-box-one, #project-box-two, #project-box-three {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
.project-overlay.slidein,
.project-overlay-one.slidein,
.project-overlay-two.slidein,
.project-overlay-three.slidein {
transition: 600ms ease-in;
top: -340px;
}
As you don't really need ids here :
use a .project-box class instead of #project-box-xxx ids
use a .project-overlay class instead of #project-overlay-xxx ids
generalize your JS/CSS using these classes instead of multiple ids
(bonus) use jQuery hover() function instead of mouseenter() and mouseleave()
<script>
/* Thanks to cookie_monster for the toggleClass shortcut */
$('.project-box') // for each .project-box
.hover( // on each mouseenter AND mouseleave event
function(e){ // run this anonymous function
$(this).toggleClass( // get hovered element, and add/remove a class
'slidein', // this class is .slidein
e.type === "mouseenter" // if event type is mouseenter we add the class, else, we remove it
);
}
);
</script>
<div class="project-box">
<div class="project-overlay">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
.project-box {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
.project-overlay.slidein {
transition: 600ms ease-in;
top: -340px;
}
HTML
<!-- add class="project-box" to each div -->
<div id="project-box-one" class="project-box">
<div class="project-overlay-one">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
jQuery
// use the class selector, and add and remove the classes on the specific instance of that class
$(".project-box").mouseenter(function(){
// $(this).addClass("slidein");
// just noticed this line is wrong, an alternative to #zessx's would be the following:
$(this).children('.project-overlay').addClass('slidein');
})
.mouseleave(function(){
// $(this).removeClass("slidein");
// just noticed this line is wrong, an alternative to #zessx's would be the following:
$(this).children('.project-overlay').removeClass('slidein');
});
CSS
/* #project-box-one, #project-box-two, #project-box-three { */
.project-box {
TLDR: use classes instead of id's
Related
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 3 years ago.
I am displaying the products on my HTML page. Some products have large details and some have minor details. When I show those products the div of products with large details have greater height than the products with minor details. To fix this issue I assigned height to the div but it didn't work because when I open my page in mobile view the details of the product overflow from its div. Then I tried to change the class of a div using media query: if width is < 991px change col-md-6 to col-md-12. I made this change using jquery but it only affect the first div.
What is the Standard solution of this problem?.
$(window).resize(function() {
if ($(window).width() < 991) {
alert("window");
$( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
$("product612").toggleClass('col-md-6 col-md-12');
}
});
.product{
background-color: rgba(92, 90, 90, 0.096);
word-wrap:break-word;
position: relative;
text-align: center;
padding: 40px 20px;
margin: 15px 0px;
height: 433.4px !important;
}
.product:after {
content: "";
background-color: rgba(2, 2, 2, 0.781);
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
z-index: -1;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.product:hover p{
color: white !important;
}
.product:hover:after
{
width: 100%;
height: auto;
}
.product p{
color: rgb(80, 80, 80) !important;
font-size: 17px;
line-height: 18px;
font-weight: 500;
font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.product>img {
height: 150px;
width: 250px;
margin: 0px auto 12px auto;
margin-left: auto;
border-radius: 15%;
}
<div class="container" >
<div class="row">
<div class="section-header text-center" >
<h1 class="glow title">Products</h1>
</div>
{% for product in products %}
<div id="product612" class="col-md-6 col-sm-12 col-xs-12">
<div class="product">
<img src="{{product.image.url}}" class="img-responsive " alt="product picture">
<h4>{{product.name}}</h4>
<p>{{product.detail}}</p><br>
</div>
</div>
{% endfor %}
</div>
</div>
Two things before answering the question you actually asked:
Bootstrap's grid system is supposed to make it possible to avoid doing things like this, so you might want to post a new question with a MCVE of what you're doing and ask how to avoid having to change the col-md-x class.
ids must be unique in the document, so that's the first thing you need to fix.
Answering the question you asked, though:
You've said:
i made this change using jquery but it only affect the first div.
but the code you've shown uses
$( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
$("product612").toggleClass('col-md-6 col-md-12');
which won't do anything, because $("product612") won't match anything (you meant $("#product612"), and I guess you must have used that at one point if you saw one change).
Use a class instead of the id, and then in your resize function:
$(window).resize(function() {
var isNarrow = $(window).width() < 991;
$(".the-class")
.toggleClass("col-md-6", !isNarrow)
.toggleClass("col-md-12", isNarrow);
});
You might use matchMedia instead of resize for this so you only run your callback when the size change actually matters rather than on every tiny resize change, e.g.:
(function() {
function widthUpdate(mqle) {
$(".the-class")
.toggleClass("col-md-6", !mqle.matches)
.toggleClass("col-md-12", mqle.matches);
}
var mql = window.matchMedia('(max-width: 990px)');
mql.addListener(widthUpdate);
widthUpdate(mql);
})();
It doesn't fire the listener when you first hook it up, so you have to do that manually.
(Given the duplicate identified by Pete and the Bootstrap stuff, I deleted this at first. But then decided maybe it will be useful to someone later. Don't want to get any rep from it, though, so I marked it a Community Wiki.)
I need a CSS Animation to play forwards once on mouse enter and play in reverse once when mouse leaves a certain div. I have a JsFiddle here.
I need the class=".item" div to be the one that the mouse enter is triggered on.
The 'animation' is actually 4 different animations that each red line has. Each red line is also part of the ".line" css class, so I simply tell all the animations to start by modifying the ".line" class. Thanks
Here is an example how to use mouseenter and mouseleave with jquery animation.
HTML
<div class="container">
<div class="divToAnimate">
<p>test</p>
</div>
</div>
JS
$(document).ready(function(){
$(".divToAnimate").mouseenter(function(){
$(".divToAnimate").animate({left:'50px'});
});
$(".divToAnimate").mouseleave(function(){
$(".divToAnimate").animate({left:'0px'});
});
});
CSS
.container{
background-color: green;
height: 200px;
width: 200px;
float: left;
position: relative;
}
.divToAnimate{
height: 150px;
width: 150px;
background-color: red;
position: relative;
}
You can edit css with the animate function, too.
jquery animate
I am having different div's on my website and I would like to do following
when I am clicking one link, that will trigger a change inside the css code of more than one div's. For example if I click on clients I would like to make the ul element with class="rslides" to get property of heigh="0px" and than another div layer to expand below this one.
But I have 2 problems:
first is that I am using a responsive slider for which i to make its height="0px" , I have to change the class property.
other issue is how to make one link trigger 2 actions for the second div. I tried with triggers but it is limited to one element per "id"
DOM Structure:
<div id="slider">
<div id="index_slider">
<ul class="rslides" >
<li><img src="img/index_design_02.jpg"></li>
<li><img src="img/index_design_03.jpg"></li>
</ul>
</div>
</div>
JS CODE:
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth: 1200
});
});
</script>
<div id="menu">clients</div>
<div id="second_slider"></div>
THE CSS CODE fot the both tirgers of the slider:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
-webkit-transition:all 1s ease-in-out;
}
.rslides:target {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
height:0px;
}
Here is link to JSfiddle
where my goal is once clicked on the link the div called "menu" to go on the top with sliding transition and the other div called "second_slider" to expand on the bottom, and the slider to disapear.
Depending on your markup, you should be able to target more than one div. The only limitation would be each target must a child of your link target.
<div class="rslides">
<div id="target-a">
<div class="sub-target-one"></div>
<div class="sub-target-two"></div>
</div>
</div>
The way you would go about it is like this:
.rslides:target > .sub-target-one,
.rsiides:target > .sub-target-two {
/* rules go here */
}
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}
http://jsfiddle.net/awfex/4/
HTML:
<div class="section-header section-header-on" id="section_header_289" style="left: 50px;">
<span class="collapse"></span>
<div class="section-name">
<span class="name">Testing Facebox suff</span></div>
<ul class="tools">
<li>
<a class="trash" href="#"></a>
</li>
<li>
</li>
</ul>
<div class="clear"></div>
</div>
js:
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find("ul").show();
});
So, I need this to be relative, because there are multiple "section-header"s and the ID is generally unknown / generated by the app. But, basically, I want to be able to hover over the section-header, and then have ul.tools change from display: none; to display: block. So I figured .show() could do that. but.. I guess my selector is wrong. =\
Your css specifies:
.section-header ul.tools,
.section-content li.content ul.tools {
visibility: hidden;
position: absolute;
top: 0;
left: -40px;
z-index: 1002;
cursor: default;
width: 40px;
height: 35px;
list-style: none;
}
Most notably visibility: hidden; which is not affected by the show()/hide() functions. So you need to change the css visibility property so your list will show-up.
Change:
$j(this).find("ul").show();
To:
$j(this).find("ul").css({visibility: 'visible'});
Or set the CSS to display: none; rather than use the visibility property.
show() documentation: http://api.jquery.com/show/
Demo
just needed a little coercion ;)
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find(".tools").css({visibility:"visible"});
},function(){
$j(this).find(".tools").css({visibility:"hidden"});
});
Just needed a little css.
.tools {
display: none;
}
div.section-header:hover ul {
display: block;
}