I made a menubar using a <div> tag. When it is clicked the <div> below it slides down, and another content below those two <div>'s should stay in its place, but it goes down too.
You can see picture here
As you see in this picture when I click to slide down <div> , the other <div> in bottom of that goes down too. How to fix it?
HTML
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});
You can make a few position changes in your CSS, and place your second <div> inside your first. top:100% mean's that your second div will animate from the bottom of your first div:
HTML
<div id="slide">click to slide down
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
position:relative;
}
#panel{
position:absolute;
top:100%;
box-sizing:border-box;
text-align:center;
border:solid 1px #101010;
width:100%;
height:200px;
display:none;
background:#ff0000;
}
JSFiddle
Try this:
HTML
<div id="menu_container">
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }
Replace your code with this
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}
Related
I'm fairly new to HTML,CSS and Javascript and I'm trying to build a site with, ironically, 'How To' guides and instructions and business processes.
The idea is that I have a container on the side that acts as a 'menu' with buttons in it to select the guide they want.
Once the button is clicked, the container on the right changes. These containers on the right will be the space where the training material is placed, but for now, i have given all the containers a different colour so I can tell when it has changed. I'd like the button functions to work before I start adding everything to the containers. I'm struggling to get the code to work though, so the containers actually change! I've created a J-Fiddle that hopefully will show what I have tried so far..
To be honest I did also 'borrow' some code regarding getting the other containers to .hide when a button is clicked, but it doesn't work for me. If anyone has a more efficient way to hide the other containers (e.g. Containers 1,2 and 3 are hidden when container button 4 is selected), then go for it! Any help is really appreciated.
<div class="centrepositioning">
<div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>
<div id="centrePanel"></div>
<div id="centrePanel2"></div>
<div id="centrePanel3"></div>
<div id="centrePanel4"></div>
<script type="text/javascript">
</script>
<script>
$(function() {
$('#showpanel1').click(function() {
$('div[id^=div]').hide();
$('#centrePanel1').show();
});
$('#showpanel2').click(function() {
$('div[id^=div]').hide();
$('#centrePanel2').show();
});
$('#showpanel3').click(function() {
$('div[id^=div]').hide();
$('#centrePanel3').show();
});
$('#showpanel4').click(function() {
$('div[id^=div]').hide();
$('#centrePanel4').show();
});
})</script>
.centrepositioning
{
border:thin blue solid;
margin:auto;
padding:10px;
width:1337px;
}
.howToLeftList
{
width:250px;
height:300px;
background-color:#004FB6;
padding:10px;
color:white;
float:left;
margin:5px;
}
#centrePanel
{
width:1000px;
background-color:white;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
}
#centrePanel2
{
width:1000px;
background-color:red;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel3
{
width:1000px;
background-color:blue;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel4
{
width:1000px;
background-color:yellow;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
JSFiddle
Ok some notes first:
1) In the fiddle you should put your javascript on the bottom left window, the top left window is for html only, minor, just throwing it as hint.
2) Your fiddle does not have jquery loaded, you can manage external resources on the left menu, right now your $ is undefined in the fiddle
And on to your problem, this selector is wrong
$('div[id^=div]').hide();
this selector is the right one
$('div[id^=centrePanel]').hide();
Your original selector is targeting any div with an id of "div" something, where you name them differently.
Try it and let me know
Here is a working code. In case you need to reference it.
$(function() {
$('#showpanel1').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel1').show();
});
$('#showpanel2').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel2').show();
});
$('#showpanel3').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel3').show();
});
$('#showpanel4').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel4').show();
});
})
.centrepositioning
{
border:thin blue solid;
margin:auto;
padding:10px;
}
.howToLeftList
{
width:250px;
height:300px;
background-color:#004FB6;
padding:10px;
color:white;
float:left;
margin:5px;
}
#centrePanel1
{
width:1000px;
background-color:white;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
}
#centrePanel2
{
width:1000px;
background-color:red;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel3
{
width:1000px;
background-color:blue;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel4
{
width:1000px;
background-color:yellow;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="centrepositioning">
<div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>
<div id="centrePanel1">white</div>
<div id="centrePanel2">red</div>
<div id="centrePanel3">blue</div>
<div id="centrePanel4">yellow</div>
So Basically I have:
HTML:
<div class="div1">
<div class="as-text-box" contenteditable="true"></div>
</div>
CSS:
.div1{
position:absolute;
height:50px;
width:200px;
background:white;
border:1px solid #ccc;
}
.as-text-box{
position:absolute;
height:30px;
width:90%;
background:#ddd;
top:10px;
left:5%;
}
[contentEditable=true]:focus .div1{
border:1px solid black;
}
To be precise I need to change the border color of div1 to black if as-text-box is focused.
I also tried it with JQuery but still no luck.
JQuery:
$(function(){
if ($(".as-text-box").is(":focus")) {
alert("Has Focus");
} else {
alert("Doesn't Have Focus");
}
});
Jsfiddle: https://jsfiddle.net/2xn5rj2y/
All relies are much appreciated.
You can't navigate to a parent element on a css selector. You'll need Javascript for that.
If you want the parent element to change border when the child one is focused, attach a listener to the blur and focus events of the editable div.
$(".as-text-box").on("focus", function() {
$(".div1").addClass("focusClass");
});
$(".as-text-box").on("blur", function() {
$(".div1").removeClass("focusClass");
});
.div1{
position:absolute;
height:50px;
width:200px;
background:white;
border:1px solid #ccc;
}
.as-text-box{
position:absolute;
height:30px;
width:90%;
background:#ddd;
top:10px;
left:5%;
}
.div1.focusClass {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
<div class="as-text-box" contenteditable="true"></div>
</div>
Your selector:
[contentEditable=true]:focus .div1
is trying to select an element with class div1 which is a descendant of a contentEditable element which is focused. This is clearly backwards as the .div1 div is the parent of the contentEditable div.
Simply removing the .div1 part of the selector makes it work:
.div1{
position:absolute;
height:50px;
width:200px;
background:white;
border:1px solid #ccc;
}
.as-text-box{
position:absolute;
height:30px;
width:90%;
background:#ddd;
top:10px;
left:5%;
}
[contentEditable=true]:focus{
border:1px solid black;
outline:none;
}
<div class="div1">
<div class="as-text-box" contenteditable="true">
</div>
</div>
It would also work to reverse the order if you have other reasons for needing to select on div1, but I feel the above solution is the simplest absent other requirements.
I believe you are looking to customize the outline css attribute.
CSS
outline:none;
https://jsfiddle.net/2xn5rj2y/5/
If you are trying to target the parent to have a border, then jquery .parent().css("border","1px solid #000"); would work.
There's no way to do it through css (to select parent), you can do it via jQuery with events focusin and focusout where you can do with parent element what you want.
$('.as-text-box').on('focusin', function(){
/** on focus, set border to a parent **/
$(this).parent().css({'border':'1px solid black'});
}).on('focusout', function(){
/** on lost focus, remove border **/
$(this).parent().css({'border':''});
});
.div1{
position:absolute;
height:50px;
width:200px;
background:white;
border:1px solid #ccc;
}
.as-text-box{
position:absolute;
height:30px;
width:90%;
background:#ddd;
top:10px;
left:5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
<div class="as-text-box" contenteditable="true">
</div>
</div>
Short & simple. When it has focus border turns black, if it loses focus it goes back to #ccc.
$('.as-text-box').on('focus', function() {
$('.div1').css("borderColor", "black");
$(this).on('focusout', function() {
$('.div1').css("borderColor", "#ccc");
});
});
JSfiddle
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
I want to show a textbox next to another div, but it it appears below instead. The position of the textbox must be absolute. This demo demonstrates the issue. Thank you.
css
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
float:left;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
}
html
<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>
js
$('#show').click(function(){
$('#textBox').show();
});
$('#hide').click(function(){
$('#textBox').hide();
});
Most easiest way out would be to replace your css with the below code:
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
margin-left:165px;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
margin-left:76px;
}
Check the fiddle:http://jsfiddle.net/6gk0hybj/4/
Another method as mentioned is the comments can be found at:http://jsfiddle.net/6gk0hybj/5/
If you want it more dynamic , we need to change a bit of javascript. Let me know if you want it to be more dynamic
I have the following layout (Parent div, two child divs)
wanted to make this layout responsive for browser's width, so anytime the user changes the browser's width this layout should occupies the same area of screen
also, I wanted to middle-text the content, I've tried vertical-align: middle;, display: table-cell;
any suggestions?
Markup here
this is your solution html with css
<html>
<head>
<title>test</title>
<style>
.main{
width:97%;
border:1px solid #000;
height:100px;
padding:1%;
}
.subone{
width:30%;
border:1px solid #000;
float:left;
height:100px;
margin-right:2%;
}
.subtwo{
width:67%;
border:1px solid #000;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="main">
<div class="subone">
</div>
<div class="subtwo">
</div>
</div>
</body>
</html>
I have created you a fluid layout, with your divs. You do not need to use media queries.
And also to use
vertical-align:middle;
you must put
display:table;
on the parent div and you must not float the divs inside.
You can check this example
will it be helpful???
use diplay:table; for parent and display:table-cell for childs..decalare parents width in percentage with overflow:hidden;
HTML::
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
CSS ::
.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}
FIDDLE