I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}
Related
I've got this strange thing where the text in a div goes below it after I update from the original text in a script function. Example below ("Hello World" is default, "test" is the updated text)
CSS
#footer {
height: 50px;
left: 0px;
top: 800px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
HTML
<div id="footer">
<span id="botEvent">Hello World</span>
</div>
The botEvent id is what I am updating, and after the update the text goes below the original background box.
Any help is appreciated, thank you in advance and have a good day :)
do you have something else going on that's causing the problem? If you are using a p tag set margin and padding to 0
document.getElementById('botEvent').textContent = 'TEST';
#footer {
height: 50px;
left: 0px;
top: 20px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
p{
margin:0;
padding:0;
}
<div id="footer">
<p id="botEvent">Hello World</p>
</div>
In my page I have a div (fixed wrap) that I want to move after the scroll.
I tried something with jQuery, but the height of the div is too high and goes over the footer.
img1
img2
Here's my code:
Sorry, edit2:
var elementPosition = $('#fixed-wrapper').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%');
} else {
$('#fixed-wrapper').css('position', 'static');
}
});
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
display: table;
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
display: table;
float: right;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
clear: both;
}
<div id="header">
...
</div>
<div id="main-bets
...
</div>
<div id="fixed-wrapper">
....
</div>
<div id="footer">
...
</div>
You can use my sticky float jQuery plugin for that (demo page), or use the relatively new CSS property: position:sticky (not supported in older Egde/IE)
Check now:
body {padding:0; margin: 0;}
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
float: left;
background: red;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
clear: both;
}
//---------------- HTML ---------- //
<div id="header">
Header
</div>
<div id="main-bets">
Bets
</div>
<div id="fixed-wrapper">
Wrapper
</div>
<div id="footer">
Footer
</div>
Hi all I am looking to make a JS popUp responsive to be able to viewed on most screen sizes. At the moment the popup loads in the middle of the page but does not resize when browser is shortened?
HTML:
<div class="col-lg-12">
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
</div>
CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px;
left: 375px;
}
JS:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 5000);
}
Update:
Here's whats happening! the popup box is still not resizing to the page dimensions
Update:
Thanks for the help #beerwin the following link shows the popup box now floats up in the corner of the page?
Basically you have to set max-width which would help to fit the popup width to screens that are less than 555px(555px - width of the popup). Not sure about your exact requirement but here is what you can do by assuming you need the popup to be aligned horizontally centered.
#popup{
max-width: 555px;
height: 375px;
position:absolute;
/* your rest of the styles */
}
/* To align horizontally center for screens greater than 555px width */
#media (min-width:555px){
#popup{
left:calc(50% - 277px); /* 277px is the half of 555px */
}
}
Here is the fiddle: https://jsfiddle.net/3js5mLpb/
You have static width in your deffinition
#popup {
width: 555px;
..
}
use '%' eq.
#popup {
width: 80%;
...
}
or you can use bootstrap classes like col-md-6, col-md-12 (see definition on bootstrap pages), but remove width: 555px;
Change width to max-width, height to max-height and add height: 90%; width: 90%. This will make it responsive.
Then update your PopUp function to automatically adjust the position of the popup so it always fit in the screen.
See a working example below:
function PopUp(hideOrshow) {
var popup = document.getElementById('ac-wrapper');
if (hideOrshow == 'hide') {
popup.style.display = "none";
}
else {
popup.removeAttribute('style');
popup.style.marginLeft = (popup.offsetWidth / 2) * -1 + "px";
popup.style.marginTop = (popup.offsetHeight / 2) * -1 + "px";
}
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 1000);
}
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .6);
z-index: 1001;
}
#popup {
width: 90%;
height: 90%;
max-width: 555px;
max-height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 50%;
left: 50%;
}
<div class="col-lg-12">
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
</div>
Change width to max-width
#popup {
max-width: 555px;
height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.
jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample
Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/
demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }
This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.
Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/
small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.
Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/