Reframe.js is a javascript plugin that makes unresponsive elements responsive. This is a video… that shows cute cats… in a perfect ratio at any size… because Reframe.js is awesome!
Reframe.js makes unresponsive elements responsive
Reframe.js is a javascript plugin that makes unresponsive elements responsive. This is a video… that shows cute cats… in a perfect ratio at any size… because Reframe.js is awesome!
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
Flickity v2 · Touch, responsive, flickable carousels
Install Download CDN Package managers License Commercial license Open source license Getting started Initialize with jQuery Initialize with vanilla JavaScript Initialize with HTML Next Feature showcase wrapAround freeScroll groupCells autoPlay lazyLoad Parallax Images View all options Flickity in use People like Flickity Install Download CSS: flickity.min.css minified, or flickity.css un-minified
How to react to changing environments using matchMedia | 4waisenkinder
I was at my parents place over Christmas. Besides eating the whole day and playing board games I tried to read two books I brought with me. One of the books was RESPONSIBLE RESPONSIVE DESIGN by Scott Jehl. It was released recently and it is a really good read. I have not finished it yet, but I enjoy it and it is for sure in the TOP5 list of my favourite books about responsive web design. In the wo
GitHub - Snugug/eq.js: Lightweight JavaScript powered element queries
Element queries are the "holy grail" of responsive web design, allowing you to create a single component that can be dropped into any position in any layout and have them respond appropriately. Unfortunately, due to some hard-to-deal-with chicken-and-egg cases, especially involving inline elements, it's unlikely that element queries will make it into browsers any time soon. eq.js aims to be a rela
Responsive Components Using Context Queries
Author: Ed Merritt Date: 22 August 2014 Category: Interface Design, Development, Mobile Reading Time: Media queries make a website respond to the viewport. But what if we could make site components respond to their container? I’ve been having a play with the idea of determining the context of a piece of content within a page rather than simply querying the media (device) itself. Media queries intr
Chartist - Simple responsive charts
You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Get awesome Dashboard Templates by Creative TimAre y
[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
![[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a1ab350b11240c268ad4418373b07e790b15b0/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fmediaquery.png)
How To Use WordPress Tutorial [2024]
What’s up y'all! More the reading type? Looking to start a website? The post: WordPress is definitely a solid choice for creating awesome, professional websites. Now you’ve just got to figure out how to use WordPress… Good news: as always, we’ve got your back fam! Here we’ve got a complete walkthrough of one of the best tools for building a website best website builders around including what you n
![How To Use WordPress Tutorial [2024]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c951618c3f76b3491f33f029f93696b921f1280/height=288;version=1;width=512/https%3A%2F%2Fe8y8n8b5.rocketcdn.me%2Fwp-content%2Fuploads%2F2020%2F01%2Fcapw-featuered-graphic-how-to-use-wordpress.jpg)
Molten Leading
Jun 27th, 2014Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing. Molten Leading is a tiny JavaScript plugin that autom
アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
Responsive & Fixed One Page Nav
Adtile Technologies wrote this on Mar 3, 2014 Today, we are open sourcing the JavaScript code and the assets we used to build the above functionality for our new website. The code and examples are hosted on GitHub and can be found from here. There’s a live example too, under our site, give it a spin. Below is a list of some of the features provided: Fixed Nav Features Fixed positioned, always vis
The Command Line Rosetta Stone
Expedited Security Security as a Service for Heroku, AWS and Google Cloud Applications Design Philosophy Security services designed to be straightforward, easy to understand and rapidly deployed. Sensible Defaults A security solution you can't get into action for months leaves you exposed. We're constantly evaluating what the best options are given platform specific configurations and threats. The
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NavNav+
Responsive Equal Height Blocks by Osvaldas Valutis
Checking Media Queries With Javascript
Web Fundamentals — Google Developers
http://www.csskarma.com/blog/responsive-javascript/
http://flippinawesome.org/2014/03/24/using-media-queries-in-javascript/