I want to make a textbox with a scrolling effect on hover, but only if the text is longer than the textbox. So here is my try: https://jsfiddle.net/SynapticError/wqh4ts3n/35/
If the text is longer than the textbox, the text should 'scroll' on hover.
If the text is shorter than the textbox, it should do nothing.
In pseudo code it would be like this:
IF scrollcontent.width > navbes.width
{ add css <style type="text/css">navbes:hover .scrollcontent {left: -100px; transition-duration:3s;}</style> }
I don't know how to make it right. I've tried many different ways, but none works. Can anybody help me please?
Just change your overflow "hidden" to "auto" :
navbes {background-color:#5A412E; display:block; width: 180px; height: 50px;
overflow: auto;
position: relative; padding:0px;}
Related
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>
I was trying to make a slider, all good, i finished it, but i saw that the links aren't active, when i hover on them, the cursor is not pointer, if i click on them nothing happens,except the last one.
I remove the css and i saw that the links is ok. So i've tried to find the problem in css.
first:
.caption-wrapper{
position: absolute;
text-align: center;
width: 100%;
}
if i remove position: absolute the links are active, but the jquery movment animating doesn't work anymore.
second:
ul.slides li{
position: relative;
width: 100%;
float: left;
margin-right: -100%;
height: 500px;
}
This time, if i remove float:left the links are active again, but the rest is going crazy.
Here http://screencast.com/t/KLpp6DysMZ8l is a part of the html code. there are 5 li's , and only the last li links works. I have no idea why.
I don't know what to do. I worked a lot at this slider. Anybody has this problem? Thank you!
I suspect they're layering on top of each other because of they're positioned absolute, try using z-index to order them. Use a higher z-index on the active link.
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.
I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table.
Per default the pop ups align themselves to the left, but I would like to align them to the right :
My CSS code looks like something like this :
.Table .Popup {
position:absolute;
z-index:9999;
}
I would like to use the relative position instead of absolute (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?
JSFiddle : http://jsfiddle.net/XJXuR/9/
Does anyone know how this can be done? JQuery or Javascript is fine. Thx.
Just add this CSS code:
tr.TableHeaderLabels td {
position: relative;
}
.Table .Popup {
right: 0;
}
I tried it on your jsFiddle and it works as expected :)
EDIT: Forked the original jsFiddle with my code: http://jsfiddle.net/p3khu/1/
Is this what you're looking for? http://jsfiddle.net/Vf2Td/
.Table .TableHeader td{
border:1px solid red;
margin:0;
padding:0;
position: relative;
}
.Table .Popup {
position:absolute;
z-index:9999;
right: 0px;
}
Give the parent div the position relative. Then the popup which is a child needs a right: 0px; so that it hugs the right of the parent container.
Assuming that you are have relative position on the cells containing two, three, four, etc... you can just add right: 0; to your css above and that should right align them.