I am making a website with HTML, PHP Javscript and CSS. I have HTML, PHP and Javascript in the same document and a link to the CSS file. Am now checking for compatibility with different browsers and noticed that Safari in iOS 10.2.1 doesn't seem to find the CSS. Why is this?
First I tried having all the HTML code printed from inside the <?php ?> (and the Javascript before the PHP code). This worked in most browsers, but at least one version of Firefox had some trouble finding the link to my CSS file (the CSS link was printed from the PHP, but I didn't have the <html>, <head> or <body> tags in this version).
After adding the above mentioned HTML tags outside of the PHP code (and including the CSS link in the head), the HTML now surrounds the PHP and Javascript code (see code below). This solved the Firefox issue. But the CSS now doesn't work in Safari in iOS 10.2.1 (maybe didn't earlier either, never tested).
Basic structure of code:
<!DOCTYPE html>
<html>
<head>
<title>Title<title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
×<br>
Subtest 7<br>
Subtest 8
</div>
</body>
<script>
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
?>
</html>
You're missing the end tag for your title element. Adding </title> should fix the problem.
Try it like this. The php code can be in wherever you want!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
×<br>
Subtest 7<br>
Subtest 8
</div>
</body>
<script type="text/javascript">
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
echo "Test for see where will appear this text";
?>
</html>
I realised that the Javascript should be inside the body or head of the HTML! Apparently worked for most browsers even with the Javascript outside of head and body, but changing it solved the issue for Safari mobile iOS 10.2.1.
Related
I'm a student who's only just started coding and I've got a project due soon. I tried adding script to my project and absolutely nothings worked. So, I tried stripping it down and making a button which changes the background colour, even that failed to work. Idk if it's visual studios being bugged out or my code itself. I'll post the code and what the debugger thing says. Any help would be cool.
<html>
<head>
<meta charset="utf-8">
<title>Chinese Numbers</title>
</head>
<body>
<p><b> Chinese Numbers </b></p>
<input id="btnPlay" type="button" value="Play" onclick="btnPlay_OnClick" >
</body>
</html>
<script>
function btnPlay_OnClick() {
document.bgColor = "red";
}
</script>
'iexplore.exe' (Script): Loaded 'Script Code (Windows Internet Explorer)'.
The program '[16476] iexplore.exe' has exited with code 0 (0x0).
The program '[15132] iisexpress.exe' has exited with code 0 (0x0).
Your script is outside of the <html> and <body> tag. This means that the script will not be executed in the context of the document.
Instead move your script inside the <body> tag, preferably before the closing </body> tag.
Also document itself has no styles, as it refers to the context of the current document but is not an element by itself.
The document object does have a body property which refers to the <body> element in your document.
To change the background color of the body you need to access the style property of the body property and set the backgroundColor property to a certain color.
<html>
<head>
<meta charset="utf-8">
<title>Chinese Numbers</title>
</head>
<body>
<p><b> Chinese Numbers </b></p>
<input id="btnPlay" type="button" value="Play" onclick="btnPlay_OnClick" >
<script>
function btnPlay_OnClick() {
document.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
I'm making an html-file sample.html with JavaScript. This file will work on a local machine (from desktop) and must get html code from some server (http://ip/login.aspx). Please, help me write the js-code of the function getHTMLCode, which will return html code. And it must work in IE8/9 and Firefox. I have already written a function with XMLHttpRequest, but it works only in IE8, and not in Firefox..
sample.html
<html>
<head>
<script type="text/javascript">
function getHTMLCode()
{
//... ??????
return str;
}
</script>
</head>
<body>
<script type="text/javascript">
var pageCode=getHTMLCode("http://ip/login.aspx");
document.write(pageCode);
document.getElementsByName('LOGIN')[0].value='111';
document.getElementsByName('pass')[0].value='222';
document.getElementsByName('action')[0].focus();
document.getElementsByName('action')[0].click();
</script>
</body>
</html>
Is it possible to load javascript without jQuery? I spent the better portion of yesterday evening simply trying to create the most basic HTML page with working CSS and Javascript and - despite the numerous methods I have tried - none of them have worked. Here is my basic HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div>On</div>
<input type="button" onclick="popup()" value="Click Me!">
</body>
</html>
This is being hosted locally on XAMPP, the page displays fine and the CSS works fine, the javascript is in the same directory as the html page and works fine when written inline with the HTML. However the js does not work in any of the following scenarios when trying to include it as an externality:
When application/javascript is used above it still doesn't work. All I receive in either case (in the Firebug script window) is "popup()" and that's it. Here is the script.js file:
function popup() {
alert("Hello World")
}
This js also doesn't work (I tried it even though I'm not parsing XML):
//<![CDATA[
function popup() {
alert("Hello World")
}
//]]>
nor this:
document.addEventListener('DOMContentReady', function popup() {
alert("Hello World")
})
nor this:
<script type="text/javascript">
function popup() {
alert("Hello World")
}
</script>
Not that I really expected it too, but I was getting desperate. If anyone knows what's going on, I'd appreciate any info.
I'm open to this being an issue with hosting this locally on XAMMP but find it doubtful as CSS and HTML are both flying. However the js works if I include it inline with the HTML(?). If it helps, when Firebug displays popup() in the script window it also shows an #conn1source connection.
UPDATE: according to one of the suggestions in the comments if I only write the following in the js file it works:
alert("Hello World")
however the function does not. So I'm guessing this means that I wrapped the function somehow incorrectly in the js file, but I'm following standard practice as far as I am aware.
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
I encountered a weird problem when trying to write a cross-browser script. Basically my header looks like this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
Then in the body tag:
<p id="hey">Hey</p>
<input type="button" value="attachStyle" name="attachStyle" onclick="attachStyle();"></input>
<script>
function attachStyle() {
var strVar="";
strVar += "<style type='text\/css'>#hey {border:5px solid red;}<\/script>";
$("head").append(strVar);
}
</script>
The button works in Firefox, but not in Chrome. When I looked at the html DOM elements in the developer tool, the style tag was inserted but without content, like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>
I'm curious as to what causes this? And how to create CSS style in a way that is cross-browser? Thanks!
<style type='text/css'></script>
You started with a "style" tag and closed it with "script". Wrong tag! :P