We Keep Coding

Powertips on mouseover/enter for compatibility with DataTables?

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(

Click not working for input type "text" in iPad

I wanted to implement a clear button for my textbox. I found a really nice solution in the SO thread here.
I'll paste the js code here:
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){
$(this).removeClass('x onX').val('');
});
I implemented this on my site and it works perfectly on the desktop. However, when I tested the same in iPad, it didn't work at all.
I tried to replace the "click" with "tochstart"/"touch" but it doesn't makes any change.
I created a jsfiddle of the code so you can see. Please help me out, How do I resolve this so it works for both desktop and iPad.

You could try to combine "click" and "touchstart", like this: http://jsfiddle.net/veritas87/D2ACE/2/
.on('touchstart click', '.onX', function(){
$(this).removeClass('x onX').val('');
});
You can also try the "tap" event, described here: http://www.w3schools.com/jquerymobile/event_tap.asp

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/

getting a particular div in to view or scroll into view

I am trying to add a feature to my website in a way that when i click a link i want a particular div element to come in to view for a user.. ive tried the code
$(".testClick").live("click",function(e){
e.preventDefault();
// Call the scroll function
goToByScroll("indID13");
});
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
but this doesnt work... is it possible to achieve this feature with out any plugin by pure jquery itself.. or should i be using any plugin...
I will add a sample of what ive tried. the jsfiddle link http://jsfiddle.net/xFu3M/
and try this one toooo http://jsfiddle.net/xFu3M/6/ is this a bug..im trying to get div 1 in to view and its already in view,, so when i click the link it shows some other div

You just had a syntax error, change the .live to .on as the .live has depreciated in later versions of jQuery use this and it will work:
$(".testClick").on("click",function(e){...
See this edited fiddle jsFiddle

Try
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".wrapper").css({"width" : $(window).width() , "height" : $(window).height()});
$(".testClick").on("click",function(e)
{
e.preventDefault();
goToByScroll("indID13");
});
});
function goToByScroll(id)
{
id = id.replace("link", "");
$('html,body').animate(
{
scrollTop: $("#"+id).offset().top
},'slow');
}
</script>
You click event code was not surrounded in document.ready.
Also use .on instead of .live because it already depreciated from now on.

how to modify this jquery syntax

this example below works when hover event is trigered and when its not, its working for elements already in DOM, but when element created dynamically it doesn't work, I realize I need to use jQuery live() or delegate() for this, the thing is I tried to modify it and its not producing the results as expected, here is the working code :
$(".sidebar li").hover(
function(){
$(this).css("background-color", "#F9F4D0");
$(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
},
function(){
$(this).css("background-color", "#F9FAFA");
$(this).children("button").remove();
}
);
Here is the bit when I wanted to add live but it's not producing correct results :
$(".sidebar li").live('hover', function(){
$(this).css("background-color", "#F9F4D0");
$(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
},
function(){
$(this).css("background-color", "#F9FAFA");
$(this).children("button").remove();
}
);
Where did I made mistake, thank you

You can do this:
$(".sidebar li").live('mouseenter', function(){
$(this).css("background-color", "#F9F4D0");
$(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
}).live('mouseleave', function(){
$(this).css("background-color", "#F9FAFA");
$(this).children("button").remove();
});
The .live('hover', function() {}) shorthand works for things like $(this).children().slideToggle() or something, but for this you need to use the mouseenter and mouseleave events directly, the same events .hover() actually binds to.

Make sure you are using jQuery 1.4 or later, and according to the docs, you need to use mouseenter and mouseleave rather than hover.