Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Unhappy Onclick load content into multiple divs

    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

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    103
    Thanks
    0
    Thanked 13 Times in 13 Posts
    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

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    onclick load content into div

    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

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Javascript and Ajax

    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

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Something to try ...

    You're request is a bit unclear to me, so this is my guess.
    Code:
    <!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>

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Exclamation Change multiple Div content

    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

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question More information needed...

    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

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Change content in div ajax/javascript?

    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

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation More information needed...

    Quote Originally Posted by far2many View Post
    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.

  • #10
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Ajax loading content into multiple divs

    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

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Something to try ...

    Put the following files onto the server (will not work locally)
    and make sure the permissions allow access:

    divTest1.txt file
    Code:
    <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
    Code:
    <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
    Code:
    <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
    Code:
    <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
    Code:
    <!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>

  • Users who have thanked jmrker for this post:

    far2many (07-05-2011)

  • #12
    New Coder
    Join Date
    Feb 2011
    Posts
    62
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Geez

    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

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Thumbs up

    Quote Originally Posted by far2many View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •