Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm primarily wondering if this is even possible without PHP, and perhaps some guidance if it is. I have the feeling I'm overthinking the process.
Currently I'm loading specific .html's into a div with ease by button clicks. However, I have been trying to load an .html into a div by using a search bar (as the title explicitly states).
For instance, I search for "Apple" and expect "Apple.html" to load into the div. I understand that javascript cannot/shouldn't search local files without the aid of PHP, but can it not 'assume' that the file is there and load it? According to my logic it wouldn't be much different than a button click.
you can use jquery
your all files should be at same place where actual page exist otherwise you have to specify path also.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<input type="search" id="search">
<input type="button" id="button" name="">
<div>
</div>
<script type="text/javascript">
$("#button").on('click', function(e){
$('div').load($("#search").val() + ".html");
});
</script>
</body>
</html>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
External Js not working, greyed out by Atom
Not-working: The button is not showing on the site and the script is greyed out so it is not active as if it was a comment.
The html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScriptGyak3</title>
<script type="text/javascript" src="page3.js" </script>
</head>
<body id="test">
<button type="button" onclick="hatszin()"> Change Background </button>
</body>
</html>
The js code is just:
function hatszin() {
document.getElementById('test').style.backgroundColor = 'orange';
}
You need to close the opening <script> tag properly by adding a >
<script type="text/javascript" src="page3.js"> </script>
^
Found a solution, had to give the body context (I placed a h1 in there) and now everything looks like shows like as it should.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I cant get my external file to work. I just want a simple alert, it works in my main html file but not when I link the external js file.
<!doctype html>
<html>
<head>
<title>Javascript Tutorial</title>
</head>
<body>
<div class="container">
<h1>Let's Learn Javascript!</h1>
<p class="lead">...cause Javascript Rocks.</p>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
It is proper practice to define script tags in the <head> or <footer> tag. Also when linking to your Javascript file the methods in the file won't be called automatically unless you use document.ready.
If you wish for a function to be called as soon as the page loads use document.ready or create a script tag in the <head> or <footer> and call the function from there:
<script type="text/javascript">
myfunction();
</script>
Also in the JS file code shouldn't just be laying about, they should be organized/enclosed in functions.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I try to go to Gmail and FaceBook with my JavaScript disabled, I am greeted with the following:
The content in the images is displayed in <noscript> tags, but the rest of the usual page content isn't there. The Gmail source has a few empty <iframe> elements, but the FB page is empty, save for the <noscript> element, and a couple <script> tags.
I would like to have similar behaviour for my site, but am unsure how to only load the page content if the user has JS enabled. I can put in the <noscript> element, and have a div centred on screen with a "You need JS enabled" message, but the rest of the content would still have loaded behind it.
There are a couple solutions here and here, but they only have the main content as:
display: none;
and the set it to block; via JS. But that would still show up in the source.
Can I entirely prevent loading page content when JS is disabled, and only display the "Oops, you need JS enabled" message?
Do not put the content in the first page, and just put a <script src="…"> which loads the actual contents via AJAX. Your source should then roughly follow that template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="libraries.js"></script>
<script src="load-page-contents.js"></script>
</head>
<body>
<noscript>
This website is an interactive editor for 3D graphics or something
really complex that can't be done at all in plain HTML, and therefore
needs JavaScript.
Click here to read more about this project.
<img src="screenshot.jpg" alt="Obligatory screenshot, to compell the
user to turn on JavaScript because this looks So Cool ™." />
</body>
</html>
Think twice about it, however. Does your site really need JavaScript to work? Can't at least a dumbed-down version be displayed otherwise? There are lots of reasons to have JavaScript disabled (screen readers, search engines, security issues, easy way to disable lots of blinking flashing annoying ads)
Simply load the whole page with an AJAX request and hide the error message using Javascript. Then the error message will remain if they have Javascript disabled, and the page will be loaded if it is enabled.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
This is for a class project. I am making a one page site about space for kids. The idea is to have the page load at the bottom and as you scroll a rocket blasts off etc. I can't find a solution to getting it to load at the bottom without specifying the anchor in the URL.
You could always use JavaScript to scroll to the bottom of the page when the window loads.
window.addEventListener('load',function() {
window.scrollTo(0,document.body.scrollHeight);
}, false);
In an HTML document:
<!doctype html>
<meta charset='utf-8'>
<title>Page title</title>
<script type='text/javascript'>
window.addEventListener('load',function() {
window.scrollTo(0,document.body.scrollHeight);
}, false);
</script>
<!-- The rest of your document -->
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want to stop rendering the page and exit when the user's browser doesn't have JavaScript enabled or support,
I want it like how exit() works in PHP.
Is it possible via HTML?
You can do this:
<noscript>
<style type="text/css">body { display: none; } </style>
<meta http-equiv="refresh" content="0; url=http://redirectpage.com/">
</noscript>
technically wrong but there is some browser support.
<noscript>
<meta http-equiv="refresh" content="0;url=noscript.html">
</noscript>
No, that's not possible. What you could do, however, is add a stylesheet blanking out the page inside a <noscript> tag:
<noscript>
<style>
* { display: none; }
</style>
</noscript>
Of course that would hide everything; not just stuff that occurs later on the page.
Another option that's very common is adding a no-js CSS class to the <body> tag which you remove as early as possible using JavaScript. That was you can properly create CSS rules to show/hide elements based on the (non-)existence of that class.
Here's how you use the noscript tag:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
// [whatever JS is appropriate]
</script>
<noscript>
<!-- Browser doesn't support JavaScript, so go elsewhere -->
<meta http-equiv="refresh" content="0;url=http://some.other-website.com/">
</noscript>
</head>
<body>
.... The rest of the HTML body
</body>
</html>
This only works in the <head> section with HTML5.
I think it's better to use ThiefMaster's and Dagon's concept together, as fallback support