Make a link activate on doubleclick only - javascript

I'm building a very simple web-based file browser for my website.
I've styled my links to look like files and I want to be able to single-click to select them so I can do things like rename etc, and I want to be able to double-click to actually activate the link and download the file.
I've come up with the following, but it looks ugly. Does anyone have a more elegant solution?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function nullClick()
{
//do select stuff
return false;
}
function dolink(link)
{
window.location(link.href);
}
</script>
</head>
<body>
Clicky
</body>
</html>

I would avoid doing this since it goes against how users expected web sited to function, but if you must, the way you do it is the only way I know of.
Also, you should know that the site will fall back to single-clickable links if javascript is disabled or unavailable.

Clicky
I think it would be more elegant solution with one line of code.

If you're not using any JavaScript framework, that is probably as good as it gets. You could get rid of your functions thou;
Foobar

If you're not opposed to a little jQuery:
$("#yourLinkId").dblclick(function () {
window.location($(this).attr("href"));
});

How about using jQuery?
HTML example:
link1<br>
link2<br>
link3<br>
jQuery example:
$('a.dblclick')
.bind('click', function() { return false; })
.bind('dblclick', function() { window.location = this.href; });
SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
$('a.dblclick')
.bind('click', function() { return false; })
.bind('dblclick', function() { window.location = this.href; });
}
</script>
</head>
<body>
link1<br>
link2<br>
link3<br>
</body>
</html>

Related

How to set redirect to links provided by JS function

I'm having an issue where I'm trying to set a page's redirect destination to a URL from a JS function.
I've tried calling the function by using <meta http-equiv="refresh" in the header, but I either have the syntax wrong or <meta> simply doesn't allow for calling functions. I'm honestly not sure.
<head>
<script src="extFile.js"></script>
<meta http-equiv="refresh" content="1; go2();" id="levP" name="levP">
<title>SO Question</title>
</head>
go2() is a function from extFile.js which contains an if/then statement that provides different URLs depending on time of day. I'd like to have index.html redirect users via function go2() either by a method in the header or in the body.
If this should be handled in the body then I'd appreciate any feedback as to how that should look.
Like this? this code will redirect your page after 5 seconds
<head>
<script src="extFile.js"></script>
<script>
setTimeout(function (){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}, 5000);
</script>
<title>SO Question</title>
</head>
if you want a to call a function do this:
<head>
<script src="extFile.js"></script>
<script>
var check = function(){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}
check();
</script>
<title>SO Question</title>
</head>

Attaching onclick event to element is not working

I just started learning Javascript, and I know next to nothing. I am trying to attached an onclick event to an element in my HTML.
var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;
This is my code so far. Nothing happens when the element with the ID of header is clicked on. What am I doing wrong?
the following is my HTML code
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<script src="testing.js"></script>
</head>
<body>
<h1 id="header">Andrew Dawson</h1>
</body>
</html>
The issue is, that you try to load a html element, which does not "exists" when the javascript function is executed, because the dom has not finished loading.
To make your code work, you can try following solutions:
Place your script tag below in the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
</head>
<body>
<h1 id="header">Andrew Dawson</h1>
<script src="testing.js"></script>
</body>
</html>
Add an event handler to check if the window element is ready:
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;
}
Another solution would be to use jquery framework and the related document ready function
http://api.jquery.com/ready/
I think the solve you are looking for is
var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").setAttribute("onclick", joinList);
Your code seems straight forward, maybe your script is running before the DOM fully loads. To keep it simple across all browsers we can place a self executing anonymous function at the end to initiate all your scripts after DOM loads.
<html>
<title></title>
<head></head>
<body>
html here!!
<script>
(function() {
//Any other scripts here
var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;
})();
</script>
</body>
</html>
The above is purely javascript, not to be confused with the shorthand (see below) of the jquery "document onready" function (you would need to add jquery to your pages).
$(function() {
//your javascript code here
});
Why using self executing function?

Can't write to dynamic iframe using jQuery

My goal is to dynamically create an iframe and write ad JavaScript into it using jQuery (e.g. Google AdSense script). My code works on Chrome, but fails intermittently in Firefox i.e. sometimes the ad script runs and renders the ad, and other times it doesn't. When it doesn't work, the script code itself shows up in the iframe.
My guess is these intermittent failures occur because the iframe is not ready by the time I write to it. I have tried various iterations of iframe_html (my name for the function which is supposed to wait for the iframe to be ready), but no luck. Any help appreciated!
PS: I have read various threads (e.g. jQuery .ready in a dynamically inserted iframe). Just letting everyone know that I've done my research on this, but I'm stuck :)
Iteration 1:
function iframe_html(html){
$('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
$('#myiframe').load(
function(){
$('#myiframe').ready( function(){
var d = $("#myiframe")[0].contentWindow.document;
d.open();
d.close();
d.write(html);
});
}
);
};
Iteration 2:
function iframe_html(html){
$('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
function(){
$("#myiframe").contents().get(0).write(html);
}
);
};
Honestly, the easiest and most reliable way I have found when dealing with the load events on iframes uses the "onload" attribute in the actual iframe tag. I have never had much of a problem with setting the content once the "onload" event fires. Here is an example:
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
The problem with this is that you have to use attribute tags and global function declarations. If you absolutely CAN'T have one of these things, I haven't had problems with this (although it doesn't look much different than your attempts, so I'm not sure):
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
$iframe.load(iframe_load);
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
This is one of the most frustrating parts of the DOM and JavaScript - my condolences are with you. If neither of these work, then open up Firebug and tell me what the error message is.
false.html:
<html>
<head><title></title></head>
<body></body>
</html>
JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function iframe_html(html)
{
var id = "myiframe_" + ((new Date()).getTime());
$('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');
var loadIFrame = function()
{
var elIF = window.document.frames[id];
if (elIF.window.document.readyState!="complete")
{
setTimeout(loadIFrame, 100);
return false;
}
$(elIF.window.document).find("body").html(html);
}
loadIFrame();
};
$(function(){
iframe_html("<div>hola</div>");
});
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>
then please see this link

keydown on body?

I want to get alerted whenever I press a key.
I've tried:
$('body').live('keyup', function() {
alert('testing');
});
But it doesn't work, could it be because of the selector?
UPDATE:
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO supply a title</title>
<script type="text/javascript" src="../system/media/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').live('keyup', function() {
alert('testing');
});
});
</script>
</head>
<body>
<p>
TODO write content
</p>
</body>
</html>
It doesn't alert me when I press something although it works when I replace keyup with mouseover and mouse over TODO write content
Why doesn't it work?
Try using $("html") or $("*") instead of $("body"). In order for the keyUp event on body to fire, the body node or one of its children must be focused. You can accomplish this in your example by adding a text input and focusing the mouse to that input. What you really want is to capture any key press, so $("html") should work.
Edit: I think your example might work, but in any case, to run the logic conditionally you might try this:
if ($(document.body).is(".focusOnKeypress")) {
$("html").live(...);
}
Or, I think this will also work:
$("body:not(.noFocusOnKeypress)").parent("html").live(...);
Just listen to the window!
$(window).keydown(function(event){
alert(event.keyCode);
});
I tried this code. This is working fine.
$('body').on('keyup', function() {
alert('testing');
});
It does not work because your page does not have focus.. you need to click on the page first and it will work..
alternatively you could forcibly set the focus to an input element and thus bring focus to the page..
$(function(){ $('input_selector_here').focus(); });
Hope this will help.
$(document.body).on('keyup', function (e) {
alert('In');
}):

Time refreshment in the HTML via AJAX

I have one html page with links of chart whenever i refresh HTML paget the chart refreshs.
I heard from my friend that with the help of AJAX that chart will refresh automatically with given time interval without refreshing that html page.
please help me with the html code for the same.
Regards,
Raj
You could use the setInterval() method in javascript, along with a simple framework like jQuery for the AJAX.
It would look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>My AJAX Chart</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("refreshChart", 5000); // Refresh every 5 seconds
});
function refreshChart() {
$.get("myChart.php", function(data) {
$("div.chartHolder").html(data);
});
}
</script>
</head>
<body>
<h1>My Chart</h1>
<div class="chartHolder"></div>
</body>
</html>
Since it sounds like you are new to JavaScript, I would recommend you take a look at the jQuery libraries, it can do what you want with a minimal of complication:
Something like this would work:
function updateChart() {
$('#someTable tbody').load('updateChart.html');
}
$(function() {
setInterval(updateChart, 20000);
});
If you combine something like e.g. this; http://ra-ajax.org/Docs.aspx?class=Ra.Extensions.Widgets.Timer with this; http://ra-ajax.org/samples/Chart-Sample.aspx you'll easy get there.
Above samples are for .Net, but there exists similar constructs (and frameworks) also for other other platforms...

Categories