I need to display a banner in a my HTML file when java script is disabled as in stackoverflow site. In stackoverflow site, it is displayed a red banner when java script is disabled. It is good to whole HTML page goes little bit down and display a red message as in this stackoverflow site when JS is disabled. Can any one help me to do this..
Thanks in advance..
Use <noscript> tag:
https://developer.mozilla.org/en/HTML/Element/noscript
I don't know if it's still the way to do it, but noscript works for that.
<noscript>Javascript is disabled</noscript>
So I suppose that a specific div inside the noscript should do the job.
<html>
<head>
<title>noscript test</title>
<style>
#nojs {
top: 0px;
width: 100%;
position: absolute;
background-color: red;
color: white;
border-bottom: solid 5px black;
}
</style>
</head>
<body>
<noscript><div id="nojs">You should enable javascript!!</div></noscript>
</body>
</html>
Display the banner and hide it with JavaScript. Thus it is shown if JavaScript is not enabled!
For example
<img src="myimage.gif" id="myImage" />
<script type="text/javascript">
window.onload = function(){
document.getElementById("myImage").style.display="none";
}
</script>
Related
I'm really new to js and just need a short script that redirects users to an URL from another website. This is my script so far:
<!DOCTYPE HTML>
<html>
<head><META CHARSET='UTF-8'><title>My webpage</title>
</head>
<body onload="redirectUser();">
<script>
function redirectUser() {
window.location = "https://www.google.com";
}
</script>
</body>
</html>
The major issue is that some web browsers (i.e. IE) do not automatically run these scripts (they are prompt to manually activate javascript and activeX in order to run the scripts). If this turns out to be the case, is there a way to automatically display a text in the middle of the screen to warn the user about this or to simply display the link?
you can place your link into a <noscript></noscript> tag.
<noscript>Go!</noscript>
You can take advantage of the fact a user doesn't have JavaScript enabled to tell them that they don't have JavaScript enabled.
You can add a div with a message warning about JavaScript being required to use your site, then immediately remove/hide this div with JavaScript.
Users that have JavaScript enabled won't see it as it will have been removed by JavaScript.
Those that don't have JavaScript enabled see the message.
Example below, either disable JS or comment out to see the message.
document.getElementById("jswarning").remove();
#jswarning {
width: 100%;
padding: 10px;
background: red;
color: #fff;
text-align: center;
}
header {
text-align: center;
background: #333;
color: #fff;
font-size:40px;
}
<div id="jswarning">This website requires JavaScript.</div>
<header>Your Website</header>
No script solution (credit to #Founded1898):
<noscript>
<div id="jswarning">This website requires JavaScript.</div>
</noscript>
<header>Your Website</header>
For example:
I have a page and the code is:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap">link</div>
</body>
</html>
And I have a common JavaScript component which will load a CSS file include the code below:
.wrap .link { color: blue; }
Then the link will change from red to blue.
Use iframe can fix this but cause another problem same like display two scrollbar or the lightbox overlay just in part of the page.
I can not change the CSS but I can write a JS loader so do you have some idea to fix this?
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
Therefore, you'll have to adapt your markup and styles. You can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. However there is a you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.
Hope it helps.
This might help you.
function changeColor(){
jQuery(".link").css('color','blue');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
</body>
</html>
I have a webpage that displays a web form whose source is javascript.
By default it places this form in the upper left corner of the screen. How to center it horizontally and vertically on the screen?
I'm confused because the block is in the <script> section rather than <body>.
The form is generated by my email marketing service provider, and I don't have access to its code.
The complete html file is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
Is it your javascript file or are you loading in an external file which creates the form? You can add classes/id's to javascript generated markup which is one way you could target it but you should be able to target and centre it just using:
form {display: block; margin: 0 auto; width: 100%}
Without actually seeing what your JavaScript is doing this is difficult to answer, however the generalized answer to your problem is to use CSS. You can do so within the head section of your html document using the <style> tag (see code below) or using <link> to add an external stylesheet.
Check out W3 to get you started learning more about CSS: http://www.w3schools.com/css/
Actual CSS attributes you will need may vary, but this article shows use of transform: translate to center an element vertically and horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
/* this is a class you would add to the parent HTML tag of your form */
form {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
I was trying to test out some working code from http://dev.iceburg.net/jquery/jqModal/ to get an idea of how this works, but I am unable to get the code to work. I'm trying to use the pop up dialog box part, and I am testing the code from the defaults, which is the first example, in the examples section. here is what I had copied and tried testing out. the part that is not working is the dialog box popping up. i receive an error say.... Uncaught ReferenceError: $ is not defined
<html>
<head>
<title> test </title>
<style type = "text/css">
.jqmWindow {
display:none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
# html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<script type = "text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
</head>
<body>
view
...
<div class="jqmWindow" id="dialog">
Close
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the documentation too!
<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>
If your code is indeed your entire HTML, then the reason $ is not defined is that you have not included jQuery (which defines $ and uses it a lot as shorthand). Your code includes neither the jQuery library nor the jqModal script. (Admittedly all of the examples on the jqModal site are extracts rather than full code so they take this step for granted.)
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jqModal.js"></script>
in your <head>, adjusting the path for jQModal.js as appropriate.
What I am trying to do is have different parts of a page slide up and cover up the previous part. I found what I wanted to do at http://johnpolacek.github.com/superscrollorama/, specifically the "Wipe It" portion. I tried copying some of the code and including the same javascript files.
In Firefox, it works. However, in Chrome and IE, when I try to scroll down, the scrollbar jitters and snaps back to the top of the page.
I don't have it up on a site, but I do have the files that I'm using: http://www.mediafire.com/?h28etrbr5t24qyw
Any help (or more practical alternatives) would be greatly appreciated.
Yea that looks pretty cool. I would just create the code from scratch so you can get it exactly how you want. I just created something real basic. A blue main div with a red div that wipes down. Obviously you can put whatever you want on both divs.. Heres the code:
<!doctype html>
<html>
<head>
<style type='text/css'>
body{
margin: 0px;
}
#wipeScreen{
position: fixed;
width: 100%;
background-color: red;
}
#mainScreen{
position: absolute;
background-color: blue;
height: 200%;
width: 100%;
}
</style>
<script type='text/javascript'>
var visHeight;
function loadConstants(){
visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
var wipeScreen = document.getElementById("wipeScreen");
wipeScreen.style.height = visHeight+"px";
wipeScreen.style.top = -visHeight+"px";
window.onscroll = runScroller;
}
function runScroller(){
document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
}
</script>
</head>
<body onload='loadConstants()'>
<div id='mainScreen'></div>
<div id='wipeScreen'></div>
</body>
</html>
Copy and paste it into an HTML document and you will see what I mean