I have problem here http://test10.bitballoon.com/
I have animation (show/hide) text.first text has class "active". the animation show this text then remove class "active" and add this class to the next text and callback the function again.. the function also check if the last text has class "active" then remove and add class "active" to the first text and hide all text and callback again. this how it work. the first time work fine when the animation finished callback again and animate the first text good then the function add "active" to multiple text then all text and function break. i don't know why this happen i tried to use setInterval but the same problem
function animateText() {
"use strict";
if ($(".text-container .active").hasClass("left")) {
$(".text-container .active").addClass("active");
$(".text-container .active").delay(1000).animate({
marginLeft: 0,
opacity: 1
}, 700, function() {
if ($(".text-container .text:last").hasClass("active")) {
$(".text-container .text:last").removeClass("active")
$(".text-container .text").animate({
opacity: 0
}, 700, function() {
$(".text-container .text:first").addClass("active");
animateText();
})
}
$(".text-container .active").removeClass("active").next().addClass("active");
animateText();
});
} else if ($(".text-container .active").hasClass("right")) {
$(".text-container .active").addClass("active");
$(".text-container .active").delay(1000).animate({
marginRight: "5px",
opacity: 1
}, 700, function() {
if ($(".text-container .text:last").hasClass("active")) {
$(".text-container .text:last").removeClass("active")
$(".text-container .text").animate({
opacity: 0
}, 700, function() {
$(".text-container .text:first").addClass("active");
animateText();
})
}
$(".text-container .active").removeClass("active").next().addClass("active");
animateText();
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<div class="text left active">
<p>Hello World</p>
</div>
<div class="text left">
<p>Hello World2</p>
</div>
<div class="text right">
<p>Hello World3</p>
</div>
<div class="text right">
<p>Hello World4</p>
</div>
<div class="text left">
<p>Hello World5</p>
</div>
<div class="text right">
<p>Hello World6</p>
</div>
</div>
As long as this animation is concerned, there is no use for class .active. Note I added some css to accommodate it in the snippet, so let me know if it helps.
$(document).ready(function() {
animateText($(".text-container .active"));
});
function animateText($this) {
var leftParams = {'left': 0, opacity: 1};
var rightParams = {'right': 0, opacity: 1};
$this.stop(true).animate(
($this.hasClass('left') ? leftParams : rightParams),
1000, function() {
if ($this.next().presence())
animateText($this.next());
else
startOver();
}
);
}
function startOver() {
var selector = $(".text-container .text");
var next = $(".text-container > .active");
selector.animate({
opacity: 0
}, 200, function() {
selector.filter('.left').css('left', -200);
selector.filter('.right').css('right', -200);
animateText(next);
});
}
$.fn.presence = function() {
return this.length !== 0 && this;
};
.text-container {
display: inline-block;
width: 260.4px;
height: 419px;
padding-top: 10px;
padding-left: 5px;
overflow: hidden;
}
.text-container .text {
max-width: 225px;
float: left;
padding: 8px 9px;
margin-bottom: 6px;
border-radius: 20px;
text-align: left;
background-color: rgba(224,230,237,.5);
clear: both;
opacity: 0;
position: relative;
}
.text-container .left {
float: left;
left: -200px;
}
.text-container .right {
float: right;
right: -200px;
background-color: #1bb45e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<div class="text left active">
<p>Hello World</p>
</div>
<div class="text left">
<p>Hello World2</p>
</div>
<div class="text right">
<p>Hello World3</p>
</div>
<div class="text right">
<p>Hello World4</p>
</div>
<div class="text left">
<p>Hello World5</p>
</div>
<div class="text right">
<p>Hello World6</p>
</div>
</div>
Related
I have a code like this, with 2 different divs:
function mouseoverCheck(text) {
$(document).on('mousemove', function(e) {
$('#tooltip').show().html(text)
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
}
function hover() {
$(document).on('mouseover', function(event) {
var $target = $(event.target);
if ($target.closest(".container1").length) {
mouseoverCheck('Container1 found!')
event.stopPropagation();
} else {
mouseoverCheck('None')
event.stopPropagation();
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
I need to show mi tooltip with text if i pass the mouse over my div , but when i pass over my .container1, it doesn't works good, because it show me 'Container1 found!', alternate by 'None'.
Have you got any other solution?
Thank you!
Try this code .. Is this what you want??
$('.tooltip_show').on('mousemove' , function(e) {
$('#tooltip').html($(this).find('h1').text());
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
$('div :not(.tooltip_show)').on('mouseover' , function(e) {
$('#tooltip').hide().html('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="tooltip_show container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
Add tooltip_show class to the container you want to show tooltip
I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.
I have three div elements that has a close button (simplified):
<div class="box1" id="box1">
<span>close</span>
</div>
<div class="box2" id="box2">
<span>close</span>
</div>
<div class="box3" id="box3">
<span>close</span>
</div>
If I click the close button, box 1 will be removed via the
jquery removed() function. Consequently, the class of box 2 will be box1, as well as its ID. The same thing goes for the box 3 whose ID and CLASS will become box2.
I used add and remove class, as well as attr('oldID','newID') functions to
achieve this. The problem is, when I try to access the new box 1 (formerly box 2) and use something like $('#box1').fadeOut(), the one that disappears is box 2
(formerly box 3).
Do you know why this happens?
removed() is not a jQuery function. Instead, the jQuery method .remove() is used to remove the set of matched elements from the DOM.
Please, consider the ID must be unique and there is no need to change them. You may simply work on classes.
Consider to avoid global variables and to use data attribute to preserve ordering.
Your jsfiddle can be reduced to:
$('.header').on('click', function(e) {
//
// decide the animation direction....
//
var newBottom = ($(this).closest('.box').css('bottom') == '-180px') ? '0px' : '-180px';
$(this).closest('.box').animate({'bottom':newBottom}, 200);
});
$('.close').on('click', function(e) {
$(this).closest('.box').remove();
$('.close').each(function(idx, ele) {
var classNames = ['', 'second', 'third'];
//
// toggle classes
//
$(this).closest('.box').toggleClass(classNames[this.dataset.sortOrder - 1] + ' ' + classNames[idx]);
var sortOrder = idx + 1;
this.dataset.sortOrder = sortOrder;
//
// adjust titles
//
$(this).prev('.title').text(function(idx, txt) {
return txt.replace(/\d$/, sortOrder)
})
})
});
.box {
background: #ffffff;
height: 200px;
width: 150px;
bottom: 0;
z-index: 10;
right: 30px;
position: fixed;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: -2px 2px 20px #D8D8D8;
}
.second {
right: 200px;
}
.third {
right: 370px;
}
.header {
height: 30px;
width: 200px;
cursor : pointer;
}
.title {
float:left;
background: #53DD6C;
}
.close {
float:right;
cursor : pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="box" id="first-box">
<span class="header" id="first-header">
<span class="title">Box 1</span>
<span class="close" data-sort-order="1" id="first-close">X</span>
</span>
</div>
<div class="box second" id="second-box">
<span class="header" id="second-header">
<span class="title">Box 2</span>
<span class="close" data-sort-order="2" id="second-close">X</span>
</span>
</div>
<div class="box third" id="third-box">
<span class="header" id="third-header">
<span class="title">Box 3</span>
<span class="close" data-sort-order="3" id="third-close">X</span>
</span>
</div>
Looking at your jsfiddle, it looks like a lot of overkill. You should be able to manage each element with one common function.
$('.header').on('click', function() {
// Add or remove the 'expanded' class
$(this).toggleClass('expanded');
var boxId = $(this).attr('id').substring('header-'.length);
// Set up the new bottom for animation
var bottomPx = '-180px';
if ($(this).hasClass('expanded')) {
bottomPx = '0px';
}
$('#' + boxId).animate({'bottom':bottomPx}, 200);
});
$('.close').on('click', function() {
var boxId = $(this).attr('id').substring('close-'.length);
$('#' + boxId).remove();
});
.box {
background: #ffffff;
height: 200px;
width: 150px;
bottom: 0;
z-index: 10;
right: 30px;
position: fixed;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: -2px 2px 20px #D8D8D8;
}
.second {
right: 200px;
}
.third {
right: 370px;
}
.header {
height: 30px;
width: 200px;
cursor : pointer;
}
.title {
float:left;
background: #53DD6C;
}
.close {
float:right;
cursor : pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="box1">
<span class="header expanded" id="header-box1">
<span class="title">Box 1</span>
<span class="close" id="close-box1">X</span>
</span>
</div>
<div class="box second" id="box2">
<span class="header expanded" id="header-box2">
<span class="title">Box 2</span>
<span class="close" id="close-box2">X</span>
</span>
</div>
<div class="box third" id="box3">
<span class="header expanded" id="header-box3">
<span class="title">Box 3</span>
<span class="close" id="close-box3">X</span>
</span>
</div>
The code below works in Firefox, but having problem when executing in Chrome.
The idea is simple; after click change the 'max-height' property and show the rest of the text. Height is computed for each element itself and transition is executed via jQuery's .transition(). JS does it's work, but transition is represented poorly. It looks little better if I reduce the transition time, but still very far from expected.
Any ideas on how to fix representation in Chrome?
$(function() {
var Readmore = function(el) {
this.el = el || {};
var descriptionElement = this.el.find('#predmetDesc');
var chevronElement = this.el.find('#showMore');
var links = descriptionElement.add(chevronElement);
links.on('click', this.sloppy);
};
Readmore.prototype.sloppy = function() {
$this = $(this).parents().eq(1).find('#paragraph');
$sibling = $this.siblings('#showMore');
var expanded = $this.is('.expanded');
if (expanded) {
$this.transition({ 'max-height': '96px',
overflow: 'hidden'
}, 500, 'in', function() {
$this.removeClass("expanded");
});
$sibling.transition({
'rotate': '0deg'
}, 500, 'in', function() {
$sibling.removeClass("expanded");
});
} else {
$this.transition({
'max-height': $this.get(0).scrollHeight,
overflow: ''
}, 500, 'out', function() {
$this.addClass("expanded");
});
$sibling.transition({
'rotate': '180deg'
}, 500, 'out', function() {
$sibling.addClass("expanded");
});
}
};
var readMore = new Readmore($('.sviPredmetiCol'), false);
});
.paragraph {
display: inline-block;
max-height: 96px;
overflow: hidden;
padding-top: 23px;
margin-bottom: -4px;
}
div.paragraph > p {
text-decoration: none !important;
cursor: pointer;
}
p {
margin: 0;
}
#predmetDesc {
position: relative;
/*max-height: 97px; !*72px*!*/
}
#showMore {
position: relative;
display: block;
text-align: center;
line-height: 1;
cursor: pointer;
margin-bottom: -8px;
}
.fa-chevron-down::before {
position: relative;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sviPredmetiRow">
<div id="sviPredmetiId" class="col-xs-12 col-md-12 sviPredmetiCol">
<div id="parentAbs" class="panel panel-primary sviPredmetiPanel">
<div class="panel-heading">
<div class="panelMainTitle">courseName</div>
</div>
<div class="panel-body">
<div class="widget">
<div class="statEcts">
<div class="ects">
<span class="count">courseInfo</span>
<span class="desc">ECTS</span>
</div>
</div>
<div class="statCourse">
<div class="courseId">
<span class="count">courseID</span>
<span class="desc">ID predmeta</span>
</div>
</div>
</div>
<div id="paragraph" class="paragraph">
<p id="predmetDesc">Course description</p>
</div>
<!--/div .paragraph-->
<div id="showMore"><i class="fa fa-chevron-down"></i>
</div>
</div>
<!--/div .panel-body-->
</div>
<!--/div .sviPredmetiPanel-->
</div>
<!--/div .sviPredmetiCol-->
</div>
<!--/div sviPredmetiRow-->
I'm trying to use jQuery Ui for sorting some Items with Drag and Drop.
If one element passes the dropzone, the dropzone should expand. This works good. But my problem is that the attribute of event.target.clientWidth is still 25. So the dropzone is still 25px, while the container is allready 250px.
I dont know how to change it (i allready tried event.target.clientWidth = 250 but this doesnt work) and hoped you could maybe help me
This is a part of my code:
Html:
<section id="plot" class="plot">
<div class="cards">
<div id="card__container" class="card__container" style="width: 1392px;">
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card1">
<span class="card__id">1</span>
<span class="card__text">Hektor runs away followed by police</span>
</div>
</div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card2">
<span class="card__id">2</span>
<span class="card__text">Hektor stumbles and falls</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card3">
<span class="card__id">3</span>
<span class="card__text">Hektor get catched by police and trys to bluff hisself out</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card5">
<span class="card__id">5</span>
<span class="card__text">Hektor did say something stupid</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card4">
<span class="card__id">4</span>
<span class="card__text">Police a bit confused and believes him</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card6">
<span class="card__id">6</span>
<span class="card__text">Police arrested him</span>
</div>
</div>
</div>
</div>
</section>
Css:
.card {
cursor: pointer;
}
.plot {
overflow-y: hidden;
overflow-x: visible;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100vw;
padding-top: 25%;
}
.cards {
position: relative;
left: 0;
right: 0;
margin: auto;
}
.card__container {
left:0;
right: 0;
margin: 25px auto;
height: 100%;
display: table;
}
.card {
margin-top: 50px;
width: 200px;
height: 150px;
border: 1px solid #d3d3d3;
display: table-cell;
}
.card__dropzone--inner {
width: 25px;
height: 150px;
}
.card__id {
font-size: 1.5em;
font-weight: bold;
display: block;
padding: 10px;
}
.card__text {
display: block;
padding: 10px;
font-family: sans-serif;
}
.card__dropzone {
display: table-cell;
vertical-align: top;
}
.card__dropzone--active {
background: blue;
box-shadow: 0 0 10px blue;
}
Javascript:
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
event.target.clientWidth = 250;
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
event.target.clientWidth = 25;
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
And this is my jsfiddle
http://jsfiddle.net/qthrvt8s/
You have to add refreshPositions: true while initializing .draggable() to tell your droppable area to take new dimensions in account :
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
refreshPositions: true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
Please see the updated fiddle