I wonder what's the purpose of having media queries for XLarge and XXLarge devices in Foundation 5 if row width is only 62.5rem, anyone can obviously change that size, but what's the purpose of having that as a default if in huge screens it will look tiny?
I think that those media queries are used for building the visibility classes (hidden-for-xlarge-only, visible-for-xxlarge-up etc). Maybe someone at some point would use an 100rem row and need those classes but I must agree that this looks like an edge case.
xlarge and xxlarge media queries are disabled by default on Foundation 5. For enabling them you have to overwrite the variable $include-xl-html-grid-classes: true; in your config settings.
I've overwritten the default config with the following values and it works fine for me:
...
$include-xl-html-grid-classes: true;
// Media Query Ranges
$small-range: (0px, 428px);
$medium-range: (429px, 591px);
$large-range: (592px, 784px);
$xlarge-range: (785px, 980px);
$xxlarge-range: (981px, 99999999px);
...
Cheers!
Now these media queries have been changed in foundation 5 .
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Please check official website http://foundation.zurb.com/docs/media-queries.html
Thanks ,
Lakin
Related
I have two questions using JWPLAYER. I have searched in many places but didn't get the answer, especially regarding audio streaming in JWPLAYER.
Question1:
I am working on transcoding the video files into m3u8 and ts chunks using aws-elastic-transcoder and successfull streaming videos.
Now, I want to stream the audio files.
Does audio files follow the same process of dividing into m3u8 and ts chunks. What extra configurations does it need. What audio files are supported, I also need audio HD quality toggling in audio. How do I achieve it?
Question2:
I want to customize my JWPLAYER, especially AUDIO player. I want to add different buttons into the control-bar.
A shuffle button
An image in the control bar
A download button
A button to show the current queue list.( How to add an audio file
HLS to queue)
A repeat button
A settings Button
So, basically I want to customize the complete player. How can I achieve this. How can I change the whole JWPLAYER HTML.
Please give any reference URL if available.
Here are my options,
JWOptions = {
id: "myPlayer2",
"playlist": [{
"file": "https://s3.amazonaws.com/mypath1/index.m3u8",
"image": "assets/img/bg1.jpg",
"title": "Sintel Trailer",
"mediaid": "ddra573"
}, {
"file": "https://s3.amazonaws.com/mypath2/index.m3u8",
"image": "assets/img/bg2.jpg",
"title": "Big Buck Bunny Trailer",
"mediaid": "ddrx3v2"
}],
width: 800,
height: 40,
}
Thank You.
about 1): you can convert in AAC (m4a) audio files like for video. You can use AAC-LC codec for non high quality, and HE-AAC for high quality audio. jwPlayer setup is the same of video, it works, but you can setup better according to your needs.
about 2): you can add an item to the controlbar like in this example http://codepen.io/fdambrosio/pen/XRpBvW but I think that adding 4 or 5 more items does not fit well into the default jwplayer controlbar, because in mobile/small size the controlbar is minimal and jwplayer shows items with different style thank desktop.
HTML:
<body>
<div id='radioplayer'></div>
</body>
CSS:
#change-speed {font-size: 16px; color: white; padding-left: 5px; margin-right: 5px;}
JS:
var playerInstance = jwplayer("radioplayer");
playerInstance.setup({
file:'//video.radioradicale.it:1935/store-86/_definst_/mp4:2015/01/MQ781257.mp4/playlist.m3u8',
width:544,
height: 306,
androidhls: true,
autostart: true,
});
var tag;
jwplayer("radioplayer").on('ready', function(){
if (jwplayer("radioplayer").getProvider().name == "html5" | jwplayer("radioplayer").getProvider().name == "shaka") {
console.log('1X');
var normale = document.createElement("div");
normale.id = "change-speed";
normale.setAttribute('class','jw-reset jw-text jw-icon-inline');
normale.innerHTML = "1x";
document.getElementsByClassName('jw-controlbar-right-group')[0].appendChild(normale);
tag = document.querySelector('video');
tag.defaultPlaybackRate = 1.0;
tag.playbackRate = 1.0;
$('#change-speed').on('click', function() {
console.log('test');
speed_bfr = tag.playbackRate;
console.log(speed_bfr, 'prima');
switch(speed_bfr) {
case 1.0:
console.log('1.0');
normale.innerHTML = "1.5x";
tag.playbackRate = 1.5;
break;
case 1.5:
console.log('1.5');
normale.innerHTML = "1x";
tag.playbackRate = 1.0;
break;
}
});
}
});
You can also add only one button (ex. download) over poster image, as described here: https://developer.jwplayer.com/jw-player/demos/basic/add-download-button/
Otherwise you can develop your custom controlbar, or adding buttons near the player, using JwPlayer API: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/
I'm using ember-emojione to display and insert emoji.
Out of four rendering options that EmojiOne offers:
PNG sprites
PNG individual images
SVG sprites
SVG individual images
...only PNG sprites suit me. Individual images take too much time to load and emoji display sequentially. SVG sprites are awesome, but rerendering the preview area causes SVG sprite emoji to flicker. Only PNG sprite emoji never flicker and display simultaneously.
Unfortunately, EmojiOne offers spritesheets only in three sizes: 64, 128 and 512 px. We need to display emoji in 20 px size.
Resizing emoji displayed via PNG sprites is problematic.
ember-emojione readme suggests this hack to resize PNG sprite emoji:
.emojione {
transform: scale(0.3125);
margin: -22px;
}
It works, but it has some disadvantages:
In certain cases, emoji appear blurred.
Text selection blows up:
The solution is to use emoji spritesheets tailored to desired size. The Deveo/emojione-png-sprites repo offers such spritesheets.
But when I include those spritesheets instead of default ones, ember-emojione emoji picker component displays incorrectly.
Question: how do I use ember-emojione with emojione-png-sprites correctly?
emojione-png-sprites relies on Sass mixins, so you'll need ember-cli-sass. If you don't want to install ember-cli-sass, you can alternatively precompile mixin invocations manually and insert resulting CSS into your app.
Decide which spritesheets to include from emojione-png-sprites.
We're gonna use 20px emoji. For retina, we'll also need double and triple size spritesheets. As 40px and 60px aren't available, we're gonna use next available ones: 48px and 64px.
Include spritesheets and the Sass file into your repo. Run these commands in your Ember app root:
bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss
It's very important that you use a specific release version of the files, so that your dependencies are locked. Otherwise, if the repo has a breaking change, an innocent bower install will break your project.
Tell ember-emojione not to include default EmojiOne CSS and spritesheets. In your app's ember-cli-build.js:
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
"ember-emojione": {
shouldImportCss: false,
shouldIncludePngSprite: false,
shouldIncludeSvgSprite: false,
shouldIncludePngImages: false,
shouldIncludeSvgImages: false
}
});
// ...
Import PNG sprites into your app.
Install broccoli-funnel:
npm install -D broccoli-funnel
In your app's ember-cli-build.js:
var Funnel = require("broccoli-funnel");
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
// ...
}
});
const funnels = [
// PNG sprites
new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-20.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-48.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-64.png";
}
}),
];
if (app.env === "development" || app.env === "test") {
app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
}
return app.toTree(funnels);
};
In your app's Sass, include the mixin and invoke it:
#import "bower_components/emojione-png-sprite-style/index.scss";
#include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));
This will break the looks of ember-emojione components. The addon contains a mixin that restores the looks:
#import 'node_modules/ember-emojione/app/styles/ember-emojione';
#include ember-emojione-cancel-scale;
I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>
I use alot of transition, hover, and shadow effects on the desktop version of my site. I need to get rid of them for my tablet version which I thought I could do with media queries but my issue is when i use something like #media only screen and (min-width : 1224px) to target desktops then a user needs to have their browser window maximized or they get tablet targeted css. So if a desktop users browser is at 1000px then they get the same css as someone on an Ipad. Now I'm told that browser sniffing is unreliable so how else can I differentiate between a user on a 1000px desktop browser and a 1000px tablet device?
body {
background-color: #bada55
}
/* Regular media queries for a smaller desktop */
#media only screen
and (min-device-width : 768px)
{
/* Add styles here */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Add styles here */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Add styles here */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Add styles here */
}
Check the example in jsbin - http://jsbin.com/uxipeh/1/ and a full list of options here
I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.