Results 1 to 5 of 5

Thread: Featured Content Glider problems

  1. #1
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Featured Content Glider problems

    1) Script Title: Featured Content Glider

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

    3) Describe problem: content fails on reload.
    If you go to the link below, and click MORE , the content loads as expected. However once a user hits reload or returns to the website, all the contents are shown at once.

    http://getjunk5.001webs.com/1.html

    The file being loaded :
    http://getjunk5.001webs.com/1a.html

    ( if you go to the 2nd link, it loads as expected )



    Thank you for your help in advance,
    Brian.
    Last edited by getjunk5; 02-24-2010 at 03:23 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The object tag here is a poor choice because, although standard, support for it isn't all that good yet cross browser. I'd suggest iframe for this. Also, display is not a good property to use when hiding and revealing dynamic content. It often (as in this case) prevents scripts from being able to access in a meaningful way properties of the content that are required for proper functioning.

    So, I'd recommend changing this:

    Code:
    <div id="A" style="display:none;"><br><br>
    
    <object width=650 height=400  data="1a.html "></object>
    
    </div>
    to:

    Code:
    <div id="A" style="visibility:hidden;"><br><br>
    
    <iframe src="1a.html" width="650" height="400" scrolling="auto" frameborder="0"></iframe>
    </div>
    And changing the code of your hide_show.js file from:

    Code:
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    to:

    Code:
    function HideContent(d) {
    document.getElementById(d).style.visibility = "hidden";
    }
    function ShowContent(d) {
    document.getElementById(d).style.visibility = "visible";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.visibility == "hidden") { document.getElementById(d).style.visibility = "visible"; }
    else { document.getElementById(d).style.visibility = "hidden"; }
    }
    - John
    ________________________

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

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

    getjunk5 (02-19-2010)

  4. #3
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the quick response. I have made the corrections, and they work very well. Once again thank you for your exceptional advice.
    Brian.

    ** edit **

    I have noticed a slight issue with the new code. Would it be possible if the hidden content to not take up any room in the page until "MORE" is clicked on? My purpose is to save space, and only show things when/if needed. Thank you in advance,
    Brian.
    Last edited by getjunk5; 02-19-2010 at 07:41 AM.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    OK, well what you want to do is position it outside the flow of the page, that would be absolute. And, since you aren't using the HideContent or ShowContent functions, we can get rid of them. So we would be left with (modified and formatted to my current style of formatting):

    Code:
    function ReverseDisplay(d){
    	d = document.getElementById(d).style;
    	if(d.visibility === 'hidden'){
    		d.visibility = 'visible';
    		d.position = 'static';
    	}
    	else{
    		d.visibility = 'hidden';
    		d.position = 'absolute';
    	}
    }
    All that remains is to add the absolute position to the element in the markup:

    Code:
    <div id="A" style="visibility:hidden;position:absolute;"><br><br>
    
    <iframe src="1a.html" width="650" height="400" scrolling="auto" frameborder="0"></iframe>
    </div>
    - John
    ________________________

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

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

    getjunk5 (02-22-2010)

  7. #5
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks, the fix worked perfectly.

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
  •