I've spent the last few hours trying to find the answer to this, but nothing seems to work...
I need to execute a piece of code when a div (or anything inside of it; including iframe content) is clicked. The following code should do it (when added into the div tag), but it doesn't seem to work.
onclick="if(typeof(_vis_opt_top_initialize) =='function'){ _vis_opt_goal_conversion(200); _vis_opt_pause(500);}"
The purpose is to execute a custom conversion goal:
<script type="text/javascript">
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
</script>
Any help will be greatly appreciated :)
I hate using inline js... hate it...
If you need to account for IE (<8), then you can't use addEventListener, so you can do something like this:
function bindListener(el,eventName,eventHandler) {
if (el.addEventListener) { // Anything but IE <8
el.addEventListener(eventName,eventHandler,false);
} else if (el.attachEvent) { // For IE <8
el.attachEvent('on'+eventName,eventHandler);
}
}
Then you can call it using something like this:
var ele = document.getElementById('idOfElement');
bindListener(ele, 'click', functionToCall);
Try using addEventListener. Link here. The Example on that page is exactly what you are asking for.
First give your div a unique ID
<div id="yourDivID"></div>
then set the onclick function in window.onload
var yourDiv = document.getElementById("yourDivID");
yourDiv.onclick = function() {
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
}
}
I write simple example for you:(j Query answer)
Html Code
<div class="test">Click</div>
JavaScript Code
$('div.test').click(function(){
alert("some");
});
Demo
Edited
JavaScript example
<html >
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>
<body>
<div>click</div>
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
</body>
</html>
Related
I have a .cshtml file with the following in the head tag:
<script type="text/javascript">
getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>
The reason I've inserted this is because this logic was already taken care of in another javascript file which I've imported in. Essentially what I need to do is change the link of a button depending on which platform the user is using. I've tried the following but this does not work (and even if it did, looks messy and I'm sure incorrect) but I can't seem to find a solution. Can anyone help please?
</div>
getPlatform()</script> id="mobilelink" class="btn"
</div>
One cannot write this:
getPlatform()</script> id="mobilelink" class="btn"
This is how it can be done:
</div>
<a href="" id="mobilelink" class="btn" </a>
</div>
<!-- Later in the page (ideally just before the end </body> tag) -->
<script>
document.getElementById('mobileLink).href = getPlatform()
function getPlatform () {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>
why don't you check it when the page is loaded and change the href of the a tag accordingly? Like:
<a id = "mobileLink" href="">some text</a>
And
var getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
document.getElemenyById("mobileLink").href = getPlatform
//Or innerHTML, I don't really understand what you want to do
<script type="text/javascript">
function getPlatform() {
if (Platform.Android) {
document.getElementById('mobileLink').innerhtml = "androidlink";
}
else if (Platform.IOS) {
document.getElementById('mobileLink').innerhtml = "IOSLink";
}
else {
document.getElementById('mobileLink').innerhtml = "other";
}
}
</script>
the html,
</div id="mobilelink" class="btn" onload = "getPlatform()">
</div>
Right now I can only assume the results, that you need. This is one of the ways, inwhich you can return the result from a JS function to the html division. If the onload doesnt work, I'd suggest using an onclick = "getPlatform()" function since that is more aggressive in its notation.
this is incorrect approach.
I would recommend you put all scripts before closer </body> html-tag.
Then in your script you can write such code like:
const platform = getPlatform();
const mobilelinkEl = document.querySelector('#mobilelink');
mobilelinkEl.setAttribute("src", platform);
Make sure, that your script tag with src attribute set placed after script tag with getPlatform, and also make sure you have access to getPlatform function.
If you'll have additional question, write comments, I'll try to help you.
I know this has been covered extensively as separate issues; I've tried copying verified answers, but I'm having trouble homologating Javascript conditional statements and a link URL change.
Essentially, what I need to do is detect mobile users and change a conference call URL to a tel link. I've been using if (screen.width <=699) { as the condition and it works on redirects. Here's what I've tried:
<script type="text/javascript">
<!--
var call=document.getElementByID('phone');
if (screen.width <= 699) {
call.write('<a href="tel:!PHONENUMBER!">');
else
call.write('<a href="!URL!" target="blank">);
}
//--!>
</script>
</head><body>
...
...
I've also tried these with corresponding else statements to no avail:
no var and document.getElementByID('phone').write
onclick = function() { window.location.href ='tel:!PHONENUMBER!};.
call.src.replace('tel:!PHONENUMBER!');
call.setAttribute("href",'tel:!PHONENUMBER!');
I apologize if this is a super basic issue - I'm still learning Javascript. Thank you in advance.
Will
You need to either wait for the page to finish loading before you execute your JavaScript or move your script block to the bottom of the HTML.
If you want to wait for the page to finish loading, then wrap your code in the following:
window.onload = function () {
// your code goes here
}
Figured it out with help from #sepbot.
<body onload="mobileURL()">
<div id="phone"></div>
<script type="text/javascript">
function mobileURL() {
var a = document.createElement("a");
a.innerHTML="!LINKTEXT!";
var myPhone = document.getElementById('phone');
if (screen.width <= 699) {
a.setAttribute('href', '!TELEPHONE!');
myPhone.appendChild(a);
} else {
a.setAttribute('href', '!URL!');
myPhone.appendChild(a);
}
}
</script>
I'm trying to get a string of script to run in an href so the link will redirect users depending on an if/else statement. My code:
<div id="editredirect">
<script>
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
</script>
</div>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:.initialize(document.getElementById("editredirect"));">Details</a>
I've tred do also do a function like this:
<script>
function editredirect {
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
}
</script>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:editredirect">Details</a>
Neither one will work. The first string returns a syntax error, the second tells me that "editredirect" is undefined.
Thank you!
EDIT
Praveen Kumar's suggestions were the best. The developer for the database I am using was able to get the application to do it without having to insert any script. However, they did say that the event listener would have also worked once I had my parameters correct.
You can use onclick and add the whole JavaScript logic:
Click me?
The best way is to use event listener like this:
document.getElementsByTagName("a")[0].addEventListener("click", function () {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}, false);
Click me?
This is better than using href. If you still want to run it in href, you need to create a function and run:
function aha() {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}
Click me?
Note: In your code, you have used wrong notation. That's a syntax error. JavaScript functions have to be declared in a specific way. Follow that!
I am a fairly new programmer, and currently am trying to understand OOP from the JS side of things. I have some pretty basic code for a flashing cursor, yet for some reason it isnt working. The page loads, and the cursor just appears onscreen with no changing. The code is below:
<html>
<head>
<title>Cursor</title>
<script src="jquery.js"></script>
<script>
var str = null;
var counter = 0;
var flipFlop = function() {
alert("working");
if(counter === 0) {
document.getElementbyId('console').style.visibility='visible';
counter = 1;
}
else if(counter === 1) {
document.getElementbyId('console').style.visibility='hidden';
counter = 0;
}
else {
//debug alert
alert("function broken.");
}
};
var setIntOnload = function() {
setInterval(function() {
flipFlop();
}, 1000);
};
</script>
</head>
<body onload="setIntOnload()">
<div id="console">
|
</div>
</body>
</html>
Not sure why this isnt working... Help would be appreciated :)
PS First Post :D
Its Working
Change getElementById instead of getElementbyId
Fiddle
You have a typo in your code. Use getElementById instead of getElementbyId. JavaScript variable names (and methods) are case sensitive.
Fiddle: http://jsfiddle.net/FcrQ7/
Always check your browser console in case something in your code is not working. You had the following error:
Uncaught TypeError: Object # has no method 'getElementbyId'
I am not experienced with Javascript coding. However, I am willing to learn.
I came across some tutorials for creating collapse/expand <div> blocks. I have tested the code with jsfiddle. You can check the code here
It works fine, disregard the styling.
However I can't figure out why the code doesn't work on the live website.
At first I have inserted all the code javascript and HTML in the WordPress Page editor. Then , I moved the javascript in the header. I saw something about the source of the code. I am not sure which is the source.
Here is the javascript code inserted in the header.php:
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "expand";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for (i = 0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
</script>
The HTML code is the same as on the fiddle HTML panel and it I display in a WordPress page.
Please tell me what wrong with this code? Is it the source of the javascript code?
Chrome console gives me the following:
Uncaught ReferenceError: toggle2 is not defined example.com:103
onclick
The big question is why the code works fine on jsfiddle either on mootools or jquery frameworks, and it doesn't work on the live site?
UPDATE:
I have updated the script tags. Still doesn't work.
You need to put your Javascript code in its own tags.
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
<script type="text/javascript">
YOUR CODE HERE
</script>
Also, since you are using jQuery you need to use the ready() function like this:
$(function(){
YOUR CODE HERE
});
Click
<div id="d1">Some content to hide</div>
In the head:
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").toggle(function(){
$("#d1").show();
},
function(){
$("#d1").hide();
}
);
});
</script>
And of course, leave the reference to jQuery in the code.
You have some problems:
An overlaping script tag
You are using Mootools in your Jsfiddle, and jQuery in this sample
You include jquery, but then do the animation in plain Javascript
Try this, correcting the script tags:
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js"></script>
<script type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "expand";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for (i = 0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
</script>