Resizing an element when the document resizes - javascript

I'd like to resize an element when the document resizes. If a draggable div is moved around and causes the document to scroll. I want to resize an element like this $("#page").css('height','120%');. I do that in the onresize event for a div. Is that the right way? Is there a different event that where I should do this?
Here is the HTML.
<div id="matting" onresize="resize_page();"> <!-- Begin page matting div -->
<div id="page"> <!-- Begin page div -->
</div> <!-- End page div -->
</div> <!-- End page matting div -->
<script type="text/javascript">
function resize_page() {
alert ('resize_page');
$("#page").css('height','120%');
}
</script>

You need to hook into the draggable stop callback:
$("#matting" ).resizable({
stop: function(event, ui) { ...YOUR CODE... }
});

You can hook the resize event in jQuery: http://api.jquery.com/resize/
A better solution would probably be to put a restriction on the draggable object so it can't move out of bound and scroll the page.

I understand now, the new code uses a plugin that allows the resize method to be applied to every element.
http://jsfiddle.net/P9Ppb/
<< Resize the window.

The solution was to reset the height of the page div to be that of the scrolling height of the parent div (the document).
var page_height = $('#matting')[0].scrollHeight;
$("#page").css('height',page_height);

Related

make footer disappear when scroll is active

I'm using jQuery mobile.
How can I make footer disappear while scroll is active?
When scrolling stops I want to show footer again.
HTML snippet looks like this:
<div id="footer" data-role="footer" data-position="fixed" data-corners="false">
Use $.scroll to hide the footer whilst scrolling and setTimeout to show it again once scrolling stops:
var scrolling;
$(window).scroll(function() {
clearTimeout(scrolling);//clear any existing timeout
$("#footer").hide();
scrolling = setTimeout(function(){$("#footer").show();},100);//set the timeout to hide the footer (will be cancelled if scrolling continues)
})
http://jsfiddle.net/c6uqdhjo/1/
Use the jquery scroll event.
You can find information in the docs: http://api.jquery.com/scroll/
Something along the lines of (not tested!):
$(window).scroll(function() {
$("#footer").hide();
});
See Test Page
var pageIsScrolling = (function(){
var timer, body = $(document.body);
return function(){
clearTimeout(timer);
timer = setTimeout(scrollEnd, 250);
body .addClass('scrolling');
}
function scrollEnd(){
timer = null;
body.removeClass('scrolling');
}
})();
$(window).on('scroll.scrolling', pageIsScrolling);
Now whenever you start scrolling, the body has the class scrolling and you can target that in your CSS, like so:
.scrolling > footer{ opacity:0; }
or even add transition for your footer so it would look smoother.
(I'm pretty sure this should also work with jQuery mobile)
notes:
I could work directly on the footer element from javascript, but I believe working with general state classes is a better way to change states across an application, and then you can derive from that whatever you want in your CSS, so, here, the desired state class was "scrolling".
I am using custom event namespace here, which is a good practice
using element caching (body)
scrollEnd function is separated and isn't directly written inside the setTimeout for better readability.

Dynamically resize height of stacked divs?

On my magento homepage, I have a section where I have 3 image collages stacked on top of each other.
I'd like it so that each "collage"/div dynamically resizes its height to that of the browser you opened it in, so that as you scroll down, each one fits the window perfectly.
I tried:
<script type="text/javascript">
$(window).resize(function() {
$('#universe1').height($(window).height() - 46);
});
$(window).trigger('resize');
</script>
and make each div id'd "universe1" but that didn't seem to do the trick.
Any ideas?
Use jquery's .on() method to attach your event handler.
<!-- HTML -->
<div class="universe">1</div>
<div class="universe">2</div>
<div class="universe">3</div>
// jQuery
$(window).on('resize', function() {
$('.universe').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/IFEPEkaY/1/
Also make sure you're using classes as in the example above, NOT ids like in your code. If you use ids, only the first one will go full screen. If you MUST use ids (this is ugly) the simplest thing is to do this:
<!-- HTML -->
<div id="universe1">1</div>
<div id="universe2">2</div>
<div id="universe3">3</div>
// jQuery
$(window).on('resize', function() {
$('#universe1').height($(window).height() - 46);
$('#universe2').height($(window).height() - 46);
$('#universe3').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/eboXAXEq/1

Onresize event isn't running on resizing

I set the javascript window.onresize event to run other functions that fit div's size with the body's size. The problem is that when the screen is resized by adding a comment (using disqus), the divs whose sizes are supposed to fit with the new body's size, don't fit. I mean onresize function isn't being ran.
As you can see, the right side div doesn't grow as comments are being added (see the border). Do you have any idea about how make onresize event work?
PS: When I open developer tools on firefox, the div is resized, I don't know why, but the onresize event is ran. Only in this situation.
Edit: Tried to run this jquery script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).resize(function(){
tamanho_barra();
});
</script>
But, isn't working yet. I've tried to change the "document" to a random div and see if something would happen, but nothing. I have no idea about what is the problem. Could you help me please?
Edit2: Working now with rcabral's help. He told me to add a background image to the content which is a black point of 1px and repeat it until the bottom of the page.
#content { background:url('<?php bloginfo('template_directory'); ?>/images/gray_dot.gif') 634px 0px repeat-y; }
Your script isn't run automatically. You must include it inside a function that is run when the DOM is ready: $(document).ready(function() { here }); or $(function() { here });
For example:
<script>
$(function() {
$(window).resize(function(){
$("#barra").tamanho_barra();
});
});
</script>
And your code has a few errors:
1. You are using two opening parentheses after "resize" instead of just one.
2. And you should select window instead of document for the resize function.
I hope that helps.
There's a jQuery plugin that will let you target the container element that Disqus is running in.
Here's a demo: http://jsfiddle.net/hansvedo/S3R7w/
Here's the plugin: http://benalman.com/projects/jquery-resize-plugin/
And here's the syntax:
$('div#disqus-container').bind('resize', function(){
// your code
});

Set scroll position on page load

I am looking to set the page scroll on page load. I can set it by div scroll top or just pixel height.
$(document).ready(function() {
$(document).scrollTop(100);
});
Use window.load instead because the load of some images might affect your scrolling position
$(window).load(function() {
$(document).scrollTop(100);
});

Drop down interface from top of page using javascript

Quite simply, I want to know how I can do this 'http://www.lido-troon.co.uk/'.
Where it says 'Reserve a table'. This trigger allows a drop down interface to animate as if from above.
I'm not interested in the booking system in there, just the functionality.
I thought it could be done using anchors and smooth scroll, but that would mean the booking form was always there.
I will give you a code that will center this div on the top of the screen on every screen and will slide the div down from the top onLoad:
HTML:
<div id="ID_NAME">Your Content</div>
JQuery:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top","-100px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");return this;
}
$(document).ready(function(){
$('#ID_NAME').center().delay(300).animate({'top' : '0px'});
});
Hope this helped
Create the content and then show it using JQuery:
http://api.jquery.com/show/
You can have the top div with your booking system content hidden with jQuery's hide() than on .click() of the button (a tag), have it slideDown()
Example:
$(document).ready(function() {
$('booking_div').hide();
$('booking_a').click(function() {
$('booking_div').slideDown();
});
});
You can use javascript, Jquery. that have many UI effect. It's good and easy to use. You can learning it from document. e.g. http://www.webdesignersblog.net/coding/20-advanced-jquery-effects/ http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Yes you can,
create div at the top of your page with the style="display: none;" or set class with the css from style attribute. Then attach event click to your link and animate change.
JavaScript
$('#your_link_button').click(function()
{
$("#container").slideToggle('slow');
});
CSS
.hidden { display: none; }
HTML
<body>
<div id="container" class="hidden">your content</div>
...

Categories