473,326 Members | 2,095 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

expanding and collapsing

Chrisjc
375 256MB
I am in need of an expanding and collapsing code… The goal is

To be able to click a PICTURE IMAGE and expand to show information

Reason for this is I have 3 TABLES of information of about

400x200… that I want to be able to expand to how much information I put in them…. Just need a code that will cut it off and then OPEN it…

So

++++++++++++++++++++++++++++++++++++++++++
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
++++++++++++++++++++++++++++++++++++++++++

So there is my box. My issue is that the box has more info and I have 2 more boxes below that, that have a lot of info but I want the USER to be able to EXPAND the info INSTEAD OF SCROLLING IN THE BOX… and just be able to scroll down the PAGE then be able to click the image again and it go back to its normal size so if the box was

400x200 to start with and I need it to collapse to lets say 400x900 to display info how could I do this???

Another easy to way to explain this is just like Microsoft with the TREE concepts expanding and collapsing

This would be a grate help.

As I am not sure how to come about this.
Jul 2 '07 #1
13 2703
kovik
1,044 Expert 1GB
Simply switching between display: none and display: block will do exactly what you want, but it's JavaScript, not PHP. This isn't PHP's field.
Jul 2 '07 #2
ak1dnar
1,584 Expert 1GB
Moving Thread from PHP forum – Ajaxrand
Jul 3 '07 #3
Chrisjc
375 256MB
Simply switching between display: none and display: block will do exactly what you want, but it's JavaScript, not PHP. This isn't PHP's field.

eh in that case I am really going to need some help I do not know a LICK of Java / ajax... could anyone be kind enough to help me out???

Would be greatly appreciated!

and sorry I figured this could be done VIA php as well...
Jul 3 '07 #4
kovik
1,044 Expert 1GB
and sorry I figured this could be done VIA php as well...
Yeah, but not on the same page request. The page would need to be reloaded.

And if you're not familiar with JavaScript, the sample code I could give you would do nothing for you. Everything I program is object-oriented (and the fact that the image controls the expansion simply screams that the whole of it should be an object).

You'd need to give the images references to the expandable boxes somehow, and then provide a 'click' event on the images that expands the box. This is a simple set up of it:

Expand|Select|Wrap|Line Numbers
  1. var img = document.getElementById('foo');
  2. img.expanded = document.getElementById('bar');
  3. img.onClick = function()
  4. {
  5.     if(this.expanded.style.display == 'none')
  6.         this.expanded.style.display = 'block';
  7.     else
  8.         this.expanded.style.display = 'none';
  9. }
You'll need to set it up for every instance, so you may be interested in getElementsByTagName, and possibly dynamically generating the JavaScript with PHP.
Jul 3 '07 #5
The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link
http://www.cssplay.co.uk/menu/more_than#more
Jul 4 '07 #6
Chrisjc
375 256MB
The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link
http://www.cssplay.co.uk/menu/more_than#more

CSS?? Styles... I don’t think styling my page.. Which I already am doing is going to help me create a box that can expand and collapse by pressing a LITTLE + sign....


I know this might seem funny.. But check out the World of War craft website...

http://www.worldofwarcraft.com/index.xml

Notice the menu bars on the left... see how they have PLUS signs... and if you click them they expand and show more stuff???

That is what I am looking to do but with a box that is about 400x200

And I tried playing with that code you provided but I got pissed off... I guess I don’t understand it.. well not I guess I don't.
Jul 6 '07 #7
Chrisjc
375 256MB
CSS?? Styles... I don’t think styling my page.. Which I already am doing is going to help me create a box that can expand and collapse by pressing a LITTLE + sign....


I know this might seem funny.. But check out the World of War craft website...

http://www.worldofwarcraft.com/index.xml

Notice the menu bars on the left... see how they have PLUS signs... and if you click them they expand and show more stuff???

That is what I am looking to do but with a box that is about 400x200

And I tried playing with that code you provided but I got pissed off... I guess I don’t understand it.. well not I guess I don't.

Dang everything I just said you dont even need to go look at the WOW site... you can simply look in the Control Panel on here... (Your user account here at the top of thescripts)

and you will see a list of threads you are in... notice the little + at the top right of the box they are listed in.. you can collapes the box so nothing shows THAT is EXACTALLY WHAT I WANT lol

???
Jul 6 '07 #8
Chrisjc
375 256MB
The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link
http://www.cssplay.co.uk/menu/more_than#more


I looked at this some more and that is something I like by clicking more it expands... grate... but looking around some more I couldn’t find any tutorials or anything on how to make all this in CSS???

I didn’t think that was possible first off... and 2nd... if so where do I find some tutorials on how to make this stuff?? And what would I call it even if I was trying to search a site.... Or Google?
Jul 6 '07 #9
I looked at this some more and that is something I like by clicking more it expands... grate... but looking around some more I couldn’t find any tutorials or anything on how to make all this in CSS???

I didn’t think that was possible first off... and 2nd... if so where do I find some tutorials on how to make this stuff?? And what would I call it even if I was trying to search a site.... Or Google?
I dont really got the problem man!
This site has lots of samples of stuff using css and you just need to look at the source and view how its done! The author itselfs tells that you can use the techniques!

Just get the working sample, copy it to an empty html, and try modifying it yourself! If you get stuck ask for help here!
Jul 8 '07 #10
Chrisjc
375 256MB
I dont really got the problem man!
This site has lots of samples of stuff using css and you just need to look at the source and view how its done! The author itselfs tells that you can use the techniques!

Just get the working sample, copy it to an empty html, and try modifying it yourself! If you get stuck ask for help here!

yeah but just copying it doesnt help me learn.. I figure there must be some kind of tut out there??? If not I guess I will just mess with it..

But thanks
Jul 9 '07 #11
Just get what is "important" in the styling and you will see its "easier" than you thought

Estructure:

Expand|Select|Wrap|Line Numbers
  1. <div class="holder">
  2. already visible text<br>
  3. already visible text<br>
  4. already visible text<br>
  5. already visible text<br>
  6.  
  7. <a class="hidden" href="javascript:void(0)"><span>more »</span>
  8.     <em>
  9.     appear when clicked<br>
  10.     appear when clicked<br>
  11.     appear when clicked<br>
  12.     appear when clicked<br>
  13.     appear when clicked<br>
  14.     appear when clicked<br>
  15.     </em>
  16. </a>
  17. </div>
  18.  
Css:
Expand|Select|Wrap|Line Numbers
  1. .holder {width:120px; border:1px solid #ddd; background:#eee;}
  2. a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
  3. a.hidden em {display:none;}
  4. a.hidden:hover {text-decoration:none;}
  5. a.hidden:active em, a.hidden:focus em {display:block; background:#eee; color:#000; width:120px; position:absolute; left:-1px; top:0px; border:1px solid #ddd; border-width:0 1px 1px 1px;}
  6.  
Explaning css:

1 -- set a class to the element that will "hold" everything... do whatever you need here (color, borders, width,e tc)
2 - autor is setting a class to a specific anchor. Position:relative is needed because this anchor will hold every hidden element (like the em and the rest of the text). Outline-style prevents a kind of "focus border" in firefox. Z-index is to stay above other elements in your page.
3 - force the elementl EM inside your specific anchor to be hidden
4 - removing normal effect of anchor to gain decoration
5 - display (block) the EM element when the element is clicked (:focus, :active).Set EM position to absolute so it can be "floating" freely over other elements in the page.

Thats basically it!
Jul 9 '07 #12
Hi,
I love it. It works great. Only, have you had issues with Safari on a Mac? It expands, but it doesnt stay open. any ideas what's going on?

thanks.

Just get what is "important" in the styling and you will see its "easier" than you thought

Estructure:

Expand|Select|Wrap|Line Numbers
  1. <div class="holder">
  2. already visible text<br>
  3. already visible text<br>
  4. already visible text<br>
  5. already visible text<br>
  6.  
  7. <a class="hidden" href="javascript:void(0)"><span>more »</span>
  8.     <em>
  9.     appear when clicked<br>
  10.     appear when clicked<br>
  11.     appear when clicked<br>
  12.     appear when clicked<br>
  13.     appear when clicked<br>
  14.     appear when clicked<br>
  15.     </em>
  16. </a>
  17. </div>
  18.  
Css:
Expand|Select|Wrap|Line Numbers
  1. .holder {width:120px; border:1px solid #ddd; background:#eee;}
  2. a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
  3. a.hidden em {display:none;}
  4. a.hidden:hover {text-decoration:none;}
  5. a.hidden:active em, a.hidden:focus em {display:block; background:#eee; color:#000; width:120px; position:absolute; left:-1px; top:0px; border:1px solid #ddd; border-width:0 1px 1px 1px;}
  6.  
Explaning css:

1 -- set a class to the element that will "hold" everything... do whatever you need here (color, borders, width,e tc)
2 - autor is setting a class to a specific anchor. Position:relative is needed because this anchor will hold every hidden element (like the em and the rest of the text). Outline-style prevents a kind of "focus border" in firefox. Z-index is to stay above other elements in your page.
3 - force the elementl EM inside your specific anchor to be hidden
4 - removing normal effect of anchor to gain decoration
5 - display (block) the EM element when the element is clicked (:focus, :active).Set EM position to absolute so it can be "floating" freely over other elements in the page.

Thats basically it!
Sep 26 '07 #13
Hello,

I was just explaining the code, it wasnt me who created it
And unfortunately i dont have a mac to test the issues you found on safari

But i hope you can fix it and share the solution with us :)
Good luck
Oct 11 '07 #14

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: Spartanicus | last post by:
I've been caught out by what I thought was an Opera 7.5p1 issue: http://www.spartanicus.utvinternet.ie/test/opera7.5p1_css_background_image_issue.htm but as was pointed out to me this is actually...
1
by: Bhiksha Raj | last post by:
Hi, I created an expanding menu on one of the frames in my webpage using code I got from http://www.dynamicdrive.com/dynamicindex1/navigate1.htm I have embedded the code (with minor...
5
by: Borris | last post by:
<div style="background-color: blue; width: 500px; height: 300px"> <div style="background-color: red; margin-top: 100px; margin-left: 100px; width: 300px; height: 100px"> </div> </div> Where...
1
by: yb | last post by:
Hi, I'm looking for clarification of css 2.1 specification in section 8.3.1 "Collapsing Margins" The 6th bullet reads "If the top and bottom margins of a box are adjoining ..." I won't paste...
6
by: Jack | last post by:
Hello, I would like some advice on how to disable the behavior of treeviews to expand and collapse when double clicked upon, but still allow the user to use the plus and minus on each node. ...
5
by: SlowArrow | last post by:
Here collapsing seems to work differently in vb.net 2005 from that I use to see in vb.net 2003: Using the collapsing in vb.net 2003 shows the whole interface of the methods, subroutines,...
1
by: Rahsaan Page | last post by:
Hello Everybody, I am trying to write a file Explorer program in Java, i go the Frame, Basic Menu and Tree going. But now i have the C: listed and i need some help expanding and collaping the...
1
by: Jahedx99 | last post by:
Check out the site: www.progtalk.com. They have a great article to expand and collapse rows of a grid. The cool part it, that the expanding and collapsing happens using Javascript. I think the...
4
by: Sean | last post by:
Hi, all, In a table I can easily get those expanding nodes (+ and - signs) to expand/collapse subdatasheets. How can I get those in forms? Thanks, Sean
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.