I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>
Related
I have .rc divs inside a .rcs div. The .rcs divs are sortable. The .rcs divs are inside a .ra div. The .ra div are draggable.
When I move a .rc from the first .ra to the second one, during the transition, the .rc is hidden.
I don't get this behaviour when I make the .ras div sortable (.ras is the parent of .ra).
Thanks for help.
$(document).ready(function() {
$(".ra").draggable({
zIndex: 100
});
$(".rcs").sortable({
connectWith: ".rcs",
});
});
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
overflow: auto;
position: relative;
}
.header {
background-color: white;
color: black;
height: 50px;
width: 26%;
position: absolute;
}
.rcs {
margin-top: 50px;
margin-bottom: : -50px;
height: 150px;
}
.box {
width: 60px;
height: 40px;
float: left;
background-color: black;
border-radius: 3px;
font-size: 80%;
color: white;
margin: 1px;
padding: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="ras">
<div class="ra">
<div class="header">
<div class="ra_name">Martini, Johnny </div>
</div>
<div class="rcs" id="ra1_rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
<div class="ra">
<div class="header">
<div class="ra_name">Martin, John</div>
</div>
<div class="rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
This issue comes from CSS. If you comment overflow: auto; from your CSS like below, it works properly.
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
/* overflow: auto; */
position: relative;
}
Online demo (jsFiddle)
code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>
I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;
I am currently redisigning a page - making it so JS handles the upload of the content from a txt file and CSS formats the layout of divs and HTML contains the divs. What i am trying to do is hide the DIVs that DO NOT have any content in it - currently if tehre is no content it will still display the div as a long thin line. I've tried several suggestion, however having trouble of making it work properly. Have tried 'empty cell' option in CSS, but that ruins the layout for some reason.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BROADCAST</title>
<link rel="stylesheet" href="BCdata/WebStyles.css">
<script src="jquery-ui/jquery-1.9.1.min.js"></script>
<script src="BCdata/ContentHandler.js"></script>
</head>
<body class="main">
<!--------------------------------DONT CHANGE UNLESS NEEDED-------------------------------------------------------------->
<div id="buttons_div">
<!------------------Banner---------------------------------------------------------------------------------------->
<img src="images/broadcastbanner.gif" id="Image35">
<span id="CurrentDate"></span>
</div>
<div id="buttons_div" style="top:10px;">
<!------------Archive Calendars----------------------------------------------------------------------------------->
<img src="images/broadcast2013archive.gif" id="Image4">
<img src="images/broadcast2014archive.gif" id="Image5">
<!--------------Signoff Sheet------------------------------------------------------------------------------------->
<img src="images/broadcastsignoff.gif" id="Image6">
<!----------------------Up and Home------------------------------------------------------------------------------->
<img src="images/Up.GIF" id="Image2">
<img src="images/Home.GIF" id="Image3">
</div>
<!-------------------------------------------CONTENT DIVS------------------------------------------------------------------>
<div id="content_divs" style="top:20px; background-image: url(images/bluebox.png);">
<p id="div1" style="color:white;"></p>
</div>
<div id="content_divs" style="top: 30px; background-image: url(images/whitebox.png);">
<p id="div2"></p>
<p id="div2"></p>
</div>
<div id="content_divs" style="top: 40px; background-image: url(images/redbox2.png);">
<p id="div3" style="color:white;"></p>
</body>
</html>
Here is my CSS
#CurrentDate
{
position: absolute;
top:15px;
left: 210px;
width:700px;
text-align: center;
z-index: 8;
color:white;
font-family:Arial;
font-size:35px;
text-transform: capitalize;
}
.main
{
background-color: #FFFFFF;
background-image: url(backbox.gif);
color: #000000;
text-align: center;
position: relative;
overflow: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
}
.main #content_divs
{
position: relative;
text-align: left;
z-index: 1;
width: 960px;
margin: 0 auto;
border-style : solid;
border-width: 3px;
border-color: white;
overflow: hidden;
}
h1
{
font-family: Arial;
font-size: 20px;
font-weight: bold;
position: relative;
text-transform: capitalize;
font-weight: bold;
z-index: 5;
}
h2
{
font-family: Arial;
font-size: 13px;
font-weight: bold;
position: relative;
z-index: 5;
}
p
{
font-family: Arial;
font-size: 13px;
position: relative;
z-index: 5;
margin-left: 20px;
margin-right: 20px;
}
#buttons_div
{
position: relative;
}
#Image35
{
position:relative;
border: 0px #000000 solid;
width: 960px;
height: 96px;
z-index: 2;
}
#Image2
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 90px;
height: 34px;
z-index: 3;
}
#Image3
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 86px;
height: 34px;
z-index: 4;
}
#Image4
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px; z-index: 5;
}
#Image5
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 6;
}
#Image6
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 7;
}
This is JS (content handler)
$(function()
{
$("#div1").load("BCdata/Content061114.txt .Div1 #p1");
});
$(function()
{
$("#div2").load("BCdata/Content061114.txt .Div2 #p1");
});
$(function()
{
$("#div3").load("BCdata/Content061114.txt .Div3 #p1");
});
$(function()
{
$("#CurrentDate").load("BCdata/Content061114.txt #CurrentDate");
});
onload=function()
{
var content_divs=document.getElementById('Div2');
if(!div2.hasChildNodes()){content_divs.style.display='none'}
}
And this is a TEXT file where content is located
<span id="CurrentDate">thursday 6th november 2014, wk 40</span>
<!----Use <p> tag for indentation of a text, otherwise use <div> tag------>
<div class="Div1">
<div id="p1">
<h1 style="color:white;">Congratulations to 66!</h1>
<div>PDFs of 'Record Weeks' are now available on the Intranet.</div>
<h2>Heading 1</h2>
<p>Content is here</p>
<h2>Heading 2</h2>
<p>Content is here</p>
<div><b><i>Click the link on the right to view PDFs</i></b></div>
</div>
</div>
<div class="Div2">
<div id="p1">
<h1 style="color:black;">Poster</h1>
<div>Poster Content</div>
</div>
</div>
<div class="Div3">
<div id="p1">
<h1 style="color:white;">heading Content is here</h1>
<div>Content is ehre blabla</div>
</div>
</div>
Any help is much apreciated - sorry if it seems that i am asking to fix the problem for me, but i am new to this and very keen to learn. Been stuck on this for a while now
You could try :empty pseudo-class.
div:empty {
display: none;
}
<div></div>
<div>div with content</div>
Reference: MDN
Something like this would work.
elementList = document.querySelectorAll('div');
for(var i = 0; i < elementList.length; i++)
{
var element = elementList[i];
(element.children === 0) ? element.style.display = "none": element.style.display = "block";
}
What this does it get all Div elements, puts them in an array, then checks each one, if it does not have a child it sets display to none, if it does it sets display to block.
EDIT
If you don't want it to mess with divs with children atall, just change if statement to:
(element.children === 0) ? element.style.display = "none": "";
We use .children because this only returns Element objects (aka HTML tagged stuff) and not 'absolutely' every child.
demo - http://jsfiddle.net/y7mgmm2u/
thanks to #emmanuel
*:empty {
display:none;
}
<div>
<p><span></span>
</p>
</div>
<div>test</div>
<p></p>
<p>test</p>
I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});
use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position
The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/
Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"