SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How is the reveal done?

    Some sites have example code which is not completely viewable within the text field. But once there is an onClick or hover the code stretches out of the field or text box to show it all or allow it to be selected and copied. This effect does not move any of the existing layout. As if the reveal was on a different z-index.
    -=SunnaH=-

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    That sounds very much like JavaScript. Do you have an example?

  3. #3
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish I did or I probably would not have to ask :-) I have seen it on a few CSS blogs so I am hoping I stumble on one again.
    -=SunnaH=-

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SunnaH View Post
    Some sites have example code which is not completely viewable within the text field. But once there is an onClick or hover the code stretches out of the field or text box to show it all or allow it to be selected and copied. This effect does not move any of the existing layout. As if the reveal was on a different z-index.
    Well without some sort of site to reference this with, I'd say it would be done in Javascript.

    Is the stretching htat appears, is that instant or does the stretching occur over some short period?

    You can have disabled="true" (I think that's how you write it) on <input>'s or textareas to avoid people from typing/editing it in, although I do believe you'd need Javascript to switch that setting.

    So either way I do think there is probably at LEAST a little bit of Javascript going on .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    W/o seeing the code that could be done any number of ways, with j/s or even CSS3.

    I am thinking, since this is the CSS forum, that it could be a combination of OVERFLOW:hidden; , explicit height, CSS transition with a applied for that smooth effect.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Did you mean something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .textbox{
    	width:400px;
    	border:1px solid #000;
    	white-space:nowrap;
    	text-overflow:ellipsis;
    	padding:5px;	
    	overflow:hidden;
    }
    .textbox:hover{overflow:visible}
    
    </style>
    </head>
    
    <body>
    <p class="textbox"> This is a longline of text that would normally stretch outside the confines of the container</p>
    </body>
    </html>
    To use a transition you'd have to have a width for the expanded state which may not be as useful (transitions don't work with auto width).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .textbox {
    	width:410px;
    	float:left;
    }
    .textbox p {
    	padding:5px;
    	border:1px solid red;
    	background:#fff;
    	margin:0;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    	overflow:hidden;
    	width:400px;
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    	position:relative;
    	z-index:2;
    }
    .textbox p:hover { width:600px }
    .test {
    	float:left;
    	margin:0 0 0 10px;
    	height:50px;
    	width:200px;
    	background:red;
    	color:#fff;
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <div class="textbox">
    		<p>This is a longline of text that would normally stretch outside the confines of the container</p>
    </div>
    <div class="test">Normal content</div>
    </body>
    </html>

  7. #7
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS ON Hover Between Two Floated Divs

    Is there a method to have a slider between two divs set at 50 % floated side by side that reveals the content of the left div by expanding to 80% on mouse over and the right div decreases to 20 %. Then the mouse over to the right div will increase it to 100% while decreasing the left div to 20%. Of course the transition between the two is at the same time should be gradual not an immediate click instance change.
    -=SunnaH=-

  8. #8
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,204
    Mentioned
    106 Post(s)
    Tagged
    1 Thread(s)
    The easiest way to do it is just to set an inside margin on each div. Then on hover, set a minimum-width to 80%. This should get you the behavior you desire.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  9. #9
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. Do you mind providing example code? I am a bit new and a visual example works better for me.
    -=SunnaH=-

  10. #10
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope I was explaining myself correctly in the beginning. Basically I am looking for the onMouseOUt for teh left and right divs to go back to its original width such as 50%. So the onMouseOver on either the left or right div will expand it to 80% while the right side decreasing to 20% This would work the same if for the other side too. When the user mouses over the right side which is currently at 20% the right div would expand to 800% and the left div will be at 20%. This transition happens simultaneously and is smooth. I was told the CSS3 property of transition would do something like this. AND I am only coding for IE 9+, Safari, Chrome, Firefox.

    UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition but I would need two of them side by side alternatively increasing and decreasing.
    -=SunnaH=-

  11. #11
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition. But would need two of them side by side alternatively increasing and decreasing. 80%/20% or 20%/80%
    -=SunnaH=-

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SunnaH View Post
    UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition. But would need two of them side by side alternatively increasing and decreasing. 80%/20% or 20%/80%
    Doesn't my second example do exactly what you want?

  13. #13
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Doesn't my second example do exactly what you want?
    Yes it does for the left. I could not get it to behave the same way for the right. And instead of the z-index the left layer should push the opposite side on the same z level.
    -=SunnaH=-

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    You lost me there lol

    You originally said you wanted the textbox to expand but not to influence the layout so it just slides over the top - which is what my example does.

    I'm not sure what you are after now but the w3c link you pointed to is no different in essence from the effect in my example.

    If you want content on the right to move out of the way then just remove the fixed widths from the parent.

  15. #15
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am very sorry Paul. I have been trying to make the code work the way I want but I am not getting. I also am trying to follow this examplehttp://jsfiddle.net/yCY9y/3/ but it is not firing. I think this effect can be achieved with ease-in-out. So no JavaScript :-)
    -=SunnaH=-

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Do you mean something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .textbox {
    	padding:5px;
    	border:1px solid #999;
    	background:#fff;
    	margin:0;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    	overflow:hidden;
    	width:400px;
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    	position:relative;
    	z-index:2;
    	float:left;
    	background:yellow;
    }
    .textbox:hover { width:700px }
    .test {
    	margin:0 0 0 10px;
    	overflow:hidden;
    	background:red;
    	color:#fff;
    	text-align:center;
    	padding:10px;
    }
    </style>
    </head>
    
    <body>
    <p class="textbox">This is a longline of text that would normally stretch outside the confines of the container</p>
    <div class="test">Normal content</div>
    </body>
    </html>

  17. #17
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, master Paul. How do u get the right side to behave the way?
    -=SunnaH=-

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The yellow part is floated, the red is not. By default, the red has no width, and due to the nature of what is happening, the red will take up the available width left. When Paul uses the CSS3 to expand the width, the red box (because there is less width available now), has to get smaller.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Been trying unsuccessfully yesterday. I was adding additional styles using a different class name for the right side thinking it would behave the same.
    -=SunnaH=-

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What additional styles are you trying to add?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *FYI: I do not have Internet connection at my desk. I have a tablet I am using which is not optimal to type. I am using a terminal not near my desk right now

    I am floating the right [float: left;] and on hover increase the width [rightSide:hover85%]. I set the transitions on the right side too.

    rightSide {
    white-space:nowrap;
    overflow:hidden;
    width:20%;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -ms-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    position:relative;
    z-index:2;

    The styles for the left are fighting with the right. I can make it work for the right if I remove the left transitions and float. Should I also have them both on different z-indexes too?
    -=SunnaH=-

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You lost me again

    If you want the expanding div on the right just move it around like so:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .textbox {
    	padding:5px;
    	border:1px solid #999;
    	background:#fff;
    	margin:0;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    	overflow:hidden;
    	width:20%;
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    	position:relative;
    	z-index:2;
    	float:right;
    	background:yellow;
    }
    .textbox:hover { width:80% }
    .test {
    	margin:0 0 0 10px;
    	overflow:hidden;
    	background:red;
    	color:#fff;
    	text-align:center;
    	padding:10px;
    }
    </style>
    </head>
    
    <body>
    
    <p class="textbox">This is a longline of text that would normally stretch outside the confines of the container</p>
    <div class="test">Normal content</div>
    </body>
    </html>
    z-index has nothing to do with the effect as they are not overlapping.

    The static element should not be floated and uses overflow:hidden to create a rectangular block to the side of a float that will fill the remaining space whatever it is (ie6 and 7 would need zoom:1.0 to create the same effect as the overflow:hidden does).

  23. #23
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to confuse. I am trying to see what I am saying and doing incorrectly. If I do not get it today I will try to copy my code and post it tonight. BUT TO CLAIFY... the effect you made initially is nice and it behaves correctly. I am asking if the right side could also push the left on hover the exact same way. So ultimately you have both left and right sides behaving the same way as you made the left side.
    -=SunnaH=-

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not sure what practical use it will be but I think you are after something like this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .box1,.box2{
    	width:50%;
    	background:red;
    	float:left;
    	margin:0 -1px 0 0;	
    	-webkit-transition: width 1s ease-in-out;
    	-moz-transition: width 1s ease-in-out;
    	-ms-transition: width 1s ease-in-out;
    	-o-transition: width 1s ease-in-out;
    	transition: width 1s ease-in-out;
    	min-height:200px;
    }
    .box2{
    	float:right;
    	margin:0 0 0 -1px;	
    	background:blue;
    }
    .wrap:hover div{ width:20% }
    .wrap .box1:hover{width:80%}
    .wrap .box2:hover{width:80%}
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="box1">Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
    		<div class="box2">Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
    </div>
    </body>
    </html>

  25. #25
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •