Develop Reference

How to determine where the current visible vertical location inside a jquery dialog is?

I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});

I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU

If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}

there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()

Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)

Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});

jQuery: Image fading to another image

I have the following code in jQuery:
if (klick = true) $(this).fadeOut('fast', function(){
$(this).attr("src", "../img/daniel_effects.png").fadeIn();
});
The changing of the image now works so:
- Image1 fade-out
- No image is displayed
- Image2 fade-in
How can I fix this, that the images fading together, without a lil time with no image between them?
Here's the site where you can see what I mean:
http://anthraxbeats.com/pages/biography.html
When you're hovering on a image, theres a short empty space before the image loads in.
How can I fix it?

Use two different images. Have them cover the same space by setting their css properties "position: absolute". Fade the first one out while setting the other one to false. You may need a proper container with position: relative as position: absolute may cause them to behave...unexpectedly.
#container{
position: relative;
width: 100px;
height: 100px;
}
.img1, .img2{
position: absolute;
width: 100%;
}

Adding [queue: false] to the animation will allow for multiple animations at the same time
var $theOtherThing = $(this).attr("src", "../img/daniel_effects.png");
if(klick === true){
$(this).animate({
"opacity": "0"
}, {
duration: 200,
queue: false
});
$theOtherThing.animate({
"opacity": "1"
}, {
duration: 200,
queue: false
});

You can try preloading your image outside of the click handler. Something like this should work:
(new Image()).src = "../img/daniel_effects.png";

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?

DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});

$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})

What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});

I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});​
jsfiffle: http://jsfiddle.net/P6tgH/

$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/

This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});

jQuery animation perform poorly all over. How can I make it smoother?

I tried to emulate the effect in the slider on this site: http://metalabdesign.com/
Here's the animation code:
$('.tagLink').click(function () {
$('html').css('overflow', 'hidden');
$('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
$('#tagBox').show().stop(1).animate({
marginTop: '-37.5%',
marginLeft: '-37.5%',
height: '75%',
width: '75%',
opacity: 1
}, {
duration: 200,
specialEasing: {
opacity: 'linear',
width: 'linear',
height: 'linear',
marginLeft: 'linear',
marginTop: 'linear'
},
complete: function () {
$(tagBoxContents).fadeTo(200, 1);
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
$(window).resize(function () {
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
});
}
});
tagBoxOverflow and tagBox start out 100% width & height. Overlay fades in, and the box both fades in and shrinks.
Here's a site where you can see it live: http://hashtraffic.com/
Hit "begin" then click "hipsters" and it will do the animation.
Why is it so slow? Here's a link to the RAW JS:
http://hashtraffic.com/js/HashTraffic.js
I'm so lost here. I understand I'm asking a lot of the browser, but metalabs does it just fine! Would it be smoother if I used CSS animations with js fallback?

Definately smoother to use css3 transitions (but IE does not reward us for this).
But I think a major problem is your margins.
I would make it position: absolute. and animate top right bottom and left.
With what your doing,the browser is forced to reflow the entire page, but if you make the position absolute, resizing does not effect the containing element or any of its parents.

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!