Breakpoints ohne @media?
Hallo,
ich arbeite gerade daran:
https://codepen.io/nicerboy/pen/BeBmoN
Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint.
Mit Media Queries wäre das sehr einfach, aber wie lässt sich das ansonsten machen?
Über Hilfe wäre ich sehr, sehr dankbar!
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css_webseite/normalize.css">
<script src="/js_webseite/jquery.js"></script>
<style>
* {
font-family: Arial;
box-sizing: border-box;
font-weight: normal;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
display: flex;
background-color: #eee;
}
#links{
font-size: 40px;
}
#links,
#rechts {
width: 100%;
height: 100vh;
flex: 1 1 auto;
flex-direction: column;
overflow-y: auto;
}
#schiebeteil {
width: 3px;
flex: 0 0 auto;
cursor: col-resize;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* Content */
.content {
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
#myBtnContainer {
margin:0 auto;
height:100%;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
cursor: pointer;
background: none;
padding-top:10px;
font-size: 18px;
margin-right:20px;
float:right;
}
.btn:hover {
}
.btn.active {
}
img {
width: 100%;
}
.image-content {
margin-left: 48px;
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}
.column {
max-width:49%;
min-width:201px;
text-align:center;
}
.main-nav {
width:100vh;
height:45px;
position:fixed;
-webkit-transform-origin: left top;
-webkit-transform:rotate(-90deg) translateX(-100%);
}
</style>
</head>
<body>
<article id="links">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</article>
<div id="schiebeteil"></div>
<article id="rechts">
<section class="main-nav">
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">All works</button>
<button class="btn" onclick="filterSelection('illustrations')">Illustrations</button>
<button class="btn" onclick="filterSelection('animations')">Animations</button>
</div>
</section>
<section class="image-content">
<div class="column illustrations">
<div class="content">
<img src="/image/csm_campusoffice_8e3bb1122c.jpg" >
<h3>Mountains</h3>
</div>
</div>
<div class="column illustrations">
<div class="content">
<img src="/image/csm_campusoffice_8e3bb1122c.jpg" >
<h3>Mountains</h3>
</div>
</div>
<div class="column illustrations">
<div class="content">
<img src="/image/csm_campusoffice_8e3bb1122c.jpg" >
<h3>Mountains</h3>
</div>
</div>
<div class="column animations">
<div class="content">
<img src="/image/csm_campusoffice_8e3bb1122c.jpg" >
<h3>Mountains</h3>
</div>
</div>
</section>
</article>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/*
jquery-resizable
Version 0.32 - 5/5/2018
© 2015-2018 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/
(function(factory, undefined) {
if (typeof define === "function" && define.amd) {
// AMD
define(["jquery"], factory);
} else if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS
module.exports = factory(require("jquery"));
} else {
// Global jQuery
factory(jQuery);
}
}(function($, undefined) {
if ($.fn.resizable)
return;
$.fn.resizable = function fnResizable(options) {
var defaultOptions = {
// selector for handle that starts dragging
handleSelector: null,
// resize the width
resizeWidth: true,
// resize the height
resizeHeight: true,
// the side that the width resizing is relative to
resizeWidthFrom: "right",
// the side that the height resizing is relative to
resizeHeightFrom: "bottom",
// hook into start drag operation (event passed)
onDragStart: null,
// hook into stop drag operation (event passed)
onDragEnd: null,
// hook into each drag operation (event passed)
onDrag: null,
// disable touch-action on $handle
// prevents browser level actions like forward back gestures
touchActionNone: true,
// instance id
instanceId: null
};
if (typeof options == "object")
defaultOptions = $.extend(defaultOptions, options);
return this.each(function () {
var opt = $.extend({}, defaultOptions);
if (!opt.instanceId)
opt.instanceId = "rsz_" + new Date().getTime();
var startPos, startTransition;
// get the element to resize
var $el = $(this);
var $handle;
if (options === "destroy") {
opt = $el.data("resizable");
if (!opt)
return;
$handle = getHandle(opt.handleSelector, $el);
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
if (opt.touchActionNone)
$handle.css("touch-action", "");
$el.removeClass("resizable");
return;
}
$el.data("resizable", opt);
// get the drag handle
$handle = getHandle(opt.handleSelector, $el);
if (opt.touchActionNone)
$handle.css("touch-action", "none");
$el.addClass("resizable");
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
function noop(e) {
e.stopPropagation();
e.preventDefault();
};
function startDragging(e) {
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
if ( e.preventDefault ) {
e.preventDefault();
}
startPos = getMousePos(e);
startPos.width = parseInt($el.width(), 10);
startPos.height = parseInt($el.height(), 10);
startTransition = $el.css("transition");
$el.css("transition", "none");
if (opt.onDragStart) {
if (opt.onDragStart(e, $el, opt) === false)
return;
}
$(document).on("mousemove." + opt.instanceId, doDrag);
$(document).on("mouseup." + opt.instanceId, stopDragging);
if (window.Touch || navigator.maxTouchPoints) {
$(document).on("touchmove." + opt.instanceId, doDrag);
$(document).on("touchend." + opt.instanceId, stopDragging);
}
$(document).on("selectstart." + opt.instanceId, noop); // disable selection
$("iframe").css("pointer-events","none");
}
function doDrag(e) {
var pos = getMousePos(e), newWidth, newHeight;
if (opt.resizeWidthFrom === "left")
newWidth = startPos.width - pos.x + startPos.x;
else
newWidth = startPos.width + pos.x - startPos.x;
if (opt.resizeHeightFrom === "top")
newHeight = startPos.height - pos.y + startPos.y;
else
newHeight = startPos.height + pos.y - startPos.y;
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
if (opt.resizeHeight)
$el.height(newHeight);
if (opt.resizeWidth)
$el.width(newWidth);
}
}
function stopDragging(e) {
e.stopPropagation();
e.preventDefault();
$(document).off("mousemove." + opt.instanceId);
$(document).off("mouseup." + opt.instanceId);
if (window.Touch || navigator.maxTouchPoints) {
$(document).off("touchmove." + opt.instanceId);
$(document).off("touchend." + opt.instanceId);
}
$(document).off("selectstart." + opt.instanceId, noop);
// reset changed values
$el.css("transition", startTransition);
$("iframe").css("pointer-events","auto");
if (opt.onDragEnd)
opt.onDragEnd(e, $el, opt);
return false;
}
function getMousePos(e) {
var pos = { x: 0, y: 0, width: 0, height: 0 };
if (typeof e.clientX === "number") {
pos.x = e.clientX;
pos.y = e.clientY;
} else if (e.originalEvent.touches) {
pos.x = e.originalEvent.touches[0].clientX;
pos.y = e.originalEvent.touches[0].clientY;
} else
return null;
return pos;
}
function getHandle(selector, $el) {
if (selector && selector.trim()[0] === ">") {
selector = selector.trim().replace(/^>\s*/, "");
return $el.find(selector);
}
// Search for the selector, but only in the parent element to limit the scope
// This works for multiple objects on a page (using .class syntax most likely)
// as long as each has a separate parent container.
return selector ? $el.parent().find(selector) : $el;
}
});
};
}));
$(function() {
//$("#top-left").css("height","100%");
});
$("#links").resizable({
handleSelector: "#schiebeteil",
resizeHeight: false,
resizeWidthFrom: "right"
});
$("#rechts").resizable({
handleSelector: "#schiebeteil",
resizeHeight: false,
resizeWidthFrom: "left"
});
$("#top-left").resizable({
handleSelector: "#hori-drag",
resizeWidth: false
});
$("#bottom-left").resizable({
handleSelector: "#hori-drag",
resizeWidth: false,
resizeHeightFrom: "top"
});
$(".img-btn").on("click", function(e) {
let fname = e.target.textContent;
$("#main-image").attr("src",fname);
});
</script>
</body>
</html>