jQuery tooltip is not working - javascript

I want a tooltip to show when I rollover on particular links. It's not working. The commented out alert is working, so event is not the issue. This is my javascript code:
$(window).load( function() {
$("a").each(function() {
if(this.text==" View image") {
$(this).mouseover(function() {
// alert("blabla");
$(this).tooltip();
});
}
});
});
on my html file the includes are:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" language="javascript" src="mainscript.js"></script>
I'd appreciate some help.
UPDATE: removing mouseover doesn't help

Remove the mouseover function. The plugin doesn't require you to add a custom mouseover function. It's done from the plugin for you.
if(this.text==" View image") {
$(this).tooltip();
}
Hope this helps ^^
Change the main jQuery function to $(document).ready(function(){});
This will probably work now~

Try this:
$("a").each(function() {
if(this.innerHTML == " View image") {
$(this).tooltip();
}
}
Also, there's a space before the View in "View image". I'm not sure if that's intentional or not.

I used jQuery tipsy on my recent projects. Quite easy to understand and integrate.

Related

Google DFP Ad show for click events

I want to show google dfp unit when user click on navbar
$(document).ready(function () {
var navbar = false;
var navslot = null;
$(document).on('click', '.new_car_nav', function(){
navslot = googletag.defineSlot('/10176910/NavBar', [[250, 250]], 'ad_navbar').addService(googletag.pubads());
googletag.enableServices();
googletag.display('ad_navbar');
});
});
Issue is that it gives an error
Exception in queued GPT command TypeError: $ is not defined
Either we can use jquery in it or not? If no then how can I implement it?
You need to include jQuery, add this to your <head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
You are missing jQuery library, you need to include it into the head section before any other library includes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this will help you.

Jquery in header not working :(

I have the following code in my header -
<script type="text/javascript">
if ($("#comments").hasClass("comments-list")) {
javascript:document.getElementById('g-aside').style.width='0px';
javascript:document.getElementById('g-aside').style.marginleft='100%';
javascript:document.getElementById('g-aside').style.visibility='hidden';
javascript:document.getElementById('g-main').style.width='100%';
}
</script>
It does not work for some reason... The following page is the one i am attempting to adjust.
http://luogocomune.net/LC/index.php/20-varie/4290-benvenuti-sul-nuovo-sito
First of all, include the jQuery library before this script block of yours.
Then, change your script block to:
<script type="text/javascript">
$(document).ready(function(){
if ($("#comments").hasClass("comments-list")) {
$('#g-aside').css('width','0px')
.css('margin-left','100%')
.css('visibility','hidden');
$('#g-main').css('width','100%');
}
});
</script>
Readup: http://api.jquery.com/css/

Add rel="lightbox" to links with .jpg and .gif in them

I'm trying to make a simple script that adds rel="lightbox" to links with .jpg or .gif in the href. Can someone help me? I can't see the mistake. Thank you.
<script type="text/javascript">
$('a[href*=".jpg"]').each(function() {
$('a[href*=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
});
</script>
You're targeting links with href attributes that contain BOTH '.jpg' AND '.gif'. Try targeting links with href attributes that END WITH EITHER '.jpg' OR '.gif':
<script type="text/javascript">
$('a[href$=".jpg"], a[href$=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
</script>
Update
To run the script when the DOM is ready, attach the function to the domready event:
<script type="text/javascript">
$(document).ready(function() {
$('a[href$=".jpg"], a[href$=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
});
</script>

Timeago Jquery plugin not working

Jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/timeago.js" ></script>
$(document).ready(function(){
jQuery("abbr.timeago").timeago();
});
html:
<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>
function Refresh() {
setTimeout(function(){
<?php echo 'var id = '.json_encode($_GET['id']).';'; ?>
$('#cmdz').load('cmdajax.php?id='+id);
},1000);
}
The #cmdz div contains the abbr tag. timeago working properly in onload but when the div is refreshed it won't works.
for some reason jQuery("abbr.timeago").timeago(); function not working. Here you can find full code:after ajax call jquery function not working properly
Try out Livestamp.js. It's unobtrusive and auto-updating. All you need to provide is the Unix timestamp.
Working demo http://jsfiddle.net/FFeE3/1/
Can you please try sourcing your time ago.js from below link and any particular reason you are using jQuery("abbr.timeago").timeago(); you can use $("abbr.timeago").timeago();
Hope this helps rest demo should give you more idea. cheers
Script
<script type='text/javascript' src="https://github.com/petersendidit/jquery-timeago/raw/master/jquery.timeago.js"></script>
code
$("abbr.timeago").timeago();​
Two way of representation, Do this way or other way but don't mix:-
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
OR
$(document).ready(function() {
$("abbr.timeago").timeago();
});

Just trying to show and alert when i click on a link

i'm trying this code:
<script type="text/javascript">
$('#ooo').click( function() {
alert("jadner");
});
<script>
prueba
I expected it shows the alert when i click on "prueba", but it doesn't show anything..
Regards
Javi
You need to bind the event only after the DOM finishes loading. Wrap your code inside $(document).load() event like this:
<script type="text/javascript">
$(document).ready(function() {
$('#ooo').click(function() {
alert("jadner");
});
});
</script>
1 - Make sure jQuery has been included.
2 - Make sure your click handler is in a $(document).ready(function() {...}); block.
See:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
You have to either reverse the order of the tags, i.e. put the script after the link:
prueba
<script type="text/javascript">...</script>
or wrap the code in a $(document).ready() callback:
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
The problem: When your JS is executed, it tries to find the element with ID ooo which does not exist yet. Parsing is always from top to bottom. So the script gets executed before the link element is created.
Add return false; below the alert. and like Nanne says, make sure you've got jQuery loaded properly
should be </script> not <script>
use document.ready()
<script type="text/javascript">
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
</script>
prueba
Try the following code.
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script language="javascript">
$(function()
{
$('#ooo').click( function()
{
alert("jadner");
});
});
</script>
prueba

Categories