Thanks Mike for your reply. Okay, I have implemented this in a static mode:
http://www.uniquebrand.co.uk/education/index.php Under Online resources if you click on these two links How to write an Abstract How to Write a Good Essay You will see the effect that I am trying to achieve. It does serve my purpose but the links and their IDs are not dynamically generated. I want to do the same kind of slide up and down for dynamically generated content. Does it explain my goal clearly? Sorry, I am not a native english speaker. So, apologies for any confusion. Many Thanks :) On Nov 11, 6:54 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote: > Could we back up a bit and have you describe very simply how you want this > page to work? Leave out all of the implementation details like the IDs and > the JavaScript code. Simple HTML is OK if that helps describe what you want. > > It looks like you're pretty far off track on the implementation (no offense > intended! We'll help you get back on track), but it would be hard to suggest > a better approach without understanding what this will look like to the > visitor to your site and how they will interact with it. > > Thanks, > > -Mike > > > > > From: Oli > > > Hi guys, > > > I am really excited about what I can do with JQuery, I just > > managed to finish one simple demo which basically allows a > > new css div to slide open when people click on a link. The > > initially technique was all fine except everything there is > > static. I then tried something dynamic where I got myself stuck. > > > Let me explain a bit more, for each of the following > > hyperlinks I'd like to load the id from the database. So, > > they will look as follows: > > > <a href="#" id="123" onclick="setID(123)">How to ride a > > bike</a> <a href="#" id="124" onclick="setID(124)">How to > > play football</a> > > > Now, obviously the content for each different link will be different. > > So, I thought of using a javascript function called setID() > > that takes the id from the link and pass it on to the jquery > > functinons. So rather than having to check for each and every > > links like this: > > > $("#link1").click(.............. > > $("#link2").click(............ > > $("#link3").click(............. > > > and so forth and so on, this little trick will do the job > > where one funtion will take care of all the links and their > > values and hence no repeat. > > > $((i)).click( ----- > > > where i is the global variable that stores the link ID. > > > It works to some extent but not entirely right. I used an > > alert(i); call to check the value and this is what I am > > finding difficult to comprehend. > > > say, i click on first link whose id is 123, a popup window shows #123. > > it then slides open the show div. > > if i want to close it I can just hit the hide me button and > > it hides the div, no problem. > > all fine uptil here. > > > Now, the interesting and the difficult bit that I dont have > > any clue whatsoever is when I click on any part of the web > > page and find the div slides open automatically. I printed > > the ID and it occured to me because I didnot initialise the > > global variable after hiding the div first time, the next > > click event is using the old value. So, I created a fucntion > > called init(), all it does it set the global variable i to null. > > > But it doesnot resolve my problem. I would also like to use > > php and database in order to populate content for show div. > > Any idea how passing javascript variable to php script will > > work in this context? > > > Here is my code: > > > <script type="text/javascript"> > > > var i = ""; > > > function setID(x){ > > i = "#"+x; > > } > > > function init(){ > > i = ""; > > } > > > $(document).ready( > > function(){ > > > $("#showResource").hide(); > > $((i)).click( > > function(){ > > alert(i); > > init(); > > $("#showResource").slideDown(800); > > return false; > > } > > ); > > > $("#hideMe").click( > > function(){ > > $("#showResource").slideUp(800); > > return false; > > } > > ); > > } > > ); > > </script> > > > <style type="text/css"> > > #show{border:1px #cfdfef solid; width:96%; > > background:url(images/ hide_me.gif); > > background-position:right bottom; background-repeat:no- > > repeat; margin-bottom:10px; color:#333333; font-family:Arial, > > Helvetica, sans-serif; font-size:11px; padding:10px; > > display:inline; background:#ddf8ff;} > > > </style> > > > <div id="show"> show this content <button id="hideMe">hide me</ > > button></div> <!-- show div ends--> > > > <!-- > > Next job to use php script instead of static text <div id="show"> > > > <?php > > > $sql = SELECT * from test where id = i (javascript variable); > > // any idea how to achieve this? did anyone try? > > > ?> > > > <button id="hideMe">hide me</button></div> <!-- show div ends--> > > > </div> > > --> > > > <a href="#" id="123" onclick="setID(123)">How to write an > > Abstract</a> <a href="#" id="124" onclick="setID(124)">How to > > write an Abstract</ > > a>- Hide quoted text - > > - Show quoted text -
