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

**zlisiekci** · 12-05-2016, 06:05 AM

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 ?

**zlisiekci** · 12-05-2016, 08:01 PM

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

**ddadmin** · 12-06-2016, 11:55 PM

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

**zlisiekci** · 12-07-2016, 03:32 AM

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.

**ddadmin** · 12-07-2016, 07:12 AM

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().

**zlisiekci** · 12-08-2016, 04:48 AM

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.

**zlisiekci** · 12-08-2016, 05:15 AM

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 ?

**ddadmin** · 12-08-2016, 10:33 PM

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?

**zlisiekci** · 12-08-2016, 11:55 PM

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.