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.
Related
Okay, so I'm basically trying to achieve that if you click div1, the width of this specific div changes to 50%, and all the other divs their widths change to, let say 2%. (see jsfiddle for more clarity)
I've tried to do this by giving them a separate class, so the div being click is Online, the rest of Offline. I thought it might work if I then said something like; if .. hasClass .. do this.
In the end, I've managed to indeed scale the div on click to 50%, but sadly enough I made quite a mess of the rest. I'll include the code, and I hope someone can explain to me how I should proceed. I also thought of an Array but did not know how to move forward with this.
https://jsfiddle.net/6cjmshrq/
1
$(".sliding-panel1").click(function(){
$(".sliding-pane2").addClass("Active");
$(".sliding-pane2").addClass("Offline");
$(".sliding-pane3").addClass("Offline");
$(".sliding-pane4").addClass("Offline");
$(".sliding-pane5").addClass("Offline");
$(".sliding-pane6").addClass("Offline");
$(".sliding-pane7").addClass("Offline");
$(".sliding-pane8").addClass("Offline");
$(".sliding-pane9").addClass("Offline");
$(".sliding-pane10").addClass("Offline");
$(".sliding-pane11").addClass("Offline");
});
2
$(".sliding-panel1").click(function(){
if ( $(this).hasClass("Active") ) {
$(this).animate({
width: '9%',
height: '100%'
});
} else {
$(this).animate({
width: '50%',
height: '100%'
});
}
$(this).toggleClass("Active");
});
3
$(function(){
$('.sliding-panel1').click(function(){
$(".container").children().each( function(){
if (!$(this).hasClass('Active') ){
$(this).animate({
width: '9%'
})
else {
$(this).animate({
width: '50%'
})
};
4
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
elements[i].style.widht='2%';
elements[i].style.height='100%';
}
5
$(".sliding-panel1").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
You can minimize the css your css isnt dry , just use a single default class for the default state and add a class with name .Active in css with the transition property and you dont have to write that much jquery code too to control the width and height, instead you add or remove the .Active class see a demo below if that is how you want it
$(".container div").on('click', function(e) {
var $this = $(this);
$(".container div").filter(function() {
return !$(this).is($this);
}).removeClass('Active').addClass('Offline');
$this.removeClass('Offline').addClass('Active');
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: grey;
}
.panels {
width: 9%;
float: left;
height: 100vh;
background-color: red;
border: 1px black solid;
}
.Active {
width: 50%;
transition: 1s linear;
}
.Offline {
width: 5%;
transition: 1s linear;
}
<div class="container">
<div class="panels">1
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Maybe this is:
$("[class^='sliding-panel']" ).click(function(){ //selector part of class name
$("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all
$(this).addClass("Active").removeClass("Offline"); //for this element
});
Slight adjustment of Muhammad Omer Aslam's answer to account for shrinking the un-clicked divs instead of pushing them off screen (if I'm seeing it right):
script:
$(".container div").on('click', function() {
$(".container div").removeClass('Active');
$(".container div").addClass('Inactive');
$(this).removeClass('Inactive');
$(this).addClass('Active');
});
append to his css:
.Inactive {
width: 2%;
transition: 1s linear;
}
I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)
Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.
You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>
$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/
Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>
I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.
my demo : http://jsfiddle.net/x01heLm2/
I want the mini thumbnail to still appear when I hover from .box (goal no.1) but I do not want to trigger the hover event if the user hover over the click area (goal no.2). I bind the hover event to the parent, which is .box, which achieved goal no.1 but stuck to achieve goal no.2.
How to not trigger the hover event if the user hover over the click area first?
$(document).ready(function() {
$('.box').not('.box .box-lower').hover(function() {
$(this).find('.productsThumbWrap').stop(true, true).animate({
"margin-top": "+=108px"
}, "normal");
$(this).find('.productsThumbWrap img').stop(true, true).css({
opacity: 1,
'transition': 'opacity 0.3s ease 0.35s'
});
}, function() {
$(this).find('.productsThumbWrap').stop(true, true).css({
'margin-top': '92px'
});
$(this).find('.productsThumbWrap img').stop(true, true).css({
opacity: 0,
'transition': 'none'
});
});
});
.box {
width: 100%;
height: auto;
min-height: 290px;
margin-bottom: 30px;
border: 5px solid #000
}
.orange {
background: orange
}
.box-lower {
background: red;
height: 80px;
}
.box-upper {
position: absolute;
}
.productsThumbWrap {
text-align: center;
margin-top: 92px;
}
.productsThumbWrap img {
padding: 14px 6px;
display: inline;
opacity: 0;
}
.click {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-lg-6">
<div class="box">
<div class="box-upper">
<img src="http://placehold.it/398x200" />
</div>
<div class="productsThumbWrap">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
</div>
<div class="box-lower">
<button class="click">Click</button>
</div>
</div>
</div>
If i want to make it easy for me, i would add a wrapper around the "hover to expand" bit
(View the demo: http://jsfiddle.net/ncbrr6py/ )
<div class="hoverExpand">
</div>
around the "hover to expand" section giving you:
<div class="hoverExpand">
<div class="box-upper">
<img src="http://placehold.it/398x200" />
</div>
<div class="productsThumbWrap">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/80x80" />
</div>
</div>
Then you can change your javascript to:
$(document).ready(function () {
$('.hoverExpand').mouseenter(function () {
$(this).find('.productsThumbWrap').stop(true, true).animate({
"margin-top": "+=108px"
}, "normal");
$(this).find('.productsThumbWrap img').stop(true, true).css({
opacity: 1,
'transition': 'opacity 0.3s ease 0.35s'
});
});
$('.box').mouseleave(function () {
$(this).find('.productsThumbWrap').stop(true, true).css({
'margin-top': '92px'
});
$(this).find('.productsThumbWrap img').stop(true, true).css({
opacity: 0,
'transition': 'none'
});
});
});
Note that it now users mouse enter and mouseleave instead, this might not be what you want, but as far as i know thy will work the same (eg: will trigger even if you alt-tab your way into the browser and your cursor "ends up" in the expander area)
i also added some css:
.hoverExpand{
overflow:hidden;
}
and this will solve some issues with boxes being displayed weirdly (is this why you had the border around the entire control?).
If you wish for the expander to shrink when the user hovers the button then you should bind the mouseleave to .hoverExpander as well, but this will make it rather awkward to click the button as it will "run away" from the cursor while it shrinks back down.
There is also another alternative, if you pass event as an argument to your event handlers you can do event.stopPropagation() to stop the events from bubbling/propagating the DOM tree, and you would bind an event to whatever should stop the bubbling:
$('.box-lower').hover(function(event){
event.stopPropagation();
});
if you run your old code, it will however still trigger the expansion when you hover the border or just below the button where you have some padding... (this is why adding a container instead makes it a whole lot easier..)
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');
});