Highlight changes? - javascript

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

Related

Diagram: Div hover then Displays Image

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'});
});

.hover not working when used with .html

I am trying to do a simple image rollover with jQuery, but this code is not working:
HTML:
<div class="secondcircle" id="circleone">
<p>
<img src="/../ex/img/group1.png">
</p>
</div>
JS:
$("#circleone").hover(
function () {
$(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
},
function () {
$(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
}
);
The mouse enter event fires just fine, but none happens when the mouse leaves.
Moreover, the code works fine with simpler actions - the example in the jQuery docs of appending a span then removing it works just fine.
Why would the html not be working? I've been stuck on this for ages.
Update: Nearly every answer/comment suggests just replacing the image source, and while this works perfectly (thanks!) sometimes I do need to change the HTML (such as to change text). This was just one example. Sorry, I should have better specified that in the question.
Instead of replacing your entire HTML is is a better idea to just change the source of the image.
$("#circleone").hover(function () {
$(this).find('img').attr("src","/../ex/img/group2.png\");
},
function () {
$(this).find('img').attr("src","/../ex/img/group1.png\");
}
);
It works if you adjust it so it just replaces the img, like this:
http://jsfiddle.net/7etUU/
I think the main issue is your div being a block element that spans 100% of the width, then the contents get replaced on hover which removes the content, so it flashes.
Why not do this with CSS?
#circleone {
background-image:url('FirstImageURL');
}
circleone:hover{
background-image:url('SecondImageURL');
}
Totally stole this from this question.
I think your div is taking 100% width. Try adding a "float:left" CSS property. Like this...
.secondcircle{
float : left;
}
I noticed something weird when testing this. His original method does not work until I added a border around the parent div, then it works just fine.
Anyone know why that might be?
jsFiddle
/*UNCOMMENT ME AND I WILL WORK
#circleone
{
border: 1px solid #000;
}*/
You do not need to replace the whole HTML with hover event. If your goal is to change the image on hover, use the attr method instead http://api.jquery.com/attr/:
HTML
<div class="secondcircle" id="circleone">
<p>
<img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
</p>
</div>
jQuery
$("#circleone").hover(
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
},
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
}
);
Working JsFiddle here: http://jsfiddle.net/TBMxm/1/
Also, this is better from performance and best practice point of view.
Update1
jQuery Code if you want to use HTML method:
var originalContent = $('#circleone p').html();
$("#circleone").hover(
function () {
$('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
},
function () {
$('#circleone p').html(originalContent);
}
);
Working sample using HTML: http://jsfiddle.net/TBMxm/3/

How to change image on hover with javascript

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.

Is it possible to hide title when hovering image?

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', '');
}

JQuery background color animate not working

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background.
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
However, this code does not work.
I have only the JQuery core and JQuery UI linked to my web page.
Why doesn't the code above work?
I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases.
Try this function:
$(document).ready(function () {
$.fn.animateHighlight = function (highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || "fast"; // edit is here
var originalBg = this.css("background-color");
if (!originalBg || originalBg == highlightBg)
originalBg = "#FFFFFF"; // default to white
jQuery(this)
.css("backgroundColor", highlightBg)
.animate({ backgroundColor: originalBg }, animateMs, null, function () {
jQuery(this).css("backgroundColor", originalBg);
});
};
});
and call it like so:
$('#exampleDiv').animateHighlight();
Tested in IE9, FF4, and Chrome, using jQuery 1.5 (do NOT need UI plugin for this). I didn't use the jQuery color plugin either - you would only need that if you want to use named colors (e.g. 'yellow' instead of '#FFFF9C').
I believe you also need JQuery Color Animations.
I had the same problem and I was able to get everything to work when I included the correct js files.
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>
I took it a step further and found a nice extension someone wrote.
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
.animate({ backgroundColor: current }, duration / 2);
}
The above code allows me to do the following:
$('#someId').flash('255,148,148', 1100);
That code will get your element to flash to red then back to its original color.
Here's some sample code. http://jsbin.com/iqasaz/2
The jQuery UI has a highlight effect that does exactly what you want.
$("exampleDiv").effect("highlight", {}, 5000);
You do have some options like changing the highlight colour.
Animating the backgroundColor is not supported in jQuery 1.3.2 (or earlier). Only parameters that take numeric values are supported. See the documentation on the method. The color animations plugin adds the ability to do this as of jQuery 1.2.
I came across the same issue and ultimately it turned out to be multiple call of jquery's js file on the page.
While this works absolutely fine with any other methods and also with animate when tried with other css properties like left, but it doesn't work for background color property in animate method.
Hence, I removed the additional call of jquery's js file and it worked absolutely fine for me.
For me, it worked fine with effects.core.js. However, I don't recall whether that's really required. I think that it only works with hexadecimal values. Here's a sample hover code that makes things fade as you hover. Thought it might be useful:
jQuery.fn.fadeOnHover = function(fadeColor)
{
this.each(function()
{
jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
jQuery(this).hover(
function()
{
//Fade to the new color
jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
},
function()
{
//Fade back to original color
original = jQuery(this).data("OrigBg");
jQuery(this).stop().animate({backgroundColor:original},1000)
}
);
});
}
$(".nav a").fadeOnHover("#FFFF00");
I had to use the color.js file to get this to work. I'm using jquery 1.4.2.
Get the color.js here
Just added this snippet below jquery script and it immediately started working:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Source

Categories

Resources