javascript click event onload page href whatsapp - javascript

I am having anchor tag in my page. I like to trigger click event onload . Which means I wanna open this link "whatsapp://send?text=test&phone=+123456789" go to whatsapp. The link is working if you manually click, but not working onload page. Same result with jquery. Is there anyway to do this?
This is what I have:
<body onload="document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
To clarify this, there is no problem for the link with http://, its working. Just not working for whatsapp:// maybe?

Firstly, don't use inline JS. It's just not right.
Now coming to the solution. Why don't you try something like
document.body.onload = function(){
window.location.href = "whatsapp://send?text=test&phone=+123456789";
}
If you still want to stick to inline JS, I'd suggest prefix your code with javascript: since some browsers otherwise ignore inline JS.
So now your code would become
<body onload="javascript:document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>

Maybe location.href is a good solution for you.
<body onload="location.href = 'whatsapp://send?text=test&phone=+60123456789">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
</body>

try something like this
<href="intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end">
what is happening when u click on the link ? any error or blank page ?

You can use, $(window).load(function() {}) or even $(document).ready(function() {})
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
Run this snippet, it is working

If you want to run it on load then why you are not using :
window.location = "whatsapp://send?text=test&phone=+123456789"

Related

Javascript code to open a url on click in the same window

Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.

Javascript or css onclick function hide

I have the href: <a class="like_counter_wrap fl_l" onclick="openFullList();">
I need to hide the function openFullList();. How to do this?
Ok, the code:
<!--Vk.com-->
<div class='scVK scSB'>
<script type='text/javascript' src='http://userapi.com/js/api/openapi.js?49'></script>
<script type='text/javascript'>VK.init({apiId: 2010456, onlyWidgets: true});</script>
<div id='vk_like'></div>
<script type='text/javascript'>
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
</script></div>
is forms <a class="like_counter_wrap fl_l" onclick="openFullList();">. The idea is to prevent function "openFullList();"
JavaScript is client side code, meaning ALL code is viewable by somebody in a browser, as long as they dig deep enough. Sure, you could minify it like tyme suggests, but be aware one can still use a tool like the Chrome web inspector to find the exact line number and snippet of code run for the click event.
Basic answer: if the flow of how your code runs must not be "visible" to the end client, JavaScript is not the language you want to be using.
You can change your markup to this
<a class="like_counter_wrap fl_l">
now you wrap your function in a script tag and place it before the closing tag body (for performance)
<script>
function openFullList(){
//do something
}
var button = document.querySelector(".like_counter_wrap");// document.querySelector("a");
button.addEventListener("click",openFullList,false);
<script>
or put it in a file and bind it to your HTML like this
<script src="script/myscript.js"></script>
Hi what if you do like below,
<a class="like_counter_wrap fl_l" onclick="openFullList(true);">link1</a>
<a class="like_counter_wrap fl_l" onclick="openFullList(false);">link2</a>
then script as follows,
function openFullList(val) {
var showList = val;
if (showList)
{
//allow your function to execute
}
else
return false; //dont allow the function to execute simple by returning false
}
So, If you want to show list if user clicks on the link then pass true while calling the function or else pass false...hope it helps...

javascript: target div in <a href ...>

I have 2 htm files: a.htm and b.htm. In b.htm I have 2 divs, in one is a link to a.htm which I would like to open in second div but it opens as new page in new tab. I'm not good in javascript but I looked many examples so I believe I'm very close to solution but obviously have some error somewhere. Please help!
So, in a.htm I have this:
<html>
<body>
TEST
</body>
</html>
In b.htm I have this:
<html>
<head>
<script language="JavaScript">
function url2div(url,target){
document.getElementById(target).innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
}
</script>
</head>
<body>
<div id="menu" style="background-color:#FFD700;height:100px;width:100px;float:left;">
Click
</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:400px;float:left;">
Original content
</div>
</body>
</html>
Store your link inside the function instead of the href attribute:
Click
Change JS to this:
function url2div(url, element) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', url);
element.appendChild(iframe);
}
JSFiddle Demo #1
if you want to open the link in the same iframe, store the link in any other property other than href. Then, use your current function and it should work fine!
Click
JSFiddle Demo #2
I think this isn't as complicated as you're making it. Also, the previous answer isn't quite doing what the OP is asking...so here's my stab at it:
First, I assume html5, so you don't need the "javascript" as part of your script tags. Secondly, I don't think you need to pass around all those variables. Your anchor tag should reference
<a href=b.htm#content onclick="url2div();"<\a>
and your javascript should be
otherPageText = "<iframe src=\"HtmlPage2.html\" width=\"200\" height=\"200\"></iframe>";
document.getElementById("content").innerHTML = otherPageText;
After that, if you need variables, carefully try to pass them in one at a time.
Part of the original problem is that you're passing "this" which references the new page, not the old one, but by the time that happens you're on the new page and not bringing over the one you want back to the first page. Part of why I stayed away from it.
PS Sorry for the bad formatting. This is all very new to me...

Embarrassed that I can't get fancybox working

MVC 3 and fancybox 2.
Should be straight forward but somehow I have made a mess of things.
First since I am using this only on one page (cshtml) I add the scripts via:
Html.AddScriptParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"));
Html.AddCssFileParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.css?v=2.1.5"));
When I look in the debugger I see jquery.fancybox.pzck.js loaded. When I inspect the element I do not see the jquery.fancybox.css styles applied...(css is default so maybe there aren't any to apply?)
My onready is:
$(function ()
{
$(".fancybox").fancybox();
});
and my link is:
<div id="ThreadLink">
<a id="ForumFrameLink" href="https://www.google.com" class="fancybox">asdf</a>
</div>
It is acting as though my onready is not attaching...in other words it just follows the link to Google.
What am I missing?
TIA
In the JSFiddle link you provided: http://jsfiddle.net/ramjet/54kag/
Use the following JS:
$(document).ready(function() {
$("#ThreadLink a").fancybox({
type: "iframe"
});
});
And then your HTML simply becomes:
<div id="ThreadLink">
<a id="ForumFrameLink" href="http://www.foxnews.com">asdf</a>
</div>
It seems that type: "iframe" needed to be set. After glancing over the documentation, it looks like you can also just set the class of the a to iframe instead to get the same functionality.
"Corrected" fiddle for your viewing pleasure: http://jsfiddle.net/54kag/1/

How to call js / script within href

I've been using this successfully in my template:
<span class="sharethis-text">
<p>More Options</p>
</span>
<script src="http://w.sharethis.com/button/buttons.js"></script>
<script>
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
</script>
But now I want to call this function in this:
<More-sharebar>More options</More-sharebar>
How is it possible to include the script properly?
Apologies if the answer is easy. I'm a complete beginner. I've been searching but I can't find how to do it.
Edit: Thanks for the answers so far, and I think now I have the function stLight.options( but I don't know how to include the external js file. Instead of editing the functions.php file, is it possible to simply include the script above in my HTML, but give it a name, and somehow call that name in the href?
The other thing: the function as it original works triggers on hover. I'd like to retain that, if possible.
Apologies for my ignorance.
Javascript supports following syntax :
<a href='javascript:alert('Hi')'>ClickMe</a>
This should solve your problem.
This is the reference Draft
In mark <a> define attrib:
onclick="javascript:functionName();"
or
onclick="return functionName(attribs)"
This should help.
But it should be done like this:
<a id="do_something">
aaa
</a>
<script type="text/javascrip">
$.(function(){
$('a#do_something').click(functionName());
});
If you have in your file.js the:
function helloWorld(){...}
You call in the href with a event this function:
More options
Just put this Javascript inside your href:
More options
in the HREF, you'll call the function you need, not the script file itself.
So you have to include your script in your HTML file (if possible at the end of the file, not in the header) and then call the method/function from your href.
Write a function that calls the function you want. According to your
post, maybe it's stLight.options? Return false if you don't want the navigating behavior of the a link.
function clickHandler() {
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
return false;
}
Add the onclick handler to the a link.
<More-sharebar>More options</More-sharebar>

Categories