I have a structure where there is a container and there are two slides in it. There is one text input field in each slide.
When input field on the first slide is focused, if user hits TAB key, automatically focus gets shifted on the input field of the second slide and second slide gets visible. (notice that margin-left:0px !impotant is still applied but still DIV is moved)
I don't want to disable TAB key which also means using tabindex="-1" is not a solution because it will isolate the text input from navigation .
I don't mind if focus is shifted to the second input field, but second slide should not move and get visible. I tried using margin-left:0px !important it didn't work.
How do I prevent this behavior using HTML and CSS?
Live Example is here
HTML
<div class="container">
<div class="slider">
<div class="inner">
<input type="text" placeholder="please click me and hit tab">
</div>
<div class="inner" style="background:#797979">
<input type="text">
</div>
</div>
</div>
CSS
.container{
margin-top:200px;
margin-left:300px;
height:300px;
width:300px;
border:1px solid red;
overflow:hidden;
}
.slider{
margin-top:0px;
margin-left:0px;
height:100%;
width:200%;
}
.inner{
margin-top:0px;
margin-left:0px;
height:100%;
width:50%;
background:#cecece;
float:left
}
input{
width:200px;
margin-top:20px;
margin-left:46px;
height:40px;
color:black;
padding-left:2%
}
The easiest way to do this would be to add tabindex="-1" as a property to the second input field (or whichever ones are necessary, depending on your preference). It would look something like this:
...
<input type="text" tabindex="-1">
...
Hope this helps.
Related
On a search page, there is a text input with a submit button to the right. When zooming in, the submit button actually goes on top of the search bar, because there is no room. Is there any way I can prevent the button from moving when it is out of room?
HTML
<input type="text">
<input type="submit">
You just have to wrap your input elements inside a wrapper and give it fixed width.
Take a look at the example => DEMO
HTML
<!--This is the wrapper element-->
<div class='wrapper'>
<input type="text">
<input type="submit">
</div>
CSS
.wrapper{
width:200px; /*fixed width, so if the window is resized (zoomed in/out), it won't break*/
height:40px;
}
.wrapper input[type="text"]{
width:100px;
height:inherit;
border:1px solid red;
}
.wrapper input[type="submit"]{
width:90px;
height:inherit;
border:1px solid brown;
}
While it's hard to answer without the code, but hope it helps:
<table>
<tr>
<td><input type="text" name="query"></td>
<td><input type="submit"></td>
</tr>
</table>
Not so nice and I don't like it myself, but it works in any situation.
Am having 2 label inside a td and am trying to make the alignment work
Is it possible ?
Here is Fiddle for the same explaining issue and how i need.
jsFiddle
<tr>
<td><label >Some Label Test:</label><label>Some Label Test:</label></td>
<td>
<label >Some Label Test:</label>
<label >here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instaead from some</label></td>
</tr>
Am looking for second label inside if the length is long it is coming to next line and starts from where the second label has started.
Here is a simple div usage of how to get what you want. http://jsfiddle.net/KHAJz/3/
HTML
<div class="container">
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="text">here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instead </div>
</div>
CSS
.container{
width:700px;
height:60px;
display:inline-block;
}
.first{
width:60px;
height:60px;
display:inline-block;
float:left;
}
.text{
width:300px;
display:inline-block;
float:left;
}
What you do is make a container that holds everything together so that the tables or divs don't go everywhere.
If you don't want (or cant) change your DOM,
just add this to your CSS
label
{
display: inline-block;
height: 100%;
}
See this Working Fiddle
But if you can change your DOM, I'd recommend you to leave the Table layout and reconstruct your layout with divs. -like in Keith's answer.
i have issue hiding overflow contents / div (#map_Marker_Check_Block) inside another div. The parent div position nearly mid of screen. The div "map_Marker_Check_Block" is position to right -12em. so when user click this div, jquery plays animation and slide whole div to position right 0. the functional part is working fine, is just have issue of hiding #map_Marker_Check_Block div (15em-12em). note because i need y-scrolbar to see contents in hidden div contents also.
html
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school">
<label class="marker_label">School</label> <input class=
"marker_ckeckbox" name="markerType" type="checkbox" value="school">
</div><br>
<div class="markerDiv" id="maker_gym">
<label class="marker_label">Gym</label> <input class="marker_ckeckbox"
name="markerType" type="checkbox" value="gym">
</div><br>
</div>
css
#sp_tab2 {
position:relative;
}
#map_Marker_Check_Block {
display:block;
position:absolute;
width:15em;
height:400px;
top:0;
right:-12em;
z-index:10;
overflow-x:hidden;
overflow-y:auto;
}
ahhh!! late night work and this is what happened, my fault. i miss overflow: hidden property in parent tab.
#sp_tab2 {
position:relative;
overflow:hidden;
}
Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.
<style type="text/css">
#holder{
width:200px;
height:200px;
}
.clickMe {
width:100px;
height:100px;
cursor:pointer;
background-color:red;
border:1px solid black;
float:left;
margin:-1px;
padding:0;
}
.hidey {
position:absolute;
top:0;
left:0;
z-index:50;
height:50%;
width:50%;
opacity:.25;
background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
</div>
Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).
Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.
See this answer for details:
Trigger a button click with JavaScript on the Enter key in a text box
Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.
See the second answer here for how to do that.
How do I get the absolute position of a mouse click from an onClick event on the body?
EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.
Let me suggest the simple old school method rather than going to any length to make this work.
Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.
I.E. rather than this:
<div class="wrapper">
<div class="clickMe">
...
</div>
<div class="clickMe">
...
</div>
</div>
Use this:
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.
I would like to implement a web page which contains tabs, the tabs are on top, bottom and left hand side of the page, like following:
Where the middle space is used for content change when user clicked a tab.
I am wondering What is the best way to implement this kind of layout?
I intend to use html table, but I am not sure if table cell can be CSS to a tab-like component? And how to do that?
Or is there any other way to implement this which is better than a table?
Do not use a table, as this is not tabular data.
Instead, you should consider using divs and styling with display:table; etc.
So, you would use
display:table;
display:table-cell;
display:table-column;
display:table-row;
Then you could use jQuery to make the divs clickable and to show() and hide() the content.
EDIT
Here is a simplified version to get you started:
HTML
<div id="page">
<div id="top_row">
<div class="top_row_cell" id="tab1">Tab 1</div>
<div class="top_row_cell" id="tab2">Tab 2</div>
<div class="top_row_cell">Tab 3</div>
</div>
<div id="middle_row">
<div class="middle_row_cell"></div>
<div class="middle_row_cell empty"></div>
<div class="middle_row_cell empty"></div>
</div>
<div class="content" id="content1">This is the content</div>
<div class="content hidden" id="content2">THIS IS THE OTHER CONTENT</div>
</div>
CSS
div#page{
display:table;
border-collapse:collapse;
width:500px;
position:relative;
}
div#top_row, div#middle_row{
display:table-row;
}
div.top_row_cell, div.middle_row_cell{
display:table-cell;
width:160px;
height:50px;
border:1px solid red;
border-collapse:collapse;
text-align:center;
}
div.middle_row_cell.empty{
border:none;
}
div.content{
display:block;
position:absolute;
top:52px;
left:166px;
background:red;
color:white;
width:334px;
height:51px;
}
div.hidden{
display:none;
}
JS
$('#tab1').click(function(){
$('.content').addClass('hidden');
$('#content1').removeClass('hidden');
});
$('#tab2').click(function(){
$('.content').addClass('hidden');
$('#content2').removeClass('hidden');
});
Working Example: http://jsfiddle.net/jasongennaro/9W7NE/
NOTE:
the jQuery is super simplified and is just for show. More robust logic is needed
I only coded clicks for tabs 1 and 2
You could use tables. Check out http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml for example.
But I would prefer just using <div>'s and position them nicely using CSS.
I have stubbed out an example for you that doesn't use a table.
It doesn't look very nice because I've added coloured borders to show you where each part is.
http://jsfiddle.net/Sohnee/Hvx2x/
may be you could start with something like this
http://jsfiddle.net/xVDtW/ a css table, I just don't have time now to solve the right margin thing. if you have time I can do this in a few hours or so, just let me know