Check when text is at specific position - javascript

I have text inside a div that scrolls down using the jquery marquee plugin. It sort of acts as an introduction to a project I'm working on. I want to reveal that project to the user as soon as the text in the div is completely done scrolling.
How can I know when the text is completely gone from the screen? How do I get its position?
PS: Before you think you know how it should work. Can you try it out yourself using my code in the snippet?
/*INTRO*/
$('#intro').marquee({
duration: 15000,
gap: 5,
delayBeforeStart: 0,
direction: 'down',
pauseOnHover: true,
duplicated: false
});
#intro{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: absolute;
opacity: 0.5;
font-size: 140%;
text-align: center;
height: 200%;
top: -20%;
left: 7%;
padding-left:15%;
padding-right:15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js'></script>
<div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></p></div>
Here's a fiddle of it as well.

You can use the finished event on your $('#intro'), like so
$('#intro').on('finished', function () {
alert('Text done scrolling');
});
Updated Fiddle
UPDATE:
Hey also if you want to show something right after you can destroy the marquee in order to stop it from continuous rotation and therefore memory consumption on the client side.
So i've updated the fiddle to show how that could work, but the changes are minor:
HTMl:
<div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></b></p></div>
<div id="project">
<h1>
Project here
</h1>
</div>
Additional CSS:
#project {
display: none;
}
#project.active {
display: block;
}
Finally the JS:
/*INTRO*/
$('#intro')
.bind('finished', function(){
console.log('has finished');
//Change text to something else after first loop finishes
$(this).marquee('destroy'); // I thought it would remove the element, but it just stop the marquee
$(this).hide(); // So perhaps hide you would like to hide it.
//Show project
$('#project').addClass('active');
})
.marquee({
duration: 15000,
gap: 5,
delayBeforeStart: 0,
direction: 'down',
pauseOnHover: true,
duplicated: false
});

Related

Jquery animation works initially but when trying to undo the animation, it keeps bouncing back

I am using jquery to animate a div but when I try to click on the icon to close it, the animation executes for the duration but then reverts back.
html:
<div class="flex-container">
<div class="flex-items"><i class="fa fa-reply fa-2x"></i></div>
</div>
css:
.flex-container{
display: flex;
width: 80vw;
margin: 0 auto;
padding-top: 200px;
flex-flow: row wrap;
justify-content: center;
}
.flex-items{
width: 300px;
height: 300px;
border: 1px solid black;
}
i{
visibility: hidden;
float: right;
}
jquery:
$(document).ready(function(){
$(".flex-items").click(function(){
$(this)
.animate({
width: '+=800px',
height: '+=400px'},{
duration: 300,
ease: "linear"})
.css("order", "1");
i = $(this).children();
$(i).css("visibility" ,"initial");
currentFlexItem = $(this);
});
$("i").click(function(){
$(".flex-items").animate({
width: '300px',
height: '300px'},{
duration: 300,
ease: "linear"});
}).css("visibility", "hidden");
});
The idea I had in the jquery code was first, detecting whether the square (.flex-items) gets clicked on. Once the square is clicked on I animate the width and height (the order doesn't appear to have affect on the issue). I then have it detect if the i tag is clicked, once clicked, the idea was to "undo" the changes I initially made.
Is there a simpler way of doing this? I'm fairly new to jquery.
Codepen
The problem is that the click event is propagating to the parent container. Just take the event, and stop it propagating. This can be done with the plain javascript call to Event.stopPropagation().
$("i").click(function(evt){
evt.stopPropagation();
$(".flex-items").animate({
width: '300px',
height: '300px'},{
duration: 300,
ease: "linear"});
$("i").css("visibility", "hidden");
});
Also, note that chaining the css method after the click method probably isn't what you want. You should put the css call inside the event callback.
The reason why it is bouncing back is because the "i" tag is inside the "flex-items" div since there is open animation is triggered on click of flex-items it will open fine but when you click on the "i" tag which is for closing close animation it is working later the flex item event is triggered again since your "i" tag is inside flex-items so move the
<i class="fa fa-reply fa-2x"></i>
out of the flex items div it will work fine. and makes sure you show the i tag using a class or id reference your current code reference is
i = $(this).children();
$(i).css("visibility" ,"initial");
this should be taken care of when you place the <i> tag outside.

jQuery (fully) expand and (partially) collapse div on mouse hover

I'm trying to implement rating functionality on my website.
I have the following HTML:
<div class="rating-container">
<div class="stars">
</div>
</div>
The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery
My CSS looks like this:
div.rating-container div.stars {
display: block;
}
div.rating-container div.stars i {
font-size: 20px;
color: white;
cursor: pointer;
margin-right: 3px;
padding: 3px;
}
..And the final result looks like this:
What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.
Any help/pointers would be greatly appreciated.
Thanks in advance!
Update: per request, here is the (silly) test code I've tried:
$(function () {
$(".stars").hover(
function () {
$(this).animate({ width: '100%' });
},
function () {
$(this).animate({ width: '10%' });
}
);
});
Which gives me this on hover:
Hopefully I understand your question correctly. You can get trigger an event for on and off like this:
$( ".stars" ).hover(
function() {
$( ".stars" ).animate({ width: "100px" },1000);
}, function() {
$( ".stars" ).animate({ width: "20px" },1000);
}
);
Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.
This is how you would do that with css:
.stars {
width:20px;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.stars:hover{
width:100px;
}

How to add text to Fancy Box Loader

When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO
Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.
I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}
Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}
Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/

Get jQuery dropdown to load and drop gracefully

I am trying to get this jQuery dropdown to work properly: http://jsfiddle.net/a2geG/2/
The first problem is that both .bounce-summary div elements are open by default. I'd like them to be closed by default and have included the following to achieve that, but it doesnt seem to work:
.bounce-summary {
width: 75%;
height: 100px;
background: #ccc;
position: relative;
display: none;
}
The second issue is that when then first li element is clicked, the bottom one doesn't transition smoothly but seems to jump a bit as well. How can I prevent this behavior?
Thanks!
Try setting easing: 'swing', it makes it much smoother and just set toggle to false later after defining toggle. Fiddle
$(document).ready(function () {
$("ol.rounded-list li").click(function () {
$(this).find("div.bounce-summary").toggle("slide", {
duration: 700,
easing: 'swing',
direction: 'up'
});
});
$(this).find("div.bounce-summary").toggle(false);
});
Update 1
I just added to .rounded-list the following css:
div.enumerate {
display: block;
margin: .5em 0;
}
while removing margin: .5em 0; from the main div:
Updated Fiddle: Fiddle
The boxes are both expanded because you define:
.rounded-list {
...
div {
display: block;
}
...
}
which takes precedence over the display: none defined in your .bounce-summary, as the aforementioned selector is more specific.
I ll tell you what the problem is :
when you add margin to div then it adds to all the divs.
So when you try clicking to have the bounce effect, the resulting div will have margins on top and bottom as well as the original div which is already present.
added
li{
margin: .5em 0;
}
.bounce-summary{
margin-top: 10px;
}
and removed the margin from the div.
fiddle here

Simple JQuery Fade In/Out

So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});​
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.

Categories