I have now spent hours trying to figure out how you do this by reading other's posts - I even got a jsfiddle to work, but can't get this to work in my page.
I want to construct a URL to be used on a page multiple times, so that when I need to update the URL, I only need to do it in one place via a Javascript variable in the header.
I break the URL into two parts because one of the variables will nearly always be the same, but the other most often will be different on different pages.
For example, I declare in my header:
<script language="javascript" type=”text/javascript”>
function goSchedule()
{
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href= schedulePath;
}
</script>
And then I can't seem to figure out how to call it in the href. This doesn't work:
<p>Click the following link to test:Test this link</p>
If you answer, please explain how the initial Javascript is created and how to properly call it so it becomes an active URL.
It looks like you are trying to replace the href attribute at the moment the user clicks the link. I suggest you replace the href attribute once for all the link as soon as the page has finished loading.
Make sure you declare your function in the head section
<head>
<!-- Other head declarations ... -->
<script language="javascript" type=”text/javascript”>
function goSchedule() {
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
And then bind this method to the onload event of the body element like this
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
Here is the full html page:
<html>
<head>
<!-- Other head declarations ... -->
<script language="javascript" type="text/javascript">
function goSchedule() {
var schedulePath = "http://support.mozilla.org/";
var scheduleFileName = "en-US/products/firefox?as=u&utm_source=inproduct";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
</html>
Related
I want to run mp4 videos on web browser. For that i am using flow player and i want to change href content dynamically on page load. I have used below code.
<html><head>
<title>Wow! This is video</title>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//var Filename = document.getElementById("<%=hdnFileName.ClientID%>").value;
var Filename = "http://www.yahoo.com";
$("a.mylink").attr("href", Filename);
});
</script></head><body>
<!-- -->
<script language="JavaScript" type="text/javascript">
flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>
Here i will pass anchor tag value externally and i want to set it to anchor tag.
But above code is not wotking. Can you please help?
There are two ways that I know of to achieve what you want
1st: Do not set the href to attribute to anything in your HTML and then use js to set it
HTML Code :
<a style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
JS Code :
document.getElementById("Test1").setAttribute("href", Filename);
2nd: Create a new a Tag and replace the a tag with that
JS Code :
var Filename = "http://www.yahoo.com";
var aTag = document.createElement("a");
aTag.style.width = "500px";
aTag.style.height = "400px";
aTag.style.display = "block";
aTag.classList.add("Test1");
aTag.setAttribute("href", Filename);
aTag.id = "Test1";
document.getElementById("Test1").replaceWith(aTag)
The working code:
<html>
<head>
<title>Wow! This is video</title>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head><body>
<!-- -->
<script language="JavaScript" type="text/javascript">
file = "http://techslides.com/demos/sample-videos/small.mp4";//any sample file you want
$("a").attr("href",file);
flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>
Simply you might be wondering why this works and not yours. So here is the reason.
Two big mistakes what you are doing:
mylink? its nowhere. better if you use
$("#Test1")
or
$(".Test1")
You are loading the script when the document is ready. Which means if you debug your code or view the page source you will find that your href is updated one, but it plays the old video only.
To correct it, you need to set the attribute without the ready function.
Still it doesn't work because if you write it at the top, it will be overwritten by the actual href attribute.
Yahoo.com is not a mp4 video. The attribute you provide make sure is a video.
I have two separate files one with my html code and with my javaScript. What I am trying to do is create a function in javascript then call that function in the html. Both files are in the same folder along with the image. I'm new to both languages and to this site so please go easy;
I would really appreciate it if someone could help me please.`
JavaScript to load image below:
var menu = new image();
menu.src = "Fitness App Entry Scrren.jpg"
function menuScreen(){
document.getElementById("menu").getAttribute("src");
}
Html code to call function:
<!DOCTYPE html>
<html>
<head>
<body src="Functions.js">
<script onload="menuScreen()"></script>
</body>
<head>
</html>
What you are doing is against the rules of HTML. First of all, <body></body> should be outside of <head></head>. You should have <script></script> in either <head></head> or <body></body>. The <body> tag should have the onload attribute set to menuScreen(), and the <script> tag's src attribute should be set to Functions.js (as John Hascall said). By the way, John Hascall is right, there is no element with the ID of "menu" so it won't work unless you create a <div> or <iframe> with the specific ID and append the image to it in your Functions.js file.
So, your JavaScript code should look like this:
var menu = new Image(); // note that the constructor is capitalized
menu.src = "Fitness App Entry Screen.jpg";
// Create a <div> with the image within it.
var division = document.createElement("div");
division.setAttribute("id", "menu");
division.appendChild(menu);
document.body.appendChild(division);
function menuScreen() {
division.getAttribute("src"); // you can use division because it has the id of menu
}
And here is your HTML code to run the page (according to the HTML5 specifications, note that):
<!DOCTYPE html>
<html>
<head>
<script src="Functions.js"></script>
</head>
<body onload="menuScreen()">
<!-- Left intentionally blank -->
</body>
</html>
Hopefully this will help you!
I have a hyperlink in the index file, which calls an HTML file. This HTML file has a button and some instructions. Once clicked the button, it is supposed to call a function from another HTML page and display a summary of some calculations.
I have used <link>, <script src=> etc. but I always get the error that the function assigned to the "button click" is not available. Any suggestions is greatly appreciated.
Did a bit more research on how to post here and following is the script, better presented.
file 1 - index.html
<html>, <head>,, Increment count when button is clickedThe button was pressed <span id="displayCount">0</span> times.</p> </body> </html>
file 2 - test.js
<script LANGUAGE="javascript"> var count = 0; var button = document.getElementById("countButton"); var display = document.getElementById("displayCount"); button.onclick = function(){ count++; display.innerHTML = count; } </script>
Cheers
You should put your function in another file (js file) and include it in your pages head tags.
Example:
<html>
<head>
<script src="myfile.js"></script>
</head>
<body>
........
</body>
</html>
You need to add that script/functionality on that page also, where button is present.
I have this code in razror view page:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">
Click me</button>
<p id="demo">
</p>
#{
List<UserContact> userContacts = ViewBag.contacts;
String contacts1 = Html.Partial("~/Views/Shared/Contacts.cshtml", userContacts).ToHtmlString();
}
<script type="text/javascript">
var contacts2 = #contacts1;
function myFunction() {
alert(contacts2);
}
</script>
</body>
</html>
when I press button Click me I get this error:
ReferenceError: myFunction is not defined
Why I get this error?
Any idea why I get this error?
Looks like you have some pretty broken HTML. You have assigned the contacts1 server side variable to an HTML fragment:
String contacts1 = Html.Partial("~/Views/Shared/Contacts.cshtml", userContacts).ToHtmlString();
and then you injected it inside a tag:
<script type="text/javascript">
var contacts2 = #contacts1;
function myFunction() {
alert(contacts2);
}
</script>
which totally breaks your markup. Look at the source code of the generated page in the browser and you will see how broken it is.
And how can I fix it?
It's not quite clear what you are trying to achieve so it's pretty hard to say how to fix this issue, but for starters you might try having valid markup and javascript:
<script type="text/javascript">
function myFunction() {
alert('The button was clicked');
}
</script>
It looks like you are trying to load some markup from the server when the button is clicked. You might consider using AJAX if this is the case.
UPDATE:
It looks like you are trying to assign a server side string variable to a javascript variable. This can be done by properly encoding it:
<script type="text/javascript">
var contacts2 = #Json.Encode(contacts1);
function myFunction() {
alert(contacts2);
}
</script>
I want to add the Digg button on my webpage but don't want to add the script tag directly on the page.
<div class="digg">
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
What are the some of the unobstrusive ways of adding the JavaScript for the Digg button?
The diggthis.js script either places the button where the script tag lies or looks for an anchor tag with a class name of "DiggThisButton". However, it tries to run before all the DOM elements are created. So, instead of having script included in the head of the HTML document, you need to place it at the bottom of the page.
Here's another way of doing this ( the .... represents any additional content):
<html>
<head>
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
.....
<body>
....
<div class="digg">
<a class="DiggThisButton"></a>
</div>
....
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</html>
Other than setting those "digg_" variables in a separate file, there's not much you can do.
Including an external Javascript from digg.com isn't really "intrusive" anyway.