We Keep Coding

element unvisible until developer console opened

I've got a website where some LayerSlider elements stay invisible until
the window is resized
I disable the Bookmarks bar in Chrome (whaaat ?)
I switch on Chrome debugger tools
The issue also appears in Firefox and Safari on OS X (all on the newest versions).
I have no idea what that could be. To me it looks like some OS render issue.
I am looking for a workaround.
How can I trigger some kind of repaint after pageload that will unhide those elements? (same thing that happens when I open the dev console for instance)
I tried jQuery(document.body).hide().show(); but that doesn't work.
There is bit more info to it:
The image is hidden because it is scaled to zero height and with after the initial load
<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 0px; height: 0px; margin-left: 765.5px; margin-top: 299px;">
After the resize of the window the image size of that element suddenly changes (some kind of on the fly HTML manipulation)
<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 1508px; height: 612.625px; margin-left: 0px; margin-top: -11.8125px;">
How is such a resize being done?
Why doesn't it happen after the initial load?
How can I trigger it?

How can I trigger some kind of repaint after pageload that will unhide
those elements?
function afterload(callback) {
if (document.readyState === 'complete') {
callback();
} else {
jQuery(window).on('load', callback);
}
}
afterload(function () {
jQuery(window).trigger('resize');
});

In the past I've had luck with:
-webkit-transform: translate3d(0,0,0);
and/or in older IE:
hasLayout: true;
If you share some more info might be able to pinpoint it down a bit more.

With help of Michael Sparks I created this solution. It can be placed anywhere in the header, body or footer. It will be executed after the entire page has loaded to make sure that all elements get fixed.
<script type="text/javascript">
jQuery( window ).load(function(){
jQuery( window ).trigger( 'resize' );
});</script>

JS launches before CSS

This is currently happening in chrome, in firefox I haven't had this issue (yet).
Here is a VERY simplified version of my problem.
HTML:
<div class="thumbnail">
Click me!
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The problem:
So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.
Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.
Temporary solution proposed in this post.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Temporary solution is not what I'm looking for:
However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.
The question:
Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?
Additional Information:
Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).
Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):
Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).
The final code will be like this (see fiddle here):
JS:
/* No script needed. */
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
position: relative; //added
}
a {
position: absolute;
bottom: 0px; //added
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
If you still insist on media query change detection, see these links:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
Twitter Bootstrap - how to detect when media queries starts
Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).
Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your #media (max-width.... from your css?
function resize() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width<992){
$("div").each(function(e,obj){$(obj).height(200);});
}
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}

In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js.
Hope this help you.

Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?
Instead of
$(window).on('resize', resize);
You can try
$("#clickMe").on('resize', resize);
Or maybe
$("#clickMe").parent().on('resize', resize);

var didResize = false;
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
console.log('resize');
}
}, 250);

I agree with falsarella on that you should try to use only CSS to do what you are trying to do.
Anyway, if you want to do something with JS after the CSS is applied, I think you can use requestAnimationFrame, but I couldn't test it myself because I wasn't able to reproduce the behavior you explain.
From the MDN doc:
The window.requestAnimationFrame() method tells the browser that you
wish to perform an animation and requests that the browser call a
specified function to update an animation before the next repaint. The
method takes as an argument a callback to be invoked before the
repaint.
I would try something like this:
var $parent = $('#clickMe').parent();
function resize(){
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
window.onresize = function(e){
window.requestAnimationFrame(resize);
}
window.requestAnimationFrame(resize);

Anyone know of a technique to wait till css is completely done loading?
what about $(window).load(function() { /* ... */ } ?
(it executes the function only when the page is fully loaded, so after css loaded)

how do I get my loading symbol to load sooner with javascript/jQuery

I have a loading gif that I have appearing on the screen when someone comes to my page. It looks like this:
<style type="text/css">
#dvLoading
{
background: url(../images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
</style>
and my javascript that shows this looks like this:
<script class="code" language="javascript" type="text/javascript">
$(window).load(function () {
$('#dvLoading').fadeOut(2000);
});
</script>
However, it seems as though the page loads and then the loading gif briefly appears. Is there a better event other than .load that will do the job for me?

You wont be able to achieve this effect the way you are doing it. Because your styles and your javascript loads with the page, so by the time you display your loading animation everything is already loaded. The only way you can achieve your goal is to load empty html shell with your loading indicator and javascript that will request the rest of the html through async ($.ajax) request, this way you can show your loading indicator once async request is issued to get html and hide it when async request is done.

So perhaps your problem is that your script to hide the gif starts running before the image is actually loaded.
Rather than loading the image with css, you could load it dynamically on document load and set your fadeOut to fire on image load.
js:
var $img = $('<img>', {
src: '../images/loader.gif',
id: 'dvLoading'
}).load(function() {
$(this).fadeOut(2000);
});
UPDATE
forgot to attach your image. of course this could be to any element you choose
$('body').append($img);

the event you are using is correct as load is called after all resources are loaded including images css etc.
To make gif appear, instantaneously, before other images load in the page, try and load the gif at the start of body. Also, you can host the gif in a CDN for faster availability.

JavaScript Trouble with div resize

I am relatively new to js and for the life of me can not figure out the issue with this function. I am just trying to resize the div's width on a page resize. The css is also included in case that has anything to do with it.
<div id="lowerPattern"></div>
<script>
$( window ).bind("resize", function() {
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
</script>
/*CSS*/
#lowerPattern {
height: 99px;
width: 10px;
background-color: green;
/*Keeps div centered on resize*/
position: absolute;
left: 50%;
margin-left: -300px;
}

It's working fine for me: http://jsfiddle.net/kuaYV/
Have you made sure JQuery is loading properly? Also, try putting the function in $(document).ready() like so:
$(document).ready(function() {
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
Edit: If it's still not working, it could be something to do with the parent element's CSS. Also make sure you don't have any other elements with the same id attribute on the page.

enclose your code inside $(document).ready(function(){}); like this:
$(document).ready(function()
{
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});

DO you know that you must load Jquery?
You must either put the jquery source code into a file and save it or download it everytime you run the website with a CDN(Contact Delivery network.)
Also you must load Jquery. Go to their site and download the source. Save to a textfile with the .js extension.
After that write
<script type="text/Javascript" src="MyJquery.js"></script>
in the head area of the HTML
The other option is to use a CDN and write:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
This will load the jquery to your website
you must put the code into
$(document).ready(function(){
//put all your code here
});
If you are using a CDN check your net connection. If the internet connection is lost it will not load the Jquery while you are trying to run

html page loading message

My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.
<script type="text/javascript">
$(document).ready(function(){
//my jquery here....
});
</script>

Design the page with the loading message already included so that when the page loads from the server, the message is already showing.
Then, using jQuery, you can hide the message as soon as the page is ready:
$(document).ready(function(){
$('#loadingMessage').hide();
});

http://www.jsfiddle.net/dactivo/m4Bxe/
window.onload = function () {
$("#loading").hide();
};
window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.
You can read this in these jquery docs
"While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready,"

Justin's method will do the trick.
make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering
http://developer.yahoo.com/performance/rules.html

Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:
var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();
Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.

have a background-image set through css to the body, and remove the element in document.ready

I know this a fairly old thread, but the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#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;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)