Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    6
    Member #
    47674

    Navigation - slight problem

    Hi!

    I'm just building a new web page and have some slight problem:

    I want the navigation of the web page not to reload the whole page. While checking methods for loading HTML content into a div I found a neat snippet of js code I am trying out now:

    <div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
    <div id ="content"> </div>
    <script>
    function load_home(){
    document.getElementById("content").innerHTML='<obj ect type="text/html" data="home.html" ></object>';
    }
    </script>

    Now this basically works how I want to, however, when it loads the div content from the file, it suddenly seems to put it into a small iframe instead of just replacing the content that I wanted.

    ((That's the snippet I replace with every click of the button, there will be a bigger portion changed eventually, but I wanted to keep it simple for testing:

    <p><strong>Sample text</strong>
    <a href="#" class="image featured"><img src="images/test.png" alt="" /></a>

    ))

    The webpage itself is in html5 with underlined css.

    If I can't get this to work I might have to switch to php with different views, but I'm not sure how much of the template I can keep if I do that ... Pretty sure I'm just missing some added adjective. :P

    Basically I really only want the js to replace the html code in question.

    Appreciate any help!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    Can you show a link to the actual website?
    It would be easier to see what is happening with a real site.
    I don't know what the contents of "home.html" is.


  4. #3
    Junior Member
    Join Date
    Mar 2015
    Posts
    6
    Member #
    47674
    The contents of the home.html (example in this case) is the snippet that I posted. Just trying to change a lil bit for now.

    I don't have FTP access here at the moment, I could try to upload a sample in a couple of hours.

    Also the content of the home.html doesn't seem to matter, no matter what I load in using the js, I get a small ugly window with a scrollbar. :P Maybe the fault is in the css somewhere.

  5. #4
    Junior Member
    Join Date
    Mar 2015
    Posts
    6
    Member #
    47674
    Alright, I uploaded a template of the page to http://rhadan.com/testing/index.html

    By clicking on the "click me" button on the left side, the right side refreshes (or should)

    I think I know the problem by now - I only inserted the snippet that was to be changed in the div, but it seems the complete html loads and it's missing all header and css information. Maybe it's enough to fill that in, but if someone can look at it, I'd of course be happy. Especially the box shape does seem ... strangely out of place.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    Step 1:

    This is optional, but I usually use Google's source of JQuery, so I know it is not corrupt ...

    Replace this line:
    <script src="js/jquery.min.js"></script>

    With this line:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>



    Step 2:

    You can eliminate this:

    <script>
    function load_home(){
    document.getElementById("home").innerHTML='<span data="home.html"></span>';
    }
    </script>


    Step 3:

    Use this for your link:

    <li><a href="#" onclick="$('#home').load('home.html')">CLICK ME!</a></li>



    That should work.


    Final note:
    If you used a PHP script to dynamically generate the content, you could load the PHP script output instead of your static "home.html" page. Doing that, you should start using .php as your file extension (instead of .html). You will have to develop online or create your own webhost server as PHP is "server-side".
    Last edited by mlseim; Mar 09th, 2015 at 05:04 PM.


  7. #6
    Junior Member
    Join Date
    Feb 2015
    Location
    Kildare, Ireland
    Posts
    15
    Member #
    45446
    Liked
    1 times
    Why not just change the link parameter? you have: <li class="current"><a href="#" onclick="load_home()">CLICK ME!</a></li>

    <li class="current"><a href="index.html">CLICK ME!</a></li>

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    I3 .... he doesn't want the whole page to refresh. Using JQuery allows smooth transition to alternate content.


  9. #8
    Junior Member
    Join Date
    Mar 2015
    Posts
    6
    Member #
    47674
    Hi!

    Tried to make the changes, but unfortunately clicking on it does ... nothing (except add a # to the URL). (Yes, I've rechecked the code three times. )

    I must admit the biggest reason for trying to do this without php is that I have zero experience with it. :P Otherwise it seems like the php views would probably be better than loading it with js.

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    Can you make your changes to your test site?
    http://rhadan.com/testing/index.html#

    I see nothing changed there.


  11. #10
    Junior Member
    Join Date
    Mar 2015
    Posts
    6
    Member #
    47674
    I uploaded the new changed version now. And whatta you know, it works! When I open it locally it doesn't ... strange.

    BUT, that being said - thank you very much! Glad it does work, just makes local testing a bit harder, but it's no big ... Gonna do some more work, testing now. Thank you a lot for this!
    Last edited by Rhadan; Mar 12th, 2015 at 04:12 AM.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 03:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com