Here is my code:
jQuery:
$(document).ready(function () {
$("#news").hover(function () {
$('#news_img').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news1").hover(function () {
$('#news_img1').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news3").hover(function () {
$('#news_img3').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news4").hover(function () {
$('#news_img4').animate({
height: 'toggle'
}, 290, function () {
});
});
});
JSFIDDLE here:
http://jsfiddle.net/huydq91/N89Kw/
I would like to reduce my code and make it easier to manage in the future whenever I would love to add more <tr> or <td> tags without editing too much in the jQuery and CSS.
You can target the hover elements by its class news and find the target element by appending the last digits in the hovered element's id to news_img like
$(document).ready(function () {
$(".news").hover(function () {
$('#news_img' + this.id.replace('news', '')).stop(true).animate({
height: 'toggle'
}, 290, function () {});
});
});
Demo: Fiddle
You can remove the css part of the hover by adding some data-* attributes to the image like
<img src="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_zps923b43dc.jpg" border="0" alt="Showroom1" data-hover="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_1_zpse41d0851.jpg" />
then
$(document).ready(function () {
//since the news elements has a common class, use it to target all the news elements instead of using individual ids
$(".news").hover(function (e) {
//you can find the `news_img` within the current news item using .find() instead of using its class to target it
$(this).find('.news_img').stop(true).animate({
height: 'toggle'
}, 290);
//find the image element within the current news
var $img = $(this).find('.imgswap img');
//if the current event is mouseenter then show the hover image else the src image
//the hover handler registers 2 handler one for mouseenter another for mouseleave
$img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src'));
});
//when we leaves the news elements we need to put back the original src, so store it using data api
$('.news .imgswap img').each(function () {
$(this).data('src', this.src);
})
});
Combine your jQuery calls into one function family. Instead of 4 separate .hover() calls, use class names and do the following:
$(document).ready(function () {
$(".news").hover(function(){
$(this).find(".news_img").animate({
height: "toggle"
}, 290, function(){
});
});
});
On your CSS, you're pretty compact already and there's really not much more you can do to reduce the amount of code you have.
Updated fiddle
Use attribute selector in jquery.
$(document).ready(function () {
$("[id^=news]").hover(function () {
$('#news_img').stop().animate({
height: 'toggle'
}, 290, function () {
});
});
});
Fiddle
Related
Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers
I am using jquery UI dialog to show comments or other text depending upon what is clicked.
Here is my JSfiddle link Dialog Demo
I have used the code
$('.showComments').each(function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$('.showContractChanges').each(function () {
var panel = $(this).parent().siblings('.divContractChangeDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$(".divCommentDetail, .divContractChangeDetail").dialog({
autoOpen: false,
modal: true,
open: function () {
$(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
},
show: {
effect: 'blind',
duration: 1000
},
hide: {
effect: 'explode',
duration: 1000
}
});
and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.
$(document).on('each', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
but this doesn't work at all. Am i doing something wrong.
Thanks for the help.
If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.
You should use on like that :
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
I have this HTML code:
<img class="swap" src="/Static/Images/Meny_normal_01.png" alt="" />
and this is my Jquery code and what it does is that when I hover over my img it swaps to another img, but I would like to have a hover out and then it swap back to the old img.
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
});
});
Would appreciate any kind of help
.hover() binds two handlers to the matched elements, to be executed when the mouse pointer enters and when you leaves the elements.
$(".swap").hover(
function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
You can pass 2 handlers into the hover - like this:
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
});
Have a look at: http://api.jquery.com/hover/ for more info
Or a similar item on SO: jquery change image on mouse rollover
$(".swap").hover(function() {
$(this).attr("src", function(i, val) {
return val.indexOf("hover") == -1
? val.replace("normal", "hover")
: val.replace("hover", "normal");
});
});
DEMO: http://jsfiddle.net/UJR8M/
I'm using jQuery Tools (http://jquerytools.org/) and cannot get the below function to accept a passed parameter. I'm not proficient in javascript or jquery and cannot find a solution anywhere that will make this work for the below code. Thank you for any help!
Current setup:
<a href='javascript:popup();'>Text Link That Calls Below Function</a>
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
I would like it to do something like this...
<a href='javascript:popup(apples);'>Text Link That Calls Below Function</a>
<script>
function popup(choosebox) {
if ($("#choosebox").hasClass("init")) {
$("#choosebox").overlay().load();
}
else {
$("#choosebox").addClass("init");
$("#choosebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
You need to pass a string as an arguement, unless you have a variable named apple defined above (var apples; ). Try changing it like below,
<a href='javascript:popup("apples");'>Text Link That Calls Below Function</a>
Note the quotes surrounding the popup("apples")
Since you are using jQuery, you can do it nicely like below,
HTML:
<a href='javascript:void(0)' class="aLink" >Text Link That Calls Below Function</a>
JS:
$(function () {
$('.aLink').click(function () {
popup("apples");
});
});
Also I think you may need to change your selector like below,
function popup(choosebox) {
var $choosebox = $("#" + choosebox);
if ($choosebox.hasClass("init")) {
$choosebox.overlay().load();
}
else {
$choosebox.addClass("init");
$choosebox.overlay({
//..rest of your code
The unobtrusive javascript approach is generally considered better and the JQuery way.
$('a.someclass').click(function() { popup('orange'); });
Providing you give your <a> element has a class of "someclass" in this example.
This keeps your js seperate from your html. That code could go in document ready event:
$(document).ready(function() {
// code here
});
Write a click event for a class on that anchor, then determine which "box" is related to that link by reading a data- attribute. This will give you a generic, reusable block of jQuery code that can be called by any anchor tag matching this pattern.
HTML:
Text Link That Calls Below Function
JavaScript:
$(document).ready(function(){
$('a.popup').on('click', function(e){
var $_target = $('#' + $(this).data("choosebox"));
if ($_target.hasClass("init"){
$_target.overlay().load();
} else {
$_target.overlay().load({
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5 },
closeOnClick: true,
load: true
});
}
e.preventDefault();
});
});
I have this at the moment: (the list is longer, but this is just one element)
<a href="Products.aspx"
onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"
onmouseout="onMouseOverCatDisplay("DSC_0414_SS.jpg", "You see: bike");">Car</a>
and above the html, I have this javascript:
<script type="text/javascript" language="javascript">
// <![CDATA[
function onMouseOverCatDisplay(catimg, catnaam)
{
$("#lh").stop().animate({ color: "#1C1C1C" }, 2000);
$("#lh").html(catnaam);
$("#lh").stop().animate({ color: "#DBDBD6" }, 2000);
$("#imgCat").attr("src", catimg);
}
// ]]>
</script>
and this:
<h4 id="lh">Bikes</h4>
<img id="imgCat" src="img/bike.jpg" />
now everything works fine, but the animation does not work.
I'd like to fade out the h4, replace the text and then fade back in.
EDIT set the image source also with jQuery instead of javascript
EDIT2
rewritten the part so that it didn't use the mouseout and mouseover to trigger the javascript. but can't figure out a way to pass another paramter to the jquery (the image)
<script type="text/javascript">
$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
},
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
});
For starters, you are using jQuery, but attaching the events as inline javascript function calls. Don't do that. Attach your event to your DOM objects inside the document ready jQuery function.
Then you are using "document.getElementById" which is fine, but why not just use a standard jQuery selector to be consistent (which, in turn, will use getElementById for you).
Finally, what's likely happening is that your function is calling two animations at the same time. What you want is the second animation to happen only after the first one is finished. To ensure that, you want to call the first animation, then call the html swap and second animation via a callback function in the first. See the documentation for an example:
http://api.jquery.com/animate/
Finally, while animating the color is fine, you may prefer to use fadeIn and fadeOut instead.
UPDATE:
Also, you have this:
onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"
Try this instead:
onmouseover="onMouseOverCatDisplay('H5032.jpg', 'Go to: cars');"
final Demo : http://jsfiddle.net/VdFD9/
If you would like to do this using title attribute, just modify the below code and set your title attributes as reference links(image links if you would like to).
HTML :
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a>
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a>
<br />
<br />
<h4 id="lh">Bikes</h4>
<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" />
javascript :
var arr = [];
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG";
arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG";
//for instance i'm using an array to cache your image links
//if you can want these links as your anchor tag "title" attrib just modify the below code
$(document).ready(function() {
var which_image = null; //detect which Image to use
$(".subCatLinksSelected").hover(function() {
var catn = $(this).attr('title');
if(catn == 'cars') {
which_image = arr[1];
} else {
which_image = arr[2];
}
onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9');
},function() {
var catn = $("a.subCatLinksSelected").first().attr('title');
which_image = arr[0]
onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000');
});
});
function onMouseOverCatDisplay(catimg, catnaam, color) {
$('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg);
$("#lh")
.css({opacity:0.2,color:"#1c1c1c"})
.html(catnaam)
.css({color: color})
.stop()
.animate({opacity:1 },2000);
}
Did you try
$("#lh").stop().animate({ color: "#1C1C1C" }, 2000, function() {
$("#lh").html(catnaam);
$("#lh").stop().animate({ color: "#DBDBD6" }, 2000);
});
Because I think the two animations are overlapping eachother. This way the second one will start after the first one is finished.
$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
},
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
});
Should work, however, if you want to access the image you'll need to bind it to each function... try this:
$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
}.bind($(some selector for your image)),
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
}.bind($(some selector for your image)));
You'll then be able to access the image in each function using this, like this.src