Here is what I have so far:
<html>
<head>
<title>Major League Baseball</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
document.writeln( "2013 World Series" );
var today= new Date()
$(document).ready(function () {
});
function changeLang(lang) {
document.cookie = 'myCulture=' + lang;
window.location.reload();
return false;
}
link1.onclick = function(e) { return myHandler(e); };
</SCRIPT>
<BODY onload=alert(today)>
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
<body onload="onload();">
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" onclick="kk();"/>
</body>
</html>
I'm trying to add a javascript function when a link is clicked. I would like the link to open in a new window. Would this be considered a function?
The syntax is like
$('#link1').click(function(){
//any misc code
//window.open('URL','name of url'); <-- to open a new window/tab
});
edit -- missing 's
After reading your comments the following would achieve what you need - I think. (no Jquery, pure javascript)
<script>
function someFunction(){
alert("You called a function on the link click");
}
</script>
<a target="_blank" onclick="someFunction()" id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
I would change
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
to
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1" target="_blank">Red Sox homepage</a>
And I would use this to execute a function when this link is clicked.
<script type="text/javascript">
function myHandler(text) {
alert(text);
}
$(document).on('click', 'a#link1', function() {
myHandler($(this).attr('href'));
});
</script>
Edit: Should work when u use this:
<html>
<head>
<title>Major League Baseball</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
<script type="text/javascript">
function myHandler(text) {
alert(text);
}
$(document).on('click', 'a#link1', function() {
myHandler($(this).attr('href'));
});
</script>
</head>
<body>
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
</body>
</html>
All you need to do is change your link to have a target...so just change it to:
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1" target="redsox">
No javascript required.
Related
I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="https://www.w3schools.com" id="w3s">
W3Schools.com
</a>
</p>
<button>
Change href Value
</button>
<p>
Mouse over the link (or click on it) to see that the value of the href attribute has changed.
</p>
</body>
</html>
First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle
https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>W3Schools.com</p>
<button>Change URL</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var myURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === myURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", myURL);
});
});
</script>
</head>
<body>
</body>
</html>
You can just use a basic if-else and check the href attribute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var w3schoolURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === w3schoolURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", w3schoolURL);
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var w3 = "https://www.w3schools.com";
var w3Jquery = "https://www.w3schools.com/jquery";
var toggleFlag = true;
$("button").click(function(){
if(toggleFlag){
$("#w3s").attr("href", w3Jquery);
}
else{
$("#w3s").attr("href", w3);
}
toggleFlag = !toggleFlag;
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
I want to call an onload event before an focus event in a HTML page.
In my following code
<!DOCTYPE html>
<html>
<head>
<body onload='onloading()'>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).focus(function(){
callMe();
});
});
function callMe()
{
alert('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
document.write("some text");
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</head>
<p id="demo"></p>
</body>
</html>
When I execute this code then i get an a pop up as "Focus on current page " and in the back ground " some text" . But I expect to get an output in the following order
"some text"" in the back ground
"Onload function call" popup
"Focus is on current page" pop up .
But I am not getting the pop up "Onload function call" :( . I need to run the onload event in the body before the focus event. IS it possible to do such a thing ?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<p id="focus">Click here</p>
<script type="text/javascript">
function callMe()
{
$("#focus").html('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
$("#demo").html("some text");
}
$(window).load(function () {
onloading();
});
$(document).ready(function(){
$("#demo").html= myFunction();
$(window).focus(function(){
callMe();
});
});
</script>
</body>
</html>
Your HTML is invalid. You have put the head tag inside the body which is not allowed.
Make use of the following structure:
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
I tested it on IE. I am trying to open the URL in same tab, if exists. It does not work as expected if we use URL like (htp://www.google.com) and working if we use our domain page.
While it worked well for Firefox and chrome.
Following example does not work:
<script type="text/javascript">
function myfunction1() {
window.open('http://www.google.com', 'f');
}
function myfunction2() {
window.open('http://www.yahoo.com', 'f');
}
</script>
<body>
<form id="form2" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
And Following example works:
<script type="text/javascript">
function myfunction1() {
window.open('WebForm1.aspx', 'f');
}
function myfunction2() {
window.open('WebForm2.aspx', 'f');
}
</script>
<body>
<form id="form1" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
If you are trying to open in the same page, then you can change the location.href property. If you would like to open in a new tab, in the same browser, then window.open works in IE9.
I used this in a new .html file, opened in IE9 and it worked:
<!DOCTYPE html>
<html>
<head></head>
<script type="text/javascript">
function myfunction1() {
window.open('http://www.google.com', 'f');
}
function myfunction2() {
window.open('http://www.yahoo.com', 'f');
}
</script>
<body>
<form id="form2" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
Here is my code :
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
window.onload=function(){
var e = jQuery.Event( "click" );
e.preventDefault();
$("#rrx").triggerHandler(e);
$("#rrx").trigger("click");
}
</script>
</head>
<body>
<a href="http://google.com" id="rrx" > gooooooog </a>
</body>
</html>
After page load I should be redirected to http://google.com but this is not happening!
You need to call native click method on anchor tag, jQuery trigger method cannot do it, so you need:
window.onload = function () { $("#rrx")[0].click(); }
Which is the same as:
window.onload = function () { document.getElementById('rrx').click(); }
All,
Can u please tell me whats wrong with the following code.I am trying to open a modal window here and the contents of it is a text box.
Also i get the java script error .dialog is not a function.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#a").click( function(e) {
e.preventDefault();
var html='<div id="e_ls" style="overflow:auto;text-align:justify"><textarea rows="10" cols="10"></textarea></div>';
$e_ls = jQuery('#e_ls');
$e_ls.html(html);
$("#e_ls").dialog("open");
});
});
</script>
</head>
<a href="" id="a" >a</a>
</html>
Thanks....
Its more than just the Jquery UI File Missing. You are pulling it in incorrectly.
Try:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#e_ls").dialog({ autoOpen: false });
$("#a").click( function(e) {
e.preventDefault();
$e_ls = jQuery('#e_ls');
$("#e_ls").dialog('open');
});
});
</script>
</head>
<body>
<a href="" id="a" >a</a>
<div id="e_ls" style="overflow:auto;text-align:justify">
<textarea rows="10" cols="10"></textarea>
</div>
</body>
</html>
With the above the e_ls is hidden by default and only called when you ask. Note you do not need the preventDefault() if you put no href in your tag or use a different tag. the preventDefault is only required because you have an active link which also is incorrect...
Ideally you should use a or a if you want to format it like a link you can use CSS <a id="a" style="cursor:pointer; text-decoration: underline; color:00F">a</a>
You need to download and include the jqueryUI code from http://www.jqueryui.com
You need the jQueryui javascript file.