I recently took up a non-profit website as a project. I'm working with an existing website, so I'm having to work with a lot of the stuff already programmed, so all I have to do is create the design.
I made a diagram of basically what I can't figure out how to do:
I also made a JSFIDDLE of what is already there:http://jsfiddle.net/RmWu7/. I know I should of used a table for tabular data, but the programming is a bit weird, and I can't seem to figure out how to modify the php to work with a regular table, so I'm just going to keep the divs.
So two things:
I tried adding a position:fixed to .columns with the .last class, and an overflow-x:auto to the rest, but it completely messes up the layout.
How can I get the columns to be a fixed size instead of fluid, and have the last non-fixed column (before the columns with the .last class) to be bigger to fill up the table like in the diagram?
I'm trying to keep it mostly in CSS, but do I need to add jQuery as well?
Thanks for all help!
Ok I've totally change the codes as my previous version has problem on scrolling.
<div class="table">
<div class="wrap">
<div class="wrap2">
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
</div>
</div>
<div class='column fixed-column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
</div>
css:
.table{
overflow: hidden;
position: relative;
.wrap {
overflow-x: auto;
}
.wrap2 {
overflow: hidden;
zoom: 1;
}
.column{
float:left;
background:red;
width:200px;
.row{
padding:10px;
&.top{
background:green;
}
}
&.fixed-column {
position: absolute;
right: 0;
top: 0;
background:blue;
}
}
}
jQuery:
$(function() {
var scrollingWidth = $('.table').innerWidth();
var lastWidth = $('.table .wrap .column:last').outerWidth();
var innerWidth = 0;
$('.table .column').each(function() {
innerWidth += $(this).outerWidth();
});
var gap = scrollingWidth - innerWidth + lastWidth;
if(gap > lastWidth) {
$('.table .wrap .column:last').css('width', gap);
innerWidth += gap - lastWidth;
}
$('.table .wrap2').css('width', innerWidth);
});
Related
Is there any way to modify DOM based on amount div after specific class?
For example, if I have a div with a class called row and after that I have 4 div elements. Is there a way to change these 4 div element class depending on how many div elements there are?
Code:
<div class="row">
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
</div>
Another example I have a div class row again, but this time I want 3 div elements after that, then I would want these div elements to have a class called col-1-of-3, not col-1-of-4. If I would have just 2 div elements after that then class col-1-of-2 and if just one div element then no class at all.:
Code:
<div class="row">
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
</div>
Also these div elements with classes called col-1-of-4, col-1-of-3 and col-1-of-2 have their own div elements inside them, but they should stay like they were.
Is it possible to achieve with JavaScript or PHP?
You would need to write conditional blocks to handle this if I'm understanding you correctly (wanting a JS or PHP solution).
Note: It goes without saying that a similar solution can be completed with a CSS-only approach, as outlined here: Can CSS detect the number of children an element has?
Here's an example (using jQuery) with 3 sets of row's, with varying children (2, 3, 4):
$(function() {
var $rows = $(".row");
$rows.each(function() {
$row = $(this);
var $children = $(">div", $row),
total = $children.size();
$children.addClass("col-1-of-" + total);
});
});
.row {
border: 1px solid #000;
margin: 10px;
}
.row > div {
margin: 10px;
}
.row .col-1-of-2 {
border: 1px solid #f00;
}
.row .col-1-of-3 {
border: 1px solid #0f0;
}
.row .col-1-of-4 {
border: 1px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
When you run the snippet, you must inspect the elements. I've added borders so you can see the difference.
Theres a number of ways to achieve this. I'd maybe add another class name so you can easily identify groups of divs, and differentiate between parent and child divs. Does this help you get where you're going? Basically find the number of children in a row and then concatenate that number into the class name.
var x = document.getElementsByClassName('row')[0].childElementCount
var element = document.getElementsByClassName('row')[0];
element.classList.add(`col-1-of-${x}`);
.row {
width: 100%;
display:flex;
flex-grow: 1;
margin-bottom: 2px;
}
.col {
float:left;
background: rgba(255,0,0,.2);
text-align: center;
margin-right: 2px;
}
.col:first-child:nth-last-child(1),
.col:first-child:nth-last-child(1) ~ .col{
width: calc(100% / 1);
}
.col:first-child:nth-last-child(2),
.col:first-child:nth-last-child(2) ~ .col{
width: calc(100% / 2);
}
.col:first-child:nth-last-child(3),
.col:first-child:nth-last-child(3) ~ .col{
width: calc(100% / 3);
}
.col:first-child:nth-last-child(4),
.col:first-child:nth-last-child(4) ~ .col{
width: calc(100% / 4);
}
.col:first-child:nth-last-child(5),
.col:first-child:nth-last-child(5) ~ .col{
width: calc(100% / 5);
}
<div class="row">
<div class="col">1</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
so this is with float, can be used in a sass/scss mixin to create code automagically. there should be also a flex solution but i dont have it at hand at the moment
I would like to have a background blur on scroll. It works but everything inside the section gets a blur. I would like to only have the background image as a blur. Can anyone help?
My code:
<section class="block clearfix z-index background--image text--white blurme" style="background-image: url(<?php echo $image_src ?>);">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
And my javascript
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.blurme').css('-webkit-filter', 'blur(' + distanceScrolled/60 + 'px)');
});
Cheers!
You can achieve it by doing below code
<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
Please set height, width of first section according to your need.
Best of luck :)
Try to blur before or after "selector".
https://jsfiddle.net/xrnk08n4/
<div class="blurme">
<div class="no-blur">
banner
</div>
</div>
.blurme {
position: relative;
height:600px;
}
.blurme:before {
content: "";
position:absolute;
z-index: -1;
top:0;
bottom:0;
left:0;
right:0;
background: url("https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
-webkit-filter: blur(20px);
}
i am making a kind of storyboard where you can add and remove frames but i need to set divs next to each other, the code i now have it places the div's beneath each other. I want to make it with a loop
Here is my code:
HTML
<div id="storyboard">
<div id="container">
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
<div type="button" value="fade_in" class="add__button"> + </div>
</div>
</div>
</div>
</div>
JS
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
Use append() instead of after() function. This should work:
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
This works for keeping one .frame element and adding multiple divs to it of the structure:
<div class="container[i]">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
</div>
</div>
If you want to arrange elements side by side which normaly are block elements and thus are positioned underneath eachother by default use either css floats or css flexbox.
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
i need to set divs next to each other
Try this example to add new story container to all current .container
var i = 1;
$('.add__button').click(function() {
i++;
$(".container").each(function(x) {
$(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
});
});
.frame__outer {
padding: 20px;
background: #222;
color: white;
border-bottom: solid 3px green;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
<input type='button' value='add story' class="add__button" />
<div id="container" class='container'>
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content">story 1</div>
</div>
</div>
</div>
</div>
Currently I have a header element with the following code
<header>
<div class="container">
<div class="row" style="display: flex; justify-content: center">
<div class="col-xs-12 text-center" style="align-self: center">
<h1>My header</h1>
<span id="slogan">my slogan</span>
</div>
</div>
</div>
</header>
The header element starts at the beginning of body and ends 75 px short of the window bottom.
header {
height: calc(100vh - 75px);
}
When I start scrolling downwards, the header element starts moving up with the header and the slogan span. However, I want to keep the h1 and span elements vertically centered to the visible part of the header element, somewhat like on the iStockPhoto website. Notice how you scroll down the search form stays vertically centered to the background image container.
How do I implement something similar?
After a little bit of trial and error I created the effect with the following code.
<header>
<div class="container">
<div class="row" style="display: flex; justify-content: center">
<div class="col-xs-12 text-center" style="align-self: center">
<h1>Header</h1>
<span id="slogan">my slogan</span>
</div>
</div>
</div>
</header>
<section style="height: 1000px">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</section>
$(function() {
var initialTitleHeight = $("header h1").position().top,
initialSloganBottom = $("header span").position().top + $("header span").height(),
headerHeight = $("header").height(),
headerMaxMargin = headerHeight - (initialSloganBottom - initialTitleHeight + 50);
$(window).scroll(function(event) {
var scroll = $(window).scrollTop(),
marginTop = (initialTitleHeight + scroll < headerMaxMargin) ? initialTitleHeight + scroll : headerMaxMargin;
$("header h1").css({
marginTop: marginTop + "px"
});
});
})
header {
height: calc(100vh - 75px);
background-color: #F90;
.container, .row {
height: 100%;
}
}
You can try it here.
I have a code similar to:
<div id='right-column'>
<div id='results'>
<div id='result1>
<div class='main'></div>
<div class='details'></div>
</div>
<!-- ... -->
<div id='result50>
<div class='main'></div>
<div class='details'></div>
</div>
</div>
</div>
the total number of results depends of the ajax query, I insert all the results dynamically in one go.
div.main is always visible (fixed height) and div.details "unfolds/folds" below div.main when the user clicks on a result div.
the details div height can vary.
If #results scrollHeight is bigger than #right-column height, I would like to create a continuous scroll loop.
In this case, scrolling past #result50 would show #result1, scrolling before #result1 would show #result50.
I can't .append() the first child to the bottom as in some cases a portion of a result can be seen on top and at the bottom of the column.
I can't duplicate a result unless I detect if .details is unfolded/folded.
The fact that the height of a result can change when a user unfolds the .details div, makes it even more complicated...
Here is an example of continuous scroll loop (2 columns):
$(document).ready(function() {
var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
function crisscross() {
$('#up-left').css('bottom', '-' + window.scrollY + 'px');
$('#down-right').css('bottom', '-' + window.scrollY + 'px');
var firstLeft = $('#up-left').children().first();
var lastLeft = $('#up-left').children().last();
var lastRight = $('#down-right').children().last();
var firstRight = $('#down-right').children().first();
if (window.scrollY > half_way ) {
$(window).scrollTop(half_way - child_height);
lastRight.appendTo('#up-left');
firstLeft.prependTo('#down-right');
} else if (window.scrollY < half_way - child_height) {
$(window).scrollTop(half_way);
lastLeft.appendTo('#down-right');
firstRight.prependTo('#up-left');
}
}
$(window).scroll(crisscross);
});
div#content {
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#box {
position: relative;
vertical-align:top;
width: 100%;
height: 200px;
margin: 0;
padding: 0;
}
#up-left {
position:absolute;
z-index:4px;
left: 0;
top: 0px;
width: 50%;
margin: 0;
padding: 0;
}
#down-right {
position:fixed;
bottom: 0px;
z-index: 5px;
left: 50%;
width: 50%;
margin: 0;
padding: 0;
}
h1 {margin: 0;padding: 0;color:#fff}
.black {background: black;}
.white {background: grey;}
.green {background: green;}
.brown {background: brown;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="content">
<div id="up-left">
<div id="box" class="brown">
<h1>ONE</h1>
</div>
<div id="box" class="black">
<h1>TWO</h1>
</div>
<div id="box" class="white">
<h1>THREE</h1>
</div>
<div id="box" class="black">
<h1>FOUR</h1>
</div>
<div id="box" class="white">
<h1>FIVE</h1>
</div>
<div id="box" class="black">
<h1>SIX</h1>
</div>
</div><!-- #up-left -->
<div id="down-right">
<div id="box" class="white">
<h1>SIX</h1>
</div>
<div id="box" class="black">
<h1>FIVE</h1>
</div>
<div id="box" class="white">
<h1>FOUR</h1>
</div>
<div id="box" class="black">
<h1>THREE</h1>
</div>
<div id="box" class="white">
<h1>TWO</h1>
</div>
<div id="box" class="green">
<h1>ONE</h1>
</div>
</div><!-- #down-right -->
</div><!-- .content -->
(fiddle: http://jsfiddle.net/franckl/wszg1d6c/)
Any hint/ideas on how I could do it ?
Move items to top or bottom based on scroll direction
You can use jQuery's .append() and .prepend() to move items without cloning them.
You'll use similar techniques to infinite scrolling with lazy loading (AJAX), but in this scenario you want to handle scrolling up as well as down, and instead of loading new content from the server, you're just recycling existing DOM elements in the list.
Below I demonstrate one technique. I store the scroll position in the element's .data cache for easy retrieval when detecting scrolling direction. I chose to detect scrolling direction to avoid making unnecessary variable assignments upfront to improve performance. Otherwise, you'd be getting elements and doing math for a scroll event that isn't going to happen in that direction.
The scroll handler:
$('#right-column').on('scroll', function (e) {
var $this = $(this),
$results = $("#results"),
scrollPosition = $this.scrollTop();
if (scrollPosition > ($this.data('scroll-position') || 0)) {
// Scrolling down
var threshold = $results.height() - $this.height() - $('.result:last-child').height();
if (scrollPosition > threshold) {
var $firstResult = $('.result:first-child');
$results.append($firstResult);
scrollPosition -= $firstResult.height();
$this.scrollTop(scrollPosition);
}
} else {
// Scrolling up
var threshold = $('.result:first-child').height();
if (scrollPosition < threshold) {
var $lastResult = $('.result:last-child');
$results.prepend($lastResult);
scrollPosition += $lastResult.height();
$this.scrollTop(scrollPosition);
}
}
$this.data('scroll-position', scrollPosition)
});
A complete working example:
$('#right-column').on('scroll', function (e) {
var $this = $(this),
$results = $("#results"),
scrollPosition = $this.scrollTop();
if (scrollPosition > ($this.data('scroll-position') || 0)) {
// Scrolling down
var threshold = $results.height() - $this.height() - $('.result:last-child').height();
if (scrollPosition > threshold) {
var $firstResult = $('.result:first-child');
$results.append($firstResult);
scrollPosition -= $firstResult.height();
$this.scrollTop(scrollPosition);
}
} else {
// Scrolling up
var threshold = $('.result:first-child').height();
if (scrollPosition < threshold) {
var $lastResult = $('.result:last-child');
$results.prepend($lastResult);
scrollPosition += $lastResult.height();
$this.scrollTop(scrollPosition);
}
}
$this.data('scroll-position', scrollPosition)
});
$('#results').on('click', '.result', function (e) {
$(this).find('.details').toggle();
});
$('#newNumber').on('input', function (e) {
var results = '';
for (var n = 1; n <= $(this).val(); n++) {
results +=
'<div class="result" id="result' + n + '">' +
' <div class="main">Result ' + n + '</div>' +
' <div class="details">Details for result ' + n + '</div>' +
'</div>';
}
$('#results').html(results);
});
body {
font-family: sans-serif;
}
h1 {
font: bold 2rem/1 Georgia, serif;
}
p {
line-height: 1.5;
margin-bottom: 1em;
}
label {
font-weight: bold;
margin-bottom: 1em;
}
.column {
box-sizing: border-box;
float: left;
width: 50%;
height: 100vh;
padding: 1em;
overflow: auto;
}
#right-column {
background-color: LemonChiffon;
}
.result {
padding: 1em;
cursor: pointer;
}
.result .main {
height: 2em;
font-weight: bold;
line-height: 2;
}
.result .details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=
"column" id="left-column">
<p>Existing DOM elements are moved to the top or bottom of the list depending on your scroll direction.</p>
<label>Change the number of results to display
<input id="newNumber" type="number" value="10" />
</div>
<div class=
"column" id="right-column">
<div id="results">
<div id="result1" class="result">
<div class="main">Result 1</div>
<div class="details">Details for result 1</div>
</div>
<div id="result2" class="result">
<div class="main">Result 2</div>
<div class="details">Details for result 2</div>
</div>
<div id="result3" class="result">
<div class="main">Result 3</div>
<div class="details">Details for result 3</div>
</div>
<div id="result4" class="result">
<div class="main">Result 4</div>
<div class="details">Details for result 4</div>
</div>
<div id="result5" class="result">
<div class="main">Result 5</div>
<div class="details">Details for result 5</div>
</div>
<div id="result6" class="result">
<div class="main">Result 6</div>
<div class="details">Details for result 6</div>
</div>
<div id="result7" class="result">
<div class="main">Result 7</div>
<div class="details">Details for result 7</div>
</div>
<div id="result8" class="result">
<div class="main">Result 8</div>
<div class="details">Details for result 8</div>
</div>
<div id="result9" class="result">
<div class="main">Result 9</div>
<div class="details">Details for result 9</div>
</div>
<div id="result10" class="result">
<div class="main">Result 10</div>
<div class="details">Details for result 10</div>
</div>
</div>
</div>
A complete working example on CodePen, if you prefer.