Develop Reference

How to reverse hover state with jQuery?

My assignment requires that I use jquery only. Doesn't seem practical but I'm limited. I was able to figure out how to do a hover state but when the styles get applied, it stays. So check this out..
$(".cta-button").css({
background: "#476887",
"text-align": "center",
width: "173px",
height: "40px",
margin: "62px auto 33px",
cursor: "pointer"
});
$(".cta-button").hover(function() {
$(this).css("background-color", "#509de5");
});
Of course when I'm no longer hovering, I want it to revert back to it's original background color. How do I go about doing this? Thanks!!

You can easily achieve that by using the hover method of jQuery
As stated in the docs, this method can accept one to two arguments, the first one is called the handlerIn which can be translated as the hover state, mouse enter, etc and the handlerOut which corressponds to the 'mouse leave'
So to achieve what you want you can try something like this
$('DOM_NODE').hover(mouseEnter, mouseLeave);
function mouseEnter() {
// do something when the mouse enters the dom node
};
function mouseLeave() {
// do something when the mouse leaves the dom node
};

You can add mouseover eventa fiddle
$(".cta-button").css({
background: "#476887",
"text-align": "center",
width: "173px",
height: "40px",
margin: "62px auto 33px",
cursor: "pointer"
});
$(".cta-button").hover(function() {
$(this).css("background-color", "#509de5");
}).mouseover(function() {
$(this).css("background-color", "#476887");
});

jQuery slide animation on existing divs after prependTo

I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).

Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/

HTML/css/Javascript cloud slide

So, I am trying to create an effect similar to the clouds on this website: http://www.poweredwebsite.com/index-v.php
How exactly would I do this using either html, css, or javascript?

You could use a repeating background image and animate the x position with jQuery:
The HTML could be whatever you want:
<div class="banner">
<!-- etc. -->
</div>
And the CSS:
.banner {
height: 200px;
width: 800px;
background: url(path/to/image);
}
And some jQuery:
function animateBanner() {
jQuery('.banner').css({
backgroundPositionX: '0'
}).animate({
backgroundPositionX: '-400px'
}, 5000, 'linear', animateBanner);
}
animateBanner();
Here's a demo: http://jsfiddle.net/tLEBa/

Taking what Brandon suggested and advancing it step further, I came up with a possible working solution utilizing jquery's animate function:
function animate() {
$( ".banner" ).animate({ "left": "+=400px" }, 3000, "linear",
function() {$(this).css({ "left": "-=400px" });
animate();
} );
}
animate();
please see the following snippet:
jsfiddle
The suggested solution uses two images, positioned side by side horizontally.
Both images x coordinate is interpolated linearly to achieve wrap effect.
Notice that you will need a seamless image for a good match.

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!

How do I set the width of dijit.form.Select?

I have a programmatically generated dijit.form.Select. Unlike most other widgets, the Selects do not offer a resize method like
dijit.resize({w: width, h: height});
I have not found a standardized way of setting the width of a select. This is quite bad because the autosizing makes Dialogs "explode" on long select values.
Is there a standard way to resize a select I have missed? Or do I have mess with the markup of the select the hard way?
Thanks!

This can be achieved with CSS by setting the width of the inner label like this:
.tundra .dijitSelect .dijitButtonText {
text-align: left;
}
.tundra .dijitSelectLabel {
width: 120px;
overflow: hidden;
}

Why wouldn't you simply do this by setting the widget's style?
http://jsfiddle.net/QEjYD/1/
Unfortunately, due to how the widget is written, this doesn't work if you hook up the width in a CSS class, or if you set the width style after the widget has been created.

Give style to constructor:
var mySelect = new Select({
id: 'mystatus',
name: 'mystatus',
style: {width: '150px'},
required : false,
store: os,
searchAttr: 'label',
}, "mystatus");

I would use
dojo.marginBox(selectWidget.domNode, {w: width, h:height})

try this
.dijitSelect .dijitButtonNode {
width: 16px !important;
}
dom-style.set(dojo.query('.dijitSelect')[0], 'width', with);