Input field resize - javascript

I'm having trouble with re-sizing my search input bar. I've managed to make it re-size when the browser window gets smaller using width:100%;. But I can't get the starting width to be 300px without making it always 300px and then it's goes out of the parent div on resize. For some reason it's 185px;
Here's the jsfiddle of my set-up.

You are embeding your input into a span by calling $('.search2').typeahead. This span has the css-class twitter-typeahead wich is not set to width: 100%;
Add this to your CSS:
.twitter-typeahead {width: 100%;}
Then you need to change your div container css to this (width: 100%; max-width: 300px;):
.div2 {
float: left;
width: 100%;
max-width: 300px;
padding-left: 20px;
}
Leaving width: 100%; on your input is fine!
See the working code: http://jsfiddle.net/utg4mh6z/1/

Just remove all the float: left; and it works. It seems they are not required anyway. At least you don't state it anywhere and floating for 100% width elements makes no sense from my point of view.

Related

CSS overflow: auto by 'touching' bottom div

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/

Using JS CSS to set position causes different outcome than the same setting using pure CSS

Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6e1vg58L/
The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?
For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?
$(document).on("scroll", function(){
if($(window).scrollTop() > 0)
{
$("#nav-content").css("position","fixed");
}
else
{
$("#nav-content").css("position","relative");
$("#nav-content").css("top",0);
}
});
vs
#nav-content {
position: fixed;
}
At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.
Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.
fixed
Do not leave space for the element. Instead, position it at a
specified position
so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.
the changes to fix could defining the initial widths in % relative to each other.
#content {
position: relative;
background-color: #eee;
width: 70%;
max-width: 1300px;
min-width: 450px;
height: auto;
}
and then the same for navigation
#navigation {
width: 30%;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/vemtyyox/
another way to keep the navigation at 300px could be to use calc to define the width of the content
#content {
position: relative;
background-color: #eee;
width: calc(100% - 300px);
max-width: 1300px;
min-width: 450px;
height: auto;
}
#navigation {
width: 300px;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/9db77jvp/
Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.

How to reveal element by scrolling?

I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors

Make z-index child higher than parent

I've seen several posts like this and I haven't found anything specifically targeting the problem I am having (maybe I didn't search enough, forgive me for that!).
Anyway, I basically need my child div to position itself over the parent div.
Here's the catch though, the child has to be nested inside the parent div, example:
<div id="parent">
<div id="child"></div>
</div>
My parent is basically a moving block (that you can move with arrow keys) and the child is basically an attribute to the parent and should move with it but over it as well.
Is this possible?
I also want to do this without having to write a separate movement code for the child.
You can use this CSS to peg the child to be the full size of the parent (which will cover the parent background):
#parent {position: relative; height: 200px; width: 200px;}
#child {position: absolute; height: 100%; width: 100%;}
Working demo that shows you can move the parent and the child stays covering it: http://jsfiddle.net/jfriend00/XGU4w/
Or, if you only have the one single child, then it's simply a matter of setting the child height and width to be 100% and then setting a size on the parent.
#parent {height: 200px; width: 200px;}
#child {height: 100%; width: 100%;}
Working demo: http://jsfiddle.net/jfriend00/s89a3/
Try this fiddle: http://jsfiddle.net/sNW8W/
You simply have to give the child element a higher z-index. The code from the previous answer would not work, providing no z-index. Remember: only elements that carry the position attribute can make use of the z-index property.
#parent {
position: relative;
background:red;
height:100px;
width: 100px;
z-index:0;
}
#child {
position: absolute;
top: -10px;
left: 25px;
background: green;
height: 50px;
width: 50px;
z-index: 10;
}

div shift to left with page loading

I'm working on this site egtripper.com and with page loading the slider section float to left instead of be in the center, see this image and when I try to inspect element with google chrome tool this problem disappear and the page be as expected see this image
this is the css code for the slider div
.slider {
width: 1000px;
height: 330px;
margin: 30px auto;
overflow: hidden;
min-width: 980px;
position: relative;
}
can any one help me solving this issue
Add to .wrapper css style
.wrapper{
text-align:center;
}
slider element has a set margin 0 auto so it is necessary to have more momentum to center the elements inside the wrapper

Categories