I am using lytebox for my image gallery. It works great except when a user hovers on images, there will be texts with html tags shown on the browser.
ex:
<h1>This is the first image </h1>
<p>The image desc<p>
I need the title attribute for my image gallery but don't want it to show when the user hovesr the image. Is that possible? Thanks for the help.
var imgTitle;
$("img").hover(function(){
imgTitle = $(this).attr("title");
$(this).removeAttr("title");
}, function(){
$(this).attr("title", imgTitle);
});
I think you'd have to do something like:
$('#slideshow img').hover(function() {
$(this).data('title', $(this).attr('title'));
$(this).attr('title', '');
}, function() {
$(this).attr('title', $(this).data('title'));
});
Demo: http://jsfiddle.net/lucuma/cX5MD/
You won't see the title on the img's but if you inspect them you'll see they are still there.
You could also use jQuery removeAttr and attr instead of setting it to empty string.
Very simple like this
$('img').removeAttr('title');
Related
ANSWERED: Updated Fiddle
I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window.
I then have 5 div boxes in a fixed position all around the window.
What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
EDITED: What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
Then once the mouse has left that Div box of written content the original Diagram is shown.
Would I just need to create an if statement reverting the display proptery back to none?
I have created this FIDDLE for a basic skeleton.
I thought I was on the right track using the jquery below, but I can not seem to get it to work?
Any input would be greatly appreciated.
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
$diagram1.css(['display':'block']);
});
$('.content-2').hover(function(){
$diagram2.css(['display':'block']);
});
$('.content-3').hover(function(){
$diagram3.css(['display':'block']);
});
$('.content-4').hover(function(){
$diagram4.css(['display':'block']);
});
$('.content-5').hover(function(){
$diagram5.css(['display':'block']);
});
});
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5'),
$image=$('.image_container img');
$('.content-1').mouseover(function(){
$diagram1.css('display','block');
}).mouseout(function() {
$diagram1.css('display','none');
});
$('.content-2').mouseover(function(){
$diagram2.css('display','block');
}).mouseout(function() {
$diagram2.css('display','none');
});
$('.content-3').mouseover(function(){
$diagram3.css('display','block');
}).mouseout(function() {
$diagram3.css('display','none');
});
$('.content-4').mouseover(function(){
$diagram4.css('display','block');
}).mouseout(function() {
$diagram4.css('display','none');
});
$('.content-5').mouseover(function(){
$diagram5.css('display','block');
}).mouseout(function() {
$diagram5.css('display','none');
});
});
The .css() api syntax was wrong it should be .css('display','block'); and not .css(['display':'block']);
You could use mouseover and mouseenter to have easy way of fullfilling your task instead of hover
JSFiddle-DEMO
you need to make other images invisible when you are hovering over a certain div. image 1, 2, 3, 4, 5. all are overlapping each other. if you take your mouse over image 2 then you need to make image 1,3,4,5 invisible. you can add the visibility: hidden in the jquery you made.
$('.content-1').hover(function(){
$diagram5.css(['display':'block']);
//get visibility code here
});
Hope this answers your question
First you have to change the css syntax then you have to hide all the other images before showing the correct one.
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
hide();
$diagram1.css('display','block');
});
$('.content-2').hover(function(){
hide();
$diagram2.css('display','block');
});
$('.content-3').hover(function(){
hide();
$diagram3.css('display','block');
});
$('.content-4').hover(function(){
hide();
$diagram4.css('display','block');
});
$('.content-5').hover(function(){
hide();
$diagram5.css('display','block');
});
function hide()
{
$(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});
DEMO
on
$diagram5.css(['display':'block']);
maybe it should be like this
$diagram5.css('display','block');
answered fiddle: http://jsfiddle.net/aswzen/4o6mn3pm/6/
and then to make it reversible you have to put the original state display on each block again, like a lamp switches. But if you do this using the display property, probably you're doing it wrong.
Full working filddle as you wish: http://jsfiddle.net/aswzen/4o6mn3pm/11/
but not recommended
The Change display to block using jquery has some problem.
Simply change
$diagram1.css(['display':'block']);
to
$diagram1.css("display", "block");
/**Working fiddle**/
Working fiddle here
To Set a CSS Property
$("p").css("background-color", "yellow");
To Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Detail
replace [] to {} like
$('.content-5').hover(function(){
$diagram5.css({'display':'block'});
});
I am using the jQuery gridrotator effect for my photo gallery. This plugin creates a grid of images inside a number of columns and rows which will arrange the images into the grid and the remaining images will appear with different animations and delays. But to do this the tag <img> is removed and is replaced by anchor <a> with src into the style.
from this:
<img src="thumbnail/23.jpg"/>
to this:
<a href="#" style="background-image: url(thumbnail/23.jpg);">
I want to disable that rotator effect and keep static images by clicking on a button. So I tried to add the <img> tag and remove anchor tag:
$("#destroy").click(function(){
$("#ri-grid").attr('id','ri-order');
var anchor = $("#ri-order").children('ul').find('a');
anchor.each( function() {
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','');
$(this).parent().append('<img />');
$(this).parent().find('img').attr( 'src' , bg );
$(this).remove();
});
});
Here is the example. If you click on "Disable Effect" button you can see that my code works fine but after a few seconds the tag anchor and the animation returns in the DOM.
Why? Is there a way to disable that effect? or how can I disable or destroy the gridrotator() function?
Thank you so much for any help!
var Grid = $("#ri-grid").clone();
$("#ri-grid").html("").replaceWith(Grid);
$(".ri-grid").attr("id", "ri-grid-new");
Add this to the beginning of your $("#destroy").click function and that should do the trick.
Hey guys I'm new here and i'm looking to do something on my website, I have a div and I want that when people hover it with mouse it change the image in it into another image.
I found this http://jsfiddle.net/EXNZr/1/ but it's only working when I hover the image, how do I make it change when I hover the div?
Thanks in advance and sorry for broken english
<div id="content"><img id="changeonhover" src="../test/images/yes.png"></div>
this is my code, i want that when people hover on "content" the image in "changeonhover" change into no.gif for example
http://jsfiddle.net/EXNZr/54/
You simply apply the hover event handler to the parent div and change the src of the image tag within using .find();
References:
http://api.jquery.com/find/
Feel compelled to tell you this can be done purely with CSS if you change the <img> tag to <div> with background image
Try this: http://jsfiddle.net/Ry8E4/
$(document).ready(function()
{
$("#theDiv").hover(
function()
{
$("#imgDino").attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
},
function()
{
$("#imgDino").attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
}
);
});
$(document).ready(function() {
$("#content").hover(
function()
{
$('#changeonhover', this).attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
},
function()
{
$('#changeonhover', this).attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
}
);
});
Call event on #content and not on #changehover.
This is my code:
<img src="image.jpg" alt="" title="some title" />
When I hover that image "some title" appears. Is it possible to be hidden?
It can be easily done as some answers point out, but knowing what you want to do with title, I would use a data-* custom attribute or attach the title with .data()
<img src="image.jpg" alt="" data-title="some title" />
or
$('img').data('title', 'some title');
It's simple enough to remove the title attribute, but 'hiding it' is not possible (so far as I'm aware); in order to remove the title the following should work, though currently untested:
$('img').hover(
function(){
$(this).data('originalTitle',$(this).title());
$(this).removeAttr('title');
},
function(){
$(this).attr('title',$(this).data('originalTitle');
});
In the above I've chosen to move the attribute, and then replace it on mouse-out.
To remove the title permanently:
$('img').removeAttr('title');
References:
attr().
data().
hover().
removeAttr().
If it's just a question of hover, you can make pointer-events: none; on image, and it will fix the issue.
You can move it to image data... and back. Like that
$('img').hover(
function () {
$(this).data('title',$(this).attr('title')).removeAttr('title');
},
function () {
$(this).attr('title',$(this).data('title'));
}
);
Yes! with jQuery you can remove it on mouseover and add it again onmouseout -
$(function(){
var ttext;
$('img').hover(function(){
ttext = $(this).attr('title');
$(this).removeAttr('title');
},
function(){
$(this).attr('title', ttext);
});
});
No, not really. But you could replace it with JavaScript, or just leave it blank.
jQuery example:
$('[title]').removeAttr('title');
Kind of hilarious that on Stack Overflow, five people can give the same answer at the same time :P
$(function(){
$('img').hover(function(){
$(this).removeAttr('title');
}, function(){
$(this).attr('title','some title');
});
});
Something I tried and worked with jQuery / jQuery UI on Chrome at least:
Create the object you want (and don't want) to have a title.
Once all these items exist, add a tooltip.
Go through all items you don't want the tooltip displaying the usual way, and set the tooltip to ''.
Example from my code, occuring after named HTML elements are available:
jQuery(document).tooltip();
for(var index = 0; index < sites.length; ++index) {
jQuery('#' + sites[index][0]).attr('title', '');
}
I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton
I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.
Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:
$("#caption").mouseover(function() {
$(this).stop();
});
The stop function cancels any animation that is running on the selected element (in this case, the caption element).