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
Related
How do I adjust the padding of a Swift UI "back" navigation button? i.e. the blue "Navigation" text in the image below (Image contributed by someone else on a different question). I want to add more space between the text and the leading edge of the screen.
You can use custom appearance for this purpose configured in the init of view holding NavigationView.
Here is a demo (with big offset for better visibility). Prepared with Xcode 13 / iOS 15.
init() {
let appearance = UINavigationBarAppearance()
appearance.backButtonAppearance.normal.titlePositionAdjustment =
UIOffset(horizontal: 40, vertical: 0)
UINavigationBar.appearance().standardAppearance = appearance
}
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 create a sliding menu and i want to open it using ( ... ) but i try alot to change the icon which is(<-).
this my code .
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer1, //nav menu toggle icon
R.string.app_name, // nav drawer open - description for accessibility
R.string.app_name // nav drawer close - description for accessibility
) {
public void onDrawerClosed(View view) {
getActionBar().setTitle("hello");
// calling onPrepareOptionsMenu() to show action bar icons
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle("ohhh");
// calling onPrepareOptionsMenu() to hide action bar icons
invalidateOptionsMenu();
}
};
// getSupportActionBar().setDisplayShowHomeEnabled(true);
// getActionBar().setHomeButtonEnabled(true);
//getSupportActionBar().setIcon(R.drawable.ic_drawer1);
getSupportActionBar().setIcon(R.drawable.ic_drawer1);
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
It has been asked already. Try to change in manifest file to change your app logo or if it doesn't work then try this link. Android: How to change the ActionBar "Home" Icon to be something other than the app icon?. This might help.
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
How to change the background color of a row in RDLC report on mouse over?
set background color on mouse over. To identify rows.
$('table:contains("ID"):last tr') is to get the report table. "ID" is used to find out the report table from the form.
JQuery
function ColorRow() {
$('table:contains("ID"):last tr').addClass('trrr');
}
CSS
.trrr:hover {
background-color: orange;
cursor: pointer;
}
Code in ASPX.CS page Report viewer Load Event (call the JQuery Function)
Note: Must add below code, other wise it will not work in all report pages (just in one page). Also repeat table column header in each page.
protected void ReportViewer1_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ColorRow", "ColorRow();", true);
}