Powertips on mouseover/enter for compatibility with DataTables? - javascript

I have Powertips in use on some objects in table cells inside of DataTables. The problem is, when you go to the next page, the tooltips stop working.
I found some threads saying use on mouseenter, but my table is dynamically generated and everytime I put the code into the .js, it doesn't work at all. I'm using regexp to select all the classes that start with "tt-". Here is the code I'm trying to get to work
$(document).ready(function() {
.on('mouseover', $('*[class*="tt-"]'), function(event) {
});
$('.tooltips').powerTip({
followMouse: true,
});
$('.tt-1').data('powertip', `DATA`);
});
I've tried putting the .tooltips and .tt-1 into the .on function, but it still doesn't work. The way I have the code above stops the tooltips from working anywhere, if I remove the .on function it the tooltips will work only on the first page.
I'm not familiar with regular expression in javascript. i've tried just using
[class*-"tt-"]
without the $('* and ') but it still doesn't work.
And I can't use ^= because it is called after the tooltips class so I have to use a regexp for if it contains this string.
Edit1
Changing
.on('mouseover', $('*[class*="tt-"]'), function(event) {
to
$(document).on('mouseover', $('*[class*="tt-"]'), function(event) {
and the final result being
$(document).on('mouseover', $('*[class*="tt-"]'), function(event) {
$('.tooltips').powerTip({
followMouse: true,
});
$('.tt-1').data('powertip', `DATA`);
});
Fixed the problem, thanks to john Smith :)
Edit2
So now it's not working anymore... I don't know what I changed.

if its the fix feel free to mark as answer ;)
use $(document).on( instead of .on(

Related

JQuery On change, keyup not firing

I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.
You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document

jQuery not inserting attribute into the link

I have a link to slide down a div as follows.But initially this link has no onclick handler, which I am inserting using the jQuery code.
Show Div
Now the following is the jquery code
//id comes from a loop which runs from 1 to 15
$("#Link_"+id).attr('onclick','$(\'#Div_'+id+'\').slideToggle(\'slow\');');
$("#Link_"+id).attr('style','color:white;');
$("#Link_"+id).attr('value','0');
The last two lines are inserting attributes but the first line is not working and also I am not getting any error.I am using jQuery 1.4
EDIT
Now the surprise,I just by luck tried it,
the first line is working in jquery 1.9.Why?
You can't add a click handler like that, try this instead:
$("#Link_"+id).live('click', function(){
$('#Div_'+id+'').slideToggle('slow');
});
Try binding it this way:
$("#Link_"+id).on("click", function () {
$('#Div_'+id+).slideToggle('slow');
});
as you are using jquery 1.4. You would be needing live instead of on
$("#Link_"+id).live( "click", function() {
$('#Div_'+id+).slideToggle('slow');
});
I would recommend using .click() instead.
$("#Link_"+id).click(function(){
$('#Div_'+id).slideToggle('slow');
return false;
});
To answer the edit: jQuery 1.9 checks if you are trying to set an event handler and adds the handler instead of setting an attribute. jQuery 1.4 doesn't have such a check. (I looked at the source)

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks
http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.
Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/

Why the jQuery remove is adding an extra element in the dropdown?

See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..
Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example
I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/

"#button_1" isn't affected by .click() or .hover()

Probably a rookie mistake, but my #button_1 ID isn't affected by the click() or hover() jQuery effects.
If someone could take a quick look at my JSFiddle, it would be greatly appreciated.
It's probably pretty obvious, but I want #button_1 to act as every other button. :)
Again, I suspect it's a pretty stupid mistake, something that I've overlooked.
Don't repeat so much code , try this and its working
Try line by line , its throwing error in somewhere in the code and breaking the bind events.
you have some error in hover or so , remove everything and have bind events, they are work.
You know this right ,when line 1 breaks in documentready , all bindings below may not get binded.
$(document).ready( function () {
$('#button_1,#button_2').click(function() {
alert('Handler for .click() called.');
});
});
Might I suggest condensing that code a little, to something closer to:
$('a div[class^="button"]').click(
function(e){
e.stopPropagation(); // prevent the click bubbling to the parent 'a' element
$('.button_active')
.removeClass('button_active')
.addClass('button_normal');
$(this).addClass('button_active').removeClass('button_normal');
});
JS Fiddle demo.
Edited in response to question from the OP:
Just to add, [the Fiddle updated by the OP to include the above code] actually sets "button_hover" as the class instead of "button_active", any idea why that would be?
Yep; that's in response to the specificity of the CSS selectors, I add and remove classes as needed in response events (rather than repeatedly checking for whether or not button_hover is set). As the element ends up with class="button_normal button_hover", and the order of the css (I think) places greater emphasis on the later-declared class, button_hover is maintained. It's late, and I'm a bit tired, but that's sort of (in a nutshell) what's happening.
The following demo incorporates everything (I think) that you need, and, coupled with revised CSS selectors, should do as you want:
$('a div[class^="button"]').hover(
function(){
$(this).addClass('button_hover').click(
function(e){
e.preventDefault();
$('.button_active')
.addClass('button_normal')
.removeClass('button_active');
$(this).addClass('button_active').removeClass('button_hover');
});
},
function(){
$(this).removeClass('button_hover');
});
CSS:
.button_active,
.button_normal.button_active { background: #000; }
.button_normal.button_hover { background: #ff0; }
.button_normal { background: #d89; }
JS Fiddle demo.
References:
attribute-begins-with (^=) selector.
e.stopPropagation().
removeClass().
addClass().

Categories