I am totally new in jQuery. I am trying to show a loader before all my page content is ready.
<script>
$(document).ready(function(){
$(document).ajaxStart(function(){
console.log('wait');
$("#wait").css("display", "block").show();
});
$(document).ajaxComplete(function(){
$("#wait").css("display", "none").hide();
});
});
and in body i have this,
<div id="wait" style="display:none;position:absolute;top:20%;left:50%;"><img src="{{ asset('assets/global/img/ajax-loader.gif') }}" /></div>
but no loader is displayed and no error shows in console.
Can anyone give me any solution or example regarding this?
Thank in advance!
Check Demo Code Below.
$(document).ready(function(){
$('#loader').fadeOut(showBodyPart);
function showBodyPart(){
$('#body_parts').fadeIn(300);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
<img src="http://i.imgur.com/KUJoe.gif" id="a" alt="Loading" />
Loading...
</div>
<div id="body_parts" style="display: none;">
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</div>
With Bootstrap 4, Jquery, CSS
<style>
.overlay {
position: absolute; background-color: white; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10;
}
.overlay div{ position: relative; z-index: 10; top:30%; left: 50%;}
</style>
HTML
<body>
<div class="overlay">
<div class="spinner-border text-secondary" >
<span class="sr-only">Loading...</span>
</div>
</div>
<div> Helloo World</div>
</body>
JQuery
<script>
$(window).on('load', function(){
$( ".overlay" ).fadeOut(100, function() {
$( ".overlay" ).remove();
});
});
</script>
Related
I have been making a website-resume and I want the user to be able to click on a picture of a company I've worked for and have a description of my work experience come up. I can click on a picture and have a div pop up on top as shown here:
Any ideas on how this could be done?
you can set css to the popup div which u want to show over the html page.
Consider the following eg:
#mainPage {
width: 100%;
height: 100%
}
#popUp {
display: none;
z-index: 100;
width: 200px;
height: 50px;
background: #ADD;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mainPage">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
</div>
<div id="popUp">
<p>Hello !!! It's a popup div </p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mainPage img').on('click', function() {
$('#popUp').show();
});
});
</script>
</html>
Ajax stop/Ajax start works only the first time either button is clicked after the page is loaded, and I can't see why. If either button is clicked after the initial click, the loading div does not appear. I would like to show the loading div whenever I click either the Click 1 or Click 2 button and for the div to disappear once the contents have been fully loaded. Please see the code below:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#loading').hide().ajaxStart( function() {
$(this).show();
}).ajaxStop ( function(){
$(this).hide();
});
$(document).on('click', '.menu1', function(){
$('.maincontent').load("1.php");
});
$(document).on('click', '.menu2', function(){
$('.maincontent').load("2.php");
});
});
</script>
<style>
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 25%;
left: 50%;
z-index: 100;
}
</style>
</head>
<body>
<button class="menu1">Click 1</button>
<button class="menu2">Click 2</button>
<div class="maincontent">
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
</div>
</body>
</html>
I've looked at other questions, with no success...
I'm just trying to keep the page scrolling slowly after load, follows the code:
CSS (Most of CSS is placed as embed files, this is just the styles applied to the content objects):
<style type="text/css">
.content {
width: 98%;
left: 1%;
margin-top: -10px;
}
.block_1 {
position: relative;
width: 18.5%;
height: 150px;
margin-left: 1%;
margin-top: 1%;
float: left;
background: #FFF;
border: 3px solid #999;
}
</style>
JS:
<script type="text/javascript">
$(function(){
$.slidebars({
siteClose: true
});
});
// Loading
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
});
$('html,body').animate({scrollTop: $('#end').offset().top});
</script>
HTML
<body>
<div class="loading">
<div class="loading_msg">Carregando dados, aguarde...</div>
<div class="loading_img"><img src="img/loader.gif" /></div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="300px"</div>
<div id="sb-site">
<div class="div_bg_header"><?php show_header_menu_dashboard($p_title); ?></div>
<div class="content" id="content">
<div class="block_1"></div>
<div class="block_1"></div>
...
<a id="end"></a>
</div>
</div>
</body>
Grateful
correct as
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
$('html,body').animate({scrollTop:$('#end').offset().top});
});
in your CSS please set some height to the body,
body {
height: 1500px;
}
and it will work well. current offset is just 16. so for visible scrolling
please add the following style.
#end {
margin-top: 500px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-9">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$(document).ready( function(){
$("#btn3").hide(0);
$("#carne").hide(0);
$("#alfacePicada").hide(0);
$("#EspetadasFrango").hide(0);
$("#lasanha").hide(0);
$("#gelado").hide(0);
});
});
$(function() {
$(document).ready(function(){
$("#ovo").click(function(event){
$(this).animate({right: '+=200', bottom: '+=300'}, 1000);
});
});
});
</script>
</head>
<body>
<div class="recortesredondos1">
<div class="recortesredondos2">
<h3>Regulamento 2073/2005 Módulo 1: Identificação de Critérios Aplicáveis</h3>
<p id="menu">Menu</p><p id="recursos">Recursos</p>
<p id="glossario">Glossário</p>
</div>
<h2><center>Estado de Alimentos Prontos Para Consumo<center></h2>
<div id="botoes">
<input type="submit" id="btn3" value="Submeter">
</div>
<img src="ovo2.gif" id="ovo" name="qq1" style="width:100px;height:100px; margin-left: 600px; margin-bottom:100px; margin-top: 100px z-index:4;">
<img src="alfacepicada2.gif" id="alfacePicada" name="qq2" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:6;">
<img src="carne2.gif" id="carne" name="qq3" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:7;">
<img src="gelado2.gif" id="gelado" name="qq4" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:8;">
<img src="galinha2.gif" id="EspetadasFrango" name="qq5" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:9;">
<img src="lasanha2.gif" id="lasanha" name="qq6" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:10;">
<div ="clique">
<p id="linha1">---------------------------------</p>
</div>
<button type="submit" id="btn2" value="Submeter">RTE</button>
</div>
</html>
While this question looks great and I'd love to help, its lacking a bit of information and format to help you answer!
Try fixing these things:
Format your code nicely using the helpful code button next to the image button in the toolbar!
Provide your HTML, remember I can't see your screen (unfortunately) so it would be really helpful if I had your HTML so I know what your trying to move and what is being clicked!
Googling before you ask! Although I am happy to help I feel like Google could be a really quick way to get this answered!
For Example (just 30 seconds of googling) I found:
https://stackoverflow.com/a/2532509/5868718
+1 to Nick Craver! :)
function myAnimate() {
$("#div").animate({left: '+=100', top: '+=100'}, 1000);
}
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">Test</div>
I am no jQuery Guru, but I think you could probably link the above function up to another function which listens for a click like this!
$("button").click(function() {
$("#div").animate({
left: '+=150',
top: '+=150'
}, 1000);
})
button {
position: relative;
left: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;"> </div>
<button type="button" id="myButton">
Hi there!
</button>
Check it out!! looks pretty good! I hope that helps!
Welcome to the community :)
I am working on asp.net page. In master page I have a div like this:
<body id="page1" >
<form id="form2" runat="server">
<div id="content">
<!-- this is popup light grey show -->
<div class="darkenBg" id="popupBackground" style="display:none;"></div>
<!-- content -->
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
<!-- popup window -->
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</div>
</div>
I am showing it like this:
function ShowHomePagePopup(popupId) {
$("#" + popupId).show();
$("#popupBackground").show();
$('#popupBackground').height(800);
$("#page1").addClass('hideScrollbars');
}
css is like this:
html, body {
height:100%;
margin:0px;
}
.darkenBg { /*added this div after body*/
background: url(/images/blackBg.png);
position:absolute;
z-index:30;
width:100%;
height:100%;
bottom:0px;
}
.popUpWin {
position:absolute;
z-index:31;
width:500px;
left:50%;
margin:200px 0 0 -250px
}
.hideScrollbars {
overflow: hidden;
}
#content {
background:url(/images/bg.gif) top left repeat-x #fff;
overflow:hidden;
padding-bottom:20px;
}
When the popup appears, it is centered horizontally, but vertically at the top, so it is at top mid of the screen.
The overlay, light grey background, means popupBackground is only 10% of the height of screen although width is 100%. How can I make it 100% high ?
This is a good way to make a popup only with CSS:
The HTML code:
<div class="container-popup">
<div class="popup"></div>
</div>
The CSS code:
.container-popup {
position: relative;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.popup {
width: 50%;
height: 50%;
background: #1abcb9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Check this Fiddle.
There is an example to simplest overlay popup
LINK
$(document).ready(function(){
$(".container-popup, #close").click(function(){
$('.popup').hide(); $('.container-popup').hide();
});
});
Place the Popup Window inside the overlay-div!
<body id="page1" style="height: 100%;">
<form id="form2" runat="server" style="min-height: 100%;">
<div id="content">
..
content
...
</div>
</div>
<div class="darkenBg" id="popupBackground" style="display:none;">
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
popup window
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</form>
</div>