How to hide background while throbber/loading is in progress - javascript

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

Related

display loading image until all data gets loaded

Right now i am simply giving a definite time interval after which the loading image disappears but i want to place a loading image which will be display until all the content in the background is not fully loaded.
current code
#loadingImgDIv{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:14;
}
<script>
setTimeout("removeLoadingImg()",5000);
function removeLoadingImg(){
//using css display:hidden; attribute on #loadingImgDiv using javascript
}
</script>
But this is not the right way to do it...so please help me
Simple:
spinner.show()
$.get('/api')
.success(successCb)
.fail(failCb)
.always(function(){
//...
spinner.dismiss()
})

Anchor tags disappearing inside an expanding DIV

HTML:
<li>
Plan Search
<div class="ac_subitem">
<span class="ac_close"></span>
<h2 style="border-bottom:1px #989898 dotted; Margin:0 20px;">Advanced Plan Search</h2>
TEST LINK
<li>Feature Under Construction</li>
</div>
</li>
CSS:
.ac_subitem {
width:1000px;
height:0px; /* animate to 400px */
top:50%;
right:0px;
margin-top:0px; /* animate to -200px */
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url(../images/bg_menu.png) repeat top left;
}
Basically, I have a navigation set up via <ul></ul> each <li> contains an expandable <div>. What I am trying to do is add anchor tags to external links within these <div>s however the text/image used will not show up, the anchor is there and clickable but the contact itself will not appear, thus leaving me with a clickable blank space. any ideas?
Note: I do have the JS used to perform these actions, but it is quite lengthy. If necessary I can post that as well. thanks for your time in advanced!
Edit: Here is the fiddle for whole code used http://jsfiddle.net/8smk6mhs/. It doesn't seem to load properly in jsFiddle, however everything is loading fine using provided code in Dreamweaver6 links to jQuery and http://yourjavascript.com/0073145129/center-menu.js load it properly. Also a link to the completed template purchased for this project in comments.
Edit2: Have since gone through, validated, cleaned up the code. I have been trying to work through this problem for days now, and cannot grasp why this is happening. the fact that the anchor is active and works but Just cannot properly display contents of anchor is what really confuses me.
*I've updated the Fiddle.

Scrolling effect with background image fix

I am stuck with some paraallax effect.While visiting to some websites,I found this scrolling effect.
here is the link
basically What actually it is.I tried fixing the background image still my background image gets move up when ever I scroll the page.Please help me.I have tried various tutorials.Still I am not able to get anything.I want scrolling effect just like the above link.There is a small strip which keeps on moving but the background image is fixed.Please help me.
here is the link of fiddle
css
{
height:200px;
width:100%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/1b/View_of_Santa_Maria_del_Fiore_in_Florence.jpg');
}
#div3
{
height:400px;
width:100%;
background-color:lime;
}
html
<div id="div1">this is my first div</div>
<div id="div2">this is my second div</div>
<div id="div3">this is my third div</div>
If you want your background image to be fixed, you simply need to add the correct attribute.
Add this to #div2
background-attachment: fixed;
And this will set the image position according to the page's top left corner instead of the div's.
Parallax effects are created by manipulating multiple image using JavaScript and CSS. To get started refer Parallax effect tutorial , Some more parallax effect tutorials

jquery html() not working on positioned element in Chrome

I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:
<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">
<div style="position:fixed; top:50%; left:0; width:100%;">
<div style="height:150px; width:300px; margin:auto;">
<div>Processing</div>
<div>
<p id="dialog">Please Wait...</p>
</div>
</div>
</div>
</div>
Note I am calling:
$('#modal').show("fast");
before trying to add content to it.
Then I try to add to the dialog paragraph like so:
$.post(
'processor.php',
queryString,
function(data){
alert('data:'+data);
$('#dialog').html(data);
}
)
It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.
Anyone know why this is not working? or have a fix?
P.s. I know I should move my styles to a style sheet, I usually do that at the end.
Update
I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.
Also I am calling this in document.ready
You can see the page here click the submit button on the very bottom to see it happen.
update2
This is working correctly in FF and IE, its only not working in chrome.
if you view the console log, the text is there. try add css to the dialog something like :
#dialog { display:block; width:auto; height:auto;}
$(document).ready(function() {
// do stuff when DOM is ready
//Is your code called inside here or after this function is executed?
//If not, it should be.
});
Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:
$('#mydialog').hide("slow",function(){
$('#mydialog').html(data);
$('#mydialog').show("slow");
});
It doesn't look very elegant tho. I would prefer a better fix if someone has one.
edit:
A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.

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.

Categories