Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Exclamation Link preview show/hide div,iframe

    Hello codingforums,

    There are various widgets and plugins that show link preview via tooltip or iframe,
    So as I am trying to continuously improve web sites experience with new trends and web

    functionalities - thus it come the task for uniform link preview via div and iframe.
    This is the script that use attribute id's but for the complete solution it would be required to

    display link within event 'this' or something -any suggestions and help are very appreciated.

    Thanks
    Code:
            <script type="text/javascript">
            function toggleDiv(divid){
                var div = document.getElementById(divid);
                div.style.display = div.style.display == 'block' ? 'none' : 'block';
                }
        </script>
    
        <div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle 
    Panel 1</a></div>
        <div id="panel1" class="panel">
            <h2>Panel 1</h2>
            This panel contains text
        </div>
        <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle 
    Panel 2</a></div>
        <div id="panel2" class="panel" style="display:block;">
            <h2>Panel 2</h2>
            This panel contains external url content
    <iframe src="http://" width="100%" heigth="500"></iframe>
        </div>
    <div id="panel1" class="panel">
    <h2>Panel 1</h2>
    This panel starts closed because style='display:none' is defined in
    the style section of the head
    </div>
    <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle
    Panel 2</a></div>
    <div id="panel2" class="panel" style="display:block;">
    <h2>Panel 1</h2>
    This panel starts open because of style='display:block'
    </div>
    <a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel

    1</a>
    [/CODE]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    ??? Is this what you mean???

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function toggleDiv(toggler)
    {
       var node = toggler.parentNode;
       while ( node.tagName.toLowerCase() != "div" )
       {
           node = node.parentNode;
           if ( node == null ) return; // ??? error!!!
       }
       var divs = node.getElementsByTagName("div");
       for ( var d = 0; d < divs.length; ++d )
       {
           var div = divs[d];
           if ( div.className == "panel" )
           {
                div.style.display = div.style.display == 'block' ? 'none' : 'block';
                return;
           }
       }
    }
    function addToggles( )
    {
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            if ( divs[d].className == "toggle" )
            {
                divs[d].onclick = function() { toggleDiv(this); };
            }
        }
    }
    window.onload = addToggles;
    </script>
    <style type="text/css">
    div.toggle {
        position: relative;
        width: 150px; height: 25px;
        border: solid red 1px;
        background-color: pink;
    }
    div.panel {
        display: none;
        position: relative;
        width: 700px; height: 200px;
        border: solid blue 2px;
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <div>
        <div class="toggle">Toggle Panel 1</div>
        <div class="panel">
            <h2>Panel 1</h2>
            This panel contains text
        </div>
    </div>
    <div>
        <div class="toggle">Toggle Panel 2</div>
        <div class="panel">
            <h2>Panel 2</h2>
            More text...
        </div>
    </div>
    <div>
        <div class="toggle">Toggle Panel 3</div>
        <div class="panel">
            <h2>Panel 3</h2>
            And still more...
        </div>
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    n381 (09-08-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Specific script

    Hello again, and thank you for messaging here,
    I've tried your script but, due the specific script I am adopting only the following snippet works and add iframe functionality to each file list iframe
    [CODE]
    <script type="text/javascript">
    function HideFrame(){
    fr = document.getElementById ("frDocViewer");
    if (fr.style.display!='none'){
    fr.style.display="none";
    }
    else {
    fr.style.display="block";
    }
    }
    </script>

    <h5>Preview</h5>
    <div>
    <input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
    <iframe id="frDocViewer" name="frDocViewer" src="',r.unescapedUrl,'" frameborder="1" ></iframe>

    [\CODE]


    Please have look at the above script it needs modification as it is functional it only handle the first iframe -

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Again ?

    I would also need to modify script to load iframes on event contrary to deafult page load ?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    I'm sorry, that makes no sense.

    This isn't legal HTML:
    Code:
    <iframe id="frDocViewer" name="frDocViewer" src="',r.unescapedUrl,'" frameborder="1" ></iframe>
    Or I guess it is legal HTML, but the URL you give for the src is completely invalid:
    Code:
        ',r.unescapedUrl,'
    You can't have apostrophes in a URL.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    n381 (09-08-2011)

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Re

    Thank you for responding,

    The Url is script variable and it is not of the importance for this script in my opinion as the script just need to be looped through element increment but I am not able to write that actually

    <script type="text/javascript">
    function HideFrame(){
    fr = document.getElementById ("frDocViewer");
    if (fr.style.display!='none'){
    fr.style.display="none";
    }
    else {
    fr.style.display="block";
    }
    }
    </script>

    <h5>Preview</h5>
    <div>
    <input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
    <iframe id="frDocViewer" name="frDocViewer" src="http://" frameborder="1" ></iframe>

    Hope you understood me this snippet should be able to open&close multiple iframe instances as it is the only method that parse within other script I am using for translating.

    Best Regards

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    No, I'm still lost.

    How about showing us a *LIVE* page? Give us a URL to look at? If you can't do that, maybe show us a complete page of HTML?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Re

    Hello again,

    I've to keep that src Url with "' double and single quotes because some of the jquery strips them if I am right with this.
    And here is the url of testing script link

    This script would be optimal to load with frames closed or not loaded for flawless work and processing.
    Please help to improve this script and make alternative possibilities with this newly added features.
    Last edited by n381; 09-08-2011 at 09:16 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Okay, *NOW* I understand WHAT you are doing.

    What do you want to CHANGE?

    Do you want all the <iframe>s to be hidden until the user clicks a PREVIEW button?

    Do you want ONLY ONE <iframe> to show at a time? Or can any number show?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Re

    Thank you for responding,
    I need to arrange iframe preview starting closed and that opens upon click event but with various scripts I've tested this one only parse and I need it to handle every iframe separately

    <script type="text/javascript">
    function HideFrame(){
    fr = document.getElementById ("frDocViewer");
    if (fr.style.display!='none'){
    fr.style.display="none";
    }
    else {
    fr.style.display="block";
    }
    }
    </script>

    <h5>Preview</h5>
    <div>
    <input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
    <iframe id="frDocViewer" name="frDocViewer" src="http://" frameborder="1" ></iframe>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Please don't show me code. The code is wrong, so why show it?

    Please just ANSWER MY QUESTIONS.

    One more time:

    (1) Do you want all the <iframe>s to be hidden (start out invisible) until the user clicks a PREVIEW button?
    Yes or no? [If you say no, I assume you want them to ALL SHOW when the page first opens.]

    (2) Do you want ONLY ONE <iframe> to show at a time?
    Yes or no? [If you say yes, then I will hide all the others and only show the one the user clicks on.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Re

    Thank you responding,
    Yes I want all frames hidden at start and after upon click event it should be preview of each one

    Regards,

    PS. I have posted that snippet several times as I found that it only works due jquery stripping of quotas -anyway if you are able to make this other way then please provide some instructions about it. Thank you

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Ahhhh....

    I am *SO SORRY* to mislead you!

    You are looking for an answer to a JQUERY problem. I thought you wanted a JAVASCRIPT answer. That is, one using basic JavaScript, not the jQuery library.

    I don't use jQuery. You probablly need to ask this in the jQuery forum. Yes, it is a separate forum here.

    I could do all this in JavaScript, pretty easily, but I don't know jQuery will enough to do it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Post Re

    Okay,
    I would appreciate any solution I've just mentioned that jquery is tend to avoid or strip quotations and it is okay and welocme any javascript solution that can work with the script at this demo link

    Thank you

  • #15
    New Coder
    Join Date
    Sep 2011
    Location
    USA
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for this thread but im a bit lost. Can anyone post a sample demo of this script. can't get it to work


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •