Jump to content

Website Design. Help Needed.

coalminer

By coalminer
in IT and Computers

 Share

Recommended Posts

coalminer Silver Member

coalminer

Posted
Posted

Hi,

I have been trying to find a solution to this problem for a few day's now, but I cannot find a way how to do it.

I have a main webpage named "family.html" with a menu and an open space which will be changed very rarely.

Something like this:

post-10254-1253071192_thumb.jpg

I have also several other webpages named "father.html. mother.html, son.html, daughter.html, etc." which will change almost every week

I would like that on selection of a menuitem, the corresponding webpage ("father.html. mother.html, son.html, daughter.html, etc.") shall be loaded into the open space in the main webpage without the need to relaod the whole webpage every time.

How can this be done?

TIA

coalminer Silver Member

coalminer

Posted
  • Author
Posted
frames

and separately - make your main page - index.html

Can you give a HTML Programmng example?

For example: the menuitems look like this:

<a href="father.html"> Father</a>

<a href="mother.html"> Mother</a>

<a href="son.html"> Son</a>

<a href="daughter.html"> Daughter</a>

The Frames would be like this:

<iframe name="F1" src="father.html"</iframe>

<iframe name="F2" src="mother.html"</iframe>

<iframe name="F3" src="son.html"</iframe>

<iframe name="F4" src="daughter.html"</iframe>

But if I select a menuitem, the corresponding file is opened in a new webpage without the main page.

coalminer Silver Member

coalminer

Posted
  • Author
Posted
you need to use the target attribute for the <a> tag. You only need one iframe, make the target of all the menu links that iframe.

Thanks, it works.

In case someone needs the HTML Code, here it is:

<a href="father.html" target="I1">Father</a>

<a href="mother.html" target="I1">Mother</a>

<a href="son.html" target="I1">Son</a>

<a href="daughter.html" target="I1">Daughter</a>

<iframe name="I1">/iframe>

Remix4 Explorer Member

Remix4

Posted
Posted
you need to use the target attribute for the <a> tag. You only need one iframe, make the target of all the menu links that iframe.

Thanks, it works.

In case someone needs the HTML Code, here it is:

<a href="father.html" target="I1">Father</a>

<a href="mother.html" target="I1">Mother</a>

<a href="son.html" target="I1">Son</a>

<a href="daughter.html" target="I1">Daughter</a>

<iframe name="I1">/iframe>

Alternative - if you dont want to use iFrames - using jQuery and AJAX:

Add the jQuery library and corresponding code between the <head></head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var hash = window.location.hash.substr(1);

var href = $('#nav li a').each(function(){

var href = $(this).attr('href');

if(hash==href.substr(0,href.length-5)){

var toLoad = hash+'.html #content';

$('#content').load(toLoad)

}

});

$('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content';

$('#content').hide('fast',loadContent);

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

function loadContent() {

$('#content').load(toLoad,'',showNewContent())

}

function showNewContent() {

$('#content').show('normal');

}

return false;

});

});

</script>

Then use the following HTML code for the navigation and where you want the content to appear:

<ul id="nav">

<li><a href="father.html">father</a></li>

<li><a href="mother.html">mother</a></li>

<li><a href="son.html">son</a></li>

<li><a href="daughter.html">daughter</a></li>

</ul>

<div id="content">

HERE CAN ADD DEFAULT CONTENT

</div>

Wrap the content on the other pages that you would like to appear also with <div id="content"></div> tags.

benefits of this method are:

- you can selectively call in content as opposed to the entire page

- If anyone bookmarks a specific link then the correct content will appear when they open the page

- zero issues with search engines indexing the pages

coalminer Silver Member

coalminer

Posted
  • Author
Posted
Alternative - if you dont want to use iFrames - using jQuery and AJAX:

Thanks for the reply and the example Code.

While there can be many benefits in using the given method, I doubt that it will work with users like myself who have turned JavaScript off in their browser. And for a very good reason.

I remember to have seen a Javasvript solution somewhere which didn;t needed to jump to another website (ajax.googleapis.com).

But I can't find it back now.

Anyway, I will save this thread for the day I want to try something else.

Remix4 Explorer Member

Remix4

Posted
Posted
Alternative - if you dont want to use iFrames - using jQuery and AJAX:

Thanks for the reply and the example Code.

While there can be many benefits in using the given method, I doubt that it will work with users like myself who have turned JavaScript off in their browser. And for a very good reason.

I remember to have seen a Javasvript solution somewhere which didn;t needed to jump to another website (ajax.googleapis.com).

But I can't find it back now.

Anyway, I will save this thread for the day I want to try something else.

Correct - if javascript is disabled then the AJAX call will of course fail. However, the advantage of jQuery is that there is no inline javascript and the links will still work as normal

Tatsujin Platinum Member

Tatsujin

Posted
Posted

If you can use the .php extension instead of .htm(l), then you'd be better off using PHP includes. Frames are very outdated now and there are much easier and quicker ways of producing a 'site' like your own.

Easier if I talk to you directly, so give me a PM if you want to find out more.

Chris

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.



ASEANNOW

ASEANNOW (formerly Thai Visa) Thailand's oldest and most popular forum for expats and foreigners.

Sign up today and have your say

MORE INFO

POPULAR AREAS

CONTACT US

219/59 Asoke Towers, 15th Floor, Soi Sukhumvit 21, Watthana, Bangkok 10110
(+66) 99 196 1100
[email protected]

×
×
  • Create New...