jqModal not working - javascript

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.

Related

Gif not fading out despite calling .fadeOut command

I am trying to get a gif that I have to fade out after the page loads, but I'm not having much luck.
I want the overlay, which has a white background and the gif, to fade into transparency after everything else on the page is loaded and ready to be seen.
Below is my code, and also a link to a page where I've been testing it:
Link to test code
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!
<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
And the CSS:
#overlay {
background-color: white;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
You use multiple versions of jQuery. If you either delete the include for jQuery 3, or make the following change, it will work.
I recently contributed to document-ready handlers in the SO:Docs which applies here and I think many will not realize as they switch to jQuery 3.
jQuery(function($) {
// Run when document is ready
// $ (first argument) will be internal reference to jQuery
// Never rely on $ being a reference to jQuery in the global namespace
});
All other document-ready handlers are deprecated in jQuery 3.0.
Using that doc-ready handler will work even if you leave both jQuery includes in the code.

Clicking inside window is required in order for onpaste to work

The idea is to handle paste event at the level of page as such (contrary to handling it at the level of individual input fields/elements). The solution is to have paste event handler bound to a top level div element.
The problem is that before paste event starts to be firing, user must first physically click anywhere inside the browser window after the page loads for the first time (even though the browser window as such is in focus).
The question is: How to make the page sensitive to paste without this step (of having to click inside the window)?
Techniques I've tried that didn't work:
Focussing the outer div programmatically on load (see the js code below)
Clicking the outer div programmatically on load (see the js code below)
Note: My actual project is a rather complex angular web page, fortunately, I was able to replicate the behaviour using pure HTML/javascript.
Note: Paste event on div seems to be working only in Chrome. So don't even try this in MSIE or FF. Nevertheless, cross browser support is another issue that I'd like to tackle separately.
Test html page to replicate the problem:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>paste test</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
div#outer {
margin: auto;
height: 100%;
padding: 20px;
background-color: whitesmoke;
box-sizing: border-box;
}
div#inner {
margin: auto;
margin-top: 20px;
padding: 20px;
width: 500px;
height: 500px;
border: solid 3px green;
}
</style>
</head>
<body onload="load()">
<div id="outer" onpaste="paste()" tabindex="1">
First click anywhere to make the paste work.
<div id="inner">
Just any content.
Not important for example.
</div>
</div>
<script type="text/javascript">
function load() {
document.getElementById('outer').focus();
document.getElementById('outer').click();
}
function paste() {
alert('paste');
}
</script>
</body>
</html>

Javascript Page Wipe Transition with Superscrollorama

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

Displaying placeholder HTML when Javascript is disabled

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>

VRML run a script

I am playing around with VRML at the moment, not through choice to be honest but for a project on Web 3D.
I am trying to make a touch sensor in VRML that will show and hide a Div in a webpage. I have tried writing a wee script using
browser.loadURL('javascript:someFunction()');
to try and test this.
The javascript is never called, however I know my touch sensor is ok as certain functions I have tried to use (e.g. if i spell 'browser' wrong) it throws up an error.
Perhaps this is just not supported by modern browsers?
Any assistance and advice would be greatly appreciated.
DEF alertScript Script {
eventIn SFTime make_alert
url [ "javascript:
function make_alert (value) {
Browser.loadURL('javascript:alert()');
}
" ]
}
ROUTE touchBack.touchTime TO alertScript.make_alert
Do they only want classic VRML or is X3D allowed ? (X3D is the name of the current version of VRML).
If you are allowed to use X3D (I don't see why not), you could use X3DOM which is a WebGL engine, you may even get extra points on your assignment :)
Here's an example that hides a div when you click on a 3D sphere:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Touchsensor in X3DOM</title>
<link href="x3dom.css" rel="stylesheet" />
<style>
#myDiv {
color: blue;
margin: 20px 0;
}
x3d {
display: block;
width: 600px;
height: 400px;
background: #EEEEEE;
border: none;
}
</style>
</head>
<body>
<div id="myDiv">
Click the sphere to hide this div
</div>
<x3d>
<Scene>
<Shape id="mySphere">
<Appearance>
<Material diffuseColor="0 1 0" />
</Appearance>
<Sphere/>
</Shape>
</Scene>
</x3d>
<script src="x3dom.js"></script>
<script>
(function() {
document.getElementById('mySphere').onclick = function(){
document.getElementById('myDiv').style.display = "none";
};
})();
</script>
</body>
</html>
And by the way, X3D is the recommended 3D technology by the HTML5 spec, it isn't dead at all :-)

Categories

Resources