Dynamically resize height of stacked divs? - javascript

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

Related

css3 animation using html5 data attribute

I am trying to use one of the css animation framework called Animate.css in a way that I can effectively manage multiple animations.
I have a markup like the following for example.
<div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div>
And jquery as follows
$(function () {
$('div').addClass('animated ' + data('animation'));
});
So when document is loaded the div should start executing fadeInUp animation from the css framework referenced.
In a real context, I would be using jquery scroll plugin to detect the x, y position to find when to fire animation but this is to just get started.
I must have got something wrong, it doesn't do anything.
Here is my JS Fiddle
$(function () {
var $divToAnimate = $("div"); // This will animate all the div elements in doc
$divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});
See for instance your Fiddle updated: http://jsfiddle.net/9aE2N/5/
If you do not want to use jQuery you can add the classes (animated fadeInUp):
<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>

javascript load in mobile browser

I have applied this javascript in my website to hide a certain element when the browser width decreases in size.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).bind("resize", function() {
$('#slideshow').toggle($(this).width() >= 960);
}).trigger("resize");
});
</script>
But in mobile browsers it displays the element quickly before removing it. Does anyone have any idea how to solve this?
Your code doesn't run until the document is ready; meaning you'll see the element briefly until the document.ready method is fired in jQuery. You could take the code to hide the element and place it directly after the element, removing it from the document.ready wrapper.
<div id="slideshow"></div>
<script>
$('#slideshow').toggle( $(window).width() >= 960 );
</script>
Alternatively, you could hide the element by default, and show it with JavaScript when the appropriate conditions are met.
<style>#slideshow { display: none }</style>
<div id="slideshow"></div>
<script>
$('#slideshow').toggle( $(window).width() <= 960 );
</script>
Have you tried twitter bootstrap solution for this?
http://twitter.github.com/bootstrap/scaffolding.html

Resizing an element when the document resizes

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);

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>
...

Div is jumpy with fadeIn jQuery

When I roll over .comptext_rollover div it should hide the initial div on the page and show the minipage div. but it does but is sometimes really jumpy and also the minipage div sometimes shows below the initialpage div. any ideas? sorry i am new to coding! Thanks in advance.
$(document).ready(function() {
$('#mini_page').hide();
$('.comptext_rollover').hover(function() {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}, function() {
$('#mini_page').hide();
$('#initial_page').show();
$('.register_button').show();
$('#container').css({
'margin-top': '-150px'
});
});
});
I prepared a fiddle demo HERE
re-EDIT:
JSFIDDLE DEMO
(the demo may be incorrect while the main CSS is an external link)
I used:
<div id="container">
<div id="initial_page" class="page">
<div id="playvideo_hoverbutton"></div>
<div class="register_button"></div>
<div id="invisible_register2"></div>
<div id="termsandconditionsapplyshort"></div>
</div>
<div id="mini_page" class="page">
<div id="minicar_animated"></div>
<div id="worth25k"></div>
<div class="register_button"></div>
<div id="invisible_register"></div>
</div>
<!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
<div class="comptext_rollover">
<!--<div id="competition_text"></div>-->
</div>
</div>
$('#mini_page').hide();
$('.comptext_rollover').mouseenter(function() {
$('.page').fadeToggle(400);
});
$('.comptext_rollover').mouseleave(function() {
$('.page').fadeToggle(400);
});
In any case what you should do:
Position absolute the 2 screens you need to 'swap' into a container.
Than what you do:
Position the 'rollover' element outside the 'screens'.
Adjust the marginTop of the bigger image(car image) in the CSS (like I did) to fix the buggy 'jumps'.
IF POSSIBLE: ONLY ONE rollover ACTION ELEMENT!
Fix the margin-top of the car image. (give it a -Npx)
Doing so you don't need to do that stuff with positioning your container -Npx
There is also a simpler way to do the same effect:
you add to BOTH screens a class .swappable, making the second one (CSS)display:none; , and than you just use jQuery toggling just this class.
you've not set a great deal of time for the fade in. you're also just hiding some of the divs which makes the fade in move around depending on where you put them. maybe use slides instead. I have saved an example here: http://jsfiddle.net/kBEUH/
$(document).ready(function(){
$('#mini_page').hide();
$('.comptext_rollover').hover(function () {
$('#initial_page').fadeOut(1000);
$('.register_button').fadeOut(1000);
$('#mini_page').slideDown(1000);
}, function(){
$('#mini_page').slideUp(1000);
$('#initial_page').fadeIn(1000);
$('.register_button').fadeIn(1000);
});
});
if you put a console.log in your hover() function, you'll see hover is firing like crazy. This causes the animation to start over and over again, while moving your mouse.
You could take advantage of the jquery :animated selector:
$('.comptext_rollover').hover(function() {
//enable this line to see the hover event is firing every time your mouse moves
//console.log("hovering")
//if the div is in the middle of an animation, do nothing
if (!$("#mini_page").is(":animated")) {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}
}, function() {
//etc
});
EDIT:
Now I think of it, your probably want to use .mouseenter() and .mouseleave() instead of hover()
$('.comptext_rollover').mouseenter(function() {
//your code
}).mouseleave(function() {
//your code
});

Categories