Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Do I need a JS Array?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #166887
    modiophile
    Participant

    I have about 8 web pages, on each page there are 3 simple buttons: “BACK” “MENU” and “FORWARD” The below is an example of what you would find on PAGE 2…

                    <div>
                        <a href="PAGE1.html" /><img src="leftt-arrow.png" /></a>
                        <a href="MAIN-MENU.html"></a>
                        <a href="PAGE3.html"><img src="right-arrow.png" /></a>
                    </div>
    

    In the real world, despite the 8 webpages being in order, I don’t name the pages with URL names of “PAGE1” “PAGE2” “PAGE3” So it gets confusing when I remove or add a page. For example if I have the following…

                    <div>
                        <a href="apple.html" /><img src="leftt-arrow.png" /></a>
                        <a href="MAIN-MENU.html"></a>
                        <a href="orange.html"><img src="right-arrow.png" /></a>
                    </div>
    

    Now if I replace “orange.html” with “walnut.html” I now have to update multiple pages to reflect this change. Is there an easy way to accomplish with Javascript? I’m probably making this out to be more confusing than it is – I’m sure it is a simple solution. Thank you!

    #166889
    Alen
    Participant

    Please describe your problem in greater detail, as it is now there’s no way we can comprehend it.

    #166890
    modiophile
    Participant

    Sorry Alen, just updated the post. I was hoping for a “Preview Post” function on the new forum, guess not…

    #166891
    Alen
    Participant

    I wouldn’t use JavaScript.

    Are you familiar with any server side languages? Like PHP?

    You could have something like this:

    Your index.php page:

    <html>
    ...
    <body>
    <div>
      <?php require('navigation.php'); ?>
    </div>
    ...
    </html>
    

    Your navigation.php page:

    <div>
      <ul>
        <li><a href="#">menu item</a></li>
      </ul>
    </div>
    
    #166892
    modiophile
    Participant

    Unfortunately I’m not, but I can see how it would be a server side solution. Shoot. What would it be called? A “PHP Array” ?

    #166893
    Alen
    Participant

    JavaScript is executed in the browser, so it’s on the client side. If for any reason JavaScript is disabled, or there is some conflict with other JavaScript code, or if JavaScript simply doesn’t load… all of these will render your page useless.

    To many fail points for me, for such important part of your webpage.

    #166894
    Alen
    Participant
    #166896
    modiophile
    Participant

    Thanks Alen! Very interesting. When I posted this, I was hoping there would be something that functioned like this:

    LOGIC
    [1] walnut.html
    [2] apple.html (BACK)
    [3] orange.html (ACTIVE)
    [4] corn.html (FORWARD)
    [5] grape.html

    ORANGE.HTML

     <div>
                <a href=""><img src="back-button.png" /></a>
                <a href=""><img src="grid.png" /></a>
                <a href=""><img src="forward-button.png" /></a>
        </div>

    Because the logic knows where “orange.html” falls in the stack, it would automatically assign “apple.html” to the back button and “corn.html” to the forward button.

    #166940
    nkrisc
    Participant

    I’d vote for the PHP solution as Alen mentioned. Assuming your navigation will be the same across all pages it’s a very easy solution.

    #166941
    modiophile
    Participant

    Great, I will look into that thanks!

    #166942
    __
    Participant

    I was hoping there would be something that functioned like this

    You can build something more-or-less like that, but you would need to learn the basics of the language first. What @Alen is describing addresses your first problem —having to make changes in multiple scripts. If you include the file, you’ll only ever need to make changes in one script.

    If you want PHP to assign back/active/forward values, the first thing you’ll need to figure out is how to tell php which page is the “active” page. A very common, straightforward way to do this is by setting a variable as a “flag” on the page, before including the php file:

    orange.html

    <?php $currentPage = "orange.html"; ?><!doctype html>
    <html>
        <!--  . . . etc. 
             . . .  -->
    <body>
        <nav><?php include "path/to/nav.php"; ?></nav>
        <!--  . . . etc. 
             . . .  -->
    

    nav.php

    <?php
    // list of pages
    $pages = array(
        0 => "walnut.html",
        1 => "apple.html",
        2 => "orange.hmtl",
        3 => "corn.html",
        4 => "grape.html"
    );
    
    // find current page in your array
    if( isset( $currentPage ) ){
        $current = array_search( $currentPage,$pages );
        $back = $current - 1;
        $next = $current + 1;
    }
    
    // build list of links
    foreach( $pages as $index=>$page ){
        if( $index === $current ){
            $class = ' class="current_page"';
        }
        elseif( $index === $back ){
            $class = ' class="previous_page"';
        }
        elseif( $index === $next ){
            $class = ' class="next_page"';
        }
        else{
            $class = '';
        }
        $menuItem[] = '<li><a>'.$page.'</a></li>';
    }
    $menu = '<ul>'.implode( "\n",$menuItem ).'</ul>';
    

    There’s certainly “more to it” than that, but that’s the basic idea. Give it a try.

    PHP Manual

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.