Develop Reference

Jquery, Stopped queued functions and reset to original function

So I am trying to get this function to work. I have made other functions like this before I just like to make new things just for fun. As of now I am trying to make this image that flashes out and back in as a new image. so far it works fine but the only problem is that it gets overloaded and acts funny when clicked repeatedly. I tried putting it in JSfiddle but some of the animations appeared to not make it through. regardless I was wondering if there was a way to, if you click on something and start the function again while the original time it was clicked has not finished processing through. I could stop the function and reset it back to the beginning instead of watching the image flicker again and again until it works through the amount of times it was clicked.
HTML
<div id="menuImageDiv">
<div id="menuImageLeft"><</div>
<img id="menuImage" src="pictures/gingerbread.JPG">
<div id="menuImageRight">></div>
</div>
Jquery
$(function(){
var i = 0;
var cars = ['pictures/gingerbread.JPG', 'pictures/cupcake.JPG','pictures/cake.JPG'];
var delay = 500
function startSlide(){
interval = setInterval(function(){
var menuimage=$("#menuImage")
i ++;
i = i % cars.length;
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
}, delay*10)
}
function stopSlide(){
clearInterval(interval);
};
$("document").ready(function(){
var menuimage=$("#menuImage");
var right = $("#menuImageRight");
right.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i ++;
i = i % cars.length;
console.log(i);
})
})
$("document").ready(function(){
var menuimage=$("#menuImage")
var left = $("#menuImageLeft")
left.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i --;
i = i % cars.length;
if (i<=-1){
i=cars.length-1;
}
})
})
startSlide();
$("#menuImageDiv").mouseenter(stopSlide).mouseleave(startSlide)
})
CSS
#menuImageDiv{
z-index:0;
position:relative;
height:500px;
width:100%;
margin: 0 auto;
top:-30px;
}
#menuImage{
width:100%;
min-height:500px;
max-height:550px;
}
#menuImageLeft{
cursor: url(http://i68.tinypic.com/2zq4h2g.jpg), auto;
margin:auto 0;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
position:absolute;
float:left;
z-index:5;
width:47%;
height:400px;
}
#menuImageRight{
cursor: url(http://i63.tinypic.com/2mni1ky.jpg), auto;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
float:right;
position:absolute;
z-index:5;
width:50%;
height:400px;
left:50%
}
.nopacity{
opacity:0;
}
https://jsfiddle.net/nathanahartmann/30d0ause/8/
P.S. I've been looking into .stopPropogation() and .stopImmediatePropogation() and .stop() and none of them have worked as desired.

Since you are using jQuery. Please look at these documentation.
jQuery Finish
jQuery Stop

Jquery UI toggleClass has a callback function for when the animation completes
menuimage.finish().toggleClass('nopacity', delay,function(){
menuimage.attr('src', cars[i]);
menuimage.toggleClass('nopacity', delay);
});
demo:https://jsfiddle.net/w4dnb7qd/

opacity of figcaption is mysteriously changing

I am trying to use jquery.caption (https://github.com/louisbros/jquery.caption). I want the caption to be in a black rectangle with white text. When I mouse over my images, some of them display the caption correctly, but others don't display it at all, and others display it very lightly and hard to see. As I mouse over the images, some that were displaying it stop displaying it. If I look at the HTML I can see that the opacity changes and that is why the caption are sometimes not visible. When I first bring up the page, most of the elements have opacity=1, but others will have a very small number like 0.00301952217705548. As I mouse around, elements that started with opacity=1 will change to a very small number.
Here is my code that creates the elements:
$image_div = $('<div />')
.addClass('gImage-row')
.appendTo($preview);
$image_div.append($('<a />')
.addClass('no-highlight')
.attr('href', "{{ IMAGE_DIR }}"+image.image.replace(/thumbnail/,'jpg'))
.attr('rel', "superbox[image]")
.append($('<img />')
.addClass('gImage')
.attr('alt', 'some text')
.attr('src', "{{ IMAGE_DIR }}"+image.image)
.attr('onerror', "noimage(event)")));
This is in a loop and it creates 30-40 images.
In my window.onload function I do this:
$('.gImage-row img').caption();
Here is my CSS:
.figure{
position:relative;
margin:0;
padding:0;
}
.figcaption{
position:absolute;
left:0;
bottom:0;
width:100%;
height:20px;
background-color: black;
foreground-color: white;
opacity:1.0;
}
a:hover.no-highlight {
background: transparent;
}
.gImage-row {
float: left;
text-align: center;
}
.gImage {
width: 150px;
height: 100px;
margin-right: 1px;
background-color: transparent;
}
.label {
float: left;
}
I cannot figure out what is making the opacity change or how to fix this. Anyone have any ideas?

So I think I figured out what is going on here. The code in jquery.caption was doing this:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
$(this).data('caption').figcaption.stop().fadeToggle();
});
fadeToggle works by changing the opacity. Because I had so many images close together, when the user moused around there were a lot of mouseenter and mouseleave events, and each time one occurred it would call stop on the existing fadeToggle. This would leave the opacity at whatever it was at at the moment. I changed this to:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
if ($(this).data('caption').figcaption.css('display') == 'none') {
$(this).data('caption').figcaption.show();
}
else {
$(this).data('caption').figcaption.hide();
}
});
And now it's working perfectly.

Make changing text on loop in Jquery

what i'm trying to do seems pretty simple. keyword seems. haha.
I'm trying to make text that changes back and forth between two languages. Kind of like a GIF type animation (tried that didn't like how it looked) I know flash would be the better option but I don't have those capabilities so i've turned to javascript- but my experience there isn't too great either. here's my HTML
<div id="welcomediv">
<h1 class="welcome" id="welcome">Welcome-Select your language</h1>
<h1 class="welcome" id="bienvenido">Bienvenido-Elegí tu idioma</h1>
</div>
Then I thought I could take that along with the following CSS
.welcome
{
font-size:18px;
font-weight:bold;
font-family:Century Gothic;
color:White;
margin-top:5px;
margin-bottom:30px;
position:relative;
}
#welcomediv
{
display:block;
position:relative;
top:45%;
height:30px;
overflow:hidden;
}
I did that thinking that I could use jquery to move the elements up and down and then they'd go out of view and get what i'm looking for. I want it to go up and out as the other one is sliding back into place. I achieved that. But just couldn't make it loop.
$(document).ready(function () {
$("#welcome").delay(3000).animate({ bottom: '30px' }, 1000);
$("#bienvenido").delay(3000).animate({ bottom: '45px' }, 1000);
});
This is how I did it.
Now I know this probably isn't the best way to go about this so any and all help is greatly appreciated!! How would I simply make it loop? Or should I change it up totally?

You can use setInterval for this:
var showingWelcome = true;
setInterval(function() {
if (showingWelcome) {
$("#welcome").animate({ bottom: '30px' }, 1000);
$("#bienvenido").animate({ bottom: '45px' }, 1000);
showingWelcome = false;
}
else {
$("#welcome").animate({ bottom: '0px' }, 1000);
$("#bienvenido").animate({ bottom: '0px' }, 1000);
showingWelcome = true;
}
}, 3000);
Here's a JSBin http://jsbin.com/xoziquze/1/edit?html,css,js,output that shows it working.
By the way, in my opinion JavaScript is perfectly fine for this and Flash would be overkill.

If all you're looking to do is animate the text back and forth you may want to consider using a CSS keyframe animation, like so:
Working Example
.welcome {
font-size:18px;
font-weight:bold;
font-family:Century Gothic;
color:red;
margin-top:5px;
margin-bottom:30px;
position:relative;
animation: yourAnim 3s infinite alternate; /* name, duration, number of iterations, direction */
}
#keyframes yourAnim {
0%{bottom: 0px;}
25%{bottom: 0px;}
50%{bottom: 55px}
100%{bottom: 55px;}
}
Note browser prefixes omitted for brevity.

jquery fadeIn acting funny?

this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.

Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)

How to show popup message like in Stack Overflow

I would like to add a popup message like the one that appears on Stack Overflow when I am not logged in and I try to use voting buttons.
What is the best method for achieving that?
Is it done using a jquery library?

EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.
Here's how Stackoverflow does it:
This is the markup, initially hidden so we can fade it in:
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
X
</div>
Here are the styles applied:
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
And this is javascript (using jQuery):
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
And voila. Depending on your page setup you might also want to edit the body margin-top on display.
Here is a demo of it in action.

Also checkout jQuery UI Dialog

I use jqModal, easy to use and you can achieve some great effects

Using the ModalPopup in the AJAX control toolkit is another way you can get this effect.

Here's what I found from viewing the StackOverflow source. Hopefully saves some time for someone.
The showNotification function is used for all those popup messages.
var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};
//master...
showErrorPopup: function (e, h, f) {
var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
var i = function () {
g.fadeOutAndRemove()
};
$(e).append(g);
g.click(i).fadeIn("fast");
setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}
css
.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}
It's cool how they use the length of the message to set the fading timeout. I didn't realize all the (non-fading style) messages actually fade out after 30 seconds.

Check bootstrap. There are some pop-up effects, modals, transitions, alerts, everything based on javascript and css.