Results 1 to 9 of 9

Thread: How to jump to "<a name=.." ankered tag into a section closed by switchcontent ?

  1. #1
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How to jump to "<a name=.." ankered tag into a section closed by switchcontent ?

    1) Script Title: switchcontent

    2) Script URL (on DD): http://zbyszek.evot.org/ebs/

    3) Describe problem:

    Hi, sections of my document are tagged with "<a name=" tags. In some parts of the document I refer to such tags in another part. For example the "Content" list allows to jump into named sections. Unfortunately this is only possible if targets in sections enclosed with "<div" are not closed by switchcontent script. Do you see a possibility, (with some js script, or extending switchcontent script) , these closed parts open automatically when one tries to jump into them ?
    Last edited by zlisiekci; 12-07-2016 at 05:54 AM.

  2. #2
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I guess the switchcontent.loadpage function must be called when "<a name" - tag is touched. How could I acomplish this ?

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm I'm not entirely sure I understand your question- can you rephrase what you're trying to accomplish?
    DD Admin

  4. #4
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Possibly I did not put it very understandable. Just look at http://zbyszek.evot.org/ebs/ You will find a "Table of Contents" there which is in section 0.2. All lines of this "Table of Contents" are written as links to another parts of the file. Now try to jump into another section clicking on one of such link from "Table this content". You would not succeed. This parts, you'd like to jump into are closed with switchcontent. You can jump into them only if you open them before, possibly with "expand all" which is in the right upper corner. I'd like these closed section open automatically, when I one tries to jump into them.
    Last edited by Beverleyh; 12-07-2016 at 06:26 AM. Reason: Formatting

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok, so if I understood you correctly, you're basically asking how to have a link that when clicked on not only jumps to a particular header within a switch content group, but also opens that header content? Sure, check out the below complete example:

    Code:
    <script type="text/javascript" src="switchcontent.js" >
    
    /***********************************************
    * Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)
    * Please keep this notice intact.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    <style type="text/css">
    
    /*Style sheet used for demo. Remove if desired*/
    .handcursor{
    cursor:hand;
    cursor:pointer;
    }
    
    </style>
    
    <body>
    
    <h2>Demo 1</h2>
    
    <a href="#whatisjavascript" onClick="bobexample.expandcontent( document.getElementById('bobcontent1-title') )">Jump to What is JavaScript Header and Expand</a>
    
    <div style="height:1000px"></div>
    
    
    
    
    <a name="whatisjavascript"></a><h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
    <div id="bobcontent1" class="switchgroup1">
    JavaScript is a scripting language originally developed by Netscape to add interactivity
    and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    
    <h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
    <div id="bobcontent2" class="switchgroup1">
    Java is completely different from JavaScript.
    The former is a compiled language while the later is a scripting language.
    </div>
    
    <h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
    <div id="bobcontent3" class="switchgroup1">
    DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML.
    Through them a new level of interactivity is possible for the end user experience.
    </div>
    
    
    
    <script type="text/javascript">
    // MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
    // Call Instance.init() at the very end. REQUIRED
    
    var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
    bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
    bobexample.setColor('darkred', 'black')
    bobexample.setPersist(true)
    bobexample.collapsePrevious(true) //Only one content open at any given time
    bobexample.init()
    </script>
    
    <div style="height:1000px"></div>
    The link in the above example is:

    Code:
    <a href="#whatisjavascript" onClick="bobexample.expandcontent( document.getElementById('bobcontent1-title') )">Jump to What is JavaScript Header and Expand</a>
    When you click on this, you jump to the header with ID "bobcontent1-title" while also expanding its content at the same time. The key is to:

    1) Define a HTML bookmark next to the header you wish to jump to, then create an anchor link to it using <a href="#whatisjavascript"...>Anchor link</a>

    2) Inside the anchor link, call:

    Code:
    bobexample.expandcontent( document.getElementById('bobcontent1-title') )
    via the onClick event handler, passing in the ID Of the switch header you wish to expand into the function, with the function referenced by calling switchcontentinstance.expandcontent().
    DD Admin

  6. #6
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Well. I think this is exactly, what I needed. Yet the concrete solution is not so stright forward as I need to open all sections above too ! Thank you. I'll report if my webpage works well.

  7. #7
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The browser console says:

    TypeError: all.expandcontent is not a function ...
    onclick

    Truly switchcontent.prototype.expandcontent=function(header){

    seems to be private. Possibly I have to change something in the switchcontent.js file itself.
    This is the way an instance is started in my php/html file:

    <script type="text/javascript">
    var all=new switchcontent("switchgroup1", "div")
    //all.setStatus(\'closed\', \'opened\')
    all.setStatus(\'\', \'\')
    //all.setColor(\'darkred\', \'black\')
    //all.setColor(\'darkblue\', \'darkblue\')
    all.setColor(\'#52557b\', \'#5d608c\')
    all.setPersist(true)
    all.collapsePrevious(false) //Only one content open at any given time
    all.init()

    The collapsePrevious() should be set to true too, don't you think so ?

  8. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The expandcontent() method isn't private, so you should be able to call it anywhere on your page. What's the complete markup for your link that expands a particular header? For example:

    Code:
    <a href="#whatisjavascript" onClick="bobexample.expandcontent( document.getElementById('bobcontent1-title') )">Jump to What is JavaScript Header and Expand</a>
    Also, did you try the example code I posted above? Does that work for you?
    DD Admin

  9. #9
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Do I use some of your elder switchcontent.js file ? It's from March 27th, 08 . This are the lines 99 - 102 of it:
    Code:
    //PRIVATE: Expands a content based on its corresponding header entered
    
    switchcontent.prototype.expandcontent=function(header){
        var innercontent=document.getElementById(header.id.replace("-title", ""))
    I don't know javascript. The error I described above:
    Code:
     TypeError: all.expandcontent is not a function ... onclick
    appears in some php function. I don't know what is the scope of this
    Code:
    <script type="text/javascript">
      var all=new switchcontent("switchgroup1", "div")
    switchcontent instance. Possibly I have to pass this variable all somewhere.

    My text is divided in sections $a[n], sub-sections $b[n] and sub-sub-setions $c[n] as php arrays and I print them withe the following php function:
    Code:
    function myoutput () {
        global  $head, $intro, $a, $b, $c, $t, $tit, $tail;
    
        echo $head;
        echo $intro;
        echo '<tr>
        <td colspan="3">
            <table cellspacing="0" cellpadding="30" width="100%" summary="main text" >
                <tr><td>
        <ol>';
        for ($i = 0; $i <= 8; $i++) {
            $chapter1 = 100 * $i;
            if (!isset ($tit[$chapter1])) { continue;   }
            $out .=  '<a name="'.'ank'.$chapter1.'"><li value="'.$i.'" >
                <h3 id="chap'.$chapter1.'-title" class="handcursor"> '.$tit[$chapter1].' </h3>
                <div id="chap'.$chapter1.'" class="switchgroup1"></a>';
            if (isset ($a[$chapter1])) { $out .=  $a[$chapter1]; }
            $out .=  '<ol>';
            for ($j = 1; $j <= 9; $j++) {
                $chapter2 = $chapter1 + 10 * $j;
                if (!isset ($tit[$chapter2])) { continue;   }
                $out .=  '<a name="'.'ank'.$chapter2.'"><li>
                    <h3 id="chap'.$chapter2.'-title" class="handcursor"> '.$tit[$chapter2].' </h3>
                    <div id="chap'.$chapter2.'" class="switchgroup1"></a>';
                if (isset ($b[$chapter2])) {
                    $out .=  $b[$chapter2] .' ';
                } else {
                    $out .=  '<div style="background-color:#fff8ae">' .
                                 $t['no_translation'] . ' </div>';
                }
                $out .=  '<ol>';
                for ($k = 1; $k <= 9; $k++) {
                    $chapter3 = $chapter2 + $k;
                    if (!isset ($tit[$chapter3])) { continue;   }
                    $out .=  '<a name="'.'ank'.$chapter3.'"><li>
                        <h3 id="chap'.$chapter3.'-title" class="handcursor"> '.$tit[$chapter3].' </h3>
                        <div id="chap'.$chapter3.'" class="switchgroup1"></a>';
                    if (isset ($c[$chapter3])) {
                        $out .=  $c[$chapter3] .' </div>';
                    } else {
                        $out .=  '<div style="background-color:#fff8ae">' .
                                     $t['no_translation'] .' </div>';
                    }
                 }
                $out .= '</ol>';
                if (isset ($b[$chapter2 + 1])) { $out .=  $b[$chapter2 + 1];    }
                $out .= '</div>';
            }
            $out .= '</ol>';
        }
        $out .=  '</ol> </table> </tr>';
        echo $out;
    
        echo '<script type="text/javascript">
      var all=new switchcontent("switchgroup1", "div")
    //all.setStatus(\'closed\', \'opened\')
      all.setStatus(\'\', \'\')
    //all.setColor(\'darkred\', \'black\')
    //all.setColor(\'darkblue\', \'darkblue\')
      all.setColor(\'#52557b\', \'#5d608c\')
      all.setPersist(true)
      all.collapsePrevious(false) //Only one content open at any given time
      all.init()
    
      var adn=new switchcontent("switchgroup2", "span")
    //adn.setStatus(\'less ...\', \'more ...\')
      adn.setStatus("", "")
      adn.setColor(\'blue\', \'blue\')
      adn.collapsePrevious(false)
    //adn.setPersist(false)
      adn.defaultExpanded()
      adn.init()
    </script>';
    
        echo $tail;
    }
    And this is the way I try to jump into <div - sections which appears in the Table of content as it is seen in http://zbyszek.evot.org/ebs/index.php . Actually the version on the www server is not corrected yet.
    Code:
    function contents () {
        global  $tit, $t;
    
        $cont  = '<ol>';
        for ($i = 0; $i <= 9; $i++) {
            $n = 100 * $i;
            if (isset ($tit[$n])) {
                $cont = $cont . '<li value="'.$i.'" ><a href="index.php#ank'.$n.'" onClick="all.expandcontent( document.getElementById(chap'.$n.'-title))" >'.$tit[$n].'</a>';
                $cont = $cont . '<div><ol>';
                for ($j = 1; $j <= 9; $j++) {
                    $m = $n + 10 * $j;
                    if (isset ($tit[$m])) {
                        $cont = $cont . '<li><a href="index.php#ank'.$m.'" onClick="all.expandcontent( document.getElementById(chap'.$n.'-title)); all.expandcontent( document.getElementById(chap'.$m.'-title))" >'.$tit[$m].'</a>';
                        $cont = $cont . '<div><ol>';
                        for ($k = 1; $k <= 9; $k++) {
                            $r = $m + $k;
                            if (isset ($tit[$r])) {
                                $cont = $cont . '<li><a href="index.php#ank'.$r.'" onClick="all.expandcontent( document.getElementById(chap'.$n.'-title)); all.expandcontent( document.getElementById(chap'.$m.'-title)); all.expandcontent( document.getElementById(chap'.$r.'-title))" >'.$tit[$r].'</a>';
                            }
                        }
                        $cont = $cont . '</ol></div>';
                    }
    ...
    All this works well if switchcontent <div-sections are all opened.
    Last edited by zlisiekci; 12-09-2016 at 12:06 AM.

Similar Threads

  1. switchcontent script and page jump
    By esmoldt in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-22-2010, 09:00 PM
  2. Need help with switchcontent script
    By ETT in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-02-2008, 06:35 PM
  3. Blog section , Forums section - business
    By deepakdeep in forum Graphics
    Replies: 0
    Last Post: 11-25-2006, 10:21 AM
  4. Switch menu: switchable section inside switchable section?
    By GranoSalis in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-26-2005, 07:13 AM
  5. How to make jump to top script jump to different URL
    By Brett in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-12-2005, 01:47 AM

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
  •