how to create a url that will open hidden divs

[snorq]

Hi, all. I have a page that uses javascript and the "display" style
property to show and hide divs. I want to be able to create a URL
that people can click to open up the page with a certain div showing.
Any suggestions on how to do that?

Below is some sample code from the site. Is there a way craft a URL
that will open the page with, say, the section2 div showing...?

(Note that my skills aren't highly developed, so the code may not be
as efficient as it could be.)

Thanks for any help.

Mike

------------------------
*FLAG SECTION 1 AS THE DEFAULT DIV TO SHOW*
function initialSection() {
document.currentSection = eval('document.getElementById
("section1")');

}

*SHOW THE NEW DIV, FLAG IT, HIDE THE OTHERS*
function show(selectedSection) {
document.newSection = eval('document.getElementById
(selectedSection)');
if (document.newSection.style.display == "none") {
document.newSection.style.display = "inline";
document.currentSection.style.display = "none";
}
document.currentSection = document.newSection;

}

*LINKS FOR SHOWING DIFFERENT SECTIONS*
<A onClick="show('section1')">section1</A>
<A onClick="show('section1')">section2</A>
<A onClick="show('section1')">section3</A>

*THE DIVS*
<DIV id="section1" style="display: inline">
<DIV id="section2" style="display: none">
<DIV id="section3" style="display: none">

 

[GArlington]

Hi, all. I have a page that uses javascript and the "display" style
property to show and hide divs. I want to be able to create a URL
that  people can click to open up the page with a certain div showing.
Any suggestions on how to do that?

Below is some sample code from the site. Is there a way craft a URL
that will open the page with, say, the section2 div showing...?

(Note that my skills aren't highly developed, so the code may not be
as efficient as it could be.)

Thanks for any help.

Mike

------------------------
*FLAG SECTION 1 AS THE DEFAULT DIV TO SHOW*
function initialSection() {
       document.currentSection = eval('document.getElementById
("section1")');

}

*SHOW THE NEW DIV, FLAG IT, HIDE THE OTHERS*
function show(selectedSection) {
       document.newSection = eval('document.getElementById
(selectedSection)');
       if (document.newSection.style.display == "none") {
               document.newSection.style.display = "inline";
               document.currentSection.style.display = "none";
       }
       document.currentSection = document.newSection;

}

*LINKS FOR SHOWING DIFFERENT SECTIONS*
<A  onClick="show('section1')">section1</A>
<A  onClick="show('section1')">section2</A>
<A  onClick="show('section1')">section3</A>

*THE DIVS*
<DIV id="section1" style="display: inline">
<DIV id="section2" style="display: none">
<DIV id="section3" style="display: none">

Create links
<a href="yourPage.html?sectionToShow=section1" ...>
<a href="yourPage.html?sectionToShow=section2" ...>
....
Add show(sectionToShow) to your body onload...

See Google on best ways of getting url params in JavaScript...

 

[Matthias Reuter]

Hi, all. I have a page that uses javascript and the "display" style
property to show and hide divs. I want to be able to create a URL
that people can click to open up the page with a certain div showing.
Any suggestions on how to do that?

Yes. Append ?show=section1 (resp. section2, section3) to that url. Rewrite
function initialSection that extracts section1 from the url and then
invokes show. Call that onload.

And rewrite your code to omit eval and document.currentSection and
document.newSection.

function init () {
// default sectionId
var sectionId = "section1";
// extract sectionId from url
var search = window.location.search;
var match = search.match(/show=([^&]*)/);

// if one is found, overwrite default sectionId
if (match) {
sectionId = match[1];
}

// show section
show(sectionId);
}

// id of currently visible section
var currentSectionId = "section1";

function show (newSectionId) {
// don't do anything if selected section is visible
if (newSectionId !== currentSectionId) {

// get currently visible section
var currentSection = document.getElementById(currentSectionId);
// get section to show
var newSection = document.getElementById(newSectionId);

// if both are present
if (currentSection && newSection) {
// hide current section
currentSection.style.display = "none";
// show new section
newSection.style.display = "block";
// store new section id
currentSectionId = newSectionId;
}
}
}

<body onload="init()">
...

 

[Sister Ray]

i was just wondering why did you use those eval calls?

 

[snorq]

i was just wondering why did you use those eval calls?

I don't remember, specifically. I believe they were just part of
various code snippets I found and modified, or else parts of tutorials
I found on how to reference specific elements in a page.

Thanks all for the help and the new code, by the way.

 

[Aaron Watters]

Hi, all. I have a page that uses javascript and the "display" style
property to show and hide divs. I want to be able to create a URL
that  people can click to open up the page with a certain div showing.
Any suggestions on how to do that?

Please see

http://aaron.oirt.rutgers.edu/myapp/docs/W1500.whyIsWhiffCool

The footnotes on the page do exactly this. "View source" to see the
javascript. Something like this

....Before the footnote
<script>
// footnote event actions:
function hideFunction4() {
var popupElement = document.getElementById("popupId2");
popupElement.style.visibility = "hidden";
}

function showFunction3(x,y) {
var popupId = "popupId2";
var popupElement = document.getElementById(popupId);
popupElement.style.left="20px";
popupElement.style.zIndex = 10;
popupElement.style.visibility = "visible";
}
</script>

<a href="#nowhere" onclick="showFunction3(); return false"
id="positionId1"> (footnote link here) </a>&nbsp;

<div id="popupId2" class="jswhiff_suggestion" style="width:400px">
<a href="#nowhere" onclick="hideFunction4(); return false;">
× </a> <br>
Footnote text here.
</div>

After the footnote...

I had to be a little careful about cross browser compatibility
because on some versions of internet exploiter the div won't
show if it crosses out of the existing page boundary.

I hope that helps. -- Aaron Watters

===
Why do elephant paint their toenails red?
To hide in cherry trees.
Have you ever seen an elephant in a cherry tree?
See how good it works!