We Keep Coding

jQuery . Loading screen doesn't desappeare after 1 sec

I'm using this code to make loading screen appears for 1 sec then disappears
,but It's keep loading
CSS
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fefefe;
}
JS
jQuery( window ).load(
function() {
jQuery( '.status' ).fadeOut();
jQuery( '.preloader' ).delay( 1000 ).fadeOut( 'slow' );
setTimeout( zerif_display_iframe_map, 500 );
}
);

Use a default setTimeout from Javascript. In the documentation of jQuery.delay() it says:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
You also should check up on how to use the document.ready function, I had to clean this up to get it to work.
$(function() {
jQuery('.status').fadeOut();
setTimeout(function() {
jQuery('.preloader').fadeOut('slow');
}, 1000);
});
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="status"> I fade out </p>
<div class="preloader"></div>
<p> I'm blocked by a design from 1999, aka preloader </p>

You could generate the necessary containers and elements via javascript and remove them once the page has successfully loaded.
Furthermore, you don't even need jquery, you could do it in plain vanilla javascript and pure css, which would likely be faster, and smaller.
Instead of using an image we can generate an svg with javascript, for better overhaul performances.
I worked on something similar a while back, it will automatically generate all the necessary component to get the perfect loading screen. Place the following <script> near the end of your pages, right before the closing </body> tag
var t="#2774ab",u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("aside"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),(s.innerHTML="#sailor {background:"+t+";color:"+t+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647}#keyframes swell{to{transform:rotate(360deg)}}#sailor svg{animation:.3s swell infinite linear}"),a.setAttribute("id","sailor"),document.body.prepend(a),g.setAttribute("height","50"),g.setAttribute("filter","brightness(175%)"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),(u.style.pointerEvents="none"),(u.style.userSelect="none"),(u.style.cursor="wait"),window.addEventListener("load",function(){setTimeout(function(){(u.style.pointerEvents=""),(u.style.userSelect=""),(u.style.cursor="");a.remove()},100)})
You can check the latest version here https://github.com/amarinediary/Sailor with all it's documentation.

Totally download image before showing the page

is there a way to download images inside an HTML page before showing the page? Because I got an issue where the div underneath doesn't show up correctly. I am pretty sure that it is due to the image loading after the page was shown. I have no issue locally, but once I deploy it with Heroku, I have a visual error like so:
The local version:
Would anyone have an idea on how to download them before showing the rest of the page? I tried to use the following JavaScript but it didn't work:
preload([
'./webapp/dist/images/chantier1.jpg',
'./webapp/dist/images/chantier2.jpg',
'./webapp/dist/images/chantier3.jpg'
]);
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
Thank you for your help and time

a fast way to do it, by the way i think it's really strange that an image load delay can create this kind of view problem:
$(window).load(function() {
$('.loader').fadeOut(1000);
});
img{
width: 100%
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
background-color: white;
top: 0px;
left: 0px;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
<p> loading </p>
</div>

Please try to set the height of the images container and the width and height on img tags.

Controlling slick slider with external links

I am using slick slider. I have created two div's. Here is details :)
This is the css for these two divs
.Full_Left {
position: absolute;
top: 0px;
width: 50%;
height: 100%;
background: rgba(34, 25, 165, 0.5);
left: 0px;
z-index: 2;
}
.Full_Left:hover {
cursor: url(../images/right.svg), auto;
}
.Full_Right {
position: absolute;
top: 0px;
width: 50%;
height: 100%;
background: rgba(216, 33, 33, 0.5);
right: 0px;
z-index: 2;
}
.Full_Right:hover {
cursor: url(../images/left.svg), auto;
}
as you can see now my div's are on full screen and I want to control the slider with the links I have created so that when user bring mouse on 50% he have right arrow and same for left side and all of the slider content will be below these two layers.
I am wondering this is possible with "Slick" or not ?
Thanks in advance.

I had a similar use case to this, though with a twist. Finding this question pointed me in the right direction, and my answer below does address controlling a Slick slider with external links.
I have a Slick slider in the right column set to position: fixed and a longer story in the right column that scrolls. Each of the slides in the slider corresponds to a section of the story, set apart by <h3> tags. I wanted a link next to each header that set the slideshow to the corresponding slide when clicked. To accomplish this, I added a button at the end of each section header:
<h3>Section Header <button data-slick-index="0" class="slide-to"><i class="fa fa-camera-retro" aria-hidden="true"></i></button></h3>
The data-slick-index property (is it a property?) was set to the slick-index of the corresponding slide. Then just below my Slick init JS I placed the following:
$(".slide-to").bind("click", function() {
var slidx = $(this).attr('data-slick-index');
$('#slideshow').slick('slickGoTo', slidx);
});
Works like a charmp*.
That's a charm and a champ combined.

I have solved this problem by my self. here is my working code
<script type="text/javascript">
$('.Full_Right').click(function(e) {
$('#Contrroll').slick('slickNext');
});
$('.Full_Left').click(function(e) {
$('#Contrroll').slick('slickPrev');
});
</script>
:)

How to Make A Side-Slide Menu-Type Thing with Javascript?

Don't really know what they're called. For some reason I can't remember. But you know on many homepages they have that menu-like thing with panels that slide by showing their products? I pretty much need to learn how to do that, although what I'm actually doing is making a panel slide by when you click some text. The ideas are pretty much the same, from what I can tell, except those menus do it automatically every couple seconds.
Now I know pretty much exactly what to do in terms of the Javascript. The problem I'm having right now is (worryingly) basic HTML. This is what I've got:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dat Sliding Menu Doe</title>
<link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
<div id="menu1">
<h1>This is some text.</h1>
<p>This is some more text.</p>
</div>
<div id="menu2">
<h3>This text is different.</h3>
<h1>Very different.</h1>
<p>So different, in fact, that</p>
<p>the div is a different height.</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS:
#menu1 {
position: absolute;
display: inline-block;
background: #d8d808;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 0%;
}
#menu2 {
position: absolute;
display: inline-block;
background: #7feaa8;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 100%;
}
Pay no attention to the colors or anything, this is just practice!
It's doing everything it's supposed to do EXCEPT for the fact that I get a scrollbar at the bottom of the page that allows me to scroll to the right and see the second div... which is a problem. Am I doing something fundamentally wrong, or do I just need to add something to get rid of that scrollbar?
Also, a little bit of uncertainty on the Javascript. How would I get it so that the margin-left for both divs changes at EXACTLY the same time? Even a slight delay will show up, right?
It may be easier to just link to a tutorial. I tried researching this, but I didn't know what to look up (forgot what they're called!).
EDIT
Ok, so I took Joshua Chavanne's suggestion and hid the overflow for the body, which worked. Then I did all this with the Javascript:
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");
switch1.onclick = move;
switch2.onclick = move;
function move() {
if (menu1.style.marginLeft == 0) {
show2();
}
else {
show1();
}
}
function show2() {
if (menu1.style.marginLeft > -100) {
menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
requestAnimationFrame(show2);
}
}
When I click on switch1, menu1 moves over 10px, then stops moving. No idea why.

Check out free jssor carousel
It will do everything you are asking for and you don't have to write it yourself.

how to drag and resize DIV element

I want to resize and drag DIV element in a HTML page. The code I used is as follows.
Javascript:
<script type="text/javascript" src="dragresize.js"></script>
<script language="javascript" type="text/javascript">
var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });
// Optional settings/properties of the DragResize object are:
// enabled: Toggle whether the object is active.
// handles[]: An array of drag handles to use (see the .JS file).
// minWidth, minHeight: Minimum size to which elements are resized (in pixels).
// minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).
// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:
dragresize.isElement = function(elm)
{
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
</script>
CSS
<style type="text/css">
.drsElement {
position: relative;
border: 1px solid #333;
}
.drsMoveHandle {
height: 10px;
border-bottom: 1px solid #666;
cursor: move;
}
.dragresize {
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background: #EEE;
border: 1px solid #333;
}
.dragresize-tl {
top: -8px;
left: -8px;
cursor: nw-resize;
}
.dragresize-tm {
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
}
.dragresize-tr {
top: -8px;
right: -8px;
cursor: ne-resize;
}
.dragresize-ml {
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
}
.dragresize-mr {
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
}
.dragresize-bl {
bottom: -8px;
left: -8px;
cursor: sw-resize;
}
.dragresize-bm {
bottom: -8px;
left: 50%;
margin-left: -4px;
cursor: s-resize;
}
.dragresize-br {
bottom: -8px;
right: -8px;
cursor: se-resize;
}
</style>
HTML
<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
<tr>
<td><div class="drsElement drsMoveHandle" id="output1" style="font-weight:bold;height:20px;margin-top:40px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output2" style="height:40px;margin-top:30px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output3" style="height:50px;margin-top:40px;"></div></td>
</tr>
</table>
The issue is that I can't drag it any where I can resize but can't reduce the DIV element size from the original size, I don't know why..?.

I see you are using the code from TwinHelix http://www.twinhelix.com/javascript/dragresize/
1) Please give credit to the author by always stating, clearly, where you got the code you are using. You should have told us that you are using the package available from TwinHelix. Don't, deliberately or by omission, let people think that code you show is your own. If you got it somewhere, tell us.
2) I've used that code to explore some possibilities and I had no problem with it. I could resize divs to any size, including to smaller than the original size.
I recommend you go to the TwinHelix site and get the current code and then start over and make sure you are using it correctly.
You can set limits on how large or small a div can be made, limits on how much it can be moved up and down, etc.
Make sure you understand at least the basics of what it is doing and how to code the divs to do what you want done.
Take TwinHelix's demo page, copy it to your system, with all the Javascript, etc. and get it to work on your system. Then make that page work the way you want - divisions sizes, content, etc. - and once you have divisions working the way you want, integrate the code into your own pages. Never take code from somewhere and jump right in and put it in your pages. Isolate things, make a separate test page with only the new thing, drag and resize in this example, and then integrate it into your pages.
Trying to change it to work the way you want at the same time you are integrating it into your pages will cause you more problems than you can handle.
When doing any programming, break it down into easily handled chunks, get them working the way you want, and then put them together to make the whole (I've been at "this" for 39+ years and have just a bit of experience).
Read the comments in the sample code and the other code and understand at least who to define the divisions.
Unless you are sure of what you are doing, don't modify any of the code or CSS or you may introduce problems with no idea of where they came from.
3) Except for a couple of issues, the TwinHelix code works well. My problem was in trying to stretch the capabilities and adding new ones. I got things working the way I want but there are a few quirks I simply don't like. So, I'm looking at some other methods of doing it. I don't know when I'll have it done, but when I do I'll post a page on my web site at http://www.bobnovell.com --- be aware that there is not much there right now (as of December 28, 2012) but I have a lot to add when I have time.
4) For a reasonably good drag function, take a look at http://tool-man.org/ToolManDHTML/ - the "Basic Dragable Layers" It does not have resizing but it works well. The only problem has to do with setting the zIndex. I've added code to handle mouseDowns to bring divisions
5) I would not expect anyone to look at all of the code - JavaScript, CSS, HTML - that you provided in this question and give you advice -- it is simply too large.
Also, go to the authors if you have questions.