Page sliding over HTML page. I'm guessing needs javascript. Help me complete this

Hello everyone I am determined to get help and I need other peoples insight on a project I am working on.

My project is stated in the title, I want to let users who want to see my portfolio click on a button and the portfolio page slide over my index page.

Ex. at www.visumdesignz.com over to the left is a button that says portfolio. when you click on it an extruder pops out, I used the extruder for another function, I decided I didn’t want that function, but it gave me this idea.

I want the extruder to slide over all of the content.

I noticed the facebook app has a similar function to what I am looking for, take a look at it, when you are looking at your dashboard the news feed slides off to the side, that’s a similar idea, even though this isn’t mobile, you get the idea, at least I hope. :slight_smile:

If you have any idea how to achieve this effect, links etc. all help would be appreciated.

That’s pretty straight forward - you can just slide a div from off the page with the new content over the div with the current content on a page. And you guessed correctly - you’ll need javacsript.

I’m guessing you want to learn how to do this, so post the html and javascript you have so far and we can try to help you get it working.

Off Topic:

btw:

Don’t assume everyone is on FB. I think FB is way over-rated and the world for me does not revolve around it. I don’t even like the friends I’ve got, so why would I want more :lol:

Lol thanks for the quick reply. I was pulling an all nighter, now I’m spent :slight_smile:

I will Paste the code tomorrow just keep your eyes peeled. Thanks again, I am going to sleep now zzz :slight_smile:

We will work on this soon.

Ok hello I am back.

<body>

    
<div class="wrapper"></div>
    	<!-- HEADER BEGIN -->
    	<div id="header">
    	  <div class="inner">
    	    <div class="top_section">
    	      <div class="block_call">
    	        <p>Call Us: +1 217 371 8724</p>
  	        </div>
    	      <div class="block_follow_us">
    	        <p>Follow us:&nbsp;<a href="#"><img src="visiondesign/html/green/noise/images/icon_twitter1.jpg" alt="Twitter" title="Twitter" /></a><a href="#"><img src="visiondesign/html/green/noise/images/icon_facebook1.jpg" alt="Facebook" title="Facebook" /></a><a href="#"><img src="visiondesign/html/green/noise/images/icon_rss1.jpg" alt="RSS" title="RSS" /></a></p>
  	        </div>
  	      </div>
    	    <div id="logo"><a href="index-old.html"><img src="visiondesign/html/red/noise/images/logo1.png" alt="VisionDesign" height="35" title="VisionDesign" /></a></div>
    	    <div id="main_menu">
    	      <ul>
    	        <li  class="active"><a href="index.html"><span><span>Home</span></span></a></li>
    	        </li>
    	        <li><a href="quote.html"><span><span>Pricing</span></span></a>
    	          <ul>
    	            <li class="top"></li>
    	            <li class="first"><a href="quote.html">Quote</a></li>
  	            </ul>
  	          </li>
    	        <li><a href="services.html"><span><span>Services</span></span></a></li>
    	        <li><a href="our_work.html"><span><span>Our Work</span></span></a>
    	          <ul>
    	            <li class="top"></li>
    	            <li class="first"><a href="visiondesign/xml slideshow/FlashWorks.html">Flash Portfolio </a></li>
    	            <li><a href="brand_design.html">Brand Design</a></li>
    	            <li><a href="graphic_design.html">Graphic Design</a></li>
  	            </ul>
  	          </li>
    	        <li><a href="blog.html"><span><span>Blog</span></span></a></li>
    	        <li><a href="contacts.html"><span><span>Contacts</span></span></a></li>
  	        </ul>
  	      </div>
    	  </div>
  	  </div>
    	<!-- HEADER END -->
        
        <!-- CONTENT BEGIN -->
        <div id="content">
        	<div class="inner">
              <div class="block_slider2">
                    <div id="slider2">

                        <div class="pics">
                            <div>  
                            
                            
                 <a href="bestVD.swf?width=600&amp;height=340" rel="prettyphoto" ><img src="visiondesign/html/brown/noise/images/pic_fade_slider3.jpg" alt="" /></a>
                             
                          </div>
                            
                            
                            <div>
                            
                          
                            
                            
                                        <a href="visiondesign/html/green/noise/images/pic_fade_slider1.jpg"  rel="prettyPhoto[flash]"  ><img src="visiondesign/html/green/noise/images/pic_fade_slider1.jpg"  alt="portfolio" /></a>
                            
                            
                            </div>

                            
                            
                           
                        <div>
                        
                                      
                <a href=" images/Ino_pretty.jpg"  rel="prettyPhoto[flash]"  ><img src="visiondesign/html/brown/noise/images/pic_fade_slider4.jpg" alt="" /></a>    
          
                        
                        
                        </div>

        
        </div>
        
                        <div class="block_navigation">
                            <div class="inner_nav">
                                <div id="slider2_nav"></div>
                            </div>
                      </div>
                    </div>
                  <div class="block_text">
                    <h1> We design clean modern websites that are <span>innovative</span>, visum will give you that professional edge your business needs.</h1>

                    <p>It's a fact that modern businesses need a website, if you want to look professional you need a <b>sharp image</b>, that's what we do at visum, by taking your ideas and goals we create spectacular presentations.<br />
                      <br />
                    If your website looks good clients will be more <b>interested</b> in what your comapny has to offer. Take a look at what we have to offer.
                    <a href="our portfolio.swf?width=900&amp;height=700"  rel="prettyPhoto[flash]"   class="button_read_more">our work</a> </p>
                  </div>

              </div>
                
<div class="line"></div>
<div class="block_services">
  <div class="column">
    <div class="title icon1">
      <h3>Importance of a website.</h3>
      <h4>Why your business needs a website.</h4>
    </div>

    <p>Think of your website as a continuous method of promoting your company on a national and international basis every day of the week. </p>
  </div>
  <div class="column">
    <div class="title icon2">
      <h3>What a website does for you</h3>
      <h4>How a website helps your business.</h4>

    </div>
    <p>Your company can effectively multiply the customer or vendor interfacing   capabilities very quickly and, very cost effectively. </p>
  </div>
  <div class="column">
    <div class="title icon3">
      <h3>Our vision your success</h3>

      <h4>How we can make your business succeed.</h4>
    </div>
    <p>You have decided your business needs a web presence, and you are seeking to have a website built around your franchise. Our vision will help you succeed </p>
  </div>
</div>
<div class="block_slogans">
                <div id="slogans">

                <div>
                  <p>" <span>Clean, Innovative, Creative, </span>VISUM DESIGNZ"</p></div>
                        <div><p>" No standard<span> designs </span> only <span> unique </span>work. "</p></div>

                        <div>
                          <p>" <span> Visum Designz </span> has really made our orginization look sharp with the<span> website </span>" INOHOOPS. </p></div>
                        <div><p>" <span> Visum Designz </span> did more than we could ask for<span> our site </span> is amazing. "</p></div>

            </div>
                    <div class="left" id="slogans_prev"></div>
                    <div class="right" id="slogans_next"></div>
              </div>
              <div class="line"></div>
              <div>
                <div>
                  <div class="container_16">
                    <div id="main">

                      <!-- end header  -->
                      <!-- tagline-->
                      <!--end tagline-->
                      <!-- parent banner div-->
                      <!--end banner -->
                      <!--statistic sidebar-->
                      <div id="sidebar" class="grid_7">
                        <h1>Why Choose Us?</h1>

                        <ul id="stats">
                          <li><a href="#"><img src="merger/img/home/stat_01.png" alt="Statistic 01" /></a><span>The number of happy clients world wide since we began in 2010</span></li>
                          <li><a href="#"><img src="merger/img/home/stat_02.png" alt="Statistic 02" /></a><span>The number of awards won by our studio in 2010-2011</span></li>
                          <li><a href="#"><img src="merger/img/home/stat_03.png" alt="Statistic 03" /></a><span>A small team means lower costs for us and higher value for you</span></li>
                          <li class="last"><a href="#"><img src="merger/img/home/stat_04.png" alt="Statistic 04" /></a><span>Client satisfaction guaranteed</span></li>
                        </ul>
                      </div>

                      <!--end statistic sidebar-->
                      <!--main content-->
                      <div id="mainContent" class="grid_9">
                        <!--who are we-->
                        <div id="upper">
                          <h1>Who Are We?</h1>
                          <p>We are a graphic arts studio located in Illinois. The word Visum is a latin word for vision. We use the word vision because we have very strong visions for what our final outcome in each project should be, it's a simple understanding of what is needed to be done to give your business that edge amongst your competition. We work with our clients to reach their goals and surpass thier expectations.</p>
                          <p class="right">We have a small team and that means lower costs for you, your overall satisfaction is our goal. If a client has any questions about how things work we are more than happy to address them. Whether it be a long term or short term relationship, we are here for you and your business 100%. We want to gather your ideas and what you want your outcome to be to make it a reality.</p>

                          <a href="#">
                            <h2>&nbsp;</h2>
                          </a> </div>
                        <!--end who are we-->
                        <!--latest work-->
                        <div id="lower">
                          <h1>Latest Work</h1>

                          <h2>Check It Out</h2>
                          <div id="featLeft">   <a href="bestVD.swf?width=600&amp;height=340" rel="prettyphoto" ><img src="merger/img/home/work_01.jpg" alt="work 01" /></a> <a class="caption" href="merger/portfolio_categories.html">Our tablet commercial.</a> </div>
                          <div id="featRight"> <a class="second" href="images/Ino_pretty.jpg" rel="prettyPhoto" ><img src="merger/img/home/work_02_3.jpg" alt="work 02" /></a> <a class="caption" href="merger/portfolio_categories.html">Inohoops Basketball league.</a> </div>
                        </div>

                        <!--end latest work-->
                      </div>
                      <!--end main content-->
                      <!--connect bar-->
                      <!--end connect bar-->
                    </div>
                  </div>
                </div>
              </div>

              <div class="line"></div>
                
                <div class="block_testimonials">
                    <h2>Testimonials</h2>
                    <h4>Words from our clients.</h4>
                    
                    <div class="testimonial fl">
                        <div class="text">
                          <p>&quot;We decided to hire visum designz, because we were in serious need of upgrading our church website. Thanks to their work we look modern.&quot;</p>
                          <p>&nbsp;</p>
                      </div>

                        <div class="author">
                          <p><span>Tom Herbert</span>, Pastor at New Covenant</p></div>
                    </div>
                    
                    <div class="testimonial fr">
                        <div class="text">
                          <p>&quot;Visum created a website for our basketball league, with a website we are able to  inform the guys about upcoming events and games.&quot;</p>
                          <p>&nbsp;</p>
                      </div>
                        <div class="author">

                          <p><span>Eric  Brenize</span>, Inohoops</p></div>
                    </div>
                </div>
                
                <div class="block_newsletter">
                    <h2>Newsletter</h2>
                    <h4>Subscribe to our news letter.</h4>
                    <p>If you want design tips from our staff sign up..</p>

                    <div class="cl"></div>
                    <form action="#">
                        <div class="block_field"><input type="text" class="w_def_text" value="" /><span>Please enter your E-mail addres</span></div>
                        <input type="submit" class="button_subscribe" value="" />
                    </form>
                    <div class="cl"></div>
                    <p>We will send a weekly letter with new tips and news..</p>
                </div>

          </div>
</div>
<!-- CONTENT END -->
            
        <!-- FOOTER BEGIN -->
<div id="footer">
            <div class="inner">
            	<div class="top_section">
               	  <div class="navigation">
                    	<h2>Navigation</h2>

                        <ul>
                        	<li><a href="index.html" class="active">Home</a></li>
                        	<li><a href="about.html">About Us</a></li>
                        	<li><a href="services.html">Services</a></li>
                        	<li><a href="gallery.html">Gallery</a></li>
                        	<li><a href="blog.html">Blog</a></li>

                        	<li><a href="contacts.html">Contacts</a></li>
                            <li></li>
                        </ul>
                  </div>
                    
                    <div class="our_blog_posts">
                    	<h2>Our Blog Posts</h2>
                        <ul>
                        	<li><a href="tut1 - 1.html">Create a Fantasy Miniature World...</a></li>

                        	<li><a href="tut2 - 1.html">Create a Detailed User Interface...</a></li>
                        	<li><a href="blog.html">Church of the New Covenant Gets...</a></li>
                        
                        	
                        	
                        </ul>
                    </div>
                    
                    <div class="categories">
                    	<h2>Categories</h2>
                        <ul>

                        	<li><a href="web_design.html">Web Design</a></li>
                        	<li><a href="graphic_design.html">Graphic Design</a></li>
                        	<li><a href="brand_design.html">Brand Design</a></li>
                        	<li><a href="visiondesign/xml slideshow/FlashWorks.html">Flash Design</a></li>
                        	<li></li>
                        </ul>
                    </div>

                    
                    <div class="get_in_touch">
                <h2>Get in touch                </h2>
                
                <p>Contact Visum Designz.</p>
                           
               
                <form name="contactform" method="post" action="../../send_form_email.php">

<div class="block_field fl">
  <label for="first_name"></label>
   <input type="text"  name="first_name"  class="w_def_text" value="" />
                  <span>Name</span></div>

 
 
  
<div class="block_field fr">
  <label for="email"></label>
 <input type="text" name="email"    class="w_def_text" value="" />
                    <span>E-mail</span></div>
  
<div class="cl"></div>
<div class="block_textarea">
  <textarea name="comments" cols="1" rows="1" class="w_def_text"></textarea>
  <label for="comments"></label>

  <span>Message</span></div>
<input type="submit" class="button_send_message" value="" />
                </form>
         
                
               
               
               
                    </div>
                </div>
                
                <div class="bottom_section">
                	<div class="block_copyright">
                	  <p>Copyright &copy; 2011 Visum Designz. All rights reserved. </p></div>

                    
<div class="block_follow_us">
                    	<p>Follow Us:&nbsp;<a href="http://www.facebook.com/pages/Visum-Designz/205736466160659" target="_new"><img src="visiondesign/html/green/noise/images/icon_facebook_f.png" alt="Facebook" title="Facebook" /></a><a href="http://www.flickr.com/photos/58314101@N02/" target="_new"><img src="visiondesign/html/green/noise/images/icon_flickr_f.png" alt="Flickr" title="Flickr" /></a><a href="#"><img src="visiondesign/html/green/noise/images/icon_blog_f.png" alt="Blog" title="Blog" /></a><a href="http://twitter.com/#!/VisumDesignz"><img src="visiondesign/html/green/noise/images/icon_twitter_f.png" alt="Twitter" title="Twitter" /></a></p>
                  </div>
                </div>
            </div>
        </div>
        <!-- FOOTER END --><!-- Style switcher start -->

<div id="demopanel">

    <div id="panel">
	
		<h3>Portfolio</h3>
			
		

		<div class="clear"></div>
        <div class="heading_style">....</div>
		<div class="selector">

        	<div class="pattern">
            
            We are working on something awesome...
            
            Please be patient... :)
				
        	</div>
            <div class="clear"></div>
        </div><!-- end patterns -->   
		       

		
			
    </div><!-- close #panel -->
    
    <div class="panel_button" style="left: 0px; display: block;"><img src="transforms/images/expand.png" alt="expand"/></a></div>
    <div class="panel_button hide_button" style="left: 0px; display: none;"><img src="transforms/images/collapse.png" alt="collapse"/> </div> <!-- close #panel_button -->
</div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    

</body>

This is the HTML code I am trying to overlap, I think I will need a fresh javascript, I don’t care to much about the one I have. Unless you think according to the extruder on my site, is customizable to what I want then I will post that here. If you need anything else let me know.

I think you misunderstood me.

What I said was:

I don’t have the time to start the javascript from scratch and I don’t see any javascript in what you posted. I was assuming you want to learn how to do this with javascript and so it would be quicker for me to try to help you get your code working.

If you need someone to start the javascript off for you, then hopefully someone else will come along to do that.

The only javascript I have is the extruder, I don’t think that would be of any use, IDK it might but I am not sure. Do you know of any similar functions out there that have javascript, that could be useful?