Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Text and Image Crawler Expanding Table

  1. #1
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Text and Image Crawler Expanding Table

    1) Script Title: Text and Image Crawler

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

    3) Describe problem: What a great script! Just working on the finishing touches. I have my script set for a width of 748 within a tablet that has a width of 750. The script scrolls through 5-7 photos and works well. When the page loads; however, the script pushes the table to 100% of the sceen width until the page completely loads. On broadband this is only seen as a quick "jumping" of the table from full size and then back to 748 where it should be. On dialup this is more evident. Any work arounds? know that tables and really complicate things!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes, avoid tables around this script's division if at all possible.

    If you want more help, please tell me what browser(s) this problem is seen in and provide a link to a page where the problem can be observed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply.

    I am using IE8; however I hear it happens in other browers.

    http://www.crivitzrescue.com/newsite/

    This is a test build of the site. You can see when your script is loading, brief, the table expands to 100% and then after loading goes back the way it should be.


    Also, is there anything build into the script that would allow me to display a static image in place of the script in the event the person doesn't have JAVA?


    Thanks again!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Not really happening in Firefox or Opera here, but that's probably because those browsers are capable of initializing the crawler sooner. IE 8 can too, but only when it's in IE 8 standards mode (your lack of a valid URL DOCTYPE, and perhaps your markup, throw IE 8 into Quirks mode). But that isn't so critical because IE 7 and less will still have to wait (if a table is involved) for page load, otherwise they will give an error.

    Here's what I would suggest, killing two birds with one stone, place this in the head of the page:

    Code:
    <style type="text/css">
    #mycrawler2 {
     width: 750px;
     overflow: auto;
     white-space: nowrap;
    }
    </style>
    What this should do is limit the width of the crawler to the width it will be until the script sets it. And for non-javascript enabled users, they will see all of the images, but restricted to that same width, with a horizontal scrollbar for that division which allows them to scroll it to see the other images.

    Some additional tweaks may be required.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In my previous post I outlined the basic concept here but mentioned that additional tweaks may be required. Use this (highlighted) instead:

    Code:
    <title>Crivitz Rescue Squad, Inc.</title>
    <style type="text/css">
    #mycrawler2 {
     width: 750px;
     height: 195px;
     overflow: auto;
     white-space: nowrap;
     padding: 2px 0;
    }
    #mycrawler2 img {
     vertical-align: top;
    }
    </style>
    <script type="text/javascript">
    document.write('<style type="text/css">#mycrawler2 {height: 180px;}<\/style>');
    </script>
    <script type="text/javascript" src="crawler.js">
    /*
    Text and/or Image Crawler Script 2009 John Davenport Scheuer
    as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
    This Notice Must Remain for Legal Use
    */
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank You!

    Thank you very much! I tried the first snippet and that corrected the issue, then I added the code from the second... I didn't notice any additional improvments; however you would know best.

    Thanks again for the quick responses.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The second version is just better for non-javascript enabled users. With javascript enabled you shouldn't notice any real difference in the two versions.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I should also mention that there are a few crucial values in this bit that may have to be changed if you change your crawler:

    Code:
    <style type="text/css">
    #mycrawler2 {
     width: 750px;
     height: 195px;
     overflow: auto;
     white-space: nowrap;
     padding: 2px 0;
    }
    #mycrawler2 img {
     vertical-align: top;
    }
    </style>
    <script type="text/javascript">
    document.write('<style type="text/css">#mycrawler2 {height: 180px;}<\/style>');
    </script>
    The width should be the width set in the crawler's initialization. The first height should be the height set in the crawler's initialization plus 15 (or possibly slightly more or less, you would have to view in a non-javascript enabled browser, preferably IE 7 or 8, as that is where this height would be most crucial, too little and non-javascript users will see a vertical scroll bar, too much and the page will have too much added height with javascript disabled). IE 8 can easily have javascript turned off, hit the F12 key, then choose 'Disable' from the menu, and 'Script' from the drop down (to re-enable script later just make the same menu choices again). The padding should be the padding set in the crawler's init, and the second height should be the crawler's height set in its init.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I understand. When I add my images, there are more that what fit within the table width so I also get horizontal scrollbars.

    Since the div class="marquee" tag with the images is outside of the script tag I cannot use <noscript> to have alternative content when JAVA is not present.

    Is there a way to completly disable/hide your script and images if JAVA is not present and use <noscript> for alternative content?


    Thanks!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Not counting whatever the normal scrollbar(s) for the window are, there should only be a horizontal scrollbar below the images, and only if javascript is not available. It is possible that IE may make a brief horizontal bar even with javascript enabled, to avoid that add (highlighted):

    Code:
    <style type="text/css">
    #mycrawler2 {
     width: 750px;
     height: 195px;
     overflow: auto;
     white-space: nowrap;
     padding: 2px 0;
    }
    #mycrawler2 img {
     vertical-align: top;
    }
    </style>
    <script type="text/javascript">
    document.write('<style type="text/css">#mycrawler2 {overflow: hidden; height: 180px;}<\/style>');
    </script>
    Now it is my understanding that if javascript is not available that it would be nice to have all of the images displayed in the same position and width, but with a horizontal scrollbar. And that is just what will happen. But if you would prefer to make up your own noscript content, we can do something else:

    Code:
    <style type="text/css">
    #mycrawler2 {
     width: 750px;
     height: 195px;
     overflow: auto;
     white-space: nowrap;
     padding: 2px 0;
     display: none;
    }
    #mycrawler2 img {
     vertical-align: top;
    }
    </style>
    <script type="text/javascript">
    document.write('<style type="text/css">#mycrawler2 {display: block; overflow: hidden; height: 180px;}<\/style>');
    </script>
    This should make the crawler invisible for non-javascript enabled browsers, allowing you to place a <noscript></noscript> tag either immediately before or immediately after the mycrawler2 division. You may place your non-javascript content in the noscript tag.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •