SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onclick doesn't seem to work without an alert()

    My javascript function below is written to control the visibility of the "next" and "previous" buttons used to page through an image gallery (eg. showing images 1-10 of 50. press next to show 11-20 etc.)

    When I remove the alert("!"); it will no longer hide and show the next/previous buttons as it does with the alert("!"). It does however seems to work OK when I do include the alert("!"), which is a pain as obviously it pops up every time you move to the next page.

    javascript Code:

    Code:
       1.
          <script type="text/javascript"> 
       2.
          function hideShow(x, hv, imgno) {
       3.
              alert("!");
       4.
              if (x == "next" && hv < 8) {
       5.
                  document.getElementById(x).style.visibility="hidden";
       6.
              }
       7.
              if (x == "previous" && imgno <= 9) {
       8.
                  document.getElementById(x).style.visibility="hidden";
       9.
              }
      10.
          }
      11.
          </script>

    Below is the HTML that calls the javascript:

    Code:
    HTML Code:
    <div id="previous" onclick="hideShow('previous',hv,imgno)">
    <a href="#" class="nav_r" onclick="document.location.href='MY_URL'; return false;">Previous</a>
    </div>
    
    <div id="next" onclick="hideShow('next',hv,imgno)">
    <a href="#" class="nav_r" onclick="document.location.href='MY_URL'; return false;">Next</a>
    </div>


    Any help will be greatly appreciated

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you replace the links within the next and previous div's with simply Next and Previous, does it work? I think the anchors are receiving the event and not passing down the onclick to the div.


  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I can do that.
    The URLs I'm using direct the browser to an Oracle stored procedure which returns a set of values that are used to calculate which images should be displayed on the Next or Previous page.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming that the hideShow determines whether the next results should show a next or previous button.

    If so you can do the hideShow within the onclick event on the link.


  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes hideShow(x, hv, imgno) takes in the ID of the div that was clicked (next or previous), then hv is used to work out whether "Previous" should be displayed or not, and imgno does the same for "Next".

    I tried putting the javascript into the onclick event, but unfortunately it just seems to ignore the javascript again.

    I don't think I'm making any mistakes, although I am still pretty new to Javascript. Heres the code:

    HTML Code:
    <a id="previous" href="myURL" onclick="if (imgno <= 9) {
          document.getElementById('previous').style.visibility='hidden';}">Previous</a>
    
    <a id=next"" href="myURL" onclick="if (hv != 0 && hv < 8) {
          document.getElementById('next').style.visibility='hidden';}">Next</a>

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the following work for you?

    Code javascript:
    <a id="previous" href="myURL" onclick="this.style.visibility = (imgno <= 9 ? 'hidden' : ''); return false;">Previous</a>
    <a id=next"" href="myURL" onclick="this.style.visibility = (hv != 0 && hv < 8 ? 'hidden' : ''); return false;">Next</a>


  7. #7
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No sorry, that doesn't seem to work - "Next" and "Previous" still stay visible even when the conditions have been met

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following example works fine for me:

    Code javascript:
    <!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>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var imgno = 5;
                var hv = 5;
            </script>
        </head>
        <body>
     
            <a id="previous" href="http://www.google.co.uk" onclick="this.style.visibility = (imgno <= 9 ? 'hidden' : ''); return false;">Previous</a>
            <a id="next" href="http://www.google.co.uk" onclick="this.style.visibility = (hv != 0 && hv < 8 ? 'hidden' : ''); return false;">Next</a>
     
        </body>
    </html>

    Are you sure imgno and hv are actually numbers?

    If you use the following, it will tell you the type of hv and imgno when you click the links:

    Code javascript:
    <a id="previous" href="http://www.google.co.uk" onclick="alert(typeof(imgno)); this.style.visibility = (imgno <= 9 ? 'hidden' : ''); return false;">Previous</a>
    <a id="next" href="http://www.google.co.uk" onclick="alert(typeof(hv)); this.style.visibility = (hv != 0 && hv < 8 ? 'hidden' : ''); return false;">Next</a>


  9. #9
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops - I'm really sorry I think we lost each-other a couple of posts ago. My initial problem involving the alert() has gone, for which I am very grateful!

    As usual though, a new problem has materialized, and now the Next and Previous links will not disappear when they are supposed to.

    Just as some background information, this code is all part of a web interface for an Oracle database. I believe that the database is working well, and that there are no errors within it. Most of the values used in this area (such as hv and imgno) are calculated via Oracle procedures, which have been thoroughly tested.

    I can't think where the problem could be coming from?

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    put this on your page and click it. It may help show us whats going on.

    Code javascript:
    <a id="next" href="http://www.google.co.uk" onclick="alert('hv: \n\nValue: ' + hv + '\nType: ' + typeof(hv) + '\n\nimgno: \n\nValue: ' + imgno + '\nType: ' + typeof(imgno)); return false;">Test</a>



Bookmarks

Posting Permissions

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