I have create a code snippet to demo my problem.
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<img src="http://i.imgur.com/62GOyK9.png" />
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
There are 4 boxes I want to map the positions on a background, and I did it using position absolute.
But the problem is it can't be responsive. On larger / smaller screen, the image stretched and the mapping became off target. How to solve my issue using javascript?
Do you really need a javascript solution for this?
Why cant you use percentage in CSS position styles?
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:15%;
left:10%;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top: 30%;
right:30%;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
bottom: 30%;
left:30%;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
bottom: 20%;
right:10%;
}
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
$(function (){
var init_width = $(window).width();
var all_div = $('div');
var init_left = function (){
var result = [];
all_div.each(function (i){
var left = parseInt($(all_div[i]).css('left'));
result.push(left);
});
return result;
}();
$(window).resize(function (){
var width = $(window).width();
all_div.each(function (i){
var now_left = init_left[i]/init_width * width;
$(all_div[i]).css('left',now_left);
});
});
});
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
I make a draft DEMO to achieve the responsive layout. The key mind is:
when the DOM ready you could get a set of numbers of these div's leftand then you must handle these data to percent for responsive
you should recalculate the window width when resize.
actually, when you work out the first key mind, you will make it. the** resize ** just make the DEMO have more adapted.
Related
I have 3
Header
Content
Footer
They all set position fixed.
How to set (content) height automatically to be 100%?
The problem is the last text on the content section is hidden by footer div.
How to set content div height automatically calculate 100% - footer height?
html,body { height:100%; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:100%; overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content>last text</div>
<div class="box3">foot</div>
</div>
Add height:calc(100% - 60px); to box2 for minus header and footer both height and set overflow-y:hidden to html,body so you can get fixed div 100% height without scroll
html,body { height:100%; overflow-y:hidden; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:calc(100% - 60px); overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>last text</div>
<div class="box3">foot</div>
</div>
calc() CSS function lets you perform calculations while setting height, width or other property.
For your case, height: calc(100% - 30px); would help you out.
for more detail about calc(), please refer to MDN.
To fixed height or width you can use calc(100% - 30px);..
To handle dynamically changing height/width, You need to calculate with Javascript like this....
var screenHeight = window.innerHeight;
var headerH = document.getElementById("header").offsetHeight;
var footerH = document.getElementById("footer").offsetHeight;
document.getElementById("content").style.height = ((screenHeight - headerH) - footerH) + "px";
document.getElementById("content").style.top = headerH + "px";
.header{
background-color:red;
position:fixed;
top:0px;
left:0px;
width:100%;
}
.footer{
background-color:red;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
.content{
position:fixed;
left:0px;
background-color:yellow;
width:100%;
}
<div class="header" id="header">header</div>
<div class="content" id="content">content</div>
<div class="footer" id="footer">footer</div>
Instead of height, use bottom: 30px; for box2. it will work.
I have this animated retractable menu bar. I made two menu bars. When one slides out when the icon is clicked, the other slides in. I use hidden-sidenav to change the transition delay to zero for the closing nav so the expanding nav will wait 1s for the closing nav to finish retracting.
The transition I don't like is the icon that moves. It is because I have a box-sizing property and padding for each nav bar. I use box-sizing to center the icon. But I want effect like this . Notice how the links in the nav bar stays fixed.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:1s;
transition-delay:1s;
transition-timing-function:ease-out;
overflow-x:hidden;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:20%; /* Changed to 20%: visible by default. */
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:1s;
transition-timing-function:ease-out;
transition-delay:1s;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
padding:0;
}
<div id='mysidenav'class='sidenav hidden-sidenav'>
<a onclick='closeIt()'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>☰</a>
</div>
In order to make icons fixed, I just added
position:absolute;
left:15px;
to
.sidenav a
.sidenav2 a
Also I removed padding calculations and made positions absolute. Due to font size difference, I also put
top:12px;
to
.sidenav2 a
Hope this helps.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
setIconPositions('mysidenav');
setIconPositions('mysidenav2');
function setIconPositions(parentElement) {
var element = document.getElementById(parentElement);
var positionInfo = element.getBoundingClientRect();
var width = positionInfo.width;
var closeIcon = document.getElementById('close-icon');
var openIcon = document.getElementById('open-icon');
closeIcon.style.left = (width/2-getWidthOfText(closeIcon.text, window.getComputedStyle(closeIcon).fontFamily,
window.getComputedStyle(closeIcon).fontSize)/2)+"px";
openIcon.style.left = (width/2-getWidthOfText(openIcon.text, window.getComputedStyle(openIcon).fontFamily,
window.getComputedStyle(openIcon).fontSize)/2)+"px";
}
function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.c === undefined){
getWidthOfText.c=document.createElement('canvas');
getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
}
getWidthOfText.ctx.font = fontsize + ' ' + fontname;
return getWidthOfText.ctx.measureText(txt).width;
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:30%;
background:#111;
transition:1s;
transition-delay:1s;
transition-timing-function:ease-out;
overflow-x:hidden;
box-sizing:border-box;
position:absolute;
top:0;
}
.sidenav a{
font-size:90px;
color:#818181;
position:absolute;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:30%; /* Changed to 20%: visible by default. */
background:#111;
overflow-x:hidden;
position:absolute;
top:0;
transition:1s;
transition-timing-function:ease-out;
transition-delay:1s;
box-sizing:border-box;
}
.sidenav2 a {
font-size:50px;
color:#818181;
top:12px;
position:absolute;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
padding:0;
}
<div id='mysidenav'class='sidenav hidden-sidenav'>
<a id="close-icon" onclick='closeIt()' class='hidden-sidenav'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a id="open-icon" onclick='openIt()' class='hidden-sidenav'>☰</a>
</div>
I'm trying to dynamically stretch my divs based on the length of the string within it. How can this be done?
<div width=magic_function();>
pickle
</div>
I'm currently using php's strlen in a clever way to achieve this, but I feel it is process-intense.
<style>
.tag {
padding-bottom:2px;
position:relative;
background:#BFC9D9;
margin-right:auto;
margin-left:auto;
width:???;
text-align:center;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
margin-top:3px;
margin-bottom:3px;
}
.tag:after {
right:100%;
top:50%;
border:solid transparent;
content: " ";
height:0;
width:0;
position:absolute;
border-right-color:#BFC9D9;
border-width:10px;
margin-top:-10px;
}
</style>
Try this
.tag {
display:inline;
width:auto;
}
I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.
The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.
The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.
See: http://jsfiddle.net/tedgrafx/kTeCC/
The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.
What can be done to remedy this little glitch so it appears seamless during resizing?
Any/all help would be appreciated.
HTML:
<div class="panel">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS:
html, body{
margin:0;
padding:0;
}
.panel {
float:left;
width:100%;
margin:0;
padding:0;
}
.left {
float:left;
width:50px;
height:10px;
margin:0;
background:red;
}
.right {
float:right;
width:100%;
height:10px;
margin:0;
background:blue;
}
Javascript:
// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
resizeRight();
$(window).resize(function () {
resizeRight();
});
});
function resizeRight() {
// Subtract the width of the TopLeft section from the width of the entityPanel div:
var right_width = $('.panel').width() - ($('.left').width());
// Set the width of the TopRight to an even number:
if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
// Set the width of the TopRight section:
$('.right').css({ 'width': right_width });
}
}
You don't need the javascript really, you can lose the float on #right.
Unless I misunderstood what you wanted.
http://jsfiddle.net/kTeCC/7/
html, body{
margin:0;
padding:0;
}
#main {
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:30px;
height:20px;
margin:0;
background:red;
}
#right {
height:30px;
margin:0;
padding-left: 5px;
background:blue;
}
br {
clear: both;
}
http://jsfiddle.net/kTeCC/16/
simple solution that only use position,top, left, right
html, body{
margin:0;
padding:0;
}
#main {
position:relative;
width:100%;
margin:0;
padding:0;
}
#left {
position: absolute;
left:0;
top:0;
width:30px;
height:30px;
margin:0;
background:red;
color:#fff;
}
#right {
position:absolute;
left:30px;
right:0;
top:0;
height:30px;
margin:0;
background:blue;
color:#fff;
}
Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/
html, body{
margin:0;
padding:0;
}
#main {
padding-left: 30px;
background-color: pink;
}
#main:after {
clear: both;
content: " ";
display: table;
}
#left {
float: left;
margin-left: -30px;
width: 30px;
background: red;
}
#right {
background: blue;
}
And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.
I'm trying to create a continuous looping animation whereby one div img fades in and then the next fading out the last one this is what I have so far.
JavaScript:
function fadeLoop() {
$(".circle img").each(function(index) {
$(this).delay(1000*index).fadeIn(500);
});
};
$('.circle').delay(2000).fadeIn(2000,function() {
fadeLoop();
});
HTML:
<div class="circle" id="first-circle">
<img src="test.jpg"/>
ART
</div>
<div class="circle" id="second-circle">
<img src="test.jpg"/>
FASHION
</div>
<div class="circle" id="third-circle">
<img src="test.jpg"/>
DECOR
</div>
CSS:
.circle { border-radius:300px; width:300px; border:5px solid #ccc; height:300px;margin:10px; padding:0px; float:left; display:none; position:relative; }
.circle a { position:relative; z-index:999; margin:0 auto; line-height:300px; display:block; width:300px; text-align:center; font-family: sans-serif; font-weight:normal; text-transform:capitalize; color:#fff; font-size:60px; text-decoration:none; }
#first-circle img, #second-circle img, #third-circle img { display:none; }
#first-circle { background:#803131; }
#second-circle { background:#751c20; }
#third-circle { background:#803131; }
#first-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
#second-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
#third-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
Live demo: jsFiddle
I'm sure this can't be that far off all I need to do is fade out the last one and in the next one I have a sequence but need to expand it and make it loop.
This may help you
$(function(){
(function(){
var circles=$('.circle'), i=0;
function shuffle()
{
$(circles[i]).fadeIn(2000, function(){
i=(i < circles.length-1) ? (i+1) : 0;
setTimeout(function(){
$('.circle').fadeOut(2000);
shuffle();
}, 2000);
});
}
shuffle();
})();
});
DEMO.