Skip to content
View in the app

A better way to browse. Learn more.
Thailand News and Discussion Forum | ASEANNOW

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Website Design. Help Needed.

coalminer
coalminer
in IT and Computers

Featured Replies

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

frames

and separately - make your main page - index.html

Edited by upena

  • Author
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.

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.

Edited by d0ndela

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

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

  • Author
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.

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

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
Go to topic listing

Recently Browsing 0

  • No registered users viewing this page.

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.