avoid the page to "jump"

**Mejse78** · 05-07-2012, 06:08 PM

I'll try and explain my question as good as I can..

I have a banner on the top of my page.
On the left I have content.
On the right I have a menu

Now.. I want to avoid using IFrame.. I thought about using pages, that look just alike - apart from the content.
So when I use a link in the menu, it looks like it's only the content that's changing.

My problem with this is, that if I have scrolled down on my page to see the menu on the right - and I click on a link in the menu - the page "jumps up" and show me the banner.

I would like to be able to use a link, without the next page jumping up to the banner...

Is that possible? And how is this done?
Thanks

**traq** · 05-07-2012, 07:39 PM

it's not "jumping up," it's just loading a new page - which will be displayed from the top. You could make the menu item link to an anchor closer to the bottom, but that would just make it "jump up" and then "jump down."

...So when I use a link in the menu, it looks like it's only the content that's changing.

actually, you can do just that, using ajax. Does your page use jQuery (or another javascript framework)?

**Mejse78** · 05-07-2012, 08:54 PM

Thanks for your reply.

I do use jQuery.. but I'm not familiar with Ajax, sadly.
Is it difficault to learn?

Edit:
jQuery.get or maybe more like this .load() (this looks a bit like tags...

)
I guess this might be it? But.... it's like russian to me.. I don't get it right now.

Maybe someone can help out by explaining a bit?
Thanks

**traq** · 05-08-2012, 01:22 AM

.load() is indeed what I was leading up to. There are a few things you would need to change. A basic example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style>
        /* just some borders, for clarity */
        #header,#content,#nav{ border: 1px dotted gray; }
    </style>
</head>
<body>
    <div id="header">
        <h1>this is my header</h1>
        <p>It's the same on every page.</p>
    </div>
    <div id="container">
        <div id="content">
            <p>This is the content for the page.  
                Other pages have different content.  
                This content will be replaced via ajax, 
                while the rest of the page remains unchanged.</p>
            <p>Every page looks like this, 
                just with different content in their "content" div.</p>
        </div>
    </div>
    <div id="nav">
        <p>This is my menu.</p>
        <a href="page-1.html">Page 1</a>  
        <a href="page-2.html">Page 2</a>  
        <a href="page-3.html">Page 3</a>  
    </div>
    <script> /* script at bottom of page! */
        $("#nav").on(       /* attach an event listener to #nav */

            "click"         /* the event you're listening for is a click */

           ,"a"             /* but only if it's on an <a> */

           ,function( e ){  /* this function executes whenever you click on #nav a */

                /* this gets the page URL from the <a> href 
                   and specifies you only want the #content div*/
                var ajaxhref = $( this ).attr( "href" ) + " #content";

                /* this loads the requested content
                   into the #container div on _this_ page */
                $( "#container" ).load( ajaxhref );

                /* this stops the hyperlink from actually going to the new page.
                   doing this (instead of removing the hyperlink)
                   allows the menu to still work if javascript is disabled. */
                e.preventDefault();
            }
        );
    </script>
</body>
</html>

**Mejse78** · 05-08-2012, 08:12 AM

This is very well described. I think I can do that - and UNDERSTAND it aswell

Will look at it later today.

Thank you so much for taking your time.
☼

ps. clicked on the THANKS button.. but I think there's a fault.?

**traq** · 05-08-2012, 01:42 PM

:-) don't worry about the 'thanks' button. It's a known issue and it won't do any harm in the meantime.

**Mejse78** · 05-09-2012, 03:17 PM

I'm just starting on trying out this code, but I have one question, before I go ALL IN

Does the content div expand according to the html content - or must I make the html content have a certain size to fit the div?

☼

**traq** · 05-09-2012, 07:48 PM

as long as div#content does not have a _set_ height (or max-height, i.e., its height should be "auto"), then it will change size according to it's content.

Try it out with the example I posted. Make copies of that same code and save them as page-2.html and page-3.html (and change the #content text so you can tell when they've loaded).

**Mejse78** · 05-24-2012, 02:04 PM

Hi again...

I'm a bit embarrassed, because I can't make it work... I tried out using your example as well.. but somethings off..

In my code, it opens up as a site (not in new tab) - so it seems as if the e.preventDefault(); doesn't work.
Has it something to do with my a declaration in my css?

Can you find the fault?

Code:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    
<!-- InstanceBeginEditable name="meta" -->
<meta property="og:title" content="Tegnehulen"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://www.tegnehulen.dk"/>
    <meta property="og:image" content="http://i1086.photobucket.com/albums/j447/Mejse78/HULEN_rd.gif"/>
    <meta property="og:site_name" content="Tegnehulen.dk"/>
    
    <meta property="og:description"
          content="Kom på besøg i Hulen. Her kan du finde både mine grafiske- og mine projekter."/>
    <meta charset="utf-8" />

<title>BLOGGEN</title>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/noconflict.js"></script>

<script type="text/javascript" src="js/slider/slider.js"></script>
<script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />

<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="slider" -->

<!-- Anythingslider -->
<script type="text/javascript">

var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
	return slider1[index - 1] || index;
}
 </script>
 <!-- InstanceEndEditable -->

<!-- /*****SCRIPT FOR BUBBLE****/ -->
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles.css">
<LINK rel=stylesheet type=text/css href="css/topmenu/bubbles.css">




<script type="text/javascript" src="js/topmenu/imgbubbles.js">
/*****SCRIPT FOR BUBBLE****/
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('ul#orbs').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs"
	$('ul#orbs_2').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs_2"
})
</script>

<!-- InstanceBeginEditable name="highlight" -->
<SCRIPT language="JavaScript1.2">
/****HIGHLIGHT IMAGE****/
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}

</SCRIPT>

<!-- InstanceEndEditable -->
</head>



<body>
<!-- InstanceBeginEditable name="fb" -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/da_DK/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- InstanceEndEditable --> 

<div id="space" class="border">
<div id="paper">
	
 
    
    <div id="banner" align=center> 
		<img src="images/layout/banner.png" />
    </div>


    <div id="menu" align="center">
		<UL id=orbs class=bubblewrap>
		<LI>
			<A href="/dw.html"><IMG alt=HJEM src="images/layout/topmenu/hjem.png"></A>
            
       	</LI>
		
        <LI>
            <A href="/om_mig.html"><IMG alt="OM MIG" src="images/layout/topmenu/ommig.png"></A>
            
		</LI>
        
        <LI>
            <A href="/galleri.html"><IMG alt=GALLERI src="images/layout/topmenu/galleri.png"></A>
            
        </LI>
        
        <LI>
            <A href="/portefolio.html"><IMG alt=PORTEFOLIO src="images/layout/topmenu/portefolio.png"></A>
            
        </LI>
        
        <LI>
            <DIV><A href="/blog.html"><IMG alt=BLOG src="images/layout/topmenu/blog.png"></A>
            </DIV>
        </LI>
		</UL>
    </div>


<!-- InstanceBeginEditable name="nyheder" -->
   <div id="blog">
      
      <div id="blogcontent">
      <p>afækshdæasdkfhædfhk
      Dette er blog</p></div>
      
    </div>
    
    <!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="content" -->
    <div id="nav">
      <a href="page-1.html">Page 1</a>  
        <a href="page-2.html">Page 2</a>  
        <a href="page-3.html">Page 3</a> 
    </div>  
    
    <script> /* script at bottom of page! */
        $("#nav").on(       /* attach an event listener to #nav */

            "click"         /* the event you're listening for is a click */

           ,"a"             /* but only if it's on an <a> */

           ,function( e ){  /* this function executes whenever you click on #nav a */

                /* this gets the page URL from the <a> href 
                   and specifies you only want the #content div*/
                var ajaxhref = $( this ).attr( "href" ) + "#blogcontent";

                /* this loads the requested content
                   into the #blog div on _this_ page */
                $( "#blog" ).load( ajaxhref );

                /* this stops the hyperlink from actually going to the new page.
                   doing this (instead of removing the hyperlink)
                   allows the menu to still work if javascript is disabled. */
                e.preventDefault();
            }
        );
    </script> 
    <!-- InstanceEndEditable --> 

    <div id="footer">
		<p class="footer-text">©2012 Tegnehulen  <font color: #696933>|</font>  All Rights Reserved<br>
		  Latest Update: maj, 2012  &hearts;  Changelog <a href="changelog.html" target="_blank">tegnehulen.dk</a></p>
    </div>

</div>
</div>

</body>
<!-- InstanceEnd --></html>

**Mejse78** · 05-24-2012, 02:07 PM

MY CSS

Code:

/* CSS Document */

/* Reset */


html, body {margin: 0; padding: 0; border: 0; background: transparent; font-size:10px;}

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, il, 
table, tr, th, td, tbocy, tfoot, thead {
	margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    }

img		{ margin: 0; padding: 0; border: 0; }

table, tr, th, td, tbody, tfoot, thead {
		margin: 0; padding: 0; border: 0; 
        vertical-align: baseline; 
        background: transparent;
        }

table 	{ border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
		margin: 0; padding: 0; border: 0;
        }

article, aside, dialog, figure, footer, header, hgroup, nav, section {
		display: block;}


h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
	font-famely: Verdana,Geneva,sans-serif;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    line-height: 100%; 
    text-indent: 0;
    text-decoration: none; 
    text-aling: left;
    color: #000;
    }


ol, ul { list-style: none; }



/* Global */

html	{ }
body 	{ background-color:#f7f7f5; }
iframe	{ background-color:#FFFFFF; width: 550px; height: 550px; margin-right: auto margin-left: 
 }






/* Headings */

h1, h2, h3, h4, h5, h6 {font-weight: bold; color: #000; }

h1 	{ font-size:25px; color: #a2060d; 
		padding-bottom: 15px; padding-top: 5px;}
h2 	{ font-size:15px; color: #95ae79; padding-top: 10px;}
h3 	{ font-size:12px;  }
h4 	{ font-size:14px; }
h5 	{ font-size:14px; }
h6 	{ font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }







/* Tekst elements */

p			{ color: #91968b; font-size:14px; line-height: 120%; margin-bottom: 2px; }				
p .left	 	{ margin: 1,5 sem 1,5 sem 1,5 sem 0; padding: 0; }
p .right 	{ margin: 1,5 sem 0 1,5 sem 1,5 sem; padding: 0; }

a			{ border: none; }
a:link		{ color: #000; }
a:visited	{ color: #000; }    
a:active	{ color: #000; }
a:focus		{ color: #000; }
a:hover		{ color: #a2060d; }

blockquote	{color: #000; font-size:12px; }

strong		{ font-weight: bold; }
em			{ font-style: italic; }






/* Images */

.image_frame		{ padding: 10px; border: 4px #91968b groove; margin: 5px; }
.image_frame_link	{ padding: 10px; border: 4px #a2060d groove; margin: 0 0 5px 0; }




  
  


/* Containers */

	/* home */

#space			{ height: auto; width: 960px; margin: 20px auto 20px auto; background-color:#FFF; }
.border			{ border: 1px; border-style:outset; border-color:#999}

#paper			{ width: 900px; margin: 20px auto 20px auto; background-color:#FFF }

#fb			{ clear: both; float:right; padding-bottom: 15px; }

#banner			{ padding: 0 0 40px 0;   }
.center			{ margin: 0 auto; }

 
#menu 			{  }
#menu ul		{ padding: 0 0 15px 0px; }

#news			{ clear: right; width: 145px; height: 440px; float:left; padding-right: 25px; padding-left: 25px; padding-top: 20px; 						
					border-top: 1px #a2060d solid; border-right: 1px #95ae79 solid; }


#content		{ 20px; width: 663px; height: 450px; float: right;  border-top: 1px #a2060d solid; padding-top: 20px; padding-left: 40px;}


#deviant-art	{ clear:both; float: left; padding-bottom: 15px; padding-top: 33px;  }

#newsletter		{ clear: both; padding-bottom: 15px;  }

#footer				{ clear: both; padding-top: 15px; border-top: 1px #91968b solid; margin-top: 30px; }	
#footer	 a:link		{ color: #95ae79; padding: 3px; font-style:italic}
#footer	 a:visited	{ color: #95ae79; padding: 3px; font-style:italic}
#footer	 a:hover	{ color: #a2060d; padding: 3px; font-weight: bold;}






	/* blog */

#blog			{ width: 663px; height: auto; float: left; clear: right; border-top: 1px #a2060d solid; padding-top: 20px; padding-left: 40px;}

#blogcontent	{ width: 643px; height: auto; padding-top: 20px; padding-left: 10px; padding-right: 10px;}

#nav		 	{  width: 145px; height: auto; float: right; padding-right: 25px; padding-left: 25px; padding-top: 20px; 						
					border-top: 1px #a2060d solid; border-left: 1px #95ae79 solid; }

	/*blogcontent*/
#blogframe		{ width: 643px; }


	/* referencer*/

#scripts		{ width: 900px; margin: 0px auto 30px auto; padding-top: 40px; border-top: 1px #a2060d solid; }
#scripts h1		{ padding-left: 100px; padding-bottom: 20px; }

#teknisk		{ width: 900px; margin: 0px auto 30px auto; padding-top: 40px;}
#teknisk h1		{ padding-left: 100px; padding-bottom: 20px; }

#grafisk		{ width: 900px; margin: 0px auto 30px auto; padding-top: 40px;}
#grafisk h1		{ padding-left: 100px; padding-bottom: 20px; }

#changelog		{ width: 900px; margin: 0px auto 30px auto; padding-top: 40px;}
#changelog h1	{ padding-left: 100px; padding-bottom: 20px; }

.stext			{ padding-top: 20px; padding-left: 20px; padding-bottom: 20px; padding-right: 20px; }
.simg			{ float: right; margin: 10px 40px 2px 10px; width: 250px; height: 250px; }
.code			{ width: 250px; padding: 5 5; backround-color: #eee; border: 1px #a2060d solid }

#scripts h2, #teknisk h2, #grafisk h2, #changelog h2		{ font-size: 18px; font-weight: bold; color: #a2060d; padding-bottom: 10px; }

#link-inline		{text-align: left; }
#link-inline ul li	{ display: inline; }


	/* changelog */

#changelog						{  width: 860px; margin: 20px auto 20px auto; border-top: 1px #a2060d solid; padding: 20px 20px;}
#changelog p					{ padding-left: 70px; }
#changelog h4					{ text-align: right; padding-bottom: 20px; padding-right: 35px;}
#changelog a:link				{ color: #95ae79; padding: 3px; font-style:italic}
#changelog a:visited			{ color: #95ae79; padding: 3px; font-style:italic}
#changelog a:hover				{ color: #a2060d; padding: 3px; font-weight: bold;}

#changelogcenter				{ width: 520px; margin-left: 170px; margin-right: 190px; }
#changelogcenter h5				{ color: #95ae79; padding: 3px; font-style:italic}
#changelogcenter a name			{ color: #95ae79; padding: 3px; font-style:italic}
#changelogcenter a:link			{ color: #95ae79; padding: 3px; font-style:italic}
#changelogcenter a:visited		{ color: #95ae79; padding: 3px; font-style:italic}
#changelogcenter a:hover		{ color: #a2060d; padding: 3px; font-weight: bold;}


#changelog_1		{ background-color:#95ae79; width: 480px; padding-bottom: 5px; padding-left: 20px; padding-right: 20px; 		
						padding-top: 5px; margin-top: 15px;}
#changelog_1 h1		{ color: #FFF; font-weight:bold; font-size: 18px; padding-bottom: 2px; padding-left: 2px;}
#changelog_1 h2		{ color: #FFF; font-style: italic; font-size: 12px;}
.rounded_1 			{	-webkit-border-radius: 10px 10px 0px 0px;
						-moz-border-radius: 10px 10px 0px 0px;
						border-radius: 10px 10px 0px 0px;}
					
					
#changelog_2			{ background:rgba(238,237,242,0.4); width: 480px; padding-bottom: 5px; padding-left: 20px; padding-right:	
							20px; padding-top: 15px;}
#changelog_2 p			{ color: #000; padding: 3px;}
#changelog_2 a:link		{ color: #a2060d; padding: 3px; font-style:italic}
#changelog_2 a:visited	{ color: #a2060d; padding: 3px; font-style:italic}
#changelog_2 a:hover	{ color: #95ae79; padding: 3px; font-weight: bold;}



#changelog_3			{ height: 11px; background-color:#95ae79; width: 480px; padding-bottom: 0px; padding-left: 20px; padding-right:	
							20px; padding-top: 0px; margin-bottom: 30px; text-align: right;}
#changelog_3 a:link		{ color: #FFF; padding-top: 0px; font-size: 10px; font-style: italic}
#changelog_3 a:visited	{ color: #FFF; padding-top: 0px; font-size: 10px; font-style: italic}
#changelog_3 a:hover	{ color: #FFF; padding-top: 0px; font-size: 10px; font-style: italic}
#changelog_3 p			{ color: #FFF; padding-top: 0px; font-size: 10px; font-style: italic}
.rounded_3 				{	-webkit-border-radius: 0px 0px 10px 10px;
							-moz-border-radius: 0px 0px 10px 10px;
							border-radius: 0px 0px 10px 10px;}



/* Layout extra */

/* Menu */



/* Miscellaneous */


.footer-text		{ font-size: 100%; font-style: italic; text-align: center; }
.date				{ font-size: 10px; font-style: italic; color: #a2060d;  }

AND MY PAGE-1:

Code:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="blogframe">
 <p>This is the content for the page.  
                Other pages have different content.  
                This content will be replaced via ajax, 
                while the rest of the page remains unchanged.</p>
            <p>Every page looks like this, 
                just with different content in their "content" div.</p>

</div>
</body>
</html>