Page 4 of 5 FirstFirst ... 2345 LastLast
Results 31 to 40 of 41

Thread: Make Layers Appear Over Time

  1. #31
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Sorry for the delay, give me a few minutes and I'll post the code =/.
    script.js
    Code:
    // Made by Nile, http://beta.unlinkthis.net
    //DO NOT REMOVE THIS LABEL
    var loadimg = function(id, imgs){
    	var count = imgs.length;
    	var a = setInterval(function(){
    		var image = document.createElement('img');
    		image.src = imgs.shift();
    		document.getElementById(id).appendChild(image);
    		count--;
    		if(count == 0){ clearInterval(a); }
    	}, 500);
    };
    HTML:
    Code:
    <html>
    	<head>
    		<title>Appearing Layers</title>
    		<script type="text/javascript" src="script.js">
    			// Made by Nile, http://beta.unlinkthis.net
    			// DO NOT REMOVE THIS LABEL
    		</script>
    		<style type="text/css">
    			#image {
    				background-color: #ddd;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>HTML Ipsum Presents</h1>
    	       
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    	       
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    
    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    
    <pre><code>
    #header h1 a { 
    	display: block; 
    	width: 300px; 
    	height: 80px; 
    }
    </code></pre>
    		<div id="image"><noscript><img src="noscript.png" /></noscript></div>
    	</body>
    			<script type="text/javascript">
    		var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
    		loadimg("image", effect);
    		</script>
    </html>
    Now, which layer do you want to be swapped?
    Jeremy | jfein.net

  2. The Following User Says Thank You to Nile For This Useful Post:

    TicTacWoe (12-23-2009)

  3. #32
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    wow thanks, I tried that and now the images appear one by one in a row which is great! The only thing is how do I space the images out like I have in the second link I posted ie. is there a way to have say 5 or 10 pixels between each image?

    As for the swapping of the images in theory I'd like to be able to swap any of the images on mousover, with the new image appearing directly on top of the original.

  4. #33
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    For image spacing, change:
    Code:
    		<style type="text/css">
    			#image {
    				background-color: #ddd;
    			}
    		</style>
    to:
    Code:
    		<style type="text/css">
    			#image {
    				background-color: #ddd;
    			}
    			#image img {
    				padding-right: 10px;
    			}
    		</style>
    For swapping, give me a while and I'll make the code.
    Jeremy | jfein.net

  5. #34
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    thanks again the padding worked great!

  6. #35
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Great!
    Heres the HTML:
    Code:
    <html>
    	<head>
    		<title>Appearing Layers</title>
    		<script type="text/javascript" src="script.js">
    			// Made by Nile, http://beta.unlinkthis.net
    			// DO NOT REMOVE THIS LABEL
    		</script>
    		<style type="text/css">
    			#image {
    				background-color: #ddd;
    				padding-right: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>HTML Ipsum Presents</h1>
    	       
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    	       
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    
    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    
    <pre><code>
    #header h1 a { 
    	display: block; 
    	width: 300px; 
    	height: 80px; 
    }
    </code></pre>
    		<div id="image"><noscript><img src="noscript.png" /></noscript></div>
    	</body>
    			<script type="text/javascript">
    		var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
    		var swap = new Array('image1_i.png', 'image2_i.png', 'image3_i.png', 'image4_i.png', 'image5_i.png');
    		loadimg("image", effect, swap);
    		</script>
    </html>
    Change the swap variable.

    And heres script.js:
    Code:
    // Made by Nile, http://beta.unlinkthis.net
    //DO NOT REMOVE THIS LABEL
    var loadimg = function(id, imgs, swap){
    	var count = imgs.length;
    	var a = setInterval(function(){
    		var image = document.createElement('img');
    		var images = new Array(imgs.shift(), swap.shift());
    		image.src = images[0];	
    		image.onmouseover = function(){ this.src = images[1]; };
    		image.onmouseout = function(){ this.src = images[0]; };
    		document.getElementById(id).appendChild(image);
    		count--;
    		if(count == 0){ clearInterval(a); }
    	}, 500);
    };
    Jeremy | jfein.net

  7. #36
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    hurrah! the swap variable worked perfectly! Now, just one or two minor things and then I'll leave you alone

    Firstly, is there something a bit wrong with this part of your code-
    #header hi a {
    display: block;
    width: 300px;
    height: 800px;
    }

    because no matter what I change those pixel values to nothing happes.

    Basically all I need to know how to do now is to change the overall size and position of the div that contains all of the array images.

    EDIT- actually that #header part is nothing to do with what I'm doing is it, it's justpart of your example. Still, can't figure out how to change the size and position of the image layer that contains everything else.
    Last edited by TicTacWoe; 12-23-2009 at 10:01 PM.

  8. #37
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Yes.
    #header hi a {
    display: block;
    width: 300px;
    height: 800px;
    }

    What does hi mean?
    Jeremy | jfein.net

  9. #38
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    sorry don't know why I pasted it with hi it was in it's orignal format that I was curious about.

    But I don't get what that part does
    #header h1 a {
    display: block;
    width: 300px;
    height: 80px;
    }

    is the header anything to do with the image array or is it something else altogether.

    I tried putting the image div inside another layer and using that layer to control the position and size of the image div but is there a better way of controlling these things?

  10. #39
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Actually as well as the positioning/sizing thing I do have one final-final request which hopefully is possible.

    The way your script works means that all of the images in the array appear one by one horizontally. But on one of the pages on my site i need the images to appear in three horizontal rows, so the first row appears one by one then the second row and then the third. So would it be possible to add two more arrays that have different positions on the page to the first (ie lower down the page) that load once the previous row is completed?

    Or maybe all the images could still be in the same array but somehow the second set of images are positioned lower and the same for the third?

    sorry for so many questions, all of this was so easily achieved with dreamweavers timeline

  11. #40
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Why don't you keep using the dreamweaver time line? I'll get the code to you soon.
    Jeremy | jfein.net

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
  •