The code below shows a window when mouse is over a link. I wonder how to make this window appear on top of the word when it doesn't "fit" on the screen.
function showLayer(obj){
var div = document.getElementById(obj).style;
div.display = "block";
}
if i understand your question, here is some jquery to help (also replaces showLayer())
$(document).on("mouseenter", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mouseout", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mousemove", '#myElement', function (i) {
$("#" + obj).offset(function () {
return {left: i.pageX, top: i.pageY}
});
});
im not sure how you get the value for obj, so you would have to edit to your specific needs.
Related
I have a js file that has .on("click" , ..) chaining happening that I would like to also add a hover event to. My code is:
}).on('hover' , '.tooltip' , function (e) {
if (e.type == "mouseenter") {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
}else{
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
}
});
I understand that I can really only pass one function this way so I am checking for the event type to trigger the appropriate behavior. This doesn't seem to be working for me. Any ideas?
I think this is what you want
}).on('mouseenter' , '.tooltip' , function (e) {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
}).on('mouseleave' , '.tooltip' , function (e) {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
You don't need if (e.type == "mouseenter") {
And hover is not a valid method to use with .on() - I am not sure about this though.. use mouseover or mouseenter
Use it as:
$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
Fiddle
You can bind several event handlers at once. In your case it will be:
.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });
As per jQuery source code, hover is not included in the event list that triggered leading to JQuery .on() because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave(). So, in short, you cannot use hover with .on() like below:
}).on('hover' , '.tooltip' , function (e) {...
So, your option is to use .mouseenter() and .mouseleave() like below:
.on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, '.tooltip');
Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;
Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.
You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/
If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
The script below applies a CSS class to the html title attribute. The original page in which the script appears is here: How to change the style of Title attribute inside the anchor tag?
Works great, but has a minor bug. If the title attribute is empty (<input type="text" title="">), it still shows an empty popup box on screen.
Can anyone please help with fixing this? Something like "if title attribute has no value, do not apply css, do not show popup box. Thank you!
Script below:
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
This way:
$(document).on("mouseenter", "*[title]:not([title=''])" ...
One way is to return immediately if there is no title:
$(document).on("mouseenter", "*[title]", function (e) {
if (!$(this).attr('title')) return;
// rest of code
});
#c-smile's answer is cleaner though.
Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.
I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});
Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});
You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});