www.webdeveloper.com
Results 1 to 10 of 10

Thread: loading divs not pages

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    5

    loading divs not pages

    I have code to change divs on a main page (stored on an external page) it works for me in Firefox but not in Chrome or IE ... Is it something that I'm missing.... http://www.webdeveloper.com/forum/sh...lick%28link%29 I took the Code from here ....

  2. #2
    Join Date
    Mar 2011
    Posts
    1,135
    The message thread you mention has 8 messages with all kinds of different code in them, so its impossible to know exactly what you've done or what your problem might be. Post your code or post a link to a page where we can see what you're doing.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2013
    Posts
    5
    This is the text that I am using on both pages.... Sorry was meant to post it earlier but my internet was down......



    <div id="movie-1">
    <h2>This is Movie 1</h2>
    <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>


    <div id="movie-2">
    <h2>This is Movie 2</h2>
    <p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
    </div>


    <div id="movie-3">
    <h2>This is Movie 3</h2>
    <p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
    </div>

    ...............................................................................................

    <!DOCTYPE>
    <html>
    <head>
    <title>Simple AJAX Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>

    <body>

    <section id="container">

    <header>
    <h1>Header</h1>
    <nav id="menu">
    <ul>
    <li><a href="movie-1">Movie 1</a></li>
    <li><a href="movie-2">Movie 2</a></li>
    <li><a href="movie-3">Movie 3</a></li>
    </ul>
    </nav>
    </header>


    <section id="content">

    <div id="movie-1">
    <h2>This is Movie 1</h2>
    <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>

    </section>

    <footer>
    <p>Copyright &#169; 2012 Ben HartLenn</p>
    <p>All Rights Reserved</p>
    <footer>

    </section>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

    $('#menu ul li a').click(function(){
    $('#content').load('movies.html #' + $(this).attr('href'));
    return false;
    });

    });
    </script>

    </body>

    </html>

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message
    11-22-2012 10:03 PM #6
    kenub927
    kenub927 is offline Registered User

    Join Date
    Nov 2012
    Posts
    7

    thanks a lot. I'm gonna try that.
    Is there a way to make it fade in and out so it looks a little more dynamic?

    Thanks!

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message
    11-22-2012 10:35 PM #7
    kenub927
    kenub927 is offline Registered User

    Join Date
    Nov 2012
    Posts
    7

    I tried it and it's working. One more thing in addition to the fading. Is there a way to make it that after changing the contents of the div, clicking the back button would go back to the last div?



    thanks again!

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message
    11-23-2012 01:54 AM #8
    WestWeb
    WestWeb is offline Registered User

    Join Date
    Jul 2009
    Posts
    184

    I think there's a way, but I don't have time to test it out right now.

    Generally speaking you would just add a hidden(shown on menu item click) back link to your html somewhere like:

    html:
    Code:

    <a id="back" href="#">Back</a>

    Then hide the #back button at first, because when the page first loads there won't be anywhere to go back to right.

    css:
    Code:

    #back { display: none; }

    Then you would have to modify the script at the bottom to display the back button when you click a menu item, change the back buttons href value, and add a click event to it similar to the menu item .click() event. It would look something like this:

    Code:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    var c = 1; // counter for back button display


    $('#menu ul li a').click(function(){


    $('#content').load('movies.html #' + $(this).attr('href')); // load new div


    if(c == 1)
    {
    $('#back').fadeIn(); // display back button
    c++; // increment var c so back button doesn't try to show every time menu item is clicked
    }

    $('#back').attr('href', $(this).attr('href')); // change href of back button

    return false;
    });

    $('#back').click(function(){
    $('#content').load('movies.html #' + $(this).attr('href'));
    });

    });
    </script>

    This is a completely untested idea, but I think something like this could work out for you.

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message
    11-25-2012 10:48 PM #9
    WestWeb
    WestWeb is offline Registered User

    Join Date
    Jul 2009
    Posts
    184

    I read that again when I wasn't rushing and tired, and I totally messed up a very crucial part of the JQuery script. In my original example the back button would just have the currently viewed movie url in it, not the last viewed movie url. Ugh My bad.

    Should be more like this:
    Code:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    var vis = false;
    var lastUrl;
    $('#menu ul li a').click(function(){
    lastUrl = $('#content .movie').attr('id');

    if(!vis)
    {
    $('#back').fadeIn();
    vis = true;
    }

    $('#back').attr('href', lastUrl);

    $('#content').load('movies.html #' + $(this).attr('href'));


    return false;
    });

    $('#back').click(function(){
    lastUrl = $('#content .movie').attr('id');

    $('#content').load('movies.html #' + $(this).attr('href'));


    $(this).attr('href', lastUrl);


    return false;
    });

    });
    </script>

    Then, going with my example, you would just need to add the .movie class to your content divs like:
    Code:

    <div class="movie" id="movie-2">...

    Keep in mind this is a simple back button, that will go back and forth between last view movie, and the currently viewed movie. If you want to actually make the back button go through a history of viewed movies, I recommend that you do some research on "ajax hash history".

    Last edited by WestWeb; 11-25-2012 at 10:51 PM.

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message
    11-26-2012 06:39 AM #10
    parkerfrank32
    parkerfrank32 is offline Registered User

    Join Date
    Oct 2012
    Posts
    19

    It changes the div contents like you wanted. Its not vertical but you said that making it wouldn't be a problem. Same script
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">

    #tablist{
    padding: 3px 0;
    margin:0;
    font: bold 12px Verdana;
    }

    #tablist li{
    list-style: none;
    margin: 0;
    width:150px;
    }

    #tablist li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    display:block;
    }

    #tablist li a:link, #tablist li a:visited{
    color: #FFF;
    }

    #tablist li a.current{
    background: lightyellow;
    }

    #tabcontentcontainer{
    width: 400px;
    /* Insert Optional Height definition here to give all the content a unified height */
    padding: 5px;
    border: 1px solid black;
    }

    .tabcontent{
    display:none;
    }

    a.tab {
    background:black;
    }

    a.tab:active{
    background:red;
    }
    </style>

    <script type="text/javascript">

    /***********************************************
    * Tab Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]

    ////////Stop editting////////////////

    Cygnis Media

    Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    please clean that up, use code tags, and post only the part that's giving you trouble.
    explanation mixed in with code will cause 90% of us to simply click [BACK]...

  5. #5
    Join Date
    Apr 2013
    Posts
    5

    Whoops Sorry

    This is the code that I used....


    A seperate html page.....


    <div id="movie-1">
    <h2>This is Movie 1</h2>
    <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>


    <div id="movie-2">
    <h2>This is Movie 2</h2>
    <p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
    </div>


    <div id="movie-3">
    <h2>This is Movie 3</h2>
    <p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
    </div>

    ...............................................................................................

    <!DOCTYPE>
    <html>
    <head>
    <title>Simple AJAX Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>

    <body>

    <section id="container">

    <header>
    <h1>Header</h1>
    <nav id="menu">
    <ul>
    <li><a href="movie-1">Movie 1</a></li>
    <li><a href="movie-2">Movie 2</a></li>
    <li><a href="movie-3">Movie 3</a></li>
    </ul>
    </nav>
    </header>


    <section id="content">

    <div id="movie-1">
    <h2>This is Movie 1</h2>
    <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>

    </section>

    <footer>
    <p>Copyright 2012 Ben HartLenn</p>
    <p>All Rights Reserved</p>
    <footer>

    </section>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

    $('#menu ul li a').click(function(){
    $('#content').load('movies.html #' + $(this).attr('href'));
    return false;
    });

    });
    </script>

    </body>

    </html>

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    'movies.html #'

    should be
    'movies.html#'

  7. #7
    Join Date
    Apr 2013
    Posts
    5
    Quote Originally Posted by rnd me View Post
    'movies.html #'

    should be
    'movies.html#'
    This brings up the hole page and not the divs as in 1 by 1

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    index.htm
    Code:
    <!DOCTYPE>
    <html>
    <head>
    <title>Simple AJAX Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <section id="container">
    <header>
    <h1>Header</h1>
    <nav id="menu">
    <ul>
    <li><a href="movie-1">Movie 1</a></li>
    <li><a href="movie-2">Movie 2</a></li>
    <li><a href="movie-3">Movie 3</a></li>
    </ul>
    </nav>
    </header>
    <center>
    <section id="content">
    <h1>info goes here</h1>
    </section>
    </center>
    <footer>
    <p>Copyright  2012 Ben HartLenn</p>
    <p>All Rights Reserved</p>
    </footer>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#menu ul li a').click(function(){
    $('#content').load('movies.htm #' + $(this).attr('href'));
    return false;
    });
    });
    </script>
    </body>
    </html>
    movies.htm
    Code:
    <!DOCTYPE>
    <html>
    <head>
    <title>Movies</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="movie-1">
     <h2>This is Movie 1</h2>
     <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
     </div>
    
    
     <div id="movie-2">
     <h2>This is Movie 2</h2>
     <p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
     </div>
    
    
     <div id="movie-3">
     <h2>This is Movie 3</h2>
     <p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
     </div>
    </body>
    </html>
    live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  9. #9
    Join Date
    Apr 2013
    Posts
    5
    Ok that is the code but I can't get it to work in Chrome for some reason.....

    Any ideas?

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    may be your Chrome is different to mine? )) ----> take a look
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles