I have images of different heights, and I want to place them into a tiled gallery just like the image below is demonstrating:
However, I also want it to be repressive, so my approach to make this work was as follows:
1) Using HTML I created three divs, #grid1, #grid2 and #grid3. And the images are placed inside these 3 grids in anther div that has class .gridElement which contains the images.
<!--Grid System-->
<div id="grid1">
<!--Grid 1-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<div id="grid2">
<!--Grid 2-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<div id="grid3">
<!--Grid 3-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<!--/Grid System-->
2) Here is the CSS using Media Query:
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 33.333%;
float: left;
}
#grid1 {
padding-right: 20px;
}
#grid2 {
padding: 0 10px;
}
#grid3 {
padding-left: 20px;
}
/*Gird Elements*/
.gridElement {
margin-bottom: 30px;
overflow: hidden;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type,
#grid3 .gridElement:last-of-type {
margin-bottom: 0;
}
#grid1 img,#grid2 img,#grid3 img {
width: 100%;
}
and
#media screen and (max-width: 1024px) {
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 50%;
}
#grid3 {
display: none;
}
}
and
#media screen and (max-width: 770px) {
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 100%;
}
#grid1,#grid2,#grid3 {
padding: 0;
display: block;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type {
margin-bottom: 30px;
}
and
#media screen and (max-width: 500px) {
/*Grid System*/
.gridElement {
margin-bottom: 20px;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type {
margin-bottom: 20px;
}
They theory: When the screen size is above 1024px it will show three grids by default. However when the screen size is below 1024px and above 770px using CSS #grid3 is hidden and using JavaScript I am trying to send all of the .girdElements that are inside #grid3 equally to #grid1 and #grid2. When the screen size is below 770px, everying will go back to normal and all the grids will be shown.
The problem? I have managed to get everything working BUT the JavaScript - please can anyone help me to create a function that will send all the .girdElements that are inside #grid3 equally to #grid1 and #grid2 when the screen size is below 1024px and above 770px? "on load, and on resize".
You can use masonry to achieve similar effect. It uses absolute positioning instead of fixed amount of columns. Anyway, it looks the same and adapts to the screen width.
You could try something like this:
var toggle = true;
$('#grid3').children('.gridElement').each(function (index) {
if (toggle) {
$('#grid1').append($(this));
toggle = false;
} else {
$('#grid2').append($(this));
toggle = true;
}
Here is a working example on JSFiddle, sorting elements inside the grids
This solution is better with jQuery, but there are ways to compute actual height of elements.
First, you should mark each item in grid1, grid2, grid3 as belonging to their corresponding grid, e.g. by using a class or data. Then, a kind of "chronology" value that stores the "order" for each item.
If you want all items in grid3 to be appended to grid1 and grid2, you could apply the following algorithm:
Get the items in grid3, sorted by the field. data value, etc. criteria you specified before.
For each item:
a. Compute width of grid1 and compare it to grid of grid2.
b. If grid2 is taller, append the item to grid1. Otherwise append it to grid2.
The column grid3 will be hidden.
A recommended approach is using jQuery to evaluate the .height() of grid1 and grid2, and move the elements.
To go back to a 3-col layout, just take the items with grid3 marker and put them back in grid3, ordered by the chronology value.
(damn, still messing with markdown. please if an editor can help me...)
Try this sample code (not including th fact about sorting criteria - not guaranteed to be flawless - it's just to illustrate the idea):
var grid1 = $("#grid1");
var grid2 = $("#grid2");
var grid3 = $("#grid3");
//compressing - distributing grid3 between grid1 and grid2
function compress()
{
grid3.hide();
$(".item-in-grid3").each(function(i, e){
//never assign "width:" to any grid (1, 2, 3) in css, so it can
//be dynamic and compute height and compare them on each iteration.
if (grid1.height() > grid2.height())
{
$(this).appendTo(grid2);
}
else
{
$(this).appendTo(grid1);
}
});
}
//return back the elements to grid3
function decompress()
{
$(".item-in-grid3").each(function(i, e){
$(this).appendTo(grid3);
});
grid3.show();
}
Related
I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>
I have an static Array of Strings and a div that contains a p element that contains one string at a time. What im trying to do is when you move across the div, you iterate over the array and change your text based on the current mouse position and thus position in the array.
The way i thought of doing this was
Getting div size in pixels, dividing this by the amounts of elements in the array.
Then i would check the mouseposition every time it changes and depending on its position (eg in the 52 section of the div) would change it to the 52 item in the array.
Am i overthinking this? Is there an easier way to do this?
Something like the solution below should work for you. Add a div/span/container of your choice for each string you want to add. Add an event listener that shows your string's container when you mouse-in, and removes the event listener when you mouse out. We use 'visibility: hidden' instead of 'display: none' to make sure your containing blocks still exist in the DOM.
Index.html:
<div class="container">
</div>
Main.css:
.container {
display: flex;
flex-direction: row;
background: #DDD;
width: 100%;
height: 200px;
}
.child {
width: 100%;
height: 100%;
color: black;
}
.hide {
visibility: hidden;
}
Index.js:
//Replace this with however you're getting your strings now
var stringContent = ["String #1", "String #2", "String #3"]
$(document).ready(function(){
//You can remove this if the number of strings are not dynamic and replace with the hardcoded html tags
for (var i = 0; i < stringContent.length; i++)
{
var eleToAdd = `<div class='child hide'>${stringContent[i]}</div>`
$(".container").append(eleToAdd)
}
$(".child").on("mouseenter", function(){
$(this).removeClass("hide");
})
$(".child").on("mouseout", function(){
$(this).addClass("hide");
})
})
I have 2 sections:
<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
<!--stuff --->
</section>
<section class="focus" id="need" style="display:none;">
<!--stuff --->
</section>
I want to display the second section when window is lowered to width less than 1043px. And hide the first section by display:none
Update:
How can I remove id attribute of first section, when width is less than 1043?
You should use CSS media queries. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 1043px) {
section.focus {
display: block;
}
}
Firstly you cannot use same ID for more than one div. So change the id of one div.
And to hide the second div and show the first div:
Use CSS:
#media only screen and (max-width: 1043px) {
.focus {
display: block;
}
.notes {
display: none;
}
}
In response to your requirement for removing the ID attribute, try the following JavaScript. It can only do it once however, and if you are interested in performance you should consider investigating debounce/throttle for the resize handler. (http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/)
$(window).on('resize', function() {
if($(window).width() < 1043) {
$('.notes').removeAttr('id');
$(window).off('resize');
}
});
However, the media queries answers are the correct approach to show/hide based on screen width.
I'm trying to build a basic gallery which displays a large image [div] depending on which image is clicked. The thumbnail images are stored in a basic unordered list.
I'm a javascript noob, I could use getElementById to change display class etc but I'd prefer not to have a separate function for each image, of which they're may be 100 or so.
Is there a way to call the same function to display a different div depending on which image is clicked [a larger version of that image]?
So:
If img1 is clicked display divA,
If img2 is clicked display divB,
If img3 is clicked display divC...
Many thanks.
The event passed to the onclick method has a target parameter, which refers to the element that was clicked.
Please post your code, preferably in a working JsFiddle, to get a more targeted answer.
Here is a general example of what you want to achieve:
document.onclick = function(e) {
// e.target is the img that was clicked, display the corresponding div
// Get the image number from the id
var number = e.target.id.substr(3)
// Display the corresponding div
document.getElementById('div' + number).style.visibility = 'visible';
}
Please note that the last line will most likely be different in your implementation - I don't know how you are displaying these divs.
You could try as follows
Assign id to all images in such a manner when they will be clicked we
could generate the corresponding div's id with some logical
manipulation.
Such as
images would have id like img_divA,img_divB and when they will be clicked , get there id and do some stuff like substring and you will get divA , divB and so on .. Finally show that by javascript ..
You could do something like this. Here actually a function is created per clickable dom element, but they are programmatically created. I use the num attribute to make the correspondence between the images to show and the images to click but there is many other (good) ways to do it.
// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
// retrieve the target image
var num = node.getAttribute("num");
var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
// create the click listener on this particular dom element
// (one of the image to click)
node.addEventListener('click', function(){
// hide any currently displayed image
var current = document.querySelector(".img-to-show.shown");
if(current) current.classList.remove("shown");
// set the new current
target.classList.add("shown");
});
});
#to-display {
position: relative;
width: 100%;
height: 50px;
}
#to-click {
position: relative;
margin-top: 20px;
}
.img-to-show {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.img-to-show.shown {
display: block;
}
.img-to-click{
display: inline-block;
background-color: gray;
width: 50px;
color:white;
text-align: center;
line-height: 50px;
vertical-align: middle;
height: 50px;
cursor:pointer;
}
<div id="to-display">
<div class="img-to-show" num="1" style="background-color:blue;"></div>
<div class="img-to-show" num="2" style="background-color:red;"></div>
</div>
<div id="to-click">
<div class="img-to-click" num="1">1</div>
<div class="img-to-click" num="2">2</div>
</div>
I have a script that has a div with a width larger than its' parent, with the parent being set to overflow: hidden;. I have javascript that is setting the left positioning of the big div to create "pages". You can click a link to move between pages.
All of that works great, but the problem is if you tab from one "page" element to another, it completely messes up all the left positioning to move between the pages.
You can recreate this bug in the fiddle I set up by setting your focus to one of the input boxes on page ONE and tabbing until it takes you to page two.
I've set up a demo here.
The code that is important is as follows:
HTML:
<div class="form">
<div class="pagesContainer">
<div class="page" class="active">
<h2>Page One</h2>
[... Page 1 Content here...]
</div>
<div class="page">
<h2>Page Two</h2>
[... Page Content here...]
</div>
</div>
CSS:
.form {
width: 400px;
position: relative;
overflow: hidden;
border: 1px solid #000;
float: left;
}
.pagesContainer {
position: relative; /*Width set to 10,000 px in js
}
.form .page {
width: 400px;
float: left;
}
JS:
slidePage: function(page, direction, currentPage) {
if (direction == 'next') {
var animationDirection = '-=';
if (page.index() >= this.numPages) {
return false;
}
}
else if (direction == 'previous') {
var animationDirection = '+=';
if (page.index() < 0) {
return false;
}
}
//Get page height
var height = page.height();
this.heightElement.animate({
height: height
}, 600);
//Clear active page
this.page.removeClass('active');
this.page.eq(page.index()).addClass('active');
//Locate the exact page to skip to
var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());
this.container.animate({
left: animationDirection + slideWidth
}, 600);
this.currentPage = page;
}
The primary problem is that whatever happens when you tab from say, an input box on page one to something on page 2, it takes you there, but css still considers you to be at left: 0px;. I've been looking all over for a solution but so far all google has revealed to me is how to stop scrollbar scrolling.
Any help or suggestions would be appreciated, thanks!
P.S. The html was set up like this so that if javascript is disabled it will still show up all on one page and still function properly.
I updated your fiddle with a fix for the first tab with the form: http://jsfiddle.net/E7u9X/1/
. Basically, what you can do is to focus on the first "tabbable" element in a tab after the last one gets blurred, like so:
$('.form input').last().blur(function(){
$('.form input').first().focus();
});
(This is just an example, the first active element could be any other element)
Elements with overflow: hidden still have scrolling, just no scroll bars. This can be useful at times and annoying at others. This is why your position left is at zero, but your view of the element has changed. Set scrollLeft to zero when you change "pages", should do the trick.