I'm trying to show an image to let the user known that something is happening while some pages are being loaded.
I tried several examples that I found in google.
My goal is every time that I click in some link, the image should appear to let me known that the page is loading. But I'm not able to do that.
So far what I accomplish is that the image appear when I load that page and don't disappear, but I would like to make this available when I click on a link.
What I've done:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
<img id="loading" alt="" src="/ajax-loader.gif"/>
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Any help is appreciate :)
Thanks
Maybe this will be of some help:
http://docs.jquery.com/UI/Progressbar
Here's a simple one: http://www.webappers.com/progressBar/
That's the first result in google when I type in "js progress bar" -- there's hundreds of others.
Related
How can i make on my portfolio images clickable to make appear information about project and re-clickable to hide this information on second click?
Will like to use simple js not jquery.
See website, but not it's working by holding the click and not toggle:
enter link description here
I went through your site a bit and this might be a possible solution to your problem.
Add the following script in your JS:
var imageElems = document.getElementsByClassName('image-box');
for (var i=0; i<imageElems.length; i++) {
imageElems[i].addEventListener('click', function() {
this.querySelector('.overlay').classList.toggle('show');
});
}
And add this in CSS:
.overlay.show {
opacity: 1;
}
So basically what I have done here is I have added a click event on all your images with className: image-box which toggeles a class called show on click.
P.S. you should frame your question in a better way, providing code examples to your problem so that people in here can understand your problem better. The only reason why I tried helping you is because I see you are a graphic designer trying to do a bit of code, and it was encouraging enough! :)
You can also accomplish desired effect without JS, pure CSS.
.element {
position: relative;
height: 300px;
width: 300px;
background: red;
}
.pseudo-checkbox {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
cursor: pointer;
}
.pseudo-checkbox:checked + .description {
display: initial;
}
.description {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="element">
<input type="checkbox" class="pseudo-checkbox" />
<div class="description">
Description
</div>
</div>
I'm trying to use the normal approach to create an element and hide it using jQuery once the page finished loading.
You can see this basic approach in many places but here's the code anyway:
DIV for the image I'd like to display while the page loads, right after the <body> tag:
<div class="pleasewait"></div>
To remove the icon from the screen after the page loads, in the HEAD section of the HTML page:
$(window).bind("load", function() {
$(".pleasewait").fadeOut("slow");;
});
CSS to style the image in the center of the page:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(img/ajax-loader.gif) center no-repeat #fff;
}
I get the nav bar on my PHP page to load ok but nothing on the <body> section is displayed until the page fully loads (including waiting for the server call to complete and form the remainder of the page).
While there are other fancier methods of achieving my goals, I would really like to understand what I'm doing wrong here.
From the comments I saw you are using jQuery 3.1.1.
.bind() is deprecated since jQuery 3.0
Instead use
$(window).on('load', function(e){
....
})
Also make sure (from this answer and the jQuery API document):
When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
HTML
<div id="preloader">
<div id="status">
</div>
</div>
<div id="wrappers">
Welcome to page
</div>
CSS
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999999;
}
#preloader #status {
width: 70px;
height: 70px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(images/loader.gif);
background-repeat: no-repeat;
background-position: center;
}
jQuery
$(document).ready(function(){
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(100).fadeOut('fast');
$('#wrappers').delay(250).css({'overflow':'visible'});
});
});
Im added page load GIF icon for my bootstrap web site, but i have a small issue , this image loader is very fast loading, i need to make time duration for this loader , Im added duration but its not work ,how can i fix it?
Thanks
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
;
});
no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background:url("https://thumb.ibb.co/hqtTTk/Preloader_2.gif" )center no-repeat #fff;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<body>
<div class="se-pre-con"></div>
</body>
Try this:
setTimeout(function(){ $(".se-pre-con").fadeOut("slow"); }, 3000);
I have a to slow fadeIn effect when I tring to show simple popup by clicking on button. Without video all of it works fine.
Video on my page have a 100% size and fixed position
video#bgvid{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Also, there is a popup html code
<div class="blackpopup">
<div class="container">
</div>
</div>
And css:
.blackpopup{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.58);
}
Javascript code is simple:
var popUpThank = jQuery(".blackpopup");
var submitButton = jQuery("#submit");
submitButton.click(function(e){
e.preventDefault();
popUpThank.fadeIn();
});
So, how to make it not so slow and where is the problem?
The answer is: not saturating the browser's memory with a hell of a heavy video.
Try doing the same removing the video tag it will work.
Compress it better, or with low quality as it's a background object.
I can point you to sorenson squeeze app for that.
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE