We Keep Coding

Removing focus from embedded Issuu content on page load

I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv

Why browser displaying blank page when javascript turned off

I have build a website using MVC4, jQuery UI, Twitter Bootstrap etc using that template http://bit.ly/1aAcIJq
But the thing is, when Javascript is turned off the browser does not displaying anything, just blank page, however if I click view source so I can see the complete page source.
If you disable javascript and load http://bit.ly/1aAcIJq you will see what I mean
Is there any way to fix that?

After looking at your code, I found the problem. You have to change visibility: hidden to visibility: visible or just get rid of it. You will not have any of the flashy features and some of the functionality because JavaScript has been disabled, but it will display the website.

how to animate slide in with jQuery without showing content before it's loaded?

In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated

Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.

<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>

This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.

Freeze Screen w/ Overlay if JavaScript isn't enabled

I'd like to darken and lock the page (prevent clicking / scrolling) and have some white text saying that the user doesn't have JavaScript enabled.
I know that the proper thing to do is have everything gracefully degrade when there isn't JavaScript- but I don't want to go this route right now.

<noscript>
<div id="nojs-overlay">
Please Enable Javascript to View This Site<br>
Instructions on how to enable javascript
</div>
</noscript>
The above example only loads the overlway div in case javascript is not enabled. The selected answer will cause a flicker or delay on slow devices.
Make sure the style your nojs-overlay div (or a series of divs) to overlay the complete screen.

How to make a page preloader similar to Apple's Mac page

If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.

Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?

Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...