We Keep Coding

Fancybox onload - Not loading background

I am trying to have a fancy box appear onload, it's working so far but it's not loading the greyed out background. AT the moment I have a hidden div and then I call it, so the div is appearing but not the other fancybox features.
Does anyone have any idea?
<div id="warning">
<h3>Please use Internet Explorer</h3>
</div>
<!-- FancyBox for browser warning-->
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#warning");
});
</script>
So it's like this:
I want it like this:

Hide both div and javascript code on mobile device

I Have two Divs apart from my content in my Bootstrap Layout
a) Social networking bar div
<div id="socialnetwork" class="navbar-text navbar-right visible-md visible-lg">
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_plusone_large' displayText='Google +1'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_fblike_large fblike-align' displayText='Facebook Like'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
Associated JS Embed Tag
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">
</script>
<script type="text/javascript">
stLight.options(
{publisher: "f1325bca-f8fc-4cec-9e01-02cd5ddd29ed",
doNotHash: false, doNotCopy: false, hashAddressBar: false}
);
</script>
b) Disqus Comments Div
<div id="disqus_thread" class="col-lg-10 visible-md visible-lg"></div>
Screenshot Example - http://tinypics.in/image/o
Jsfiddle code Example - http://jsfiddle.net/betacoder/buC6c/
My Aim is to ONLY LOAD this DIV along with there associated JAVASCRIPT if the viewport is for midscreen or largescreen and not on
mobile / tablet layout (tohide if mobile/tablet)
Well the "visible-md visible-lg" tags lets me to hide the divs in mobile and tablet layouts.
But still the javascript is loading in the background and consuming the user bandwith.
How to resolve this , would like to load the JS files associated with them only when Bootstrap layout on medium and large screen or on devices above 990px width.
Any Quickfix ? Love to hear the response or a near workaround.

Welcome to StackOverflow! Even though the markup is hidden, it is still delivered to the browser, just like the JavaScript. You will not be able to prevent JavaScript from loading using only CSS rules.

animate a logo for 3 seconds in the front page and then show an image slider

I am trying to get an animation from the logo to the image slider without leaving the page or reloading I like to know the best way with jquery to achieve this, I'm learning web-development any help would be great thank you
<div class="intro">
<img scr="logo.png">
<h3> website title</h3>
</div>
<div class="slides">
<ul>
<li>
<img scr="img.jpg" />
</li>
</ul>
</div>
<script>
$(function(){ $('.intro').hide.show(3000);});
</script>

Here's a FIDDLE.
$(function() {
$('.intro').delay(5000).fadeOut(600, function() {
$('.slides').fadeIn(600);
});
});

Try $('.intro').hide().delay(3000).show();
Haven't tested this, but make sure you have parens after your function calls (e.g. .hide() not .hide.
Also using delay(3000) to delay the showing for 3s instead of fading in for 3s.
One more tip: try using CSS to hide the .intro block:
.intro {
display: none;
}
To show the slider, just do the same with .slide:
$('.slide').show();

Optimize the loading of my Tumblr with JavaScript to customize styles

--
Hi !
Reader, if you are not comfortable with Tumblr, please tell me, I will give more details!
I had some issues on my tumblr page with the default theme 'Optica'. When I post an embed SoundCloud track, here is what I get on the page:
photo below
NOTE: I have tried to change the theme, and I discovered that for some of them, everything goes fine, but there are a few others with the same bug
So I've tried to fix that, and I've located the origin of the bug in the styles sheet main.css:
.video .video-wrapper {
background: #111;
position: relative;
padding-bottom: 56%;
height: 0;
}
The thing is, that to publish an embed code, you have to do it through the "Video post" tool on your tumblr dashboard, which then allows to style the embed code with the .video-wrapper
Of course, what I want to do here is reducing the bottom padding, but if I do it that way, it will affect all "Video posts". So I used the existing class .soundcloud_audio_player in the iframe to "mark" this type of Video posts to be able to change the styling only of these Video posts.
I have simplified it, and here is what it looks like at the end in browser:
<article class="audio not-page post-70801339374 " data-post-id="post_70801339374">
<div class="post-wrapper clearfix">
<section class="post">
<figure>
<div class="video-wrapper">
<iframe class="soundcloud_audio_player" />
</div>
</figure>
<section class="attribution-tags clearfix">
<ul>
<li>
SoundCloud
</li>
<li>
Blutch
</li>
</ul>
</section>
</section>
<section class="panel" />
</div>
<article>
And now, what I have put between tags in my Tumblr customized HTML:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {
$("iframe.soundcloud_audio_player").parents('div.video-wrapper').css("padding-bottom", "17%");
});
});
</script>
I used jQuery because I didn't know anything about JavaScript or jQuery before today, and I thought it what simpler! But maybe I'm wrong. Anyway, PROBLEM #1 FIXED!
NOW, PROBLEM #2
When the page is loading, the former styling (before than JS intervene) appears for 1 or 2 sec (with my bandwidth anyway!) and it's quite ugly:
photo below
I've looked a bit here
http://www.memodev.com/wiki/Optimiser_un_site_Web
and here
https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr-FR
But I can't find how to improve the loading, and I hope some of you guys can :)
PageSpeed test below

It sounds like you just want to hide the fact that styles are changing after the page loads -
So, this will do the trick very basically :
Add this to your HTML:
<div id="screen"></div>
Add this to your CSS :
div#screen {
position:fixed;
height:100%; width:100%;
background:white;
z-index:999;
}
You might not need the z-index
There are lots of loaders you can use in place of this, if you would like -
and then,
In JQuery:
$(document).ready(function(){
// Here, you insert that code that adds the padding to your iframe, and whatever else
// you need to do to prepare the page...
$("#screen").hide(); // this will display your page - !
});

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?

The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>

This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/