We Keep Coding

How to hide background while throbber/loading is in progress

I am using ajax throbber in my pages.
Throbber is working fine.However,I want to hide background while throbber is in process.
Here are the examples of what am looking for??
https://drupal.org/files/ajax-block-working.png
https://drupal.org/files/sexy-throbber.png

You should have an div with following css code:
.overlay{background:rgba(0,0,0,0.5);
position:fixed;
z-index:99999;
top:0;
left:0;
}
then in html wrote this:
<div class="overlay" id="ovly"> </div>
and at last in script wrote this :
//when your ajax is start loading
$("#ovly").show();
and remember that in your css there should not be any z-index more than 99999 excepts the loading img property

Issue - page displayed 1sec before queryloader2 loads the page

I'm using queryloader on my website (link). For some reason the main page appears during one second before queryloader does its job (progress bar to load images before showing the website).
I assume that this is due to the fact that the page is loaded before the queryloader script is loaded but don’t know how to fix this. For the moment the code is in the
$(document).ready as suggested on the queryloader2 website and I’m calling the script (located in js/scripts.js) in my head tags.
$(document).ready(function () {
$("body").queryLoader2();
$('.activity-title a').click(function() {
var region = $(this).attr('data-region');
$('.textzone:visible').fadeOut(2000, function () {
$('#' + region).fadeIn(2000);
});
return false;
});
});

Sorry to bring up an old thread, but just for anyone facing this problem, here's my fix..
i added an overlay div right after the Body tag opening
<div id="preloader"></div>
And added this CSS
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
and added the onLoadComplete: hidePreLoader to the QueryLoader options
Then on that function just hide the overlay once done.
function hidePreLoader() {
$("#preloader").hide();
}
That would be pretty much it, hope it helps someone out there :)

Convert Image to background of Content

I am running into a problem and I trying to solve it in the only way that comes to mind. The problem is I am trying to take content that is attached to a image button, but the content is hidden and show it next to the button with a background image when the user hovers over it. Here is when the problem comes in, I have the background image currently as just an image(img tag), so I can stretch it by adjusting the height/width. I want to be able to lay the content on top of that image: For example:
<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>
so with jquery I use disregard simple syntax errors
var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
function(){
mem=$(this).find(".Content").html();
$("#backgroundDiv").html(img+mem);
}function(){
});
The above does the intented, which is add all the content after the div img, which is what I'm stumped at, I want to be able to make the background img tag the actual background for the content. If I try to set the background-image in css to the url for the div. The image doesn't make the background as larger enough. Keep in mind I am under ie 6 for some cases but only as far as ie 8 for most cases.
So what I have tried was using css to change the z-index for the image and the content as so: but doesn't work:
#backgroundimg{
z-index:-100;
position:absolute;
}
.Content{
z-index:100;
position:relative;
}

i would use a different approach.
Structure your content like this:
+ DIV (position static / relative)
+ IMG (position relative)
+ DIV (position absolute)
+ "contents"
So you could work without any JS if i understood the question... See an example here:
http://jsfiddle.net/meo/h64w4/4/

<script type="text/javascript">
$(document).ready(function(){
var img= $("#backgroundDiv").html();
$(".ContentDiv").mouseover(
function(){
$("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
/* Use the following line if you want to scale the "background" image to the content */
$("#backgroundDiv").css('height',$(this).find(".Content").height());
});
});
</script>
<style type='text/css'>
#backgroundDiv{
position:relative;
height:auto;
width:auto;
}
#backgroundimg{
width:100%;
height:100%;
}
.addedContent{
position:absolute;
top:0;
left:0;
z-index:999;
}
</style>

If you weren't using a terrible browser, css3 could lend you a hand.
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]
http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

JavaScript/jQuery: Offset a <DIV> based on another <DIV> height after page load

I'm trying to do this:
!!! just learned I cant submit images because I'm new...
I have placed the image which
perfectly describes the problem on
Diino: Link to Diino folder (18,9kb) together with example files (html,css etc).
The moving DIV has this CSS:
div.linkr-bm {
float:left;
height:1px;
overflow:visible;
position:relative;
top:68px;
z-index:2;
}
The DIV with the height value has this CSS:
.entry-tags {
float:left;
font-family:Calibri;
font-size:small;
font-weight:bold;
line-height:1.6;
margin:0;
padding:0;
width:400px;
display:block;
}
Moving the DIV with the CSS works statically, BUT I can not get it to move with jQuery after page load using this script:
jQuery(document).ready(function(){
$('.entry').each(function(){
var height = $(this).children('.entry-tags').height();
$(this).children('.linkr-bm').css('top', height);
});
});
The DIVs iterate six times / page
The DIVs have Classes (no #ID)
To clarify: This is a hack because I don't have access to the DIV order and therefor have to move this DIV in place after it has been rendered. The problem is that the div with the tags can change from one to probably three rows. So that is why the offset have to be calculated.
I really appreciate any help I can get. Thank's!

try with this code:
jQuery(function(){
jQuery('.entry').each(function(){
$(this).find('.linkr-bm').css('top', $(this).find('.entry_tags').height() + 'px');
});
});

jQuery lightbox plugin that scrolls with the page

Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.
The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.
I don't know what this second type is called (or if there is even a term for this behaviour).
I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.
What jQuery plugin allows lightboxes that scroll with the page?

that would actually be up to css.
lightboxes are just divs that are positioned absolutely (they move with the page) or fixed (they are positioned relative to the browser window.
Basic Lightbox HTML
<div class="lightbox_wrapper">
<div class="lightbox">
the lightbox content loaded by ajax
</div>
</div>
Basic CSS for a scrolling lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }
Basic CSS for a viewport fixed lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }
Now I believe that most of the common lightboxes make you include their css, or they add it to the DOM on load. If they as you to include a css file then just look for the class that declares the properties of a lightbox and change the position method. otherwise you'll have to add the values to your own css and declare them as important like this.
CSS property marked as important
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }
as for another kind of lightbox, I haven't seen one so you'll have to explain more in a comment below...

Robert Hurst is correct in theory, but if you like FancyBox, it supports both modes via configuration
If you look at bottom of the http://fancybox.net/howto page, it has an option
centerOnScroll If true, content is centered when user scrolls page
here is an example of how you would invoke it:
jQuery(document).ready(function(){
$('#a').fancybox({
centerOnScroll: false
});
});

edit your lightbox CSS as below
#lightbox {
position: fixed;
}
to center your lightbox popup to the window edit the script as below
top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;
I'm used Lightbox v2.51 and worked well. the only issue is that yet the background is scrolling while the pop up is fixed and centred.

I appreciate that this is an old question, however, I have seen that the JS gurus at designmodo have implemented a version of this very well:
http://designmodo.com/startup/#component-grid
Take a look at the showLargeImage function within the all.js file.