Results 1 to 10 of 10

Thread: [DHTML] Extended Scrollable Content Window (Based On Scrollable Content II)

  1. #1
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default [DHTML] Extended Scrollable Content Window (Based On Scrollable Content II)

    1) CODE TITLE: Scrollable Content III

    2) AUTHOR NAME/NOTES: Rick Phillips

    3) DESCRIPTION: Multiple scrollable content windows with options

    4) URL TO CODE: http://2ndmind.com/scw
    Last edited by ruuk; 03-29-2007 at 09:27 PM.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Looks like a good script to me.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    I alos like the script, although I fell there should be one modification to it. You should add an "onclick" attribute with a value of "return false" to the up and down arrows (the ones that you can mouseover and the script slides the content). Other than that, good work.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  4. #4
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks. I added the onClick="return false".

  5. #5
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the great script!

    I am receiving an error message from firebug.
    Code:
    this.crossobj has no properties
    moveupp()
    control("up")
    onmouseover(mouseover clientX=0, clientY=0)
    var topint = parseInt (this.crossobj.style.top)
    Any idea what this could be related to? I think it may be getting confused with the slideshow lower on the page.

    Thankyou very much for your time and effort!

  6. #6
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm not sure what you are showing me in the code box there. I haven't used firebug before (but thanks for bringing it to my attention, it looks useful =] )
    Are you showing me the error message?

    This is the only line that is directly in the script:
    Code:
    var topint = parseInt (this.crossobj.style.top)
    If this refers to the object function within the script it should be moveup()
    Code:
    moveupp()
    This is definitely from somewhere else.
    Code:
    onmouseover(mouseover clientX=0, clientY=0)
    In any case I think I need more info about what you are doing. Perhaps a sample of some of the code would help.

    There shouldn't be any conflict with another script as the whole thing is done as an object, and all the variables and functions are internal.

  7. #7
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply!

    Essentially I am able to get your script to run when it is the only script on the page. When I run a slideshow component then the scrolling on mouseover stops.

    You can see an example of it here:
    http://www.site.3ozproductions.com/i...=76&Itemid=147

    Firebug which is a great tool gave me this error message. I added the extra "p" to be sure the function was not being used elsewhere on the page.

    I am not sure why the scripts are conflicting. I am new to javascript but very willing to learn

    Thanks again!

  8. #8
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is the code in the header that I am using:
    Code:
    <link href="/templates/3oz_sitesol/css/scw.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/templates/3oz_sitesol/scripts/scrollablecontent.js"></script>
    
    <script type="text/javascript">
    scw1 = new SCWindow("scw1",400,100);
    </script>

    Here is the HTML that I am using: Perhaps I have some dimensions wrong


    Code:
    <script type="text/javascript">scw1.startblock()</script>
    
    <div id="scw3container" class="scwd1" style="width: 500px; height: 200px;"> <!-- dimensions of the outer box -->
    <div id="scw3content2" class="scwd2" style="width: 100px; left: 0pt; top: 0px;">
    <div id="scw3content" class="scwd3" style="width: 296px; clip: rect(0pt, 0pt, 100px, 100px); height: 124px;"><!-- this is the width of the text -->
    <!--INSERT CONTENT HERE-->
    Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
    lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
    END OF THEN CONTENT!!!!!!!
    <!--END CONTENT-->
          
    <script type="text/javascript">scw1.endblock()</script>
    </div>
    </div>
    </div>
    </td></tr>
    <tr><td>
          <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>
    <div id="scw3scroll" class="scwscrollcontrol">
    </td></tr>
    
    <script type="text/javascript">scw1.endblock()</script>
    <script type="text/javascript">
    function start(){
    scw1.initialize()
    }
    window.onload=start
    </script>
    I do not believe I made any changes to the scrollablecontent.js file

    Thanks for your time!

  9. #9
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This part looks fine:
    Code:
    <link href="/templates/3oz_sitesol/css/scw.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/templates/3oz_sitesol/scripts/scrollablecontent.js"></script>
    
    <script type="text/javascript">
    scw1 = new SCWindow("scw1",400,100);
    </script>

    Code:
    <script type="text/javascript">scw1.startblock()</script>
    I'm not sure why this is here.
    Code:
    <div id="scw3container" class="scwd1" style="width: 500px; height: 200px;"> <!-- dimensions of the outer box -->
    <div id="scw3content2" class="scwd2" style="width: 100px; left: 0pt; top: 0px;">
    <div id="scw3content" class="scwd3" style="width: 296px; clip: rect(0pt, 0pt, 100px, 100px); height: 124px;"><!-- this is the width of the text -->
    Code:
    <!--INSERT CONTENT HERE-->
    Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
    lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
    END OF THEN CONTENT!!!!!!!
    <!--END CONTENT-->
          
    <script type="text/javascript">scw1.endblock()</script>
    And these can go if you lose the other divs
    Code:
    </div>
    </div>
    </div>
    Code:
    </td></tr>
    <tr><td>
          <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>
    
    </td></tr>
    This can go.
    Code:
    <script type="text/javascript">scw1.endblock()</script>
    Code:
    <script type="text/javascript">
    function start(){
    scw1.initialize()
    }
    window.onload=start
    </script>
    So if you remove that stuff is should look like this:
    Code:
    <script type="text/javascript">scw1.startblock()</script>
    <!--INSERT CONTENT HERE-->
    Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
    lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
    END OF THEN CONTENT!!!!!!!
    <!--END CONTENT-->
          
    <script type="text/javascript">scw1.endblock()</script>
    </td></tr>
    <tr><td>
          <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>
    </td></tr>
    <script type="text/javascript">
    function start(){
    scw1.initialize()
    fpssinit()
    }
    window.onload=start
    </script>
    In the end though what is stopping it from working is conflicting window.onload functions.
    Only the last defined onload function will work.
    If you notice I added fpssinit() in the start() function at the end. If you put all onload functions in the start function, they can all be called when 'start' is called in the onload. Then remove the following line from the end of mod_fpslideshow.js
    Code:
    window.onload = fpssinit;
    Hope that helps. Let me know if you need more help.

  10. #10
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You my friend are a genius!!!

    Thank you so much for your help. It is all working now!

    I still have some cleanup but I now know I can get to where I need to be by tomorrow morning.

    When I comment out the window.onload = fpssinit; the other scripts that I had tried now work in IE. I am not entirely sure why but I am excited to really start learning JavaScript. Can you recommend a good book?

    One interesting thing is the the module will periodically rewrite the file. Effectively removing the comments that I made. I can follow up with the slideshow maker.

    Thanks Again!!!!!

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
  •