Web Analytics Made Easy - StatCounter Link preview show/hide div,iframe - CodingForum

Announcement

Collapse
No announcement yet.

Link preview show/hide div,iframe

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Link preview show/hide div,iframe

    Hello CodingForum,

    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]
    Tags: div iframe, link preview, show hide
  • #2
    ??? 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>
    Be yourself. No one else is as qualified.

    Comment

    • #3
      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 -

      Comment

      • #4
        Again ?

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

        Comment

        • #5
          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.
          Be yourself. No one else is as qualified.

          Comment

          • #6
            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

            Comment

            • #7
              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?
              Be yourself. No one else is as qualified.

              Comment

              • #8
                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; Sep 8, 2011, 05:16 AM.

                Comment

                • #9
                  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?
                  Be yourself. No one else is as qualified.

                  Comment

                  • #10
                    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>

                    Comment

                    • #11
                      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.]
                      Be yourself. No one else is as qualified.

                      Comment

                      • #12
                        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

                        Comment

                        • #13
                          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.
                          Be yourself. No one else is as qualified.

                          Comment

                          • #14
                            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

                            Comment

                            • #15
                              Thanks for this thread but im a bit lost. Can anyone post a sample demo of this script. can't get it to work
                              "The secret to creativity is knowing how to hide your sources..."
                              forex trading | metatrader

                              Comment

                              Previous template Next
                              Working...
                              X