Grid with html/css as body background - javascript

I want to create a div that contains a grid generated with css, and that div appears behind other div, that contains the UI.
That is that one div in the body appears behind the other div that contains the user interface.
The div that is behind, must contain a grid drawing using CSS.
<head>
<style type="text/css">
#divcontainer {
width: 100%;
height: 100%;
position: absolute;
z-index: -999;
background-color: #bababa;
}
#divinnercontainer {
width: 10%;
height: 20%;
outline: 1px solid;
float: left;
}
</style>
</head>
<body>
<div class="divcontainer">
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
</div>
<div style="z-index:999">
<!-- UI -->
</div>
This is my code, but I don't see any grid, what I'm doing wrong?
Thanks in advance

The problem is because you use #divcontainer and #divinnercontainer instead of .divcontainer and .divinnercontainer.

you mixed up css classes with css ids.
You simply need to change
#divcontainer {
...
}
#divinnercontainer {
...
}
to
.divcontainer {
....
}
.divinnercontainer {
....
}

# is for id not for class
.divcontainer {
width: 100%;
height: 100%;
position: absolute;
z-index: -999;
background-color: #bababa;
}
.divinnercontainer {
width: 10%;
height: 20%;
outline: 1px solid;
float: left;
}
CodePen

in css is #divinnercontainer, but you call a divinnercontainer as a class in html

Your just need to fix the class name in your css :
#divcontainer to .divcontainer
#divinnercontainer to .divinnercontainer

Related

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr
I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

jquery keep hover state

I have an hidden element which contains a list. What I want to achieve is, to keep the hover state while moving from the clicked div with the cursor to the element with the list. The element which contains the list, should first disappear as soon as I go away from it e.g point away with the cursor. How can I achieve that?
I have this markup:
$('.hover').hover(function() {
$('.hoverDiv').addClass('show')
}, function() {
$('.hoverDiv').removeClass('show')
})
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
</div>
<div class="hoverDiv">
show me when hovered
</div>
</div>
Here is the JSFIDDLE
You should bind the hover event to the .container instead of the .hover div. because when the user will move out from .hover, the list will be hide. But when user move on the .hoverDiv he still on the .container
$('.container').hover(function() {
$('.hoverDiv').addClass('show')
}, function() {
$('.hoverDiv').removeClass('show')
})
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
<div class="hoverDiv">
show me when hovered
</div>
</div>
</div>
By the way, should don't need a script for this. You can do this using css only. Like this:
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.container:hover .hoverDiv {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
<div class="hoverDiv">
show me when hovered
</div>
</div>
</div>
Try this jquery code:
$('.hover').hover(function(){
$('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
$('.hoverDiv').removeClass('show')
});
$('.hover').hover(function(){
$('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
$('.hoverDiv').removeClass('show')
});
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
</div>
<div class="hoverDiv">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.

DIV's reorder by themselves upon expand - how do I keep the same order?

I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?
Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo
You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */
Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.

Why does this div drop down when InnterHtml is changed?

I have a div of thumbs and was wanting to change the innerHtml on click; however, whenever I insert something into them, they drop down and I am wanting them to remain in line.
Here is the jsfiddle:
http://jsfiddle.net/jtDzs/
For example, if I wanted to add "something" to the boogie div in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<title>TITLE</title>
<style>
.thumbContainer {
width: 200px;
}
.thumb {
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<div>
<div class="thumbContainer">
<div id="boogie" class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<script>
(function() {
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
</script>
</body>
</html>
For some reason using display: inline-block is causing this problem...
There are two simple solutions:
Overflow: hidden
You can add this line to your class:
overflow: hidden;
Here's the working jsFiddle Demo
Float: left
You can also start using floating to the left instead of display: inline-block and add the wanted margin.
// display: inline-block
float: left
margin: 2.5px;
Here's the working jsFiddle Demo
P.S I guessed you're trying to make this kind of behaviour to every div so I allowed myself to change the html changing command to:
$(this).html("something");
You can change this if you want
.thumb {
color: white;
width: 95px;
height: 95px;
margin: 2.5px;
background-color: blue;
float: left;
}
http://jsfiddle.net/jtDzs/9/
$(".thumb").on("click", function() {
$(this).append("something");
});
JSFIDDLE DEMO
(function() {
$(".thumb").on("click", function() {
$(this).("something");
});
})();
CSS is
.thumb {
color: white;
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
float: left;
margin: 2px;
}
Demo
Hope it helps
(function() {
$(".thumb").html(" ");
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
.thumbContainer {
width: 200px;
height:100px;
}
http://jsfiddle.net/jtDzs/11/

Categories