Comments (7)
Okay wow Vanilla JS is working really well and a lot less code than my jQuery version. I'm going to close this, but I owe you a πΊor βοΈ! Your snippets were a great head start, very much appreciated!
from cssplus.
Hi @JiveDig, I wonder if it's an issue with HTTPS and the script not being given permission to access the stylesheets for security purposes (unless they are allowed intentionally allowed).
I think this Stack Overflow answer might explain the error if you're developing locally: https://stackoverflow.com/a/49160760/641558
from cssplus.
Well i'll be.... it works in Safari. Cool. I don't really understand that thread though. Local by Flywheel uses Docker I think, which is a local server? Not really your issue though, I understand ;)
May be worth a new issue, but I already see a deal break for me with Aspecty... my containers all have content in them so I want the aspect ratio to set the min-height
not the height
. I'm fine if it breaks the aspect ratio only when the inner content is taller than the container.
from cssplus.
FWIW, I changed:
let newRuleText = `height: ${newHeight}px${specificity};
to
let newRuleText = `min-height: ${newHeight}px${specificity};`
and it appears to work great. Much better than the jQuery hack I've been using.
If I fork this script and change to min-height
, do you think this thing is ready for prime time? We have some high traffic sites (using my old method), and sell a premium theme with a decent amount of monthly sales.
from cssplus.
Sorry to blow you up tonight :)
It may be cool to strip it down to search for data attributes directly. The way we have it working I can easily add data-aspecty="4 3"
or whatever is needed, directly to the markup. That may alleviate the need to access the stylesheet directly.
from cssplus.
If I fork this script and change to min-height, do you think this thing is ready for prime time? We have some high traffic sites (using my old method), and sell a premium theme with a decent amount of monthly sales.
In general I'd say try it out and see if it works for you in your actual layouts, but if you want this to have broader support, and especially for a premium theme I think there might by some other alternatives to try as well.
For the broadest browser support (should be IE8+) I would probably lean toward a solution with EQCSS:
<!-- EQCSS (supports IE8+) -->
<div data-width=16 data-height=9>With EQCSS</div>
<script src=http://elementqueries.com/EQCSS.js></script>
<style>
@element [data-width][data-height] {
:self {
min-height: eval('offsetWidth / (dataset.width / dataset.height)')px;
}
}
</style>
Or write something like this in in Javascript:
<!-- Vanilla JS (support maybe IE9+) -->
<div data-width=16 data-height=9>With vanilla JS</div>
<script>
function aspectRatio() {
return document.querySelectorAll('[data-width][data-height]')
.forEach(function(tag) {
return tag.style.minHeight =
tag.offsetWidth / (tag.dataset.width / tag.dataset.height) + 'px'
})
}
window.addEventListener('load', aspectRatio)
window.addEventListener('resize', aspectRatio)
</script>
So if you do test Aspecty and find there are any issues, my bet would be that either the EQCSS plugin for ease of developer experience, or handwritten JS for simplicity and performance will serve you slightly better than this plugin, but if it works as you want it in all the browsers you want it, that's great too :D
from cssplus.
Thanks Tom, i'll try those. I'm using jQuery now (cause JS is my weakest language!) and was very excited to see Aspecty. Our theme uses lots of Flexbox CSS and we only support IE11+ anyway.
from cssplus.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssplus.