Resolved avoid the page to "jump" [Archive]

View Full Version : Resolved 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 (http://api.jquery.com/jQuery.get/) or maybe more like this .load() (http://api.jquery.com/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:

<!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 :D
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 :D

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?

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>


<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" />






<script type="text/javascript">

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



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


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


</head>

<body>

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


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


<div id="blog">

<div id="blogcontent">
<p>afækshdæasdkfhædfhk
Dette er blog</p></div>

</div>




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


<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>
</html>

Mejse78

05-24-2012, 02:07 PM

MY CSS

/* 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:

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

traq

05-24-2012, 02:45 PM

do you have the page published online (or could you)? If you could provide a link, it would be much easier to troubleshoot.

ApacheTech

05-24-2012, 10:40 PM

I'm not sure how you'd do it in PHP; but in ASP.NET, all you'd need to do is add the line EnablePartialPageRefresh = "true" to your ScriptManager. Then each UpdatePanel would refresh independently of each other and of the page as a whole.

If anyone knows how to emulate this in PHP, it would solve your problem completely.

Mejse78

05-25-2012, 09:22 AM

I have it here:
test (http://tegnehulen.dk/blog.html)

Thanks for checking it out.
☼

Mejse78

05-25-2012, 01:48 PM

traq

05-26-2012, 05:02 AM

Your page includes a <script> named "noconflict.js":
jQuery.noConflict();
var $j = jQuery; basically, it tells jQuery not to use the variable name $, and to use $j instead. This might not be your only problem, but it does break things.

You'll need to do one of two things (not both):

1. remove the "noconflict" script. I don't see anything on this page that doing this would cause problems with, but you never know... presumably, that script was added for some reason.

2. change the script I offered to use $j instead of $. You might do this with your other jQuery scripts on the page (which don't seem to be working, either).

Mejse78

05-26-2012, 10:12 AM

Of cause this is the problem! I actually thought about it for two secounds yesterday - but lost it again!

You are a lifesavior!
THANKS

☼

Mejse78

05-31-2012, 03:26 PM

I'm reffering to your help in this post on my webpage.
:)