When i click on a link (a href), only background loader appears. But the defined link is not opening, the screen strucks in the loader screen. In this screen i cant access any function. I have been trying this for weeks, but no positive results. Please help me to find the error in the added codings
$(document).ready(function() {
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="stretch"></div><img src="assets/img/ring.gif" style="repeat:no-repeat;" /> Loading...');
//FOR TESTING
//alert( loading.text() ); //FOR TESTING ONLY!!!
$("#cmd").click(function() {
loading.appendTo('body');
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
});;
#loading {
background-color: white;
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
#loading * {
vertical-align: middle;
}
#stretch {
display: inline-block;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li></i>Application</li>
.
Well of course it's not doing anything, when you stop the default event from triggering (clicking).
e.preventDefault();
This prevents the default action from happening. However, you are going to hit issues when you load 3rd party websites using Javascript.
Related
I just need to have a modal close on click off of it. I tried 2 approaches:
Targeting a click event on body and check if the modal has a class and if it does show it
check the event.target and if it's not the modal hide it
Two attempts are below:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
$("body").click(function() {
if ($(".dialog").hasClass("show")) {
$(".dialog").removeClass("show");
}
});
});
.dialog {
display: none;
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="dialog"></div>
Upon click on "SHOW/HIDE" the modal (a red box) does not even open. I think this might have something to do with #filter-button being counted as a target? As a troubleshooting initiative for the above sample, I attempted to use e.currentTarget https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget so basically changing the above to:
$(function(e) {
console.log(e.currentTarget);
...
I got nothing in the console so I can't tell if that's the issue.
I also tried to log e.target and got no results in the console as well.
Why is that?
My next attempt:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
if(e.currentTarget != $("#filter-button")) {
$(".dialog").removeClass("show");
}
});
.dialog {
display: none;
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="dialog"></div>
The toggle function is restored, but clicking off of the modal does not close it. I found: Check if event target is hyperlink so I changed my code to:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
if(e.target.tagName.toLowerCase() === 'body') {
$(".dialog").removeClass("show");
}
});
This breaks my previous code again, and now my dialog doesn't open at all.
howcome I can't console log e.target?
Why is the modal not opening at all in the first example? Is it because of a logic error with targeting body somehow?
Which is the better way? e.target or attaching a click event to the body?
To simplify things you could wrap your modal dialogue within a container that is full width and height of the viewport. This way you can show or hide the parent container if it is clicked instead of showing and hiding just the dialogue.
This also allows you to add an overlay with css later on to increase the visibility of the modal.
$(function(e) {
var modal = $(".modal-wrapper")
$("#filter-button").click(function(e) {
modal.toggleClass("show");
});
$(window).click(function(e) {
if (e.target == modal[0]) {
modal.removeClass("show");
}
});
});
.modal-wrapper {
display: none;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.modal {
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="modal-wrapper">
<div class="modal"></div>
</div>
I am using AJAX to get some data and fill-up the form. Data is quite large so it takes some time to get from DB and fill up in fields, so while all doing this stuff i am showing loading icon.
Now there is a submit button in a form, and we want - that form should not be submitted until that loading icon gone away. I have done this thing so far.
I am using prevent default - if user hit the submit button before AJAX done its work and that loading icon gone away, and after AJAX done its work that form got submitted.
But now issue is, if i hit submit - because of prevent default is doesn't shows loading icon in browser tab (so user might think form submit button isn't working and hit it multiple times,(we got this data from GOOGLE ANALYTICS))
but form will automatically submits, when AJAX completes it works.
Is it possible to show that "Browser Tab Loading Icon" ?
I know other things like (hide submit button and etc etc)
Here is my piece of code :
$("#formsech").submit(function(event){
submit = -1;
if ( $("#loading").css('display') == 'none' ){
submit = 1;
}
else{
event.preventDefault();
}
});
setInterval(function(){
if(submit == -1){
if($("#loading").css('display') == 'none' ){
submit = 1;
}
}
}, 100);
setInterval(function(){
if(submit == 1){
$("#formsech").submit();
submit = 0;
}
}, 100);
Any help would be highly appreciated.
If you are using AJAX, you can do simply like this:
$(form).submit(function (e) {
e.preventDefault();
$(form).css("cursor", "loading");
$("#loading").show();
$.post("/path/to/url", $(form).serialize(), function () {
$("#loading").hide();
$(form).css("cursor", "initial");
alert("Saved");
});
});
A better example using a setTimeout just for demo purpose.
$(function() {
$(".loading").removeClass("hidden").hide();
$("#myform").submit(function() {
$(".loading").fadeIn();
setTimeout(function() {
$(".loading").fadeOut();
}, 2000);
});
});
* {
font-family: 'Segoe UI', sans-serif;
}
.loading {
background: url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif") center center no-repeat;
width: 150px;
height: 150px;
position: absolute;
z-index: 1;
opacity: 0.5;
}
.hidden {
display: none;
}
#myform {
display: block;
position: relative;
width: 150px;
line-height: 150px;
text-align: center;
border: 1px solid #ccc;
overflow: hidden;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="." id="myform">
<div class="loading hidden"></div>
<input type="submit" />
</form>
The setTimeout is just for mimicking the AJAX delay. The z-index will not allow the user the press the submit button.
You can use below html in your page.
<div id="overlay"></div>
The css will be
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 99;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
Before ajax call use following code
$("#overlay").show(500);
After ajax call is completed write this:
$("#overlay").hide();
I am trying to hide the popup if the background is clicked, but NOT the div.
Basically, when the user clicks the background it will hide the div; yet, if the user clicks the actual div it will still hide it. I would only like the div to be hidden on the clicking of the background.
Here is my code:
HTML
<div id="linkinputholder">
<div id="linkinputbox">
Title
</div>
</div>
<button onclick="displaylinkinput()" type="button"> Display </button>
CSS
#linkinputholder {
display: none;
position: fixed;
z-index: 100;
width: 100%;
min-height: 100%;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.2);
}
#linkinputbox {
display: block;
background-color: red;
width: 500px;
height: 100px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
JS/Jquery
function displaylinkinput() {
document.getElementById('linkinputholder').style.display = "block";
}
$('#linkinputholder').click(function() {
document.getElementById('linkinputholder').style.display = "none";
});
I'm assuming by background you mean your linkinputholder div, which is 100% wide by 100% tall. Your jquery code was missing the call to displaylinkinput, so i added a click event handler to call it. When you click on the linkinputbox div, the click event passes down through to linkinputholder. To prevent this just stop the event propagation.
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
I have created a JSFIDDLE for you here: http://jsfiddle.net/seadonk/oLgex1pq/
Here is the corrected javascript:
function displaylinkinput() {
$('#linkinputholder').show();
}
$(function () {
$('button').click(function () {
displaylinkinput();
});
$('#linkinputholder').click(function () {
$('#linkinputholder').hide();
});
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
})();
Edit
Check if div is target
$('#linkinputholder').click(function(event) {
if (jQuery(event.target).is('.linkinputholder')) return;
document.getElementById('linkinputholder').style.display = "none";
});
Very impressed with jQuery lightGallery, it's been a joy to use. As per the first example on the lightGallery website, Gallery with animated thumbnails (http://sachinchoolur.github.io/lightGallery/examples.html) I have moved navigation arrows to the sides but have left the thumbnails hidden.
#lg-gallery .thumb-cont .thumb-info {
display: none;
}
#lg-action {
position: static;
}
#lg-action a#lg-prev,
#lg-action a#lg-next {
margin-top: -14px !important;
position: absolute;
top: 50%;
z-index: 9999999;
font-size: 18px;
}
#lg-action a#lg-prev {
left: 18px;
}
#lg-action a#lg-next {
right: 18px;
}
I have moved the open thumbs button next to the gallery close button at the top right hand corner of the window, as follows.
#lg-action a.cl-thumb {
position: absolute;
top: 18px;
right: 50px;
z-index: 9999999;
}
So, how do I hook-up an open/close toggle for the thumbs using the thumbs button? I guess I need to look at the onOpen callback, but I'm not sure how to use it, something like this perhaps.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function(e) {
e.preventDefault();
if ($("#lg-gallery").hasClass("open")) {
$("#lg-gallery .thumb-cont").slideDown();
$("#lg-gallery").removeClass('open');
}
return false;
});
}
This (obviously) does not work.
Solved this by adding a function to the onOpen callback. I added a class called 'open-toggle' (and set the required css) to #lg-gallery.open when the thumbs button is first clicked. The second click removes the 'open-toggle' and 'open' classes from #lg-gallery and re-sets the css.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function() {
$gallery = $("#lg-gallery");
if ($gallery.hasClass("open-toggle")) {
$gallery.removeClass('open-toggle open');
$("#lg-gallery .lg-slide").css("padding-bottom", "0");
}
else {
$gallery.addClass("open-toggle");
$("#lg-gallery.open .lg-slide").css("padding-bottom", "120px");
}
});
}
EDIT
I found that the images don't get out of the way if you toggle the thumbs bar, but they do get out of the way for the example on the website. I opened up Firebug and found that the website example page has a file called base.css which contains the following line:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
I added this line to my css and animated the padding-bottom so that the images didn't jump to size when the thumbs were toggled.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function() {
$gallery = $("#lg-gallery");
if ($gallery.hasClass("open-toggle")) {
$("#lg-gallery .lg-slide").animate({
"padding-bottom": 0
}, 500);
$gallery.removeClass('open-toggle open');
}
else {
$("#lg-gallery.open .lg-slide").animate({
"padding-bottom": 120
}, 500);
$gallery.addClass("open-toggle");
}
});
}
Anyway, maybe this will point someone in the right direction.
I would like to create a link; eg. 'Click here for background demo'. And then by clicking the link; the background of the webpage would then display an image, and that image is expandable.
I have an expandable background solution at stand alone; using the below.
But how could I have only display 'on click'; to become implemented.
<!--Expandable BG code IE 7 +-->
<style>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
<!--Expandable BG code IE 7 +-->
You have following resize handler
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
If you want to invoke it on clicking on a link then you can use
$('a.link').on('click', function(e){
e.preventDefault();
resizeBg();
});
Just put the code given for click after/before your theWindow.resiz handler. Also make sure that you have an a tag with class link, like
Click
And remove .trigger("resize"); from the resize handler to stop the handler being invoked onload.