The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready
Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".
Related
I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here
I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
Spent a couple of days on this now and need some guidance. I have a toggle with an image within the div. Basically when the div is clicked the image within it should change to a different image.
Here is a link to the jsfiddle, so you can see the image at the top which should change once the whole toggle area is clicked.
http://jsfiddle.net/VLe8g/
Also here is the code
HTML
<div class="toggle-wrap">
<div class="trigger">
<div class="one-third"><img src="http://placehold.it/200x200" /></div>
<div class="two-thirds column-last">This is where the heading goes <br />
This is where the description goes<br />
Toggle Open</div>
</div>
<div class="toggle-container">
<div class="one-third">First column This is where the heading goes This is where the heading goes</div>
<div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
<div class="one-third column-last">Third column This is where the heading goes This is where the heading goes</div>
</div>
</div>
CSS
.toggle-wrap {
float: left;
width: 100%;
margin-bottom: 5px;
}
.trigger {}
.trigger a {
display: block;
padding: 10px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
color: #1D1D1B;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
background: url(tobeadded) no-repeat right 15px #F3F3F3;
}
.trigger.active a {
background: url(tobeadded) no-repeat right -20px #F3F3F3;
}
.toggle-container {
overflow: hidden;
float: left;
padding: 15px 15px 0 15px;
}
.one-third, .two-thirds {
display: inline;
float: left;
margin-right: 4%;
}
.one-third {
width: 30.66%;
}
.two-thirds {
width: 64%;
}
JAVASCRIPT
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Hope you guys can help me out.
Thanks.
Demo here
Try this:
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
$(this).find("img").attr("src", "http://placehold.it/400x400");
will change the image from a 200x200 to a 400x400. You can add a class to both of them (i.e. class=small, class=big) which jQuery can use to identify which one is currently being displayed and toggle between them.
assign an id to image tag like i did
<img id="test" src="http://placehold.it/200x200" />
and use the following code:
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
$('#test').attr('src','http://placehold.it/200x200');
}, function () {
$(this).removeClass("active");
$('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png');
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Add the id attribute to your img, and then change the src attribute every time the toggle handler is executed.
The img definition should something like this:
<img id="myImage" src="http://placehold.it/200x200" />
and your toggle handler should look like this:
$(".trigger").toggle(function(){
$(this).addClass("active");
$("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
$(this).removeClass("active");
$("#myImage").attr('src', 'http://placehold.it/200x200');
});
I just created a star rating system that change image on mouse over., but i cant seem to display the stars inline.
they get under each other.
It dosent work with style sheet so I suppose it should be re written in the javascript. !?
This is my JavaScript function.
html code :
<div id="star">
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star2.png" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
<div id="star_2" onclick="SendRating(2);" onmouseover="rateStar(2)" >
<img src="star2.png" id="rating_2" onclick="SendRating(this.getAttribute('score'));" alt="star_2" /></div>
<div id="star_3" onclick="SendRating(3);" onmouseover="rateStar(3)" >
<img src="star2.png" id="rating_3" onclick="SendRating(this.getAttribute('score'));" alt="star_3" /></div>
<div id="star_4" onclick="SendRating(4);" onmouseover="rateStar(4)" >
<img src="star2.png" id="rating_4" onclick="SendRating(this.getAttribute('score'));" alt="star_4" /></div>
<div id="star_5" onclick="SendRating(5);" onmouseover="rateStar(5)" >
<img src="star2.png" id="rating_5" onclick="SendRating(this.getAttribute('score'));" alt="star_5" /></div>
<p id="ContentHolder">
</p>
</div>
JavaScript :
function rateStar(rating){
var i = 1;
var ratings = '';
for (i==1; i<=5; i++){
if (i<=rating){
document.getElementById('rating_'+i).src= 'star1.png';
}
else{
document.getElementById('rating_'+i).src= 'star.jpg';
}
}
}
and one of my divs
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star.jpg" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
CSS
#star{
position:absolute;
color:#fff;
margin-top:100px;
margin-left:1000px;
display:inline block;
}
the mouse over function is working great except that it wont display inline =/
Thanks
Using display: inline-block; on your stars will fix the problem. You can do the whole hover effect using CSS without any Javascript.
Demo: http://jsfiddle.net/ThinkingStiff/5JPDX/
HTML:
<div id="stars">
<div id="star-1" class="star"></div>
<div id="star-2" class="star"></div>
<div id="star-3" class="star"></div>
<div id="star-4" class="star"></div>
<div id="star-5" class="star"></div>
</div>
CSS:
#stars {
background-image: url( http://thinkingstiff.com/images/star-empty.gif );
background-size: 20px 20px;
cursor: pointer;
height: 20px;
overflow: hidden;
position: relative;
width: 100px;
}
.star {
height: 20px;
position: absolute;
width: 100px;
}
.star:hover {
background-image: url( http://thinkingstiff.com/images/star-highlight.png );
background-size: 20px 20px;
}
#star-1 {
right: 80px;
z-index: 5;
}
#star-2 {
right: 60px;
z-index: 4;
}
#star-3 {
right: 40px;
z-index: 3;
}
#star-4 {
right: 20px;
z-index: 2;
}
#star-5 {
right: 0;
z-index: 1;
}
Script:
document.getElementById( 'stars' ).addEventListener( 'click', function ( event ) {
//SendRating( event.target.id.substr( -1 ) );
alert( event.target.id.substr( -1 ) );
}, false );
Output:
float:left; display:inline; or display:inline block; are all your friends when trying to display in a straight horizontal line. I won't suggest using a <TABLE> for this but it can be done that way.
Maybe you should post some more of your code or create a JSFiddle of your HTML/CSS/Javascript
Update:
Created this: http://jsfiddle.net/Uyr4P/
It's just a copy/paste of your HTML with a display:inline-block style added for DIVs to illustrate how it is all in one line.
You will instead probably want to place a rule on your outermost DIVs and control the display that way - alternatively, use SPANs instead of DIVs
DIV solution. Just use this with your current HTML:
DIV#star DIV
{
display:inline-block;
}
You should use CSS property "display" not on parent DIV, but on child ones, because it cannot be inherited. So, do something like this in CSS:
#star_1{display:inline block;}
#star_2{display:inline block;}
#star_3{display:inline block;}
#star_4{display:inline block;}
#star_5{display:inline block;}
or (better) declare CSS class for it
I am writing a small animation to a div: Flag flips when you click on it. On the click, the image has to change.
HTML:
<div id="lang"></div>
...
<div id="langnl" class="invisible">
<img id="flag" src="en.jpg" onclick="change(-1,'en')"/>
</div>
<div id="langen" class="invisible">
<img id="flag" src="nl.jpg" onclick="change(-1,'nl')"/>
</div>
CSS:
.footer #lang {
float:right;
width: 30px;
height: 20px;
text-align:center;
}
.footer #lang img {
width: 30px;
height: 20px;
margin: 0px auto;
border-radius: 5px;
}
JS:
if (!flipping) {
flipping = true;
$('#flag').animate( {
width: 0,
}, flipTime, function () {
$('#lang').html($('#lang'+lang).html());
}).animate( {
width: 30,
}, flipTime, function () {flipping = false;});
}
My observations: The first flag flip works, but does not animate the second part, because I remove #flag, and replace it. The next flips do not work, because flipping is still false.
How to solve this, and continue animating, but replacing the content of the div?
The problem was that I has two divs with the same ID, not that I was changing the div I was animating.