Develop Reference

Title attribute value appears on rollover, how do I stop this?

Below is a JS fiddle that I have been using to implement a tooltip on my website.
JSFiddle
However when I implement this on my website, the title attribute value appears on rollover (like an alt attribute) as well as the tooltip. I need it not to do this! The actual code from my website is below.
Javascript
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
HTML
<ul class="thumb">
<li> <img src="slide1image.png" width="200" height="229" title="come join us and have lots of fun with our clowns, tigers and magician" /></li>

Do not use the title attribute then.
Use data-title as the attribute name and access it with the $this.data('title')
Demo at http://jsfiddle.net/gaby/62NT7/1/

Since the essence of what you want to do is to prevent the default behavior of hovering over an image, the following should take care of it:
$('img').on('hover', function( e ) {
e.preventDefault();
});
WORKING JSFIDDLE DEMO
Other ways of resolving this include:
- removing the attribute: $('img').removeAttr('title')
- saving the value to a data attribute and removing it: $('img').data('title', function() { return this.title; }).removeAttr('title');
- editing your markup so that you use a data attribute instead of title attribute - as #GabyakaG.Petrioli's answer.

Change opacity of 2 elements to give a crossfade effect

I am working on some functionality for an e-commerce where by a user clicks a products colour, and the previous image of the products fades out while the new product fades, I am trying to achieve a cross fade effect, however I have flicker effect in there which I do not want, I think it comes when I am removing the old image from the dom, here is a fiddle to show you what I trying to do.
http://jsfiddle.net/L9Z5G/

I hope this is what you were looking for: Demo
$('.colours').click(function() {
if ($('#' + $(this).html().toLowerCase()).attr('class') == 'active') { return; }
var active = $('.active');
var next = $('#' + $(this).html().toLowerCase());
active.fadeOut(500, function() {
$(this).toggleClass('active');
});
next.fadeIn(500, function() {
$(this).toggleClass('active');
});
});​

Is it not easier to use .hide() and .show(), and just let them crossfade themselves?

To bind a click event, you use click() heres how.
$('#color1').click(function(){
$('#image1').fadeOut('fast');
});

Try this please: Working demo http://jsfiddle.net/djMZe/1/ or http://jsfiddle.net/R7u8G/1/
Hope it fits the needs! :)
code
$("#colours li").click(function() {
$(".large-image:first-child:not(.new)").animate({
opacity: 0
}, 500);
var img = $("<img />").attr('src', $(this).data("alternative")).attr("class", "large-image new");
img.css({
opacity: 0
})
$(".zoom-image").append(img);
//img.animate({ opacity : 1}, 500);
img.css({
"opacity": "1"
}).fadeIn("slow");
$(".large-image:not(:last-child)").remove();
});​

See This DEMO, hope you've required this effect.
EDITED: UPDATED FIDDLE
jQuery Cycle Plugin
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="50" height="50" /></li>';
}
});​
SEE REFERENCE

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?

DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});

$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})

What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});

I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});​
jsfiffle: http://jsfiddle.net/P6tgH/

$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/

This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});

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!

dealing with sliding in jquery?

i have this script that with li list, if you click on one of the list items, a box slides to the right, and if you click again, its slides back to its orginal place(toggle)
the demo is here:
http://www.kornar.co.uk/home2.php
the problem that i have is on slideout, i want the width of the panel to be 700px
$(".panel").css("width","700px");
on slide back in, i want the width to be 350px, so it hides behind the list again.
$(".panel").css("width","350px");
but the problem im having is on when it slides back, it deosnt hide behind the list, it still shows the panel on the right? thanks

Hey dude, I made a couple of assumptions about what you were trying achieve on the whole, but maybe this is what you were trying to do... The following is all I changed:
<script type="text/javascript">
$(document).ready(function() {
$('.block').click(function(){
var id= $(this).attr('id');
var data_id= $(".data").html();
var panelPositionLeft=$('.panel').css('left');
if(panelPositionLeft=='0px') {
//the .panel is hidden, so slide it out and populate .data with the new id
$('.panel').animate({left: 350, width:700});
$('.data').html(id);
} else if (data_id!=id){
//something other than the previous .block was clicked and the .panel is obviously open, so don't collapse, just add the new id into .data
$('.data').html(id);
} else {
//neither of the previous situations are true, so it must be that the previously clicked block is being clicked again. Just slide it closed and don't change the value of .data
$('.panel').animate({left: 0, width: 350});
}
});
$('.close').click(function(){
// just slide it closed.
$('.panel').animate({left: 0, width: 350});
});
});
</script>
There are still a few things you could clean up, but I thought this would be a little easier to read and understand. Try this out, let me know if I misunderstood the problem.
Thanks!

Try surrounding the "+" with quotes (i.e. "+" + panel.outerWidth()). I think this should work.
Richard

For getaways reference: this is what I would have posted had masondesu not got there first. As you can see it is very similar, but has if statements where none are actually required (as in masondesu's solution.
$(document).ready(function () {
$('.block').click(function () {
var id = $(this).attr('id');
var data_id = $(".data").html();
var panel = $('.panel');
var panel_width = $('.panel').css('left');
var currLeft = panel.css('left');
var blockWidth = $(".left").outerWidth();
if (data_id == id) {
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
}
else {
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
}
$('.data').html(id);
return false;
});
$('.close').click(function () {
var panel = $('.panel');
var currLeft = panel.css('left');
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
return false;
});
});
Regards,
Richard

You don't resize the panel on "li"-click, it resizes only on ".close"-click. so it won't resize ;)