I have a set of 1-4 divs sitting vertically inside of a <section>. There are 4 buttons which decide how many divs will be invoked. I need the divs to expand to a proportional size, side by side, when they are instantiated. Here is some HTML and CSS code which relate to this.
First the HTML5 markup...
<section id="main">
<div id="resultContainer">
<section id="i0" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" ></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid" ></span>
<span class="other1" ></span>
<span class="other2" ></span>
</section>
<section id="i1" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"> </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i2" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i3" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
</div>
</section>
And the CSS:
#main {
filter: none;
position: relative;
top: 20px;
height: 400px;
-webkit-background-color: rgba(72, 72, 72, 0.2);
background-color: rgba(72, 72, 72, 0.2);
/*background-color: #484848;*/
width: 460px;
margin: 0 auto;
-webkit-border-radius: 5px;
-webkit-border: 1px solid #a1a1a1;
border-radius: 5px;
border: 1px solid #a1a1a1;
}
TIA
Dennis
Since Legacy support was required and I had trouble even with the use of a table, I improvised a non-CSS only solution. Clicking on the buttons 1-4 gives me the divisor (nDays) and I used it to divide the width of the container, which gave me the correct width for each div which houses the forecast day div.
dayWidth = parseInt(420/nDays);
$('#i'+i).css('width',dayWidth);
$('#i'+i).css('display','inline-block');
Works great, without all the convolutions of trying to make CSS do it automatically.
And here is the result.
Edit: I missed the bit about legacy support being required, making this answer not quite appropriate.
CSS solution:
#resultContainer{
table-layout: fixed; /* Stops cell widths varying depending on content */
}
.wDay{
display:table-cell; /* Display as table cell. */
width: 1%; /* Needs some width to start with */
text-align: center; /* centres cell content and balances "table" margins */
}
There's no need to put a display: table; in the parent div but you could to make it clearer.
Need to check different browsers!
please try this one in css
.wDay{
float: left;
margin: 5px;
}
Related
I have a primary menu with two sub-menus nested inside. the sub menus are revealed on a hover, and have a dynamically changing width based on the content inside. I need the sub menus position relative to the main menu to be: the left border of the sub menu is touching the right border of the main menu and they are not overlapping. Common functionality of a sub menu on hover reveal I suppose.
So I believe the math for the css right positioning is something like:
right: -elements current width in px
I don't believe theres a way in css to insert the elements current width value into the right position so I have tried with JS
let subMenuBounds = subMenuOne.getBoundingClientRect()
let subMenuTwoBounds = subMenuOne.getBoundingClientRect()
subMenuOne.style.right = `-${subMenuBounds}px`
subMenuTwo.style.right = `-${subMenuTwoBounds}px`
the problem with this is the subMenus have no bounds until I hover over the menu, because the display is set to: none.
any solution to this?
let subMenuBounds = subMenuOne.getBoundingClientRect()
let subMenuTwoBounds = subMenuOne.getBoundingClientRect()
subMenuOne.style.right = `-${subMenuBounds}px`;
subMenuTwo.style.right = `-${subMenuTwoBounds}px`;
.sub-menu-one,
.sub-menu-two {
height: auto;
width: auto;
min-width: 12rem;
position: absolute;
top: 0;
right: ??;
border-radius: 5px;
display: none;
opacity: 0;
transition: all 350ms;
border: 1px solid #e4e4e4;
background-color: #2e1a04;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 3;
}
.menu-row:nth-child(2):hover > .sub-menu-one,
.menu-row:nth-child(3):hover > .sub-menu-two {
opacity: 1;
transition-delay: 350ms;
display: block;
}
<div class="menu">
<div class="menu-container">
<div class="menu-row">
<i class="fa-solid fa-book"></i>
<h2>Syno • Checker</h2>
<span id="menu-close-btn">X</span>
</div>
<div class="menu-row">
<p>Definition</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-one'>
<div>
<blockquote>
<p id="selected-word"></p>
</blockquote>
</div>
<div class="definition"></div>
</div>
</div>
<div class="menu-row">
<p>Synonyms</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-two'>
<div>
<blockquote>
<p id="selected-word-two"></p>
</blockquote>
</div>
<div class="options"></div>
</div>
</div>
</div>
</div>
You should be able to do this without JavaScript. Here I set the .menu-row to display: flex. The result is that all child nodes will be aligned in a row, one after the other. So, now the sub menu shows up right to the menu text.
p {
margin: 0;
}
.menu-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.sub-menu-one,
.sub-menu-two {
min-width: 12rem;
border-radius: 5px;
display: none;
opacity: 0;
transition: all 350ms;
border: 1px solid #e4e4e4;
background-color: #2e1a04;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 3;
}
.menu-row:nth-child(2):hover>.sub-menu-one,
.menu-row:nth-child(3):hover>.sub-menu-two {
opacity: 1;
transition-delay: 350ms;
display: block;
}
<div class="menu">
<div class="menu-container">
<div class="menu-row">
<i class="fa-solid fa-book"></i>
<h2>Syno • Checker</h2>
<span id="menu-close-btn">X</span>
</div>
<div class="menu-row">
<p>Definition</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-one'>
<div>
<blockquote>
<p id="selected-word"></p>
</blockquote>
</div>
<div class="definition"></div>
</div>
</div>
<div class="menu-row">
<p>Synonyms</p>
<i class="fa-solid fa-caret-right"></i>
<div class='sub-menu-two'>
<div>
<blockquote>
<p id="selected-word-two"></p>
</blockquote>
</div>
<div class="options"></div>
</div>
</div>
</div>
</div>
I have a top tab bar with 4 different tabs. My issue is that due to the fact that the tab titles are not around the same length, they look like they padding is off where the smallest title has a lot of spacing, while everything else is very cramped together (Example of this: https://codepen.io/bigzee/pen/XKLKxG). You can see exactly what I mean when you make the screen browser small (iPhone 5s screen size)
To solve this, I added in left/right spacing (Example here: https://codepen.io/bigzee/pen/OXZXom). However, now when you make the browser small (iPhone 5s screen size) the titles overlap. I tried to use z-index to fix this, but that didn't work. Here's my code with the z-index:
<div class="tabs-striped tabs-top tabs-background-royal" >
<div class="tabs" style="position: relative;">
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 1;">
<p class="" style="position: relative; left: 5%;">Top</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 2;">
<p class="" style="position: relative; right: 15%;">Top tab 2</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 3;">
<p class="" style="position: relative; right: 15%;">Top tab 3</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 4;">
<p class="" style="position: relative; right: 15%;">Top tab tab 4</p>
</a>
</div>
</div>
I tried using rows/columns as well (https://codepen.io/bigzee/pen/PzAzvK) but it was still didn't look right. The code for the rows/columns is below:
<div class="tabs-striped tabs-top tabs-background-royal" >
<div class="tabs row" style="">
<a class="bar-royal tab-item col col-10" style="color:white; min-width: 40px; margin-left: 2%;">
<p class="" style="">Top</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab 2</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab 3</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab tab 4</p>
</a>
</div>
</div>
Any advice on how I can fix this?
Solution:
http://codepen.io/bigzee/pen/XKLymE
The accepted answer has the solution on how to fix this. I simply added in a media query to set a max font-size so that on smaller screens the font gets smaller.
Use display: inline-block
.container {
width: 320px;
background-color: rgba(0, 0, 0, .1);
height: 100vh;
overflow: hidden;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
}
.top-menu {
text-align: center;
}
ul {
display: inline-flex;
}
li {
display: inline-block;
}
li {
list-style: none;
border: 1px solid;
padding: 1em;
}
<div class="container">
<div class="top-menu">
<ul>
<li>top</li>
<li>top tab 2</li>
<li>top tab 3</li>
<li>top tab tab 4</li>
</ul>
</div>
</div>
If you want the spacing to be consistent, then leaving the <a> tags on width: auto, applying left and right margins to them, and setting text-align: center on the their container is a good bet.
HTML
<div class="tabs">
<a>Top</a>
<a>Top tab 2</a>
<a>Top tab 3</a>
<a>Top tab tab 4</a>
</div>
CSS
div.tabs {
text-align: center;
}
a {
margin: 0 5%;
}
Here's a JSFiddle that has a group of centered links with consistent spacing.
https://jsfiddle.net/reid_horton/53xfjyob/
The percentage based margins help make this example a little more responsive, but if that's not enough, you could also add some media queries.
Side note: unfortunately, you can't have both consistent width and consistent space. If each link is the same width, then narrower links are going to have more space around them. If each link has the same space around them, then they can't all be the same width.
I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow
I'm trying to find a way to simulate what Thinglink does.
I attach a picture so you can understand it better.
Essentially, its a dot in the picture, and when you hover it with mouse, it will display a text box.
My ideas to begin are, tooltip within bootstrap, but doesn't know for sure if you can make it on a picture...
EDIT:
Add my actual code:
<div class="col-md-4 column wow fadeInRight delay=1000ms">
<div id="tooltip1" data-toggle="tooltip" data-placement="top" title="keyword1">
<div id="tooltip2" data-toggle="tooltip" data-placement="left" title="keyword2">
<div id="tooltip3" data-toggle="tooltip" data-placement="bottom" title="keyword3">
<img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
</div
</div>
</div>
</div>
SOLUTION:
Thanks to #Wouter Florijn
I added bootstrap tooltip and a transparent img 16x16, beacuase its needed to tooltip to work. (Can't hover in an empty zone...)
<img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
<div class="dot" data-x="20%" data-y="25%"><img src="img/dot_transparent.png"/></div>
<div class="dot" data-x="80%" data-y="50%"><img src="img/dot_transparent.png" /></div>
<div class="dot" data-x="35%" data-y="80%"><img src="img/dot_transparent.png" /></div>
<div class="dot" data-x="55%" data-y="15%"><img src="img/dot_transparent.png" /></div>
You need to make a container div for the picture and then add a number of absolutely positioned divs inside the container.
It would be best to position the dots using JS I think.
Then, add tooltips to the .dot divs using whatever you want. jQuery UI, Bootstrap, Foundation... Or your own code of course.
https://jsfiddle.net/7whLrjry/1/
HTML:
<div class="container">
<img src="..." />
<div class="dot" data-x="20%" data-y="25%"></div>
<div class="dot" data-x="80%" data-y="50%"></div>
<div class="dot" data-x="35%" data-y="80%"></div>
<div class="dot" data-x="55%" data-y="15%"></div>
</div>
CSS:
.container {
position: relative;
max-width: 100%;
}
.container img {
max-width: 100%;
}
.dot {
position: absolute;
width: 16px;
height: 16px;
background-color: black;
border: 8px solid white;
border-radius: 99999px;
cursor: pointer;
}
.dot:hover {
background-color: white;
border: 8px solid black;
}
JS:
$(document).ready(function() {
$('.dot').each(function() {
$(this).css('left', $(this).data('x'));
$(this).css('top', $(this).data('y'));
});
});
http://jsfiddle.net/mah2806/VcnLk/
what should i do to make the form from not affecting the word testing testing when i cover it. i want it to be like overlapping the word testing testing
MY HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
<p>TESTING TESTING</p>
DEMO
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
z-index: 99;
position: absolute;
}
This will do the trick. Replace your #loginForm with the above code.
I have added
z-index: 99;
position: absolute;
To make it overlap the text