I have a page with HTML anchor tags that have the title attribute set.
<a href="...." title="Some tooltip text" />
I want to detect when the tooltip is shown, and run some javascript. This is to log that the tooltip has been displayed. Using OnMouseOver isn't enough since it triggers too early.
Any ideas?
Mine would be to create your own tooltips that you could append extra 'tracking' to determine if they were displayed or not.
With that library, you could make your own effect that does customized things on the over/out of the tooltip.
Use JQuery. If you do sth only particular tags you must set your tags id and/or name attributes.
The code:
$(document).ready(function () {
$("#x").mouseenter(function () {
alert("yeah");
});
});
If you run javascript code for all <a> tags you use this like below.
$(document).ready(function () {
$("a").mouseenter(function () {
alert("yeah");
});
});
You add this between <head> tags of your page to use JQuery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
Related
SUMMARIZE THE PROBLEM
I state that I know practically nothing about html and javascript languages, I know the css. On wordpress, with visual composer, i was trying to make an entire row clickable. I've done it using a jQuery code founded online:
<script type="text/javascript">
jQuery(".LinkZoom1").click(function() {
window.location = "http://www.framedvision.org/portfolio/videomapping_oggetti_milano/";
});
</script>
I've added to the visual composer the object for java and I've put in the code. After I created the classes, inserted the link, added to the CSS the "cursor: pointer" function and everything works correctly.
THE PROBLEM IS THAT IT WORKS ONLY ON A SINGLE ROW. When I try to duplicate the code, assign different classes and links to create more clickable divs, it doesn't work. The result is that only the first div of the page is clickable, the divs are not.
WHAT I'VE TRIED
I tried the following codes in different combinations:
<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>
<script type="text/javascript">
jQuery(".class2”).click(function() {
window.location = “#2”;
});
</script>
<script type="text/javascript">
jQuery(".class3”).click(function() {
window.location = “#3”;
});
</script>
<script type="text/javascript">
jQuery(".class4”).click(function() {
window.location = “#4”;
});
</script>
<script type="text/javascript">
jQuery(".class5”).click(function() {
window.location = “#5”;
});
</script>
Always using the object for java code: I put them all together, put individually in the row that I want to make clickable, it doesn't work. The result is always the same: only the first div becomes clickable. Even moving the object for java code away, from the first row to other rows, the result is the same. The first div is always the only clickable.
I found the solution. By importing the code written above, as corrected by you, it works. I don't know if this method is theorically correct, but it works fine. So...
In the visual composer, you have to insert an object to add the java code in each row that you want to make clickable (for example: for 5 clickable divs, you make 5 objects to insert the java code). Inside each object you have to insert the specific code for each class:
<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>
How do I maintain my page scroll position after JQUERY toggle event, I have searched and researched but couldn't find any solution to remedy this problem.
<script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#adddriverpanel').hide();
$('a#adddrivertrigger').click(function () {
$('#adddriverpanel').toggle(400);
});
});
</script>
After reviewing your code, you simply need to update your html to the following:
<a id="adddrivertrigger" href="javascript:void(0);" class="auto-style2">Add Drivers</a>
The '#' you had in the link is what is taking you to the top of the page.
If you're going to use an anchor tag with an href for a click event, you need to prevent the href from firing (assuming you don't want it to). You can usually do this with adding
return false;
To your click event, but better practice for empty href attributes is to create a null javascript call as opposed to a '#'.
For giggles, here are some other things you should /not/ do with href attributes:
All of the above are either invalid javascript or pose inconsistency problems with different browsers.
Another way you could have solved it (via jQuery) is as follows:
$('a#adddrivertrigger').click(function () {
$('#adddriverpanel').toggle(400);
return false;
});
I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
};
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>
I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.
I want to load an external file (using jQuery) when the user hovers a div. I tried loading it like a css file on hover but no luck. (Also, I can load a css file on hover, right? That code I tried for that is below.)
$(document).ready(function () {
$("#f1_container2").hover(function () {
$('head').append('<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />');
});
});
You can load content using $(".target").load("file.html"), where file.html is an HTML fragment containing some markup.
Since CSS is passive (it doesn't do anything until someone uses it), it can sit in the head in the first place. That way, when you hover over a div, you can do $(".target").addClass("newClass") to apply some groovy styling.
hover() can also take a SECOND function, which is invoked when the mouse leaves the target, so you can undo whatever you did on the mouseover.
The document has already been loaded and rendered when you append the code for the stylesheet. The browser has already retrieved the needed resources and won't retrieve a file because you appended some code.
I would recommend, as mentioned, pre-loading your images or using another technique to retrieve the file on hover.
I believe something like this may work.
$(document).ready(function () {
$("#f1_container2").hover(function () {
// The easy way
//$('head').append('<img src="images/sprite.gif">');
// The cool way
var $img = $('<img>', {
src: 'images/sprite.gif',
load: function() {
$(this).fadeIn('slow');
},
css: {
display: 'none'
}
}).appendTo('body'); // append to where needed
});
});