SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading div or table

    Hi everyone,

    Two questions:

    1. Is it possible to fade a div, or even better, a complete table in using javascript? I think i've seen examples of it but ofcoarse i can't find them now iam looking for it. If that's possible could you guys give this noob a hand? I don't want to use Flash.

    2. Another question, but i think this one isn't possible. I have a content field (div) on my website where the height is as large as the content. When the visitor is navigating trough the site the height of the div jumps from small to large etc. I could make it one size but that's a bit boring. Is it possible that the size of the div smoothly transitions into the size of the clicked page? I know it's possible using Flash but i don't want to use that here as well.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, fading is a common technique with jquery or scriptaculous

    You could store the height of the div in a cookie, so that on a new page a resizable div starts at the size of that cookie.

    The resizable div would be on top of a (currently hidden) content div. When the resizable div has changed size to be the same as the content div, you can reveal the content div then fade out the resizable one.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's a simple demonstration of the moving and hiding aspects.

    Code css:
    #content, #overlay {
    	position: absolute;
    	overflow: hidden;
    	background: #ddd;
    	border: 1px solid black;
    }
    #overlay {
    	z-index: 9999;
    }

    Code html4strict:
    <button id="generate">Change Content Area</button>
    <div id="overlay"></div>
    <div id="content">
    </div>

    Code javascript:
    function newContent() {
    	showOverlay();
    	changeContentArea();
    	animateOverlay();	
    }
    function showOverlay() {
    	var left = $('#content').css('left');
    	var top = $('#content').css('top');
    	var width = $('#content').width();
    	var height = $('#content').height();
    	$('#overlay').css({'left': left, 'top': top}).width(width).height(height).show();
    }
    function changeContentArea() {
    	var left = Math.floor(Math.random() * 200);
    	var top = Math.floor(Math.random() * 100) + 30;
    	var width = Math.floor(Math.random() * 500) + 300;
    	var height = Math.floor(Math.random() * 400) + 200;
    	$('#content').css({'left': left, 'top': top, 'width': width, 'height': height}).html(lorem()).hide();
    }
    function animateOverlay() {
    	var left = $('#content').css('left');
    	var top = $('#content').css('top');
    	var width = $('#content').width();
    	var height = $('#content').height();
    	$('#overlay').animate({'left': left, 'top': top, 'width': width, 'height': height}, 1500, function () {
    		$('#content').show();
    		$('#overlay').hide();
    	});
    }
    $(document).ready(function() {
    	$('#generate').click(newContent);
    });
    function lorem() {
    	var lorem = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit neque in metus. Phasellus pede est, sodales eget, posuere sit amet, tincidunt eget, ante. Proin enim diam, elementum at, placerat eget, pretium vel, libero. Vivamus lectus neque, molestie eu, faucibus sodales, interdum et, eros. Nunc placerat magna. Cras vitae nibh. Nulla eu metus tincidunt tellus tincidunt congue. Sed et nisi a justo vehicula aliquet. Donec vulputate, purus ut adipiscing posuere, pede nulla aliquam nulla, non pharetra eros velit a tellus. Mauris ullamcorper tortor vitae quam. Nulla et dolor id metus pulvinar accumsan. Maecenas dictum mauris nec enim.</p>";
    	lorem += "<p>Morbi fermentum diam laoreet leo. Suspendisse feugiat eros sed enim. Sed tortor ligula, pellentesque non, dignissim ac, aliquet nec, erat. Curabitur lobortis ipsum eget nibh. Nulla eget nisl. Etiam tempus. Morbi fringilla, ligula sit amet sagittis euismod, ante eros luctus odio, eget pellentesque purus est molestie metus. Phasellus a eros ac sem dignissim laoreet. Sed nulla risus, placerat ornare, volutpat vel, eleifend vel, urna. Sed nulla.</p>";
    	return lorem;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help pmw57!

    I copied and pasted your example but nothing happens. Do you know what is wrong? Ans also, are these fades possible without clicking a button first? I'd like them to start inmidiatelly when a page is opened.

    Btw the height + cookie thingy is very smart!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function newContent() {
    showOverlay();
    changeContentArea();
    animateOverlay(); 
    }
    function showOverlay() {
    var left = $('#content').css('left');
    var top = $('#content').css('top');
    var width = $('#content').width();
    var height = $('#content').height();
    $('#overlay').css({'left': left, 'top': top}).width(width).height(height).show();
    }
    function changeContentArea() {
    var left = Math.floor(Math.random() * 200);
    var top = Math.floor(Math.random() * 100) + 30;
    var width = Math.floor(Math.random() * 500) + 300;
    var height = Math.floor(Math.random() * 400) + 200;
    $('#content').css({'left': left, 'top': top, 'width': width, 'height': height}).html(lorem()).hide();
    }
    function animateOverlay() {
    var left = $('#content').css('left');
    var top = $('#content').css('top');
    var width = $('#content').width();
    var height = $('#content').height();
    $('#overlay').animate({'left': left, 'top': top, 'width': width, 'height': height}, 1500, function () {
    $('#content').show();
    $('#overlay').hide();
    });
    }
    $(document).ready(function() {
    $('#generate').click(newContent);
    });
    function lorem() {
    var lorem = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit neque in metus. Phasellus pede est, sodales eget, posuere sit amet, tincidunt eget, ante. Proin enim diam, elementum at, placerat eget, pretium vel, libero. Vivamus lectus neque, molestie eu, faucibus sodales, interdum et, eros. Nunc placerat magna. Cras vitae nibh. Nulla eu metus tincidunt tellus tincidunt congue. Sed et nisi a justo vehicula aliquet. Donec vulputate, purus ut adipiscing posuere, pede nulla aliquam nulla, non pharetra eros velit a tellus. Mauris ullamcorper tortor vitae quam. Nulla et dolor id metus pulvinar accumsan. Maecenas dictum mauris nec enim.</p>";
    lorem += "<p>Morbi fermentum diam laoreet leo. Suspendisse feugiat eros sed enim. Sed tortor ligula, pellentesque non, dignissim ac, aliquet nec, erat. Curabitur lobortis ipsum eget nibh. Nulla eget nisl. Etiam tempus. Morbi fringilla, ligula sit amet sagittis euismod, ante eros luctus odio, eget pellentesque purus est molestie metus. Phasellus a eros ac sem dignissim laoreet. Sed nulla risus, placerat ornare, volutpat vel, eleifend vel, urna. Sed nulla.</p>";
    return lorem;
    }
    </script>
    
    <style type="text/css">
    <!--
    #content, #overlay {    position: absolute;    overflow: hidden;    background: #ddd;    border: 1px solid black;}#overlay {    z-index: 9999;}
    -->
    </style>
    </head>
    
    <body>
    <button id="generate">Change Content Area</button><div id="overlay"></div><div id="content"></div>
    </body>
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The most obvious problem is that registering the onclick event fails because the element doesn't exist yet when the code is run.

    Place the script at the bottom of the page. That's where you're supposed to put them anyway, which improves the page loading speed.
    http://developer.yahoo.com/performance/rules.html

    As was stated at the top of the code, it's a simple demonstration of the moving and hiding aspects. I may be willing to go further with it myself should the time be compensated for, but failing that I leave it up to you.

    Cookie handling routines are at http://www.quirksmode.org/js/cookies.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •