www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Back Button functionality for AHAH

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31

    resolved [RESOLVED] Back Button functionality for AHAH

    I am building a prototype that is taking advantage of jQuery, AHAH and Video to simulate a TV message application. The purpose of the AHAH is to load pages asynchronously so that it doesn't disrupt the video playback. I have been able to effectively code the navigation so that pressing the up and down arrows allow the user to navigate and enter allows them to select the navigation item from the list. However, I need to program a back button, which would simulate a back button on the TV remote.

    I envision setting the Backspace key as the key that users would hit to reload the previously viewed AHAH page. How would I go about doing it. Below is some code I am using for both AHAH and the key press functionality.

    How would I go about remembering the previous page without refreshing the template that contains the playing video?

    ahah.js
    Code:
    function ahah(url, target, delay) {
      var req;
      document.getElementById(target).innerHTML = 'Loading...';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ahahDone(req, url, target, delay);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ahahDone(req, url, target, delay) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML="ahah error:\n"+req.statusText;
        }
        if (delay != undefined) {
           setTimeout("ahah(url,target,delay)", delay); // resubmit after delay
            //server should ALSO delay before responding
        }
      }
    }
    keypress.js
    Code:
    var currentSelection = 0;
    var currentUrl = '';
    
    google.load("jquery", "1.3.1");
    google.setOnLoadCallback(function()
    {
        // Register keypress events on the whole document
        $(document).keypress(function(e) {
            switch(e.keyCode) { 
                // User pressed "page up" arrow
                case 33:
                    navigate('pgup');
                break;
                // User pressed "page down" arrow
                case 34:
                    navigate('pgdn');
                break;
                // User pressed "back" arrow
                case 8:
                    navigate('back');
                break;
                // User pressed "up" arrow
                case 38:
                    navigate('up');
                break;
                // User pressed "down" arrow
                case 40:
                    navigate('down');
                break;
                // User pressed "enter"
                case 13:
                    if(currentUrl != '') {
                        window.location = currentUrl;
                        //store data using name/value format
                    }
                break;
            }
        });
        
        // Add data to let the hover know which index they have
        for(var i = 0; i < $("#menu ul li a").size(); i++) {
            $("#menu ul li a").eq(i).data("number", i);
        }
        
        // Simulate the "hover" effect with the mouse
        $("#menu ul li a").hover(
            function () {
                currentSelection = $(this).data("number");
                setSelected(currentSelection);
            }, function() {
                $("#menu ul li a").removeClass("itemhover");
                currentUrl = '';
            }
        );
    });
    
    function navigate(direction) {
        // Check if any of the menu items is selected
        if($("#menu ul li .itemhover").size() == 0) {
            currentSelection = -1;
        }
        
        if(direction == 'up' && currentSelection != -1) {
            if(currentSelection != 0) {
                currentSelection--;
            }
        } else if (direction == 'down') {
            if(currentSelection != $("#menu ul li").size() -1) {
                currentSelection++;
            }
        }
        setSelected(currentSelection);
    }
    
    function setSelected(menuitem) {
        $("#menu ul li a").removeClass("itemhover");
        $("#menu ul li a").eq(menuitem).addClass("itemhover");
        currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
    }

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    don't steal the backspace key; that a major UI problem; it's supposed to go to the previous URL. Certain users depend upon this capability to use your site.

    you can uses hashes/named anchors to jump around,
    hide old pages instead of over-writing them,
    use iframes to selectively swap out different sections,
    or use ajax to navigate your site by on-demand injection, instead of different urls.

  3. #3
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31
    Thanks for your reply. I forgot to mention that this prototype is for a focus group, and will not be used as a production web application. It's intended to a simulation of an interactive TV application. Since this is a controlled environment, there's no need to worry about accessibility issues or even browser issues (we're using Firefox and Windows as our test machine for this simulation.)

    The current script works fine, so I don't see any value at the moment in trying out different implementation if it is technically possible to assign the backspace key (or even another key) to navigate back a page.

  4. #4
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579

  5. #5
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31

    resolved

    I also found this [http://yensdesign.com/2008/11/creati...or-navigation/], which essentially accomplishes the goal of managing history. Thanks everyone for your time. I will mark this 'resolved'.

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by abovethefold View Post
    Thanks for your reply. I forgot to mention that this prototype is for a focus group, and will not be used as a production web application. It's intended to a simulation of an interactive TV application. Since this is a controlled environment, there's no need to worry about accessibility issues or even browser issues (we're using Firefox and Windows as our test machine for this simulation.)

    The current script works fine, so I don't see any value at the moment in trying out different implementation if it is technically possible to assign the backspace key (or even another key) to navigate back a page.
    ok, fair enough.
    backspace doesn't trigger keypress, use keydown instead.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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