Please help! How assign buttons with functions in Popup menu?
popup.html
<html>
<head>
<title>Common Messages for Intercom</title>
<script src="popup.js"></script>
</head>
<body>
<a href='#'>Message 1</a>
<br>
<a href='#'>Message 2</a>
</body>
</html>
popup.js
function Button1() {
// Something
}
function Button2() {
// Something
}
Thanks!
popup.html
<html>
<head>
<title>Common Messages for Intercom</title>
</head>
<body>
<a id="button1" href='#'>Message 1</a>
<br>
<a id="button2" href='#'>Message 2</a>
<script src="popup.js"></script>
</body>
</html>
popup.js
document.getElementById('button1').onclick = Button1;
document.getElementById('button2').onclick = Button2;
function Button1() {
// Something
}
function Button2() {
// Something
}
You need to be able to identify your elements. Therefore, give them unique IDs:
Message 1
<br>
Message 2
You need to bind your functions to the click event:
function Button1() {
// Something
}
document.getElementById("btn1").addEventListener("click", Button1);
The above will not work yet, as it will execute before DOM is built (and therefore #btn1 does not exist yet). Wrap things in DOMContentLoaded listener to make sure DOM is ready:
function Button1() {
// Something
}
function Button2() {
// Something
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("btn1").addEventListener("click", Button1);
document.getElementById("btn2").addEventListener("click", Button2);
});
Related
i have smth like following code:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
When i click this button iframe have added:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
<iframe id="test2" src="smth">//button inside that will fire OnSave event</iframe>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
So, when i click button that will call OnSave function from iframe,jquery didn't see my iframe or smth inside it.How should i call check if iframe exist?
You're not calling the OnSave function like that.. try to do this instead
<button id="test1" onclick="OnSave()">Save</button>
(Note the parenthesis after the function name)
Edit: Ok, so you may want to get back to parent window before calling the function
window.parent.functionName();
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I have the following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2' onclick="ClickBack();">Click me </span>
</body>
<script>
$(".click2").click(function (event) {
if(confirm("Sure to continue"))
event.stopImediatePropagation();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</html>
My requirement is to call ClickBack() only when its being confirmed by , and i cannot make any change in ClickBack function , Its ony one case,
main thing is
I have to add this click2 to a number of elements, and it will basically call the inline events only after confirmation by click2
$(".click2").click(function (event)
I am getting two issue,
ClickBack is being fired firstly,
TypeError: event.stopImediatePropagation is not a function it was type mistake thanks to #manwal its solved
How can I achieve my goal.
I cannot make any change in ClickBack() function
Please advise
Thanks
You have typo issue, use this line there should be double m:
event.stopImmediatePropagation()
instead of
event.stopImediatePropagation()
^
for this ClickBack is being fired firstly, problem the solution is remove onclick="ClickBack();" from
<span class='click2' onclick="ClickBack();">Click me </span>
First of all if you bind inline onclick function it will be trigerred first.
So instead of adding it inline do it in your script like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Remove onclick event handler from span
<span class='click2'>Click me </span>
and call the ClickBack function in on click event handler for .click2 class as follows,
<script>
$(".click2").click(function (event) {
if(confirm("Sure to call ClickBack"))
ClickBack();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?
The code in question, as simple as can be.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
</script>
Hide
<div class="thread">I like trains.</div>
</body>
</html>
I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
return false;
}
it is not hiding again it is the page that is being refreshed because href="" links to same page
NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)
You could try changing
<a href="" onClick="doHiding()">
into
<a href="#" onClick="doHiding()">
See: http://jsfiddle.net/aVNuf/
You can try the click event in jquery instead doing it inline.
http://jsbin.com/iseref/1/edit
html:
Hide
<div class="thread">I like trains.</div>
jQuery:
$(function(){
$('a').on('click', function(e){
e.preventDefault();
doHiding();
});
});
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
try
href="#"
its work for this case
In head:
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#anchor_id").click(clickHandler);
window.onbeforeunload = confirmExit;
});
function clickHandler() {
/* hide/show some hidden div's */
$("body").append("<p>Hi there</p>");
}
function confirmExit() {
return "There are some unsaved changes on page.";
}
</script>
</head>
In body:
<a id="anchor_id" href="javascript: void(0);">Click Me</a>
Is it possible to prevent onbeforeunload from being called
when clicking on this link in Internet Explorer? In the rest
of the browsers the code is working fine.
Try setting href="#" instead, and return false in the clickHandler function (or prevent the default event by event.preventDefault())
You could wrap the event assignment in condition browser logic using jQuery's browser helper:
http://docs.jquery.com/Utilities/jQuery.browser.version
Try this, tested in FF3.5 and IE8
<html>
<head>
<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()
{
$("#anchor_id").click(clickHandler);
window.onbeforeunload = function()
{
return "There are some unsaved changes on page.";
};
});
function clickHandler()
{
/* hide/show some hidden div's */
$("body").append("<p>Hi there</p>");
return false;
}
</script>
</head>
<body>
<a id="anchor_id" href="javascript: void(0);">Click Me</a>
</body>
</html>