Want to arrange css divs in a proper way - javascript

Please, Please answer / help me.
I have three divs with CSS and it is generated dynamically.
And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.
properties of divs
<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>
<!-- smalldiv -->
<div id="smalldiv" style="
width: 420px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border: 1px solid #BFBFBF;
float: right;
clear: right;"> </div>
<!-- largediv -->
<div id="largediv" style="
width: 408px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0px 1px 1px #CCC;
border: 1px solid #BFBFBF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;">
As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet
Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)
As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise
Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.
In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div
a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.

Here's an option that requires JavaScript:
$(document).ready(function(){
var containerTop = $('.container')[0].offsetTop,
lpos = containerTop,
rpos = containerTop;
$('.container > div').each(function(){
var $el = $(this),
el = $el[0];
if($el.hasClass('large')){
if(lpos < el.offsetTop){
$el.css('margin-top', (lpos - el.offsetTop) + "px");
}
lpos += $el.height();
}else if($el.hasClass('small')){
if(rpos < el.offsetTop){
$el.css('margin-top', (rpos - el.offsetTop) + "px");
}
rpos += $el.height();
}
});
});
.container{
}
.container > div{
width:50%;
box-sizing:border-box;
position:relative;
}
.container .large{
height:400px;
display:inline-block;
float:left;
clear:left;
position:relative;
}
.container .small{
height:150px;
display:inline-block;
float:right;
clear:right;
position:relative;
}
.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='large red'></div>
<div class='small blue'></div>
<div class='small green'></div>
<div class='large yellow'></div>
<div class='small purple'></div>
<div class='small orange'></div>
</div>
note: I think it would be better to use a div for your "wincontainer" than an ordered list.

I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.
Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.

You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.
Your css and html worked really.
See the fiddle
http://jsfiddle.net/jwy3c3n5/2/
<div id="container">
<div id="leftwrapper">
<div class="large">test<br />test<br />test<br />test<br />test<br /></div>
<div class="large">testtest<br />test<br />test<br />test<br /></div>
</div>
<div id="rightwrapper">
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
</div>
</div>
#container {
width: 500px
}
#rightwrapper {
float: right;
width: 35%;
}
#leftwrapper {
float: left;
width: 55%;
}
.large {
background: gray;
margin-bottom:10px;
}
.small{
background: gray;
margin-bottom:10px;
}

I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.
Here is the example: http://jsfiddle.net/uaeb0Lmv/
I revised the margins as such:
#largediv {
margin: 10px 30px 30px;
}
For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.

I understand your problem and i try to solve your problems. You can use this code. It is working.
Live Working Demo
HTML Code
<div id="main">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
CSS Code:
#main
{
height:410px;
width:450px;
border:5px solid black;
}
#one
{
height:150px;
width:150px;
background-color:red;
border:5px solid black;
position:relative;
margin-left:20px;
margin-top:20px;
}
#two
{
height:150px;
width:150px;
background-color:green;
border:5px solid black;
margin-top:20px;
position:relative;
float:left;
margin-left:20px;
margin-top:20px;
}
#three
{
height:60px;
width:200px;
background-color:blue;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-160px;
}
#four
{
height:60px;
width:200px;
background-color:gold;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-60px;
}
#five
{
height:60px;
width:200px;
background-color:purple;
border:5px solid black;
position:relative;
float:left;
display:table-cell;
margin-top:40px;
margin-left:-210px;
}
#six
{
height:60px;
width:200px;
background-color:gray;
border:5px solid black;
margin-left:-210px;
margin-top:140px;
position:relative;
float:left;
display:table-cell;
}
Result:

Related

How to change the child content of a div?

I ran into an issue and I am unable to "reach" the child of this div:
<style type="text/css">
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(http://image.png) no-repeat center;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
</style>
What I am trying to do is change the background of all div#board > div with a button.
I tried this:
function imageChange(){
document.getElementsByTag("memory_board").style.background="url(http://image.png)";
}
But of course, it doesn't work. I tried various combinations but nothing seems to work. Any tips? (I do have a button which calls the function later so that's definitely not the problem!)
This is the full code:
https://jsfiddle.net/o72z8dqv/
UPDATE:
Solved, thanks!
Here is the updated working code.
You can use querySelectorAll and then you need to use loop to change style of each child div because it returns NodeList
function imageChange() {
var divs = document.querySelectorAll("#board > div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundImage = "url('http://placehold.it/350x150/333333')";
}
}
div#board > div {
background: url('http://placehold.it/350x150/ffffff') no-repeat center;
border: #000 1px solid;
width: 71px;
height: 71px;
float: left;
margin: 10px;
padding: 20px;
font-size: 50px;
text-align: center;
}
<button onclick="imageChange()">BUtton</button>
<div id="board">
<div>Div</div>
<div>Div</div>
</div>
You can also use Array.from() or Array.prototype.slice.call() and then you can use forEach loop
Based on your css, I guess, "board" is your id. So please just replace getElementsByTag("board") by getElementById("board")

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.
(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>
First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button
Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

CSS window width resize issues

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}

Javascript on click not showing the elements it should

So I a writing a simple flowchart, and I am probably doing this very wrong, but it seems to work the way I have it, design wise. Code wise, I seem to have done something wrong, it is supposed to show 4 elements, the h1,and the 3 div's which show your options, when you click on yes or no, it will show the other elements of it relating to your choice here is my markup and I have run it through http://validator.w3.org/ and it says it is fine.
On line 150 it says I have a syntax error in dreamweaver(program I used)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body{background-color:#999}
p{color:#0CF}
h1{
color:#03C;
text-align:center;
}
#q1{
position:absolute;
left:293px;
top:41px;
border:thin black solid;
background-color:#9CF;
width: 531px;
height: 72px;
font-size:64px
}
#q2{
position:absolute;
left:424px;
top:257px;
border:thin black solid;
background-color:#9CF;
width: 62px;
height: 54px;
font-size:48px;
}
#q3{
position:absolute;
left:633px;
top:405px;
border:thin black solid;
background-color:#9CF;
width: 186px;
height: 39px;
font-size:32px
}
#q4{
position:absolute;
left:494px;
top:145px;
border:thin black solid;
background-color:#9CF;
width: 100px;
height: 165px;
font-size:36px
}
#q5{
position:absolute;
left:633px;
top:255px;
border:thin black solid;
background-color:#9CF;
width: 74px;
height: 55px;
font-size:48px;
}
#q6{
position:absolute;
left:573px;
top:407px;
border:thin black solid;
background-color:#9CF;
width: 50px;
height: 39px;
font-size: 36px
}
#q7{
position:absolute;
left:240px;
top:404px;
border:thin black solid;
background-color:#9CF;
width: 246px;
height: 41px;
font-size:36px;
}
#q8{
position:absolute;
left:671px;
top:317px;
border:thin black solid;
background-color:#000;
width: 2px;
height: 82px;
}
#q11{
position:absolute;
left:854px;
top:453px;
border:thin black solid;
background-color:#000;
width: 5px;
height: 59px;
font-size:36px;
}
#q12{
position:absolute;
left:449px;
top:319px;
border:thin black solid;
background-color:#000;
width: 4px;
height: 78px;
font-size:36px;
}
#q13{
position:absolute;
left:551px;
top:519px;
border:thin black solid;
background-color:#9CF;
width: 371px;
height: 44px;
font-size:36px;
}
#q14{
position:absolute;
left:826px;
top:401px;
border:thin black solid;
background-color:#9CF;
width: 61px;
height: 44px;
font-size:36px;
}
#q15{
position:absolute;
left:602px;
top:454px;
border:thin black solid;
background-color:#000;
width: 5px;
height: 57px;
font-size:36px;
}
.hidden{
visibility:hidden
}
</style>
<script>
function show (x) {
var a=document.getElementById(x)
a.style.visiblity.visible
</script>
</head>
<!-- ADD IDS TO HIDDEN CLASSES, MAKE FUNCTION TO SHOW THEM ON NON-HIDDEN ELEMENTS -->
<body>
<div id="q1">Should You Worry?</div>
<div id="q2" onClick="show('q7')">No</div>
<div id="q3" class="hidden" >Can you fix it?</div>
<div id="q4"> Do you have a problem?</div>
<div id="q5" onClick="show('q3,q6,q14')">Yes</div>
<div id="q6" class="hidden" onClick="show('q13')">No</div>
<div id="q7" class="hidden">Then don't worry</div>
<div id="q8" class="hidden"></div>
<div id="q11" class="hidden"></div>
<div id="q12" class="hidden"></div>
<div id="q13" class="hidden">Then don't worry about it!</div>
<div id="q14" class="hidden" onClick="show('q13')">Yes</div>
<div id="q15" class="hidden"></div>
</body>
</html>
show() needs to be like this:
function show(x) {
var a=document.getElementById(x);
a.style.visibility = "visible";
}
You have to set visibility a value, which can be the following[1]:
hidden
visible
collapse
inherit
When you use a.style.visibility.visible, you are trying to access 'visible' property inside 'visibility', which does not exists. For a complete info about what the style property holds, open firebug/devtools and write document.getElementById('xxx').style; (where xxx is an id of an element) on console, which will list you all properties inside style (all of them show as strings).
For more info, read MDN HTMLElement.style
One thing you should notice is that show('q3,q6,q14') is trying document.getElementById('q3,q6,q14') which does not exist (looking for something like <element id="q3,q6,q14">). For that use:
<div id="q5" onClick="show('q3');show('q6');show('q14');">Yes</div>
Or you can change the show() to something newer (but at the cost that does not support IE7):
function show(x) {
var a=document.querySelectorAll(x);
for(var i=0;i<a.length;i++){
a[i].style.visibility = "visible";
}
}
And use with CSS selectors, which then accept ,:
<div id="q5" onClick="show('#q3,#q6,#q14');">Yes</div>
If you need to support IE7 below, Sergio's answer will suffice.
This line:
a.style.visibility.visible
Should set the style with an =
a.style.visibility = 'visible';
Since you send many parameters into show() like show('q3,q6,q14') you could use this:
function show(x) {
x_arr = [];
x_arr = x.split(',');
for (i = 0; i < x_arr.length; i++) {
var a = document.getElementById(x_arr[i]);
a.style.visiblity = 'visible';
}
};

Minimizing Code for Javascript/jQuery Popup Windows

I'm creating a personal site to showcase demo material, and I would like to allow users to click on a thumbnail which causes a small window to animate downward and display details. Currently, I have it working perfectly, but as I continue to add items, the code is getting very repetitive. I'm having to repeat all of this code for "item2," "item3," etc... Is there a more efficient way to handle this with possibly 1 script and maybe 1 animated containing box for my content? I'm new to jQuery and Javascript, and I'd like to get better at streamlining my code.
Here's what I'm using:
<script type="text/javascript">
$(function() {
$('#activator_item1').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box_item1').animate({'top':'250px'},500);
});
});
$('#boxclose_item1').click(function(){
$('#box_item1').animate({'top':'-500px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
CSS
.box_item1{
position:fixed;
top:-800px;
height:400px;
width:550px;
left:30%;
right:30%;
background-color:#fff;
color:#333;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
text-align:left;
}
.box_item1 h1{
border-bottom: 1px solid #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#1E87BE;
color:#fff;
font-family:"Arial Black", Gadget, sans-serif;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose_item1{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
a.activator_item1{
width:153px;
height:150px;
position:relative;
top:0px;
left:0px;
z-index:1;
cursor:pointer;
HTML
<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box_item1" id="box_item1">
<a class="boxclose_item1" id="boxclose_item1"></a>
<h1>Title</h1>
<h2>Content</h2>
<h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>
</div>
</div>
You are quite close. Instead of selecting elements by "id", select them using their associated class (using a dot "." rather than "#"), ex. $('.activator_item1') - this will apply the same code to all activator_items.
This can be solved with better naming. You have a distinct class for each element, which robs you of the grouping power of classes. Consider separating the class for better access to the iterator. For example, you have <a class="activator_item1" id="activator_item1"> where you could have <a class="activator item1" id="activator_item1"> instead. This would allow you to select all of the activators in JQuery and iterate over them:
$('.activator').each(function() {
//your code
});

Categories