...

View Full Version : Onclick load content into multiple divs



far2many
07-02-2011, 03:01 PM
Hello Guys,

Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java.

What i need to be able to do is..

When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs.

#contentwindow
#three

I already have jquery running on the page and all css is embeded for now if that is helpful.

http://www.bushcottages.co.uk/new.htm

Thanks your help is supremely appreciated
Peter

Fugix
07-02-2011, 05:31 PM
what do you mean exactly by "load" the divs?
If you mean add text or css to them, you can incorporate the .css method or the .html method to an onclick event

far2many
07-02-2011, 07:36 PM
Lets say your on the main menu on the left and click the number link at the top. When you click on it the learning for number skills will appear in the middle box (which is a div called content window). I was hoping to save the content for the content window in a html page called number html. The onclick load or event would look to replace content of the contentwindow by loading in the html page number html. The same click on that link should also pull the content for the right hand side tests, downloads etc.

So when the number link is pressed the middle area and right hand area are loaded into the divs on that page.

Of course if there is a simpler way to do this I am very up for it. The only I know to do this would be to have same content on every page even though a lot of the elements stay the same and would have to be reloaded.

I appreciate your help.
Peter

far2many
07-03-2011, 12:20 PM
Hello,

Wow i have looked at the internet for a full day and no better understanding.

I think my solution lies with something like the following function.

$(selector).load(url,data,callback)

Again when a user clicks on a link the script should locate the page and element and load it into a predetermined element in the host page. Any help would be appreciated - seems like ive stumped people.

Thanks
Peter

jmrker
07-03-2011, 02:55 PM
You're request is a bit unclear to me, so this is my guess.


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>

</head>
<body>
<iframe id="ifname" width="600" height="400"></iframe>
<br>
<button onclick="document.getElementById('ifname').src='http://www.webdeveloper.com'">Webdeveloper</button>
<button onclick="document.getElementById('ifname').src='http://www.codingforums.com'">CodingForums</button>
<button onclick="document.getElementById('ifname').src='http://www.dreamincode.net'">DreamInCode</button>
<button onclick="document.getElementById('ifname').src='http://www.wdroom.com'">WDRoom</button>
</body>
</html>

far2many
07-03-2011, 09:52 PM
I guess that I simply was not clear on my needs and as such did not get the replies i sought - though some great people made an effort to understand me. I have made a test page which should explain what i am after. I am totally stuck with a lack of knowledge to progress my site though from reading i hear an ajax call is needed. I am totally new to javascript and ajax and was hoping to utilise the code from a website.

http://www.bushcottages.co.uk/test.htm

Two days i have searched and no joy sadly. I simply do not know enough to get it working. if i can get this basic example i have mocked up working it would solve all of my problems. All my pages will be on my own webspace no external site.

I swear ill pass out if im shown how to do it :)
Peter

jmrker
07-03-2011, 10:45 PM
Two questions:
Where does the content for the original <div> sections come from
and where does the change text come from when one of the links are clicked?

Is the information within the <div> tag changing or could it be hard-coded
and then change the display with a simple show/hide function

far2many
07-04-2011, 09:34 AM
Hello the original content for the divs will load in the main page (be in the html of the page that initially loads).

There could be a page.htm for each link whereby when you click on it it loads the contents or div from a specific div in page.htm.

Thanks
Peter

jmrker
07-04-2011, 05:25 PM
Hello the original content for the divs will load in the main page (be in the html of the page that initially loads).

There could be a page.htm for each link whereby when you click on it it loads the contents or div from a specific div in page.htm.

Thanks
Peter

AFAIK the only way to show a different page ie, page.htm, is to either:
1. Link to it as a new page
2. Link to it as a replacement page
3. Load into a <frame> or <iframe> (as show in post #5) tag area or multiple areas.

You can load different information into the <div> areas using either
1. Show/Hide techniques with pre-loaded information
2. Using ajax to load information from a text file from the server only.

To go any further, you need to decide which method you wish to persue
and where/what is the information you wish to display when the links are clicked.

far2many
07-04-2011, 08:40 PM
Hello,

I think the ajax solution is what i am looking for. Will it only load in text from a text file. Would it preserve formatting? I would basically like to load a DIV from another page into a div in this page. Would ajax or anything else do this?

Thanks for the replies
Peter

jmrker
07-05-2011, 03:53 AM
Put the following files onto the server (will not work locally)
and make sure the permissions allow access: :D

divTest1.txt file


<h1 style="color:red">Div content 1</h1>
This is the information for the
<em style="color:red"> first </em>div tag.


divTest2.txt file


<h2 style="color:green">Div content 2</h2>
This is the information for the
<em style="color:green"> second </em>div tag.


divTest3.txt file


<h3 style="color:blue">Div content 3</h3>
This is the information for the
<em style="color:blue"> third </em>div tag.


divTest4.txt file


<h4 style="color:orange">Div content 4</h4>
This is the information for the
<em style="color:orange"> fourth </em>div tag.


divTest.html file


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">

<style type="text/css">
.divInfo {
float: left;
width: 200px;
height: 200px;
margin-right: 5px;
border: 2px solid #000066;
}
#div1 { margin-left: 40px; }
.clr { clear:both; }
</style>

<script type="text/javascript">

function el(tid) {return document.getElementById(tid);}

function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;
}

function changeDiv(which) {
switch (which) {
case '1' : el('div1').innerHTML = IO('divTest1.txt'); break;
case '2' : el('div2').innerHTML = IO('divTest2.txt'); break;
case '3' : el('div3').innerHTML = IO('divTest3.txt'); break;
case '4' : el('div4').innerHTML = IO('divTest4.txt'); break;
}
}

function changeAll() {
changeDiv('1'); changeDiv('2'); changeDiv('3'); changeDiv('4');
}
</script>

</head>

<body>
<div id="menu">
<a href="javascript:void(0)" onclick="changeDiv('1')">CHANGE DIV 1 CONT</a> <br>
<a href="javascript:void(0)" onclick="changeDiv('2')">CHANGE DIV 2 CONT</a> <br>
<a href="javascript:void(0)" onclick="changeDiv('3')">CHANGE DIV 3 CONT</a> <br>
<a href="javascript:void(0)" onclick="changeDiv('4')">CHANGE DIV 4 CONT</a>

</div>

<div id="menu2">
<p><a href="javascript:void(0)" onclick="changeAll()">
CHANGE ALL DIV CONTENT WITH THIS ONE CLICK</a>
</p></div>

<div id="div1" class="divInfo"><p>
Div 1 content just some dummy text just some dummy text just some dummy text just some dummy text
</p></div>

<div id="div2" class="divInfo"><p>
Div 2 content just some dummy text just some dummy text just some dummy text just some dummy text
</p></div>

<div id="div3" class="divInfo"><p>

Div 3 content just some dummy text just some dummy text just some dummy text just some dummy text
</p></div>

<div id="div4" class="divInfo"><p>
Div 4 content just some dummy text just some dummy text just some dummy text just some dummy text
</p></div>

<br class="clr">
</body>
</html>

far2many
07-05-2011, 09:49 AM
Wow thanks - that will take some time to assimilate. I appreciate all of your effort there and have thanked you accordingly.

Thanks again - what an effort, astounding.

Peter

jmrker
07-05-2011, 03:11 PM
Wow thanks - that will take some time to assimilate. I appreciate all of your effort there and have thanked you accordingly.

Thanks again - what an effort, astounding.

Peter

You're most welcome.
Happy to help.
Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum