I am currently trying to figure something out and i am hitting a brick wall,

I currently have a table that is displaying some mysql search results, Now everything works and looks the way i want it to however i am trying to add a bit more functionality into it,

For each row i am throwing out this

<tr><td class=\"search\">".date ( "Y-m-d", $row->data)."</td><td class=\"search\" width=\"80%\"><a 
href=\"file.php=1&article=".$row->id."\">".$row->title."</a></td></tr>";

What i am wanting to do is have it setup so when a user clicks on the href instead of going to another page it will "Slide down" and display the data from that link.

I am not sure what the best way to go about this would be.

Any help would be greatly appreciated

Thanks

    leatherback wrote:

    I did a little google search and found this

    Yeah i came across that one was well prior to posting here. But i am a little confused as to how i would have it grab and display the information from the url. But then again i am a noob and probaly missing something.

      ok, right. So the sliding effect is not te problem, getting the data is the problem.

      What you could do is try whether you can place an iframe in a <div> (Not sure whether that would be valid). Then you can populate the iframe with the URL for each resulting page, and slide the iframe into view, so to speak. this would make it easiest with regards to display.

      Make sure that an iframe can be placed within a div though..

      edit: Or you can just use javascript to set the display of the iframe straight away to: none / Block

        Since you're using Scriptaculous, you'll have Prototype as well; have a look at its Ajax.Update method.

          I ended up going with a hybrid iframe method, Here is what i am using

          		Event.observe(window, 'load', function() {
			$$('td.search a').each(function(s){
				Event.observe($(s), 'click', function(e){
					Event.stop(e);
					$$('tr.added_content').each(function(s){
						$(s).remove();
					});
					if( $(this).readAttribute('opened') == '1' ){
						$(this).writeAttribute('opened');
						return;
					}
					$(this).ancestors()[1].insert({after: '<tr class="added_content"><td colspan="50"><iframe height="425" src="' + $(this).readAttribute('href') + '"></iframe></td></tr>'});
					$(this).writeAttribute('opened', '1');
				})
			});
		});

          I am however having some problems figuring out how to throw in the slide up/slide down functions

          Any help would be greatly appretiated.

            Write a Reply...