Results 1 to 5 of 5

Thread: rss pausing scroller problem

  1. #1
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default rss pausing scroller problem

    Greetings,
    I have been using the rss pausing scroller to display some newsfeeds on my website. It works fine..however I have attempted to put the scroller into a table with an id that is used to hide/unhide it by a user click.

    when I do this it only works if I have the scroller visible when the page loads.
    I would like to have it hidden on load.

    Is this a problem that can be solved by changing th JS for the scroller ?

    Any suggestions would be appreciated.

    You can see the working site at
    http://ronbigus.com/

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    No. At least I don't think so. If it is, it would be a more difficult way of dealing with the situation.

    Try this out (tested, works in a local mock up) -

    Add this highlighted style rule here (on ronbigus.com/index.php, or it's include that produces the on page style code shown, or anywhere that it will be used by the page):

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/basicpage.css" type="text/css" />
    
    <style type="text/css">
    
    .tickertable, .tickertable * {
    	visibility: hidden;
    	position: absolute;
    }
    
    #hintbox{ /*CSS for pop up hint box */
    position:absolute;
    top: 0; . . .
    Add this script or put its function somewhere that's associated with the page:

    Code:
     . . . yle5 {color: #000000}
    .style7 {color: #000000; font-weight: bold; }
    </style>
    
    <script type="text/javascript" src="Scripts/helptools.js"></script>
    <script type="text/javascript">
    function toggle_ticker(){
    	var ticker = document.getElementById('ticker');
    	ticker.className = ticker.className === 'tickertable'? '' : 'tickertable';
    }
    </script>
    <script type="text/javascript" src="Scripts/calendarDateInput.js"></script>
    <style type="text/css">
    #ticker td{
    margin-left:5px;
    }
    #pscrolle . . .
    Change this section as shown (add/change the highlighted, get rid of the red - scroll the code block to see the red part):

    Code:
    <center class="style5"><a href="#" onclick="toggle_ticker(); return false;">Click here hide/show Real Estate News Ticker</a></center>
    <table class="tickertable" width="900" border="2" cellspacing="0" cellpadding="0" align="center" id="ticker" style="visibility:none">
      <tr >
        <th width="300">CNN RE NEWS</th>
        <th width="300" >FOX WALLSTREET</th>
        <th width="300">WSJ Real Estate Ind NEWS</th>
    
      </tr>
      <tr>
        <td><script type="text/javascript">new rsspausescroller("cnn", "pscroller1", "rssclass", 3000, "_new","date"); </script></td>
        <td><script type="text/javascript">new rsspausescroller("foxrnews", "pscroller3", "rssclass", 3000, "_new", "date");</script></td>
        <td><script type="text/javascript">new rsspausescroller("wallst", "pscroller2", "rssclass", 3000, "_new","date"); </script></td>
      </tr>
    </table>
    That's it!

    Notes: Using display: none; to initially hide something that initially has its dimensions calculated via javascript makes that act impossible. Using visibility: hidden; does not, but it leaves a blank spot. By also setting the position to absolute, we remove the blank spot. Ordinarily this only needs to be done for the container (.tickertable in the updated style/code/markup). But for some reason I needed to include the children (.tickertable, .tickertable *) in this as well to get it to work. I didn't bother finding out why. It works, so no big deal.
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Tried changes

    Thanks for the suggestions.... I tried the changes
    you can see the results at http://ronbigus.com/index1.php

    as you can see it doesn't quite do what I need. The table gest lost and the position absolute seems to put me at o,o...but only 1 scrollers data is shown and that is without the css being applied.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I was like - "What is this person, nuts or something?" But then I checked in IE 7 (which is on its way out BTW, but still used by a fair number of people). It did exactly what you said. It's fine in all other browsers, including IE 8 and up.

    Without harming those, IE 7 and less can be fixed by changing the added style I gave you to:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/basicpage.css" type="text/css" />
    
    <style type="text/css">
    
    .tickertable {
    	visibility: hidden;
    	position: absolute;
    }
    
    .tickertable * {
    	visibility: hidden;
    }
    
    #hintbox{ /*CSS for pop up hint box */
    position:absolute;
    top: 0; . . .
    And by changing the scripted function for the toggle to:

    Code:
     . . . yle5 {color: #000000}
    .style7 {color: #000000; font-weight: bold; }
    </style>
    
    <script type="text/javascript" src="Scripts/helptools.js"></script>
    <script type="text/javascript">
    function toggle_ticker(){
    	var ticker = document.getElementById('ticker'); 
    	if(toggle_ticker.ie7 && ticker.className !== 'tickertable'){
    		ticker.style.display = 'none';
    	}
    	ticker.className = ticker.className === 'tickertable'? '' : 'tickertable';
    	if(ticker.style.display === 'none'){
    		ticker.style.display = '';
    	}
    }
    /*@cc_on @*/
    /*@if(@_jscript_version >= 5)
    toggle_ticker.ie7 = (function(){
    	var ua = /MSIE (\d+)/.exec(navigator.userAgent);
    	return ua && ua[1] < 8;
    })();
    @end @*/
    </script>
    <script type="text/javascript" src="Scripts/calendarDateInput.js"></script>
    <style type="text/css">
    #ticker td{
    margin-left:5px;
    }
    #pscrolle . . .
    Note: In all others there isn't that brief double image or whatever it is when the scrollers return. The way it was before they all did. Now only IE less than 8 will. If I can figure out how to fix that, I'll let you know.

    Edit: I found a way, the above code now reflects it.
    Last edited by jscheuer1; 06-06-2011 at 01:49 PM. Reason: found way to avoid 'double image' in IE 7 and less
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    pcb-beachbum (06-09-2011)

  6. #5
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Wow !!! It Works

    Thanks a Million.

    Now that you took care of the hard part....there is a little situation in the Middle east...

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
  •