PDA

View Full Version : Link to content switch?



iamgena
08-01-2005, 04:47 PM
I would like to link to one of the blocks that are using the content switch script (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm) and have that block opened. Does anyone know a way to do this?

jscheuer1
08-03-2005, 01:57 AM
OK, first you need to set the:

var enablepersist="off"at the beginning of the script. Next, replace the current 'do_onload()' function with this one:

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
if (unescape(location.href).indexOf('?sc=')!==-1){
var spantags=document.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
var scNum=unescape(location.href).substr(unescape(location.href).indexOf('?sc=')+4)
expandcontent(showstateobj[Math.abs(scNum)-1].parentNode, 'sc'+scNum)
}
}That's it for the script. Now to call the page with the switch content script on it and have a specific item open, use this syntax for the link on the calling page:

<a href="switch_link.htm?sc=2">Switch #2 Open</a>This will open the 2nd item where 'switch_link.htm' is the name of the page with the switch content script on it. Just change the number 2 to whatever number item you want. The text in green can be whatever you want.

anonymouse
08-03-2005, 04:28 AM
If the block is on the same page as the link, it would seem easier to just do this as a link

<a href="#" onClick="expandcontent(this, 'sc2')" >Link text here</a>
If you're linking remotely, then you probably want to do what he said above, but it seems very roundabout if it's on the same page.

jscheuer1
08-03-2005, 05:23 AM
If the block is on the same page as the link, it would seem easier to just do this as a link

<a href="#" onClick="expandcontent(this, 'sc2')" >Link text here</a>
If you're linking remotely, then you probably want to do what he said above, but it seems very roundabout if it's on the same page.Nope, that won't work because 'this' is no longer the header. If the OP really wants just that, there is a way though.

anonymouse
08-04-2005, 05:26 AM
hmmm...I used that to make extra close links at the end of the divs, so I assumed it would work to open.

jscheuer1
08-04-2005, 08:31 AM
Hmmmm, indeed, anonymouse. It will toggle the open/closed state of the element with id of sc2 but, if free standing on the page, will not change the plus to a minus or vise/versa. This assumes that you are using the 'state symbols'. Another issue is, if you have a stand alone link on a page to open an id'd element, what should happen if it already is open? What should happen if they are all already open, some including or not including the selected one open? My choice was to just have everything close and the selected one be opened. Still, if that was the situation when the linked was clicked, it looks like nothing happened. There really doesn't seem to be a way to reconcile 'a link to open one block' with having the state of the page change when it is clicked, in every possible situation. If we set it to toggle, then the page state is guaranteed to change when it is clicked but, it is no longer simply 'a link to open one block'.

iamgena
08-04-2005, 11:44 PM
John-
Thanks for your help! I am linking from a remote page. I tried altering the script as you suggested but it didn't seem to work. The page with the script showed every link open and I lost the expand/contract functionality.

Maybe it would help if I gave a better description for what I am doing. On my default page I have several news stories that include just a snippet of the full story plus a link to the full story. This is where I am linking from. Typically there would only be 3-4 stories on this page.

The actual stories & script are on a separate page, with the titles as links. This page will hold the stories from the front page as well as older articles.

Having all the links closed on load is not a big issue, but I do need the page(script) to function like the original when someone goes directly to the page. I am using graphics for the open/close symbols if that makes a difference. I also use the expand /contract all feature.

The goal, of course, is to have the link go directly to the (expanded) story as opposed to the full list.

Not a necessity, just trying to do whatever I can to help the "average user".

jscheuer1
08-05-2005, 01:39 AM
Hmm, it worked here and sounds from your description like it should work in your situation, unless you are not using the default structure for your page with the script on it, you missed something in my instructions, or I goofed somehow in explaining the needed changes. How about:

.

jscheuer1
08-05-2005, 06:22 AM
Oh, here is a demo Linker Page (http://home.comcast.net/~jscheuer1/side/sw_linker.htm) and here is the Page Itself (http://home.comcast.net/~jscheuer1/side/switch_link.htm), which also includes an on page link for expanding content. Right click on them to view their source. I've included error checking routines not in the original code I posted, which should make the HTML markup more tolerant of customization.

iamgena
08-05-2005, 02:49 PM
John-
It's absolutely perfect! Thanks so much! The site is under development at the moment and password protected at the clients request, so I really can't post it here. If you want to see it, just send me an email and I will give you temporary access.

lreynolds
03-15-2007, 02:01 PM
I am trying to add a link on the same page to also open the content areas. I have taken a look at the example page provided, but can't figure out what I need to change/add, since I am using the latest version of Switch Content I.

The page is here:
http://daviescondos.ca/index.php?s=test

It works when I click on the cartoon, or the question mark, but I want the captions below to also activate the expand.

Would it be possible to direct me to the appropriate code?

Thanks.

stratton
04-08-2007, 01:33 AM
This works great for me (linking from one page to another page with the appropiate section expanded --- <a href="switch_link.htm?sc=2">Switch #2 Open</a> --- ) but wondered if two other functionalities were possible.

the two additional features
1 . I have quite a few sections so sometimes when it links to the page, the expanded section is below the fold. Is there anyway to use an anchor tag so it will link them to the top of the expanded section. It might be really easy solution but i can't figure it out.

2. Also i like how in the switch content 1, when the user expaned the section, the title changed colors....
switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
this.colorOpen=openColor
this.colorClosed=closeColor
}
but not sure how to make this work with the work around for the linking from another page.
Thank you so much from a rather frustrated person..who if you have the answer will make my day....:)

jscheuer1
04-08-2007, 04:32 PM
The script as listed on the demo page has the color functionality you want:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

As for your first question, have you tried a named anchor link? You can use a query and anchor in the same link:


<a href="switch_link.htm?sc=3#bob">Switch #3 Open</a>

If you've followed the other information in this thread, this will load the switch_link.htm page to load, cause the third content to be open and scroll to the named anchor:


<a name="bob></a>

on switch_link.htm if it exists. For best results, the named anchor should be outside of any content that can ever be hidden.

Note: This line -


var scNum=unescape(location.href).substr(unescape(location.href).indexOf('?sc=')+4)

May need to be changed to:


var scNum=parseInt(unescape(location.href).substr(unescape(location.href).indexOf('?sc=')+4))

Better yet, put this code on the page before the other script:


<script type="text/javascript">
function get(key_str) {
var query = window.location.search.substr(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
if(unescape(pair[0]) == key_str)
return unescape(pair[1]);
}
return null;
</script>

and use this to get the value:


var scNum=get('sc')

stratton
04-08-2007, 07:54 PM
Thank you-- that worked great once i replaced with this line
var scNum=parseInt(unescape(location.href).substr(unescape(location.href).indexOf('?sc=')+4))

as far as the color goes, sorry i might be being very dunce but since i am using the updated script form earlier in this post, i no longer am using this type of set up, below which calls the setColor...

<script type="text/javascript">
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="open.png" /> ', '<img src="close.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>

i just call the switchcontent.js so not sure where to to put the function for the setcolor...

This is how i am calling the image for open and close from the js file.

var contractsymbol='<img src="/image/open.gif" />'
var expandsymbol='<img src="/image/close.gif" />'
so would i just be able to do something like
var expandsymbol='darkred, black'
thank you.

jscheuer1
04-08-2007, 10:45 PM
Well, if you want the functionality of the newer script, might as well use it. It is much better written. Here's how it can be adapted to the link to a specific content trick -

Place this script in the head after the call to the switchcontent.js file:


<script type="text/javascript" src="switchcontent.js" >

/***********************************************
* Switch Content script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 05th, 2007.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">
function get(key_str) {
var query = window.location.search.substr(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
if(unescape(pair[0]) == key_str)
return unescape(pair[1]);
}
return null;
}
</script>

Then in the body where you initialize a given content (taken from the demo):


<script type="text/javascript">
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

if(get('bob')){
bobexample.setPersist(false)
bobexample.defaultExpanded(get('bob')*1-1)
bobexample.init()
bobexample.setPersist(true)
}
else
bobexample.init()
</script>

Notice that I only init after it is determined if any content is being passed. Another nice thing about using this version for this is that persistence may be used whenever a content number isn't being passed. You can open the first content by using:


<a href="switch_content.htm?bob=1">Bob 1st content</a>

Also, the anchor hash (#) can be passed as well if desired, just like before:


<a href="switch_content.htm?bob=1#bob1">Bob 1st content</a>

The above link will open bob's first content and scroll to a named anchor:


<a name="bob1"></a>

Note: If you don't want to use persistence at all, just set it to false and remove it from the rest of the code:


<script type="text/javascript">
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(false)
bobexample.collapsePrevious(true) //Only one content open at any given time

if(get('bob')){

bobexample.defaultExpanded(get('bob')*1-1)
bobexample.init()

}
else
bobexample.init()
</script>

stratton
04-09-2007, 03:40 AM
It all works perfectly. thank you, i appreciate the fast response and detail of your answer. :)