select expand script

Involved Joined: Apr 06, 2008 Posts: 484

im wondering if someone would be able to help with a simple example of a contract expand script.

i basically want say 2 links at the top and depending on which link is clicked it would drop down with info

e.g. if link 1 was clicked it would drop down with hi this is link 1

anyway i noticed the latest raven has a switch script in the includes folder and thought this maybe able to be used

Site Admin/Owner Joined: Aug 27, 2002 Posts: 17088

Do you mean like my Most recent reviews - Click on link to see review text towards the top section of my Home page?

Posted: Sat May 03, 2008 1:39 am

...or there is the boxover script that is used in the latest version of RN for feeds.

Have a look at: [ Only registered users can see links on this board! Get registered or login! ] and on the right hand side there is block showing a feed from PHP Magazine.

Posted: Sat May 03, 2008 4:11 am

yer raven exactly like that except one link might have some data pulled from the db put the principle is exactly the same

Posted: Sat May 03, 2008 7:37 am

If you mean you want a dynamic (real time) db lookup when the link is clicked and then just drop down and don't refresh the page, you will need to implement some AJAX code and not just DHTML. There are a plethora of both kinds of scripts available via Google. One good source is [ Only registered users can see links on this board! Get registered or login! ] and then search for ajax

Posted: Sat May 03, 2008 8:09 am

ok thanks ill check it out

would you be able to give me an example of the one on the front page here to get me started.

thanks

Posted: Sat May 03, 2008 9:05 am

Sure.

Code:

<!DOCTYPE html


   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


   <head>


<title>PHP Web Host - Quality Web Hosting For All PHP Applications.</title>


<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />


<meta http-equiv="Content-Script-Type" content="text/javascript" />


<meta http-equiv="Content-Style-Type" content="text/css" />


<style type="text/css">


         span.mrr {color:blue;text-align:left;font-weight:bold;}


         span.c2_reviews {text-align:left;font-weight:bold;text-decoration:underline;}


</style>


         


         


      <script type="text/javascript">


/*<![CDATA[*/


         function hideshow(which) {


            if (!document.getElementById) {


               return;


            }


            if (which.style.display=="block") {


               which.style.display="none";


            }


            else {


               which.style.display="block";


            }


         }


/*]]>*/


      </script>


</head>


<body>      





<span class="mrr">Testy1.html Example Script - Click on link to see review</span>


<br /><br />


<a href="javascript:hideshow(document.getElementById('rev1'))"><span class="c2_reviews"> LINK 1</span></a>


<span id="rev1" style="display: none;">


    LINK 1 - Etiam neque nunc, lacinia at, eleifend sed, hendrerit eu, erat. Sed in mi ut quam sollicitudin ultrices. Sed vulputate odio quis turpis. Nullam consequat eleifend risus. Vivamus ornare rhoncus orci. In sit amet tellus hendrerit libero lobortis.


<br />


</span>


<br />


<a href="javascript:hideshow(document.getElementById('rev2'))"><span class="c2_reviews"> LINK 2</span></a>


<span id="rev2" style="display: none;">


    LINK 2 - Etiam neque nunc, lacinia at, eleifend sed, hendrerit eu, erat. Sed in mi ut quam sollicitudin ultrices. Sed vulputate odio quis turpis. Nullam consequat eleifend risus. Vivamus ornare rhoncus orci. In sit amet tellus hendrerit libero lobortis.


<br /></span><br />


<a href="javascript:hideshow(document.getElementById('rev3'))"><span class="c2_reviews"> LINK 3</span></a>


<span id="rev3" style="display: none;">


    LINK 3 - Etiam neque nunc, lacinia at, eleifend sed, hendrerit eu, erat. Sed in mi ut quam sollicitudin ultrices. Sed vulputate odio quis turpis. Nullam consequat eleifend risus. Vivamus ornare rhoncus orci. In sit amet tellus hendrerit libero lobortis.


<br /></span><br />


<a href="javascript:hideshow(document.getElementById('rev4'))"><span class="c2_reviews"> LINK 4</span></a>


<span id="rev4" style="display: none;">


    LINK 4 - Etiam neque nunc, lacinia at, eleifend sed, hendrerit eu, erat. Sed in mi ut quam sollicitudin ultrices. Sed vulputate odio quis turpis. Nullam consequat eleifend risus. Vivamus ornare rhoncus orci. In sit amet tellus hendrerit libero lobortis.


<br /></span><br />


</body>


</html>

Posted: Sat May 03, 2008 6:55 pm

thankyou it is gretly appreciated. Cheers

Posted: Sun May 04, 2008 11:34 pm

ok can anyone see what im doing wrong.ive tried everything, i even tried an e.g. from the php-nuke how to module called "how to create a fade block"

now if i change the

Code:

$content = "

to

Code:

echo "

it shows without a problem and works it's just not inside the block obviously.

Code:




if ( !defined('BLOCK_FILE') ) {


   Header('Location: ../index.php');


   die();


}





$content = "<script type=\"text/javascript\" src=\"includes/switchcontent.js\" >\n"; 


$content = "\n"; 


$content = "/***********************************************\n"; 


$content = "* Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)\n"; 


$content = "* This notice must stay intact for legal use.\n"; 


$content = "* Visit http://www.dynamicdrive.com/ for full source code\n"; 


$content = "***********************************************/\n"; 


$content = "\n"; 


$content = "</script>\n"; 


$content = "\n"; 


$content = "<style type=\"text/css\">\n"; 


$content = "\n"; 


$content = "/*Style sheet used for demo. Remove if desired*/\n"; 


$content = ".handcursor{\n"; 


$content = "cursor:hand;\n"; 


$content = "cursor:pointer;\n"; 


$content = "}\n"; 


$content = "\n"; 


$content = "</style>\n"; 


$content = "\n"; 


$content = "<h2>Demo 1</h2>\n"; 


$content = "\n"; 


$content = "<div><a href=\"javascript:bobexample.sweepToggle('contract')\">Contract All</a> | <a href=\"javascript:bobexample.sweepToggle('expand')\">Expand All</a></div>\n"; 


$content = "\n"; 


$content = "<h3 id=\"bobcontent1-title\" class=\"handcursor\">What is JavaScript?</h3>\n"; 


$content = "<div id=\"bobcontent1\" class=\"switchgroup1\">\n"; 


$content = "JavaScript is a scripting language originally developed by Netscape to add interactivity\n"; 


$content = "and power to web documents. It is purely client side, and runs completely on the client's browser and computer.\n"; 


$content = "</div>\n"; 


$content = "\n"; 


$content = "<h3 id=\"bobcontent2-title\" class=\"handcursor\">Difference betwen Java & JavaScript?</h3>\n"; 


$content = "<div id=\"bobcontent2\" class=\"switchgroup1\">\n"; 


$content = "Java is completely different from JavaScript.\n"; 


$content = "The former is a compiled language while the later is a scripting language.\n"; 


$content = "</div>\n"; 


$content = "\n"; 


$content = "<h3 id=\"bobcontent3-title\" class=\"handcursor\">What is DHTML?</h3>\n"; 


$content = "<div id=\"bobcontent3\" class=\"switchgroup1\">\n"; 


$content = "DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML.\n"; 


$content = "Through them a new level of interactivity is possible for the end user experience.\n"; 


$content = "</div>\n"; 


$content = "\n"; 


$content = "\n"; 


$content = "\n"; 


$content = "<script type=\"text/javascript\">\n"; 


$content = "// MAIN FUNCTION: new switchcontent(\"class name\", \"[optional_element_type_to_scan_for]\") REQUIRED\n"; 


$content = "// Call Instance.init() at the very end. REQUIRED\n"; 


$content = "\n"; 


$content = "var bobexample=new switchcontent(\"switchgroup1\", \"div\") //Limit scanning of switch contents to just \"div\" elements\n"; 


$content = "bobexample.setStatus('<img src=\"http://img242.imageshack.us/img242/5553/opencq8.png\" /> ', '<img src=\"http://img167.imageshack.us/img167/7718/closedy2.png\" /> ')\n"; 


$content = "bobexample.setColor('darkred', 'black')\n"; 


$content = "bobexample.setPersist(true)\n"; 


$content = "bobexample.collapsePrevious(true) //Only one content open at any given time\n"; 


$content = "bobexample.init()\n"; 


$content = "</script>\n"; 


$content = "\n"; 


$content = "\n"; 


$content = "<h2>Demo 2</h2>\n"; 


$content = "\n"; 


$content = "<h3 id=\"joecontent1-title\" class=\"handcursor\">What is JavaScript?</h3>\n"; 


$content = "<p id=\"joecontent1\" class=\"switchgroup2\">\n"; 


$content = "</p>\n"; 


$content = "\n"; 


$content = "<h3 id=\"joecontent2-title\" class=\"handcursor\">Difference betwen Java & JavaScript?</h3>\n"; 


$content = "<p id=\"joecontent2\" class=\"switchgroup2\">\n"; 


$content = "</p>\n"; 


$content = "\n"; 


$content = "<h3 id=\"joecontent3-title\" class=\"handcursor\">What is DHTML?</h3>\n"; 


$content = "<p id=\"joecontent3\" class=\"switchgroup2\">\n"; 


$content = "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.\n"; 


$content = "</p>\n"; 


$content = "\n"; 


$content = "\n"; 


$content = "\n"; 


$content = "<script type=\"text/javascript\">\n"; 


$content = "\n"; 


$content = "var joeexample=new switchcontent(\"switchgroup2\", \"p\") //Limit scanning of switch contents to just \"p\" elements\n"; 


$content = "joeexample.setStatus('[open] ', '[closed] ')\n"; 


$content = "joeexample.setColor('green', 'red')\n"; 


$content = "joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously\n"; 


$content = "joeexample.setPersist(false)\n"; 


$content = "joeexample.defaultExpanded(0,1)\n"; 


$content = "joeexample.setContent(0, 'whatisjavascript.htm') //specify remote content for 1st header's content\n"; 


$content = "joeexample.setContent(1, 'whatisjava.htm')  //specify remote content for 2nd header's content\n"; 


$content = "joeexample.init()\n"; 


$content = "</script>\n";

Posted: Sun May 04, 2008 11:42 pm

You are going to slap yourself when I point this out killing me

After your first $content = "<script type=\"text/javascript\" src=\"includes/switchcontent.js\" >\n"; statement, you have to use $content .= (Note the .= ). Otherwise only your last $content = "</script>\n"; is being used.

Posted: Sun May 04, 2008 11:55 pm

!@#

%$##$#

thanks for making me look stupid lol

Cheers

Posted: Mon May 05, 2008 12:03 am

mmmm that works except for the Demo 2 part and im not sure why

Posted: Mon May 05, 2008 12:05 am

Not that I have ever made THAT mistake before ROTFL

Thanks for giving me the credit but you really deserve ALL the credit! I was just here to support you Wink

Posted: Mon May 05, 2008 12:23 am

testy1 wrote:

mmmm that works except for the Demo 2 part and im not sure why

Well that's actually a separate issue from your original but you will need to post includes/switchcontent.js and any other missing code before I can test it. I'll pick this up in the morning.

Posted: Mon May 05, 2008 12:42 am

EDIT:

ill start again on this post lol

ok while you've been doing this so called sleeping ive been hard at it Smile

the script im using is switchcontent2 from dynamic drive its basically an enhanced version of number 1, you also need switchicon.js which is already in the includes folder of the latest raven nuke so i just downloaded switch content 2 and renamed it to switch and put it in the includes directory.....the switchicon is needed for the ajax part apparently.

1. i created a block called block-switch.php

Code:







if ( !defined('BLOCK_FILE') ) {


   Header('Location: ../index.php');


   die();


}


$content = "<script type=\"text/javascript\" src=\"switchicon.js\" ></script>\n";


$content = "<script type=\"text/javascript\" src=\"includes/switch.js\" ></script>\n";





$content .= "<style type=\"text/css\">\n";


$content .= "\n";


$content .= "/*Style sheet used for demo. Remove if desired*/\n";


$content .= ".handcursor{\n";


$content .= "cursor:hand;\n";


$content .= "cursor:pointer;\n";


$content .= "}\n";


$content .= "\n";


$content .= "</style>\n";


$content .= "\n";


$content .= "<div><a href=\"javascript:bobexample.sweepToggle('contract')\">Contract All</a> | <a href=\"javascript:bobexample.sweepToggle('expand')\">Expand All</a></div>\n";


$content .= "\n";


$content .= "<h3 id=\"bobcontent1-title\" class=\"handcursor\">What the hell is going on :P?</h3>\n";


$content .= "<div id=\"bobcontent1\" class=\"switchgroup1\">\n";


$content .= "work already would you sheeeesh\n";


$content .= "</div>\n";


$content .= "\n";


$content .= "\n";


$content .= "<h3 id=\"bobcontent3-title\" class=\"handcursor\">Who Is Online?</h3>\n";


$content .= "<div id=\"bobcontent3\" class=\"switchgroup1\">\n";


require('modules/RWS_WhoIsWhere/RWS_wiw_config.inc.php');


$content .= '<iframe frameborder="0" src="modules/RWS_WhoIsWhere/index.php?theme='.$theme.'" width="100%" height="200"><!-- ilayer  src="modules/RWS_WhoIsWhere/index.php" width="100%" height="200"></ilayer --></iframe>';


$content .= "</div>\n";


$content .= "<script type=\"text/javascript\">\n";


$content .= "// MAIN FUNCTION: new switchcontent(\"class name\", \"[optional_element_type_to_scan_for]\") REQUIRED\n";


$content .= "// Call Instance.init() at the very end. REQUIRED\n";


$content .= "\n";


$content .= "var bobexample=new switchcontent(\"switchgroup1\", \"div\") //Limit scanning of switch contents to just \"div\" elements\n";


$content .= "bobexample.setStatus('<img src=\"http://img242.imageshack.us/img242/5553/opencq8.png\" /> ', '<img src=\"http://img167.imageshack.us/img167/7718/closedy2.png\" /> ')\n";


$content .= "bobexample.setColor('red', 'green')\n";


$content .= "bobexample.setPersist(false)\n";


$content .= "bobexample.collapsePrevious(true) //Only one content open at any given time\n";


$content .= "bobexample.init()\n";


$content .= "</script>\n";


$content .= "\n";


$content .= "\n";


$content .= "<h2>Demo 2</h2>\n";


$content .= "\n";


$content .= "<h3 id=\"joecontent1-title\" class=\"handcursor\">What is JavaScript?</h3>\n";


$content .= "<p id=\"joecontent1\" class=\"switchgroup2\">\n";


$content .= "</p>\n";


$content .= "<script type=\"text/javascript\">\n";


$content .= "\n";


$content .= "var joeexample=new switchcontent(\"switchgroup2\", \"p\") //Limit scanning of switch contents to just \"p\" elements\n";


$content .= "joeexample.setStatus('[open] ', '[closed] ')\n";


$content .= "joeexample.setColor('green', 'red')\n";


$content .= "joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously\n";


$content .= "joeexample.setPersist(false)\n";


$content .= "joeexample.defaultExpanded(0,1)\n";


$content .= "joeexample.setContent(0, 'test.php') //specify remote content for 1st header's content\n";


$content .= "joeexample.init()\n";


$content .= "</script>\n";


$content .= '';

2. i created a file in the root directory called test.php

Code:




require('modules/RWS_WhoIsWhere/RWS_wiw_config.inc.php');


echo '<iframe frameborder="0" src="modules/RWS_WhoIsWhere/index.php?theme='.$theme.'" width="100%" height="200"><!-- ilayer  src="modules/RWS_WhoIsWhere/index.php" width="100%" height="200"></ilayer --></iframe>';

now it all seems to work unless you use some database queries in the test.php file it then says "call to function on non member" or something to that effect.I could fix this be adding at the top of test.php the following

Code:




include_once('mainfile.php');

basically this all seems a little dodgey to me lol, surely there is a better way than this.i also tried moving the test.php file to the blocks directory and updating the block code like this....

Code:




$content .= "joeexample.setContent(0, 'blocks/test.php') //specify remote content for 1st header's content\n";

but that did not work for some reason.

Sad

(didnt know which one to use Razz

)