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', '');
}
Related
I have this following jquery on my view:
$(document).ready(function() {
$(function() {
$('#link1').click(function() {
$('#link2').show();
$('#link1').hide();
$('#frame').attr('src', 'http://google.com/');
});
});
});
$(document).ready(function() {
$(function() {
$('#link2').click(function() {
$('#link1').show();
$('#link2').hide();
$('#frame').attr('src', 'http://yahoo.com/');
});
});
});
On pageload, the link2 is set to hide. What the jQuery does is: when the link with id link1 is clicked, it will show the link with idlink2 and hide itself. And vice versa.
My problem is it seems that my jQuery code can still be simplified. Is there other ways I can do what I wanted with simpler version? Thanks for the help!
Working example : http://jsfiddle.net/cuJBm/
$(document).ready(function() {
$(function() {
var linkSet = $('#link1').add('#link2')
linkSet.click(function() {
linkSet.toggle();
});
});
});
The add method allows you to add a different selector to the set of matchers, thus binding both clicks simultaneously. By saving the constructed set to a variable (linkSet), it stops you from having to traverse the DOM twice.
The only two assumption made here, are
1) That in the initial state only one is visible.
2) That the id structure is meaningful, useful, and classes will not suffice.
http://jsfiddle.net/cuJBm/1/
To answer your second question about setting an attribute on #frame. There are numerous ways of doing this. Perhaps the simplest is to add the following to your .click handler (after the toggle).
if ($(this).attr('id')=='link1'){
$('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
$('#frame').attr('src', 'www.yahoo.com');
}
Personally, I would probably add a custom attribute to your link elements, something like:
<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>
And then: (again, just after the toggle):
source = $(this).attr('iframe-source');
$('#frame').attr(src, source);
The reason for saving source if is that if you attempt to get $(this) within the .attr on $('frame'), it will (as always) return the currently matched element, ie $('#frame').
Alternately (and very similiarly to the above approach), you could use the innerHTML of the link. For example:
<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>
And then: (again, just after the toggle):
source = $(this).find('span').text();
$('#frame').attr(src, source);
Personally, I dislike this last method as it pollutes the DOM structure, leading to slightly more expensive rendering times, and (in my opinion) less readable code. Practically, all three methods work just fine.
<p class="link" style="display:none;" data-link="http://google.com/">sfdf</p>
<p class="link" data-link="http://yahoo.com/">ee</p>
$('.link').click(function() {
$('.link').toggle();
$('#frame').text($(this).data("link"));
});
jsfiddle :http://jsfiddle.net/xqDus/1/
Use jQuery toggle()
just add this
Google
Yahoo
target is id of the frame
$(function() {
$('#link1, #link2').click(function() {
$('#link1, #link2').toggle();
});
});
I have a couple of images on my Joomla site, each one with a black&white version and a color version. I'd like to change a part of the src ('bw' to 'color') when hovered over with a nice crossfade. I'm very new to jQuery, so the only code I have is this, which is probably completely wrong.
$(".grey img").mouseover(function() {
$(this).attr('src', function(i, src) {
return src.replace( 'bw', 'color' ).fadeIn(800);
});
$(".grey img").mouseout(function() {
$(this).attr('src', function(i, src) {
return src.replace( 'color', 'bw' ).fadeOut();
});
I've searched for a solution for hours and at this point I'm not sure if it's really obvious and I'm completely missing it. So, sorry if it is, or if there is a solution somewhere and I didn't look enough.
I would like to solve this without having to link two images in the html, but if there's no other solution, I would be thankful for any tips on how to achieve this.
You have to get the source initially before you can change it. I'll also clean it up a bit:
$('.grey').on({
mouseenter:function(){
var $this = $(this),
src = $this.attr('src').replace('bw','color');
$this.fadeOut(function(){
$this
.attr('src',src)
.on('load',function(){
$this.fadeIn();
});
});
},
mouseleave:function(){
var $this = $(this),
src = $this.attr('src').replace('color','bw');
$this.fadeOut(function(){
$this
.attr('src',src)
.on('load',function(){
$this.fadeIn();
});
});
}
},'img');
As you can see, you were on the right track, but you just need to capture the source before you can manipulate it. The other changes I made were:
Using .on() which allows for single binding event
Using mouseenter and mouseleave instead of mouseover and mouseout
Delegating .on() assignments to all img contained in .grey
Also I used a variable for cleanliness of reading, but you could have just as easily placed the $(this).attr('src').replace('bw','color') in the assignment and foregone the variable entirely.
EDIT - updated to show fadeIn/fadeOut on image change.
I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks
Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});
You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});
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');
HTML:
<html>
<body>
<textarea>Original Text</textarea>
<button>Replace</button>
</body>
</html>
jQuery:
$(function() {
$('button').click(function () {
$('body').html($('body').html().replace('Original','New'));
});
});
http://jsfiddle.net/r7MgY/
Can I highlight changes somehow with a fading yellow background maybe?
As Sarfraz says, use the jQuery color plugin. Usage is the same as animate method in jQuery. The plugin overrides the animation methods for these properties: 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'.
jQuery animate method usage and info can be found here: http://api.jquery.com/animate/
Also, if you want to replace something in the HTML it's better to get the wrapper tag of the tag that contains what you want invoke the replace method on instead of search through the entire body as a string. Normally you'd use:
$('#idOfMyWrapperTag').html().replace('this', 'that')
But since you are using a textarea you can get it's value with this:
$('textarea').val().replace('this', 'that');
..fredrik
Because its a textarea, you cant inject any html directly into the content. You would have to overlay an absolute positioned element containing a red squiggle or similar - which becomes a bit of a nightmare when working out the exact location of the text.
If possible, ditch the textarea and just use an editable div or similar.
Can I highlight changes somehow with a
fading yellow background maybe?
You will have to use the jquery color plugin to fade the background color.
You might be able to workaround it with
$(function() {
$('button').click(function () {
$('body').html($('body').html().replace(/Original/g,'<span class="fade" style="opacity: 0; background-color: yellow;">New</span>'));
$('.fade').animate({
'opacity': 1
}, 1000, function(){
$(this).contents().unwrap();
});
});
});
If you don't want to include yet another plugin, you can simply use a little jQuery code to accomplish a fading overlay:
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
Credit goes to this answer: https://stackoverflow.com/a/11589350/1145177