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...
Related
I have an html image tag in an aspx page. The image when clicked performs certain jQuery functions. Recently I added the attribute to the image because I wanted to change the source of the image based on certain validation. But the problem is I am not understanding why the jQuery functions are not called when I click the image, when it used to work perfectly fine when there was no attribute. I have looked at every possible solutions on the web and tried it as well but none did work.
Please find the below codes and let me know what I can do to make this work.
ASPX page: Jquery functions and the image tag code:
<script type="text/javascript" src="<%= ResolveUrl("~/Common/Scripts/jquery-1.9.1")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Common/Scripts/jquery-ui-1.10.3.custom.min")%>"></script>
$(document).ready(function () {
//doing something
$("#imgseats").click(function () {
// doing something
});
});
</script>
<ul id="list">
<li id="listSeats" runat="server">
<img id="imgseats" class="HeaderGradient" src="../../Common/Images/seatsPCPI.jpg" alt="Seats" runat="server" />
//some code here
</li>
</ul>
Code behind aspx.cs
if(condition)
{
imgseats.Attributes["src"] = "../../Common/Images/seatsPCPI_MandatoryPI.jpg";
}
Please help me with resolving this problem. Thanks in advance.
Check the "UniqueID" generated for the image. ASP.NET is changing the ID for elements runat=server to something like "ctl00_imgseats". Depending on the depth of the DOM it can be a very long ID.
Or change the jQuery selector to the class: $('img.HeaderGradient') for example. You can also use a dummy css class.
for access any control of runnat="server" in jquery you need to access them by their unique ID i.e. $('#<%=imgseats.ClickID%>') instead of $("#imgseats").
$(document).ready(function () {
//doing something
$('#<%=imgseats.ClientID%>').click(function () {
// doing something
});
});
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"
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.
First of all my question is, does a tag in html stores a value like input type = "text" does?
Secondly, I have a links like this let say:
<a href="#" >A</a>
<a href="#" >B</a>
<a href="#" >C</a>
I want to pass for each of the link their value let say A, B, C.
What i do is this:
A
<script type="text/javascript">
function sendVal(letter){
alert(letter);
}
</script>
But unfortunatelly i dont get A , but i get its href, how would i get the letter??
Any idea?
try this.
A
function sendVal(letter){
alert(letter);
}
A
here you go as JS only
A
function sendVal(letter){
alert(letter.text);
}
If you want cross browser compatibility i would really use jquery, otherwise you'll have to do lots of checks to see which to use.
If you are not limited to JS(as per client request) and this is a learning project you should really look at: jQuery
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>