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');
});
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
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".
Guys I was trying to make a notification menu which dropdown on click event.I have make that with below code but I have a problem that I can't hide it back.I want to hide it by clicking on body and div itself.How can I do that?
My html part.
<li class="clicker" >
<a>Notification</a>
<div class="display_noti">
<ol>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
</ol>
</div>
</li>
My css part
.display_noti
{
width: 400px;
height: fixed;
display:none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
My jquery part.
$('.clicker').on('click',function(){
if($('.display_noti').css("display","none")){
$('.display_noti').show();
}
});
I am trying with this jquery code too but when I keep this code show() function doesn't work.
$('body').on('click',function(){
$('.display_noti').css("display","none");
});
just make your js code as:
$('.clicker').on('click',function(){
$('.display_noti').toggle();
});
http://jsfiddle.net/jp42q7t8/5/
Update:
also, if you want you may consider change the cursor shape on the li element to show that it is clickable like this:
.clicker { cursor:pointer; }
Update2:
If you add this somehow you can make the <div class="display_noti"> disappear when you click on it i don't know why though but it fixes it:
$('.display_noti').on('click',function(){
$(this).css({'background':'black'}); //same background color of the inner div
});
// hide some divs when click on window
var actionwindowclick = function(e){
if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
&& $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
{
$(".display_noti").hide();
}
}
$(window).on('click',function(e){
actionwindowclick (e);
});
$('.clicker').on('click',function(){
$(".display_noti").slideToggle();
});
Jsfiddle
$(document).click(function(e) {
$('.display_noti').hide();
});
$('.clicker').on('click', function(e) {
$('.display_noti').toggle();
e.stopPropagation();
});
$('.display_noti').click(function(e){
e.stopPropagation();
});
.display_noti {
width: 400px;
height: fixed;
display: none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clicker"> <a>Notification</a>
<div class="display_noti">
<ol> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br>
</ol>
</div>
</li>
The problem is that when I MouseHover over the image works fine but if I mouseover on the title, this have flashes. Example: http://www.adminvps.com.ar/trabajos/sofi_v/pintura.html
Mi code is:
$(document).ready(function () {
$('.item a img').hover(function () {
id = '.' + $(this).attr("id");
$(this).stop().animate({
opacity: .2
}, 200);
$(id).removeClass('hide');
}, function () {
$(this).stop().animate({
opacity: 1
}, 500);
$('.text').addClass('hide');
});
});
.text {
z-index: 1;
position: absolute;
color: #000000;
margin: 30px 0px 0px 30px;
font-weight: bold;
font-size: 13px;
line-height: 18px;
}
.text span {
color: #808080;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="item">
<div class="id1 text hide">Title <br /> texto</div>
<img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</div>
<br />
<div class="item">
<div class="id2 text hide">Title <br /> texto</div>
<img id="id2" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</div>
Any idea how to remove the flash?
Thanks
This can also be achieved by using CSS3 transitions (pure CSS, no JS)
This is the fiddle I just wrote from your code with a working example.
And these are the lines added to it:
.item img {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.item:hover img {
opacity: 0.2;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
.item:hover .hide {
display: block;
}
I had to point at the img instead of the whole div (.item) because the text was getting less opacity too.
Hope this helps you.
When your mouse goes from the img tag to the div tag it triggers the mouseout event (the second function you have in the hover).
You can check inside this function if the new element is that specific div - and if so just do nothing.
This code will do the trick:
$(document).ready(function () {
$('.item a img').hover(function (e) {
id = '.' + $(this).attr("id");
$(this).stop().animate({
opacity: .2
}, 200);
$(id).removeClass('hide');
}, function (e) {
if (e.toElement == $(this).parents('.item').find('div')[0]) {
return;
}
$(this).stop().animate({
opacity: 1
}, 500);
$('.text').addClass('hide');
});
$('.item div').hover(function(e) {
return false;
}, function(e) {
return false;
});
});
Notice I added the e variable (it's the Event var) to the function so I can use it inside.
That happens because the title is outside the image where you're setting the event.
One solution would be to place the title div inside the a element and assign the event to the a's hover instead of the img, like this:
<div class="item">
<a href="#">
<div class="id1 text hide">Title <br /> texto</div>
<img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</a>
</div>
And
$('.item a')
Instead of
$('.item a img')
Also the a element should have at least the same width and height as the img element, so the event is triggered properly. This can be easily accomplished by making it display as a block:
a {
display: block;
}
Hope it helps.
My toggle control is working, but I would like to add a plus-minus button: when content appears it becomes "-" and when content is hidden it changes to "+". Can you help please?
<div class='toggle'>
<h2>Read More</h2>
<div class="togglebox">
<div class="content">
<h3>
<p>
A new exciting way to broadcast your business to customers
A new exciting way to broadcast your business.Lorem ipsum
</p>
</h3>
<!--Content Here-->
</div>
</div>
</div>
<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>
I have modified your script. You can try this
<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).next(".togglebox").css("display");
if(x=="block")
$(this).text("+ Read More");
else
$(this).text("- Read More");
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>
Please check out following tutorial easy toggle jquery tutorial
You have to use css to change the header with + or -
HTML
<h2 class="trigger">Toggle Header</h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
<!--Content-->
</div>
</div>
css
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}
jquery
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
I made an example of an expandable list that has exactly that, maybe is useful:
http://jasalguero.com/ledld/development/web/expandable-list/
Create a new element and insert it after the "Read More" heading:
var expand_button = document.createElement("A");
expand_button.attr("href", "#");
$(expand_button).text("+");
$(expand_button).click(function(event){
event.preventDefault();
$(".togglebox").slideToggle("slow");
if ($(".togglebox").is(":visible")) {
$(this).text("-");
} else {
$(this).text("+");
}
});
$(expand_button).insertAfter("h2");