SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS and PHP fusion failed

    Hi!!!
    ive a problem with dw_scroll files.
    ive put the javascript function into the header and when the php header function is called into the page where are the scrolling layer the layers doesnt work??
    example:

    file1 (ive put here only the related javascript function):

    function draw_header_tag()
    {
    print "<head>\n<title>";
    draw_page_title();
    print "</title>\n";
    theme_draw_style();
    ?><script src="modules/gallery/js/dw_core.js" type="text/javascript"></script>
    <script src="modules/gallery/js/dw_scroll.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    /*
    This code is from Dynamic Web Coding
    at http://www.dyn-web.com/
    Copyright 2001-3 by Sharon Paine
    See Terms of Use at http://www.dyn-web.com/bus/terms.html
    Permission granted to use this code
    as long as this entire notice is included.
    */

    var pgLoaded = false;
    var wndo = new Array(); // "window(s)" for scrollable content
    function initScrLyr() {
    pgLoaded=true;
    // creat scrollable content area
    // arg: id of div containing scrollable div(s)
    wndo[0] = new dynObj('wn');
    // load scrolling content
    // arg's: array number of wndo, id of scroll div
    loadScrLyr(0,'lyr1');

    // remove layers from table for ns6+/mozilla (overflow/clip bug?)
    if (navigator.userAgent.indexOf("Gecko")>-1) {
    for (var i=0; i<wndo.length; i++) {
    if (wndo[i].el.parentNode.id.indexOf("hold")!=-1) {
    var holderId = wndo[i].el.parentNode.id;
    wndo[i].holder = document.getElementById(holderId);
    var scrWn = wndo[i].holder.removeChild(wndo[i].el);
    document.body.appendChild(wndo[i].el);
    wndo[i].css.zIndex = 1000;
    var y = wndo[i].holder.offsetTop;
    var x = wndo[i].holder.offsetLeft;
    wndo[i].shiftTo(x,y);
    }
    }
    }
    }

    // ns6+/mozilla need to reposition layers onresize
    function rePosGecko() {
    for (var i=0; i<wndo.length; i++) {
    var y = wndo[i].holder.offsetTop;
    var x = wndo[i].holder.offsetLeft;
    wndo[i].shiftTo(x,y);
    }
    }

    window.onload = initScrLyr;
    if (navigator.userAgent.indexOf("Gecko")>-1) window.onresize = rePosGecko;
    //-->
    </script>
    <?
    draw_header_code();
    ?>


    file2 (here is the file which call that function):

    <?php
    include_once("core/main.php");
    include_once( "modules/gallery/lang/msg_".check_lang($cfg["core"]["lang"]).".php" );
    include_once("modules/gallery/config.php");
    if( !check_module("gallery") ) die( "module not enabled" );
    $index_page = false;
    $page_name = $lang["GALLERY_TITLE"];
    draw_header();
    theme_draw_centerbox_open( $lang["GALLERY_TITLE"] );
    ?>
    <table bgcolor="#eeeeee" class="main" width="400" align="center" cellspacing="0" cellpadding="6" border="0">
    <tr>
    <td colspan="3"><h1>Scroll with a Gliding Motion OnClick</h1></td>
    </tr>
    <tr>
    <td valign="top" width="222">
    <p>This example positions the scrolling layers in a cell of a centered table.</p>
    <p>Read code comments for more information.</p>
    </td>
    <td valign="top" width="132" height="140">
    <!-- div with id hold is relative positioned layer that contains scrolling layers.
    Note: ns4 needs width and height for table cell to match those of hold div.
    Also valign top! Style spec's for divs in head. -->
    <div id="hold">
    <div id="wn">
    <!-- scrolling layers start here -->
    <div id="lyr1" class="content">
    <!-- The images here are different sizes, so table cell attributes are set to equalize those differences. The table cell height is set equal to the scroll distance per click. -->
    <table bgcolor="#ffffff" width="132" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td height="140" valign="middle" align="center"><img src="modules/gallery/images/heron.gif" width="100" height="100" alt="" border="0"></td>
    </tr>
    <tr>
    <td height="140" valign="middle" align="center"><img src="modules/gallery/images/eagle.gif" width="100" height="100" alt="" border="0"></td>
    </tr>
    <tr>
    <td height="140" valign="middle" align="center"><img src="images/wader.gif" width="100" height="100" alt="" border="0"></td>
    </tr>
    <tr>
    <td height="140" valign="middle" align="center"><img src="modules/gallery/images/balloon.gif" width="106" height="131" alt="" border="0"></td>
    </tr>
    <tr>
    <td height="140" valign="middle" align="center"><img src="modules/gallery/images/smile.gif" width="88" height="88" alt="" border="0"></td>
    </tr>
    </table>
    </div>

    </div>
    <!-- end scrolling layers -->
    </div> <!-- end hold (relative layer) -->
    </td>
    <td>
    <!-- scroll links -->
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!-- arguments for glideUp/glideDown: array number of wndo, scroll distance per click -->
    <td valign="top"><a href="javascript: //" onclick="glideUp(0,140)"><img src="modules/gallery/images/aro-up.gif" width="11" height="18" alt="" border="0"></a></td>
    </tr>
    <tr>
    <td><img src="modules/gallery/images/clear.gif" width="11" height="86" alt="" border="0"></td>
    </tr>
    <tr>
    <td valign="bottom"><a href="javascript: //" onclick="glideDown(0,140)"><img src="modules/gallery/images/aro-dn.gif" width="11" height="18" alt="" border="0"></a></td>
    </tr>
    </table>
    <?
    theme_draw_centerbox_close();
    if ($cfg["gallery"]["rightboxes"])
    {
    draw_footer();
    }
    else
    {
    draw_footer_left_center();
    }
    ?>




    and thats not working!!!(the images appears but the layers wont scroll)
    maybe couse the javascript cant be called indirectly, but the other indirectly called javascript function works???
    any suggestion... thanx in advance
    www.on-lineportal.com
    Last edited by hyperimage; Jan 30, 2004 at 09:20.

  2. #2
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is anyone here?

    still no response???
    ok ill wait!

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not familiar with that scrolling layer script, but why not just use sized DIVs with "overflow:auto" ?
    Code:
    <html>
    <head>
    <style>
    .scrollable {
      position:relative;
      overflow:auto;
      margin:10px 0;
      padding:6px;
      border:1px solid #000;
    }
    #scroller1 {
      width:500px;
      height:200px;
    }
    #scroller2 {
      width:500px;
      height:300px;
    }
    </style>
    </head>
    <body>
    
    <div id='scroller1' class='scrollable'>
    ...
    </div><!-- end scroller1 -->
    
    <div id='scroller2' class='scrollable'>
    ...
    </div><!-- end scroller2 -->
    
    </body>
    </html>

  4. #4
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanx Mike!!!!

    If i live in america ill take private lessons every day from u!!!!
    thanx man it works perfectly!!!

  5. #5
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a question!

    it is possible to have some simply javascript function which make this scroll layer like slide shots that make it scroll by defined height?
    example: when u scroll down it goes automaticly just the height u've inserted before.

    thanx in advance

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, hyperimage.

    For your latest question, I'm not sure if I understand. Look at this demo. Do you want the scrollable DIVs to "float" like the menu in that demo?

    Have a look at the code in that demo to get a feel for the general technique.


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
  •