I am trying to build this layout:
I used float: left for the boxes in the left side and float: right for the ones in the right.
The problem is that every right-floated box is aligning it's top with the the previous left-floated element.
Thus all I get is this:
HTML:
I need to keep the elements in this order (box1, box2, ... box7)
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum (...)
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum (...)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum (...)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>
DEMO: https://codepen.io/constagorgan/pen/vjLJzG
Other considerations:
On smaller devices the boxes should be merged in a single column, same as using col-*-12 in Bootstrap, but keeping same ordering (box1, box2, ... box7)
I can use Bootstrap, Masonry, Bulma or other library that helps building grids / layouts as long as it's supported by IE11, Chrome and Firefox
A CSS-only solution would be absolutely fantastic.
I don't want to use display: table. Reasons for this are given here.
What I've tried so far:
Using Bootstrap → I cannot make it responsive for small screens without moving things around inside the DOM.
Using Masonry → I couldn't find a way to order the boxes. They are just positioning themselves in the closest available place.
Using flex → I got stuck in a similar situation.
Using CSS grid layout → It's not fully supported on IE11.
Using CSS columns → I need a 70%|30% ratio. This is designed for 50%|50%.
How can I remove those white gaps from the layout? Can I achieve this with floated elements? If not, what's the proper way to do it?
EDIT:
I need to make it responsive. On smaller screen I need to stick with this one-column layout (as I mentioned in the "Other considerations" section.
If you combine Flexbox and float, you can do like this, where on narrower screens make use of the Flexbox property order.
By initially add the smaller elements first, you can simply float and clear them and they will align right, in a column of their own.
When the media query kicks in, remove float, add display: flex and order them 1-7.
Updated codepen
Stack snippet
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green { background-color: #90EE90; }
.blue { background-color: #20B2AA; }
.orange { background-color: #FFA07A; }
.pink { background-color: #FFB6C1; }
.yellow { background-color: #FFD700; }
.teal { background-color: #00CED1; }
.purple { background-color: #9370DB; }
#media (max-width: 500px) {
.left, .right {
float: none;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.container .box1 { order: 1 }
.container .box2 { order: 2 }
.container .box3 { order: 3 }
.container .box4 { order: 4 }
.container .box5 { order: 5 }
.container .box6 { order: 6 }
.container .box7 { order: 7 }
}
<div class="container">
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
If you can't change markup, you need script, where you either hook up on the resize event, or as here, the window.matchMedia event.
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
var container = document.querySelector('.container');
var items = document.querySelectorAll('.container .box');
var reorderitems = function(matched) {
if (matched) {
container.appendChild(items[0]);
container.appendChild(items[3]);
container.appendChild(items[5]);
} else {
container.insertBefore(items[2], items[3]);
container.insertBefore(items[1], items[2]);
container.insertBefore(items[4], items[5]);
container.appendChild(items[6]);
}
}
reorderitems(window.outerWidth > 500);
window.matchMedia("(min-width: 501px)").addListener(function(e) {
if (e.matches) {
reorderitems(true);
} else {
reorderitems(false);
}
});
});
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green {
background-color: #90EE90;
}
.blue {
background-color: #20B2AA;
}
.orange {
background-color: #FFA07A;
}
.pink {
background-color: #FFB6C1;
}
.yellow {
background-color: #FFD700;
}
.teal {
background-color: #00CED1;
}
.purple {
background-color: #9370DB;
}
#media (max-width: 500px) {
.left,
.right {
float: none;
width: 100%;
}
}
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum.
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>
You need to create two new Divs to group the boxes at each side:
<div class="container">
<div class="group box left">
<div class="box box1 green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
<div class="group box right">
<div class="box box2 orange">
BOX 2 (small)
</div>
<div class="box box3 blue">
BOX 3 (small)
</div>
<div class="box box5 yellow">
BOX 5 (small)
</div>
<div class="box box7 purple">
BOX 7 (small)
</div>
</div>
</div>
Related
I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.
Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>
I need to make an image inside bootstrap's container. Image in div .full-image should be from the left to the right browser window. I know how to make it in single container, but in this example I have a menu left sidebar that is must to be. I need help with javascript/jquery script. Script should read the size of the browser window and keep the picture all the time on the left and right side of the window when the window reduces size(for mobiles, tables etc) and be full responsive.
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-3'>
<ul>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
<div class='col-9'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
<img src='http://blogs.worldbank.org/africacan/files/africacan/small_better_small.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula </p>
<div class='full-image'>
<img src='http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
</div>
</div>
</div>
To show your image based on your screen size don't bother too much with CSS coding. I would suggest you, use #mediaQuery of CSS. It would provide your image responsive support according to screen size.
-- Add below like code in your CSS and you will find your images responsive according to your screen size. You can enhance according to your requirements further. I feel this would be the best way to acquire responsiveness for your page.
#media only screen and (max-width: 600px) {
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
-- I am attaching a outcome of using above code in your CSS. How it will look like in responsive outcome you can take a look.
-- Feel free to ask further queries. Thanks!
What I want to achieve is to have a menu bar stuck to the top only when browser window is at least 980px wide. When the window is resized to less than 980px of width there should be no sticky menu showing. Then, resizing it to more that 980px of width, the menu should appear again.
Here's my code:
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql) {
if (mql.matches) {
$(window).scroll(function() {
backup.append(buffer);
if ($(window).scrollTop() > 96) {
$("#moving_topbar").show();
} else {
$("#moving_topbar").hide();
}
});
} else {
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}
/*those are inside separate css files*/
#moving_topbar {
/*wide.css*/
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #ffffff;
display: none;
}
#moving_topbar {
/*narrow.css*/
display: none;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" media='screen and (min-width: 980px)' href="wide.css" type="text/css" />
<link rel="stylesheet" media='screen and (max-width: 979px)' href="narrow.css" type="text/css" />
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> <img src="img/logo100.png" alt="Logo" class="rounded_corners_moving"> </div>
<div id="socialtop_moving">
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> ZAGRAJ </b> </div>
<div class="option_moving"> <b> PROJEKTY </b> </div>
<div class="option_moving"> <b> ARTYKUŁY </b> </div>
<div class="option_moving"> <b> ENG </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
</body>
The problem is that when I f5 the window on fullscreen it works ok, then I reduce its width and no bar shows (ok) but after this, when I increase the width (fullscreen) again, no sticky topbar menu appears.
When I f5 with window width smaller than 980px (no topbar here - ok) and then fullscreen, the menu shows and follows on scrolling. Then I perform the steps described above and the same problem occurs.
Maybe this is just a stupid mistake I somehow missed but I believe this occurs due to my poor experience with javascript/jQuery.
Working code recreation:
<!DOCTYPE HTML>
<head>
<style>
#media screen and (min-width: 980px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
height: 120px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
display: none;
}
}
#media screen and (max-width: 979px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
padding-top: 14px;
padding-bottom: 1px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
display: none;
}
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql)
{
if (mql.matches)
{
$(window).scroll(function()
{
backup.append(buffer);
if($(window).scrollTop() > 96) { $("#moving_topbar").show(); }
else { $("#moving_topbar").hide(); }
});
}
else
{
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}
</script>
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> img logo </div>
<div id="socialtop_moving">
<div class="soc_icon_moving"> moving img 1 </div>
<div class="soc_icon_moving"> moving img 2 </div>
<div class="soc_icon_moving"> moving img 3 </div>
<div class="soc_icon_moving"> moving img 4 </div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> moving menu 1 </b> </div>
<div class="option_moving"> <b> moving menu 2 </b> </div>
<div class="option_moving"> <b> moving menu 3 </b> </div>
<div class="option_moving"> <b> moving menu 4</b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div id="topbar">
<div id="logodiv"> some img </div>
<div id="socialtop">
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div style="clear:both;"> </div>
</div>
<div id="menu">
<div class="option"> <b> menu1 </b> </div>
<div class="option"> <b> menu2 </b> </div>
<div class="option"> <b> menu3 </b> </div>
<div class="option"> <b> menu4 </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div style="width:500px;color:grey;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla
</div>
</body>
Sorry for this long lorem ipsum but it's necessary to make the page scrollable. Also forgive me but I have no idea how to format the code properly.
You can achieve it by using media queries, try this.
#media screen and (max-width: 980px)
{
#moving_topbar
{
display: none;
}
}
I was hoping to prove how cool and easy AngularJS is with a small Accordion example, the whole thing is pretty simple, in my Controller I have an array and I have a ng-repeat where I bind some data and apply a css rule when the $index of the ng-repeat matches a scope variable. It's all simple stuff like so, here is my controller (I've reduced some of the text for this example).
$scope.paymentTypes = [
{name: 'Visa', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at!'},
{name: 'Master Card', text: 'Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Paypal', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Bitcoin', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie.'}];
$scope.selectedType = null;
$scope.togglePayments = function (index) {
if ($scope.selectedType === index) {
$scope.selectedType = null;
} else {
$scope.selectedType = index;
}
}
and here is my ng-repeat in my view...
<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
<div class="row u-padding-vert-s">
<div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
<div class="col-xs-6 text-right"><!-- put a logo here later --></div>
</div>
<div class="row u-slide-down" data-ng-hide="selectedType !== $index">
<div class="col-xs-12" data-ng-bind="ptype.text">
</div>
</div>
<div class="row">
<div class="col-xs-5 u-border-top-1"></div>
<div class="col-xs-2 toggle-tab text-center">
<span class="icon-ic_list_arrow_down"></span>
</div>
<div class="col-xs-5 u-border-top-1"></div>
</div>
</div>
and here is the css I have created to prove the sliding open and close animation:
.u-slide-down {
transition: .3s linear all;
overflow: hidden;
background: yellowgreen;
height: 200px;
}
.u-slide-down.ng-hide {
height: 0px;
}
Pretty cool, however this example relies on all hidden divs being the same height. In the real world I would prefer the hidden div to be flexible with its height and be more dynamic! As the content is different and may even contain HTML at some point. Now when I set my css to height: auto; in the .u-slide-down class the animation is lost. I don't want to have to write a directive for this as I want my example to be as simple as possible, so can anyone suggest what I can do to my CSS to allow dynamic heights and retain the animation? In the meantime, I'll try to put something together in https://jsbin.com... give me a sec!
I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/
Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}