Buttons are not working in Chrome or Firefox - javascript

I'm having an issue with a website I've created for a school assignment. As the title says, buttons don't seem to be working in Google Chrome or Firefox. I got it working in IE (the horror), where I have to Allow "Blocked Content." The problem is, I don't know what "blocked content" is referred to..
<button href="#" onclick="switchImage('slideImg')">
Play
</button>
Here I'm using Javascript, but buttons in general don't actually work, for example:
<button>
Click me!
</button>
doesn't show the visual for clicking a button.
Any help would be great!

Use following
<!DOCTYPE html>
<html>
<head>
<script>
function switchImage(str)
{
alert(str);
}
</script>
</head>
<body>
<button onclick="switchImage('slideImg')">Play</button>
</body>
</html>
It is working. You can verify it from http://fiddle.jshell.net/Jd2yP/15/

Add the mark of the web immediately after your Doctype to tell IE to run the page in the Internet security zone.
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->

Related

the executing order in chrome

For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?
All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.

Attribute download on Safari Browser

I was doing a project and I faced an issue with the attribute download: I discovered that it isn't supported by Safari browser (according to documentation).
Here's a snippet:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" download>Press to Download</a>
</body>
</html>
I searched a way to do it with pure Javascript or Angular, but I didn't find nothing. Would be great if someone had a solution.
Try
<a href="http://cdn.sstatic.net/Sites/stackoverflow/img/"
download="apple-touch-icon#2.png?v=73d79a89bded&a">
Press to Download</a>

Why is javascript not executing on a web page when accessed via iOS Twitter browser?

I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...

Open a specific location on my computer using anchor tag or input tag

My requirement is to make a link or a button, on clicking it should open a specified location on my computer and I cannot use jquery but I can use javascript.
I tried doing with input tag by coding as below, but did not meet the requirements.
<html>
<head>
...
<meta charset="ISO-8859-1">
<title>Conversion Successful</title>
<link href="xml.css" type="text/css" rel="Stylesheet">
</head>
<body>
<h1 class=heading_position>Conversion Completed Successfully</h1>
<div class="box">
<input readonly="readonly" type="file" value="D:/Office/xmlautomation/">
</div>
</body>
</html>
I'm a beginner in html still figuring out how stuff works. Thanks
This used to be possible in internet explorer (6 and earlier) assuming you didn't care much about controlling how the document/location was opened.
It is no longer possible in IE or any other browser I'm aware of (Chrome/FF) for security reasons (would you want a random site you visited to be able to launch folders/apps on your desktop?).
For the record, the old syntax would've been file://[Host]/D:/Office/xmlautomation/ where [Host] was usually blank so something like...
Office Automation
would've opened the directory in question.
NB: These Urls will still work if they're listed in a file that wasn't retrieved over the web (eg if you drag-and-drop an html file from your computer onto your browser, links like these should work). This is so that local html files which reference each other can be opened without a web server.
You can use the javascript also.
Just tried, it work fine for me as long as C$ is shared.
<html>
<body>
<input onclick="CallMe()" value="ABX" />
<script>
function CallMe() {
// alert('test');
window.open("file://smewara/C$");
}
</script>
</body>
</html>
This should help you out: HTML/JS open a window to the C$ drive

Using jQuery to make a popup

I'm trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to display a jQuery popup with the rest of the article.
So far, I've been following the tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
However once it's up on share point, it doesn't work. I click the button and nothing happens. I even modified the JS so all it does it display an alert, but that doesn't work ether. The link between the page and JS seems to be broken. However I even viewed the src (using my web browser) and sure enough the script tag is in there, but nothing JS is working. Any ideas?
Here's the html page I copy into share point (the java script file is exactly the same as in the tutorial):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/articles/.../popup.js" type="text/javascript"></script>
<style type="text/css">
/* CSS goes here, same as in the tutorial */
</style>
</head>
<body>
<div>
<div class="backgroundmain" style="margin-left:-75px; margin-top:-35px; margin-right:-32px;">
<!-- HTML FOR THE ARTICLES-->
</div>
<center>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup...
</p>
</div>
</div>
</body>
</html>
Thanks for all your help, I really appreciate it.
EDITS:
Here's the results from Chrome's dev tools:
jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
Refused to execute a JavaScript script. Source code of script found within request.
popup.js:147Uncaught ReferenceError: $ is not defined
However I first tried this in firebug and discovered the alert actually works in firefox.
This line looks suspect:
<script src="/articles/.../popup.js" type="text/javascript"></script>
Where exactly is popup.js? If you have it locally, make sure the path is correct. If not you will need to specify the URL to the file and not a relative path.

Categories