Javascript doesn't execute in Safari when placed in HEAD - javascript

I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.

I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.

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.

jQuery not working in any browser in Windows 8

jQuery is not working on my Windows 8.1 64-bit machine. Is there any known issue that causes that?
Have tried both CDN (Google, jQuery), and local sources, but none work. I know the code is correct because I've tried various examples to verify, including old code that worked fine before, and code from this YouTube tutorial:
https://www.youtube.com/watch?v=VRnQOcVclS8
I've tried using this script source also, to no avail:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
How to test: click on a paragraph tag, and it should hide. Click on an H1 tag, and it should toggle open or closed. None of this works for me.
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
</script>
</html>
None of it is working. Not sure what is going on.
Update
Several helpful commenters have tested my code and it appears to work fine on their machines, which really is helpful to narrow down the issue. It has been established that my code is good. So, at this point, to anyone who would offer help, I'm looking for specific information, "known issues", or "gotchas" on why this isn't working for me. I suspect it has something to do with Window 8 or Windows 8.1, but I don't know what it would be.
Change
<script type="text/javascript" src="http"//code.jquery.com/jquery-1.8.0.min.js"></script>
to
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
I had problems trying to run code from my computer before, so I just use JSFiddle. If that's not an option for you, trying disabling security settings that you prevent you from running code that's stored on your computer. That or get a website to run it off of.
If you have VisualStudio, you can run code in there and it will work. Just create a blank app and replace all the code and remove references to WinJS. You can get an express version if you don't. Sorry if that's not your preferred option. That was my work-around before I got JSFiddle.
Try With
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
Add http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
instead of http://code.jquery.com/jquery-1.8.0.min.js
Demo

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.

What is a better way to lazy load content for users with javascript?

I have a page that has lots of images and other code that would work better if it is lazy loaded.
I have been attempting to do this with the noscript tag but I just noticed that it is not working correctly in IE. It works in every other browser I tested (ff,opera,chrome,safari,etc) so I am a little frustrated.
I am pretty sure at one point or another I actually had this working in IE because I have been using the technique for a little while and I test IE quite frequently... but it isn't working now and everything I google seems to suggest that it never worked.
Here is a simple example to copy and paste that shows what I was attempting:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>lazy load with noscript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<noscript>
<div>
<p>other content here</p>
<img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
</div>
</noscript>
<noscript>
<div>
<p>other content here 2</p>
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
</div>
</noscript>
<script type="text/javascript">
var html = $("noscript:first").text();
alert(html);
$("body").append(html);
</script>
</body>
</html>
The html used for users with javascript and without javascript is the same. I just use jquery to tab the content to make it easier to view. Since the content is tabbed in javascript it needs to lazy load when a tab opens so it does not take ages to download initially when the page has sizable attachments.
How can I achieve this without outputting the html more than once?
What you need to do is have all the images point to a pixel gif (or png). Write a script that checks if a user has scrolled near an image, and then use Javascript to swap the pixel with the full image.
In scripts I have written, you would have an image tag that looks like:
<img src="pixel.gif" data-img="path-to-full-img.jpg" />
Alternately, you could use a plugin like this. Note: I have not used this plugin before, but it looks like it's all you need.
If you really wanted to get hardcore, you could lazyload your javascript using something like head.js or control.js

Is there a way to hide the scrollbars in IE8?

do you know whether there is a way to not let the scrollbars in IE8 appear?
I've got a complete empty .html site and loaded it in IE8 and scrollbars are appearing.
I've been searching the net for a while, but couldn't find any hint. Is it solveable with CSS or do I need Javascript?
Every hint is much appreciated.
You can use the CSS overflow property to hide the scrollbars:
html, body {
overflow: hidden;
}
If your blank HTML page is standards-compliant (to some degree I suppose), IE8 will not display scrollbars. You shouldn't need any CSS. Here's a sample page that won't have scrollbars:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>
If IE8 renders the page in Quirks Mode, it will always have scroll bars. You can check exactly what rendering it's using (and test different renderings) in the Developer Tools window (press F12). The "Browser Mode" and "Document Mode" settings at the end of the menu bar will tell you.
You can try doing overflow:hidden; in your css file, in the body,html tags.

Categories