I wan to show an overlay programmatically. I tried to modify the code in this example Opening overlays programmatically. Instead of loading the overlay only once upon document load as shown in this example, I want to show the overlay everytome a user clicks the button. The problem is thatthe overlay is loaded only for the first click. It does not open for the subsequent clicks on the same button
Here is my code.
<html>
<head>
<title>jQuery Tools standalone demo</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<style>
#facebox {
display:none;
width:400px;
border:10px solid #666;
border:10px solid rgba(82, 82, 82, 0.698);
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#facebox div {
padding:10px;
border:1px solid #3B5998;
background-color:#fff;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
#facebox h2 {
margin:-11px;
margin-bottom:0px;
color:#fff;
background-color:#6D84B4;
padding:5px 10px;
border:1px solid #3B5998;
font-size:20px;
}
</style>
<script>
var overlayDiv=function(){
$("#facebox").overlay({
api: true,
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
})
};
$(document).ready(function() {
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
overlayDiv();
});
});
</script>
<body>
<button id="triggerBtn"> Trigger Overlay</button>
<div id="facebox">
<div>
<h2>Facebox</h2>
<p>
This dialog is opened programmatically when the page loads. There is no need for a trigger element.
</p>
<form>
<input type="file" />
</form>
<p style="color:#666">
To close, click the Close button or hit the ESC key.
</p>
<p>
<button class="close"> Close </button>
</p>
</div>
</div>
</body>
This should do the trick for you.
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
$('#facebox').data('overlay').load();
});
More information here - Jquery Tools Overlay Scripting API
This is working for me... I found this method on the jQuery Tools forum and seems to be the best I can find for now.
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
Simplify:
var overlay;
function overlayDiv()
{
if (typeof overlay === 'undefined')
overlay = $('#facebox').data('overlay').load();
else
overlay.load();
}
You should use:
$(".overlay").remove();
Related
I am attempting to use a <div> overlay but I am unable to call the overlay from within a function using Microsoft Edge (Chromium version). The overlay works fine with Firefox.
Here's the link to a fiddle which will illustrate my dilemma: https://jsfiddle.net/utd0z7qk/
First, open the link using Firefox then click on the "Check for Errors" button. You will see an alert box appear with the message "Check Point". Note, in the background you will also see that an overlay has been invoked with the message "Loading...".
Next, open the same link using Microsoft Edge and click on the "Check for Errors" button. Again, you will see an alert box appear with the message "Check Point.. However, note the overlay has not been invoked and there is no message in the background.
Why not?
I make extensive use of <div> overlays for messaging purposes, particularly when I am anticipating a noticeable delay in the response from a remote source (e.g. database, web service, REST API, etc). Is there a suitable work-around for this behavior with Microsoft Edge?
Edited to include code:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
alert("Check Point");
ovly.style.display = "none";
}
.overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,1.00); /* White background with opacity */
/* background-color: white;
opacity: 1.00; */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
overflow-y: auto;
}
<html>
<head>
<body>
<center>
<h5>Overlay Messaging Demo</h5>
<br />
<br />
<button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
</center>
<!-- Spinner Overlay -->
<div id="overlaySpinner" class="overlay" style="text-align:center;">
<div class="text-center" style="height:65%"></div>
<div class="text-center" style="height:5%">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
<span id="msgSpinner"></span>
</div>
</div>
</body>
</head>
</html>
Any assistance is greatly appreciated.
I've tested and the problem also happens in Google Chrome:
Basically, you need to give it time to do the reflow/redraw.
A simple setTimeout is enough to test.
Something like changing this:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
alert("Check Point");
ovly.style.display = "none";
}
Into this:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
setTimeout(function(){
alert("Check Point");
ovly.style.display = "none";
}, 2000);
}
And the "Loading ..." should show:
(By the way, remember that Microsoft Edge now runs on Blink, just like Google Chrome)
You can try this on the StackSnippet below:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
setTimeout(function(){
alert("Check Point");
ovly.style.display = "none";
}, 2000);
}
.overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,1.00); /* White background with opacity */
/* background-color: white;
opacity: 1.00; */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
overflow-y: auto;
}
<html>
<head>
<body>
<center>
<h5>Overlay Messaging Demo</h5>
<br />
<br />
<button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
</center>
<!-- Spinner Overlay -->
<div id="overlaySpinner" class="overlay" style="text-align:center;">
<div class="text-center" style="height:45%"></div>
<div class="text-center" style="height:5%">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
<span id="msgSpinner"></span>
</div>
</div>
</body>
</head>
</html>
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I was recently reading on Unobtrusive javascript and decided to give it a shot. Whether or not I decide to use this style is to be determined at a later time. This is just for my own curiosity and not for any time restricted project.
Now, I was looking at example code and a lot of the examples seem to be using, what took me forever to discover, jQuery. They use a function like $('class-name').whatever(...);
Well I rather like the look of $('class').function, so I tried to emulate it without using jQuery(as I don't know jQuery and don't care about it atm). I'm unable, however, to make this example work.
Here is my jsFiddle: http://jsfiddle.net/dethnull/K3eAc/3/
<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript test</title>
<script>
function $(id) {
return document.getElementById(id);
}
$('tester').onclick(function () {
alert('Hello world');
});
</script>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
a {
cursor: pointer;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class='styled'>
<ul>
<li><a id='tester'>CLICK ME</a></li>
</ul>
</div>
</body>
</html>
I was expecting an alert box to pop up when you click on the link, but doesn't seem to happen. When checking the console in chrome it gives this message "Uncaught TypeError: Cannot call method 'onClick' of null"
I'm not a javascript expert, so more than likely I'm doing something wrong. Any help is appreciated.
Try this code,
Script
function $(id) {
return document.getElementById(id);
}
$('tester').addEventListener('click', function () {
alert('Hello world');
});
When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event
Demo JS http://jsfiddle.net/K3eAc/4/
You don't need addEventListener or attachEvent: live demo.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unobtrusive Javascript test</title>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
</style>
</head>
<body>
<div class="styled">
<ul>
<li>CLICK ME</li>
</ul>
</div>
<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
alert('Hello world');
}
</script>
</body>
</html>
.
I'm better in practice than in theory, but it would seem to me that with converting the targeted element into a variable, it becomes an object. Tested in IE8/9, Chrome25 and FF30.
Try this
function $(id) {
return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
alert('Hello world');
});
Reference : https://developer.mozilla.org/en-US/docs/DOM/element.onclick
I made the mouse hover animate, when I move the mouse over the link it will show the image and when I move the mouse to another link the previous image have to disappear and show another image that belong to another link.
<style>
.imgHover {
display: inline;
position: relative;
}
.hover {
display: none;
position: absolute;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
});</script>
<a class="imgHover" href="htpp://google.com">Text Link 1
<img class="hover" src="image_link1.jpg" alt=""></a>
<a class="imgHover" href="htpp://google.com">Text Link 2
<img class="hover" src="image_link2.jpg" alt=""></a>
///////////////////////////////////
Can I move the code link this and when I mouse hover Text Link 1 the script select the image 1... Please help.
<div id="imageshow">
<img class="hover" src="image_link1.jpg" alt="">
<img class="hover" src="image_link2.jpg" alt="">
</div>
<div id="link">
<a class="imgHover" href="htpp://google.com">Text Link 1 </a>
<a class="imgHover" href="htpp://google.com">Text Link 2 </a>
</div>
You have to put it before the first fade:
$(".imgHover").hover(
function() {
$(this).children("img").stop().fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(this).children("img").stop().fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
<script type="text/javascript">
$(function() {
$(".imgHover").hover(
function() {
$(".imgHover img, .imgHover img .hover").stop();
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(".imgHover img, .imgHover img .hover").stop();
$(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
});
</script>
I am using jquery to do drag and drop. I am able to do drag and drop. My dragged element is an image. Now, I want to show this image on target which is a table cell(td). How to do this?
$(".emptyimg").draggable();
$("#tdcell").droppable({
drop: function(event, ui ) {$(ui.draggable).??;}
});
thanks
Check the following code:
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function () {
$("#draggable").draggable();
});
</script>
<div class="demo">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content" style="cursor:move">
<p>Drag me around</p>
</div>
</div><!-- End demo -->