Divs side by side and under each other - javascript

First post here. I will provide pictures of the problem.
Hello!
I am currently working with a project where i have 2 divs that should always be on the top of the page. Side by side. That's no problem. The problem appears when i add new divs which should be side by side, but under the first 2 ones.
The size of the first 2 divs differ, and if the second of the 2 top ones is "shorter" than the first one, the ones that i add under these two ends up at wierd positions.
Every block is in ones own div and every div is in a big div. Hope you guys can help.
Here is the classes:
.panelLeft {
width: 40%;
float: left;
}
.panel {
background: #eee;
padding: 20px;
margin: 10px;
border-radius: 7px;
-webkit-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
-moz-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
}
.displayNone {
display: none;
}
Here is some example code:
<div>
<div>
<table>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton1" Text="Toggle div1" OnClientClick="toggleDiv('divNr1'); return false;" />:</td>
</tr>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton2" Text="Toggle div2" OnClientClick="toggleDiv('divNr2'); return false;" />:</td>
</tr>
</table>
</div>
<div id="divNr1" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral1" Text="Some text"/></td>
</tr>
</table>
</div>
<div id="divNr2" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral2" Text="Some text"/></td>
</tr>
</table>
</div>
</div>
And here is the toggle funtcion:
function toggleDiv(divName) {
if (divName === 'divNr1') {
divNr1.toggle("fast");
}
else if (divName === 'divNr2') {
divNr2.toggle("fast");
}
}
Ill show you what i mean with a picture:
And how i want it is like this:
Thanks you so much!

Enclose each row of divs in another div. Like this:
<div>
<div>left</div>
<div>right</div>
</div>
<div>
<div>left</div>
<div>right</div>
</div>
etc...

Use inline-block for your divs, like this;
<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
<div id="div3"> Div 3</div>
<div id="div4"> Div 4</div>
<div id="div5"> Div 5</div>
and this CSS
body {
font-size: 0;
}
div {
width:45%;
margin: 1px 2.5%;
height: 100px;
background: #ccc;
display: inline-block;
vertical-align: top;
font-size: 20px;
text-align: center;
padding-top: 20px;
}
#div1 {height: 150px;}
font-size: 0 is to make your dimensions work correctly but don't forget to put the font-sizes back in again.
https://codepen.io/chrispink/pen/EvxEoe

Related

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

CSS - Automatically adjust width of div

I have a dropdown bar with a bunch of options available to select. I want them to be inline but also want them to be scale-able so that they take up the entire width of the div (but also allowing multiple options per row). This is a photo of what I have so far:
Here is the html I have:
<h2>FILTERs</h2>
<span>Search:</span>
<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<span>Option:</span>
</div>
<div class="content">
<div class="selector">Di1</div>
<div class="selector">Di 12</div>
<div class="selector">D 15</div>
<div class="selector">Div1</div>
<div class="selector">v1234</div>
<div class="selector">Di 3</div>
<div class="selector">D 12</div>
<div class="selector">v 1234</div>
<div class="selector">Di</div>
<div class="selector">D 123</div>
</div>
</div>
and the CSS:
.filter .content{
max-width: 96px;
max-height: 0px;
margin: 0px 12px 0px 4px;
background-color: #808080;
overflow: hidden;
}
#vertnav .filter:hover .content{
max-height: 256px;
}
.content .selector{
background-color: #369;
padding: 8px 4px;
display: inline-block;
text-align: center;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.content .selector:hover{
background-color: white;
color: #369;
}
The end goal is that each <div> on the same line will automatically fill the width of the row it is on, while not pushing the other <div>s onto a new line (aka, not using display: block; for example).
I am willing to use JS or jQuery but would prefer to use html and css only for this.
Thank you.
This is a typical situation for using flexbox:
Define the container as flex-container and give it these settings:
content {
display: flex;
flex-wrap: wrap;
}
(The first setting will do the equal distribution in lines, the second one will put the flex items (children elements) into several lines)

On click event only fires once, why?

I've been having this problem for the past week but I just skipped it for this time.
So this is my jQuery code:
jQuery(function ($) {
$(function () {
$('.mPicture').on('click', function (e) {
e.preventDefault();
$(this).find('div').bPopup();
});
});
});
I have seen that people needed to use .live for getting it to work multiple times but that doesn't do anything with this code.
This code is connected to a div which isn't visible until an image is clicked.
So what my question is: Why doesn't this work and what do I need to change?
HTML:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat"/>
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
If any other information is needed, feel free to ask.
I think i have found the issue
$(this).find('div').bPopup();
is changing the html structure while rendering and its not reverting back to its original position.
From:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat" />
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
to:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: block;">
<div class="Merk">
<table id="tbLogo">
<tbody><tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat">
// Removed from here
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
// and added here
<div class="logoPopup" style="width: 700px; border: 5px solid white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: gray 0px 0px 10px; left: -115.5px; position: absolute; top: 127px; z-index: 9999; opacity: 0; display: none;">
<img src="logo's/AS.png" class="merkThumbnail">
Put your text here
</div>
you should bind 'click' event on parent div, because as you said that the div isn't visible until an image is clicked: You cannot bind an eventListenner on any element if it was not exist. in this case, the code is look like:
$('#tbLogo').on('click', '#test', callbackFunction)
or
$('#tbLogo').on('click', '.mPicture', callbackFunction)
reference document by #errand :
http://learn.jquery.com/events/event-delegation/

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

Div menu next to the button

I have simple html page:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
Print Page
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Email to a Freind
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Add to Favorites
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
I need to show a menu in hidden div next to the button (in the right side) over the other text and elements on the page. Also menu should be visible until mouseout of the button or menu, like on hover button in AddThis service.
Who can help me with javascript?
Thanks!
Put a div-tag around your table, give it the CSS style value "float: left".
Then, you give "divMenu" the CSS style value "float: right".
The rest seems to be working fine, at least in Firefox.

Categories