We Keep Coding

Why my loading gif makes my page to load slower?

I used some code to display a gif before my page load but it is
increasing my page's loading speed...
Here is where I use that code - http://sarkarinaukrihome.com/
JS
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("fast");;
});
HTML
<div class="se-pre-con"></div>
CSS
.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(Preloader_2.gif) center no-repeat #fff;
}

You must resize to the exact desired dimensions of your HTML container and compress all images.
If you look closely at your network flow, you lose a lot of time to load all the images.
If you analyze the performance of your website, Google Chrome gives you recommendations and you have precisely this point mentioned with the possible gain if you perform the suggested actions.
To use the LightHouse Viewer of Google Chrome, read this
For the theoretical concept of image compressing, you can read this
To compress different images, you can use services like this

You can see in the picture below the differents loading times of your website's files...
Your image quiz.png seems quite fat so it will take some time to load it...
As you just use it in a small format, you maybe should reduce its size ! ;)
Also, notes that your website is searching for some LOGO.png that it doesn't find ... ( doesn't really matters though )
With chrome's inspector :

How to display an image fullscreen on page load

I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.

For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.

Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders

How can I replicate this image zoom animation effect in jQuery/javascript?

When clicking on the thumbnail on the image on this site: http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html, it expands and loads the original (full-size) version of the image.
I think they are using prototype or something similar. I've been looking around on here and have only mainly found examples that just increase the size of the original image and don't actually load another version of the image (like the linked example does).
Anyone care to help me figure out what techniques I should use for this? Combination of CSS3 and some .animate()?

Here is a simple example using CSS3, a bit of JavaScript.
Explanation:
Initially both the thumbnail and the enlarged version of the picture are placed on the same space using absolute positioning.
The enlarged version is not loaded until the thumbnail is clicked because the enlarged img tag doesn't have any src to begin with. It is assigned dynamically through the JS.
The image move to a different position is achieved using the translateX and translateY options which moves the absolutely positioned enlarged version of the image by the mentioned no. of pixels in both X and Y axes.
JavaScript is used to add a show class to the enlarged picture which triggers the transition effect and also set the src of the img tag to the newer/bigger image.
The enlarged version would return back to its original position when clicked anywhere on the enlarged image.
The JS code is written using class name instead of id just in case you need multiple such thumbnails on the same page. If that is the case, you may want to remove the [0], put it inside a for loop and replace the [0] with the counter variable. Also the enlarged image's source for each such thumbnail image can be maintained through a key-value pair mapping.
The z-index: -1 on the image originally (prior to adding .show through JS) is to make sure that it stays in the background and doesn't hinder the click on the thumbnail.
Points to note:
transform, translateX and translateY are all CSS3 properties/functions and hence have no support in IE8 and less. For older versions of Chrome, Firefox, Opera and Safari, browser prefixes like -webkit-, -moz would be required.
The classList.add and classList.remove functions are HTML5 standard and are not supported in IE9 but they equivalent IE9 code to add or remove class (like className += ..) can be easily done.
var images = {'img1': 'http://placehold.it/400/400'};
document.getElementsByClassName('thumbnail')[0].onclick = function(){
document.getElementById('enlarged').src = images[this.id];
document.getElementById('zoomed').classList.add('show');
}
document.getElementById('enlarged').onclick = function(event){
if(event.target != document.getElementsByClassName('thumbnail')[0])
document.getElementById('zoomed').classList.remove('show');
}
.container{
position: relative;
}
.thumbnail{
height: 200px;
width: 200px;
}
#zoomed .enlarged{
opacity: 0;
z-index: -1;
min-height: 200px;
min-width: 200px;
height: 200px;
width: 200px;
position: absolute;
transition: all 1s;
left: 0px; top: 0px;
}
#zoomed.show .enlarged{
opacity: 1;
z-index: 2;
height: auto;
width: auto;
min-height: 400px;
min-width: 400px;
transform: translateX(200px) translateY(200px);
}
<div class="container">
<img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/>
<div id='zoomed'>
<img src="" alt="" class="enlarged" id='enlarged'/>
</div>
</div>
Additional Resource:
Here is a good article on how to pre-load images (the enlarged versions if needed) using CSS + JS, only JS and AJAX.

How can I make a waiting icon appear in the middle of my page with twitter bootstrap 3?

I looked through all the documentation but still cannot find an example. What I would like to do is to have a waiting icon appear in my page when it's doing an Ajax call. Can someone tell me how I can do this with twitter bootstrap.
Also if there are any other non-jquery implementations which are better I would also like to know about those.
Thank you.

Just pick an loading icon (gif) from font-awesome for bootstrap,
show before the ajax call
hide once the ajax response is delivered
To position the icon in the middle of the screen, use the following css
.ajaxLoader {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Also take a look for button loading images
JSFiddle

If you want something dead center, you can use the absolute position technique.
To do it, create a div and give it these attributes:
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;
This will put it smack bam in the center no matter when someone resizes the screen, making it work on mobiles as well as desktops (as long as the image isn't huge).
If you want this to work inside another div, make sure that the parent is position:relative;

You can add a bootstrapmodal with your waiting logo,
unbind theclose event,
and close the modal when your ajax call is ended...

Make iframe expand/collapse

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.

An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.

Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}