Sorry if this question was worded poorly. I didn't know how else to compress it.
I have a music player that has a button you click to toggle a smaller UI of the player, suitable for mobile. How can I set it so that the smaller player automatically opens for specific min and max height set?
The class for the toggle is '.more'
The smaller version is '.m-ui'
and the div ID it's in is '#box'
if that further helps any.
Thanks!
You can play with the resize event :
I give you a little example :
$(window).on('resize', function(e) {
if ($(document).width() < 500) {
$("#player").width(50);
$("#player").height(50);
} else {
$("#player").width(100);
$("#player").height(100);
}
});
https://jsfiddle.net/50mc23nx/
EDIT : with your comments I think you need to toggle class when the site opens (if you search a good way to detect if it's a mobile or not I suggest you to search on SO)
$(function() {
if ($(document).width() < 500) {
$("#box").toggleClass("m-ui", true);
} else {
$("#box").toggleClass("m-ui", false);
}
});
https://jsfiddle.net/z67dtnxm/
I have a site with a youtube background video (with YTPlayer). I am using a CSS spinner that shows while the page is loading. Unfortunately it disappears before the video has loaded and starts playing.
$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
},4000)
});
I added a little timeout, to make sure the video is already playing in the background when fading to the page (I did not know how else that would work, if anyone has an idea, let me know. Would be awesome).
Since I don't need the timeout on a mobile device (I'm just showing a background image), I was wondering if there is an option to say, if you're on desktop > run the timeout, if you're on mobile > don't run it. Is that possible?
Edit: My temp workaround with the following code:
if(jQuery.browser.mobile)
{
$(window).load(function() {
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
});
}
else
{
$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
},3000)
});
}
I think there could be a better way though...
It think the best way to load a picture as background until the video starts in mb YTPlayer is by applying a css snippet. Please see this article.
How to load a picture as background until the video starts in mb YTPlayer
It works beautifully for me every time. I hope this helps!
You can check the resolution of the display with: window.screen.availHeight &&
window.screen.availWidth
Here is a basic demo of what I'm working with: http://jsfiddle.net/3N8wY/9/
Issue #1
If you view that link from a stock Android browser, or (more importantly) an iOS device, the website will not scroll. It does this odd fidgety/pulse thing and goes no where. It will sometimes scroll if you choose a link way on down the line, but it never ends up in the right spot.
I believe this has to do with the JS. When I tried it on my phone, I noticed it wasn't hashing the new value of the selected link.
JS
$(document).ready(function () {
$('.main-nav').on('click', function (e) {
e.preventDefault();
var toTarget = $(this).attr('href');
history.pushState(null, null, toTarget);
$(window).triggerHandler('hashchange');
});
});
$(window).on('hashchange', function () {
if(!window.location.hash) return;
var $target = $(window.location.hash);
console.log($target);
$('html, body').stop().animate({
scrollLeft: $target.offset().left,
scrollTop: $target.offset().top
}, 900, 'swing');
});
CREDIT FOR JS - Horizontal One-Page site won't go "backwards" to previous DIV
Issue #2
If you swipe a little left or right, it moves the page. I do not want that. Setting the overflow to hidden has not helped with swiping.
Ideally, if the user swiped enough right or left, it would "snap" the page in the desired direction, and then push the correct hash value. If they didn't swipe enough, it would snap back to the current page.
Having said that, I will be quite happy with it if it just doesn't move at all. I had envisioned that the user would use the menu to navigate, and only be able to scroll up and down.
Somewhat off-topic
Does anyone have a suggestion for a desktop browser that closely emulates the browser in an iOS device? I believe that webkit driving the stock Android browser is very similar, so I think I'd kill two birds here if I could get a hold of that for testing. On another project, I noticed that my desktop version of Safari seemed to deliver very different results than what I'd find on an iOS device (absolutely positioned elements behaved differently with respect to "top/margin-top" in each respective browser).
Thank you very much in advance for reading and contributing! I am extremely appreciative and grateful.
Issue #1
Turns out that I didn't have Modernizr installed correctly (hadn't included the no-js class in the html tag), which once rectified, solved the hashing issue I was running into on some stock Android browsers.
After that was fixed, I still ran into the odd scrolling behavior. Often, the page would scroll to the desired location, but then jump back. Upon further research, I came across this:
Jquery Animate ScrollLeft doesnt work on ipad.
That seemed to fix the undesired scrolling behavior for some of the poor performers, but not on iOS devices. This could have something to do with it, ScrollLeft and ScrollTop on Ipad using animate chain (jQuery), but I've figured out something else that works (will post below).
So far as I can tell, iOS devices (7+) automatically scroll to top BEFORE any scrollLeft animation. I don't have access to any physical devices, but I do have access to an iMac, where I was able to get ahold of the iOS Simulator and observed the unwanted scrolling behavior. I tried unlinking the two scrolling actions (left & top, as most posts will suggest you try), but that didn't make a difference.
It might have had something to do with what I was scrolling (ie the body or the html), I read that in a few posts, but messing with that rendered no useful results.
As I was testing, I realized that by only scrolling left, my script finally functioned "properly".
The interesting bit is that I noticed that the browser would scroll to top AUTOMATICALLY BEFORE horizontally scrolling to my target. So, if they update their code to make scrollLeft function properly, I'll have to go back and add a scrollTop function. For the the time being...
Not exactly a "fix" (the browser behaving inappropriately working to my "benefit", worrisome), but I'll take it.
Issue #2
Just to clarify, it was especially tricky to tackle this one because the page NEEDS to be able to scroll left and right (what with the horizontal layout and all), but only when I want it to.
As far as attempting to disable swiping, I really came up short. The closest I got there was with a plugin called touchSwipe; however, that broke too much (CSS-layout in some mobile browsers), and I couldn't seem to re-enable the tapping of non-link('a') assets.
What I ended up doing is creating a function that would monitor the horizontal scroll position of the window, and reposition the window if it changed. Seems a little buggy in some browsers, but it seems like I'm close to making 'everybody' happy.
EDIT: Changed the function to the much more compliant window.scrollTo(), just had to fetch positions before I fired it. Haven't tested a browser that didn't like it (so far, fingers crossed).
Side note
Lastly, when I got to RWD testing...
I was spoiled with the 'Resize Window' plugin for Chrome, and didn't realize the lackluster availability of working plugins for other browsers. So, I created a testbed full of 20 or so iframes of differing proportions, set to match the most popular device dimensions.
When I got down to mobile device dimensions, I realized that the browser's scrollbar was skewing my proportions. I'd looked into custom scrollbars before, so I delved back into it to attempt to equalize the variable all across the field.
After trying many different plugins, 'nicescroll' was the only one I could get working properly (http://nicescroll.areaaperta.com/). If you're going to use it, be sure to run a mobile test (http://www.detectmobilebrowsers.com/), and only run it on non-mobile devices (admittedly, this script seems to fail at picking up some mobile browsers, but it's better than nothing). All the mobile browsers I tested already had a similar scrollbar in place (by default), so it's completely unnecessary (plus it breaks some mobile browsers).
Working JS
$(document).ready(function() {
var loadedTarget = $(window.location.hash);
function unbindWindow() { $(window).unbind('scroll'); }
function repositionWin() {
unbindWindow();
var targetPosLeft = loadedTarget.offset().left;
$(window).on('scroll', function(e) {
var alteredPosLeft = $(window).scrollLeft();
var alteredPosTop = $(window).scrollTop();
if (alteredPosLeft != targetPosLeft) {
window.scrollTo(targetPosLeft, alteredPosTop),
unbindWindow(), // MAY BE UNNECESSARY, IOS SCARED ME INTO IT, SAME AS BELOW
repositionWin();
}
});
}
function browserResult() {
if (jQuery.browser.mobile === true) {
$('body').css({"overflow-x":"hidden","overflow-y":"scroll"});
repositionWin();
}
else {
setTimeout ((function(){
$("html").niceScroll({
cursorcolor: '#231f20',
cursoropacitymax: '0.5',
scrollspeed: '100',
mousescrollstep: '50'
});
}), 300);
setTimeout (repositionWin, 300);
}
}
browserResult();
$('.main-nav-link').click(function(e) {
e.preventDefault();
var toTarget = $(this).attr('href');
history.pushState(null, null, toTarget);
// CODE SPECIFIC TO PROJECT (NAMELY FLEXSLIDER PAUSE/PLAY STUFF) OMITTED
$(window).triggerHandler('hashchange');
});
});
$(window).on('hashchange', function () {
if(!window.location.hash) return;
var target = $(window.location.hash);
var targetHash = window.location.hash;
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
var currentPosition = $(window).scrollLeft();
var targetPosLeft = target.offset().left;
var targetPosTop = target.offset().top;
function unbindWindow() { $(window).unbind('scroll'); }
function repositionWin() {
unbindWindow();
$(window).on('scroll', function() {
var alteredPosLeft = $(window).scrollLeft();
var alteredPosTop = $(window).scrollTop();
if (alteredPosLeft != targetPosLeft) {
window.scrollTo(targetPosLeft, alteredPosTop),
unbindWindow(),
repositionWin();
}
});
}
function fadePages() {
if (targetPosLeft == currentPosition) {
}
else {
function fadePageOut() {
$('.page-container').stop(true,false).animate({
opacity: "0.25",
transition: "opacity 0.1s 0.0s ease"
});
}
function fadePageIn() {
$('.page-container').stop(true,false).animate({
opacity: "1.0",
transition: "opacity 0.3s 0.0s ease"
});
}
fadePageOut();
setTimeout (fadePageIn, 900);
}
}
function pageChange() {
if (jQuery.browser.mobile === true) {
if (iOS === true) {
unbindWindow();
$('html,body').stop(true,false).animate({
scrollLeft: targetPosLeft}, 1400);
setTimeout (repositionWin, 1500);
}
else {
unbindWindow();
$('html,body').stop(true,false).animate({
scrollLeft: targetPosLeft}, 1200, function() {
$(this).stop(true,false).animate({
scrollTop: targetPosTop
}, 200, repositionWin);
});
}
}
else {
fadePages();
unbindWindow();
$('html,body').stop(true,false).delay(100).animate({
scrollLeft: targetPosLeft,
scrollTop: targetPosTop
}, 1300, repositionWin);
}
}
// WAITING FOR OTHER ANIMATIONS TO COMPLETE SO THAT MOBILE DEVICES AREN'T TOO OVERLOADED
if ($('#mini-site-menu-button-container').is(':visible') === true && $('#main-menu-wrapper').hasClass('show-main-menu') === true) {
setTimeout (pageChange, 300)
}
if ($('.footer-container').is(':visible') === true) {
setTimeout (pageChange, 500)
}
if ($('.form-instructions-wrapper').hasClass('expand-form-instruct') === true) {
setTimeout (pageChange, 500)
}
if ($('.quick-quote-container').hasClass('toggle-open') === true) {
setTimeout (pageChange, 500)
}
if ($('#mini-site-menu-button-container').is(':visible') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
pageChange();
}
if ($('#main-menu-wrapper').hasClass('show-main-menu') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
pageChange();
}
});
Cheers.
I'll update as time goes on, or if I find a better solution to either of the issues. I had zero programming experience actually writing any of my own code (and this isn't all "mine") before this (changing selectors was pretty much the extent of my "skills"), so please excuse any glaring mistakes.
Is there a way to force a high quality THUMBNAIL for YouTube?
My videos are of very high quality and once they start streaming they run fine in 720p, however the thumbnail for the video is of variable quality - sometimes it's high, other times it's really blurry.
Is there a way of forcing a high quality thumbnail? I've found this in the API docs - http://code.google.com/apis/youtube/2.0/reference.html#youtube%5Fdata%5Fapi%5Ftag%5Fmedia:thumbnail but it doesn't detail how to use the media tag.
There is a "maxres" version as well, which is a "full hd" picture in case that the video resolution is high enough.
http://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg
However, if the video resolution isn't high enough, this image doesn't seem to be created. So you might want to have a function that shows a lower quality version in case the "maxres" version doesn't exist.
Check out How do I get a YouTube video thumbnail from the YouTube API? for more info.
Thanks, Johan for answer.
http://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg
If you also want set playback to HQ use Javascript API
https://developers.google.com/youtube/js_api_reference?hl=fi-FI#Playback_quality
var qualityLevels = self.players[iframeID].getAvailableQualityLevels();
/* Set highest quality */
self.players[iframeID].setPlaybackQuality(qualityLevels[0]);
In order for this to work we first need to call:
self.players[iframeID].playVideo();
Then it will triggrer
self.players[iframeID] = new YT.Player(iframeID, {
events: {
'onReady': function(event) {
var iframe = $(event.target.getIframe());
self.players[iframe.attr('id')].loaded = true;
},
'onStateChange': function(event) {
var iframe = $(event.target.getIframe());
var iframeID = iframe.attr('id');
if(event.data == 1) /* playing */
{
var qualityLevels = self.players[iframeID].getAvailableQualityLevels();
if(self.players[iframeID].getPlaybackQuality() != qualityLevels[0])
{
/* Set highest quality */
self.players[iframeID].setPlaybackQuality(qualityLevels[0]);
}
}
}
}
});
Example:
http://img.youtube.com/vi/xjFouf6j81g/hqdefault.jpg
where xjFouf6j81g, videoid
As far as I know, YouTube only offers 4 thumbnails:
http://i.ytimg.com/vi/VIDEO_ID/default.jpg
http://i.ytimg.com/vi/VIDEO_ID/1.jpg
http://i.ytimg.com/vi/VIDEO_ID/2.jpg
http://i.ytimg.com/vi/VIDEO_ID/3.jpg
The thumbnails are generated once after the upload, so you can't alter the size of them in any way.
Edit:
YouTube JS API lets you force the quality of the video, but I don't know if it will affect the video preview. See the docs for more info.
Issue has been reported here:
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=4590
Not a fix or a workaround, but if you want to avoid getting the low-res thumbnail your player should be larger than 430px wide.
So a suggested minimum size for perfect 16:9 aspect would be 432 x 243 pixels and this should get a nice-looking thumbnail.
I'd like to create an product image viewer for an iPhone version of an ecommerce site, and have it behave something like the Photos app.
Ideally, you would be able to slide images to move back and forth in the product image gallery.
This will all be done in mobile Safari.
I did a little experimenting with jqTouch, but its doesn't look like it would support this idea (it has swipe support, but there's no apparent way to link sliding to dragging an image).
Any plugin or implementation ideas? Thanks!
i needed the same, solution was to use cycle and swipe plugins:
"#gallery" is a container with all img tags in it.
$(function() {
$('#gallery').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '',
prev: '',
speed: 300,
nowrap: 0
});
});
$(function() {
$('#gallery').swipe({
swipeLeft: function() { $('#gallery').cycle("next"); },
swipeRight: function() { $('#gallery').cycle("prev") },
threshold: {
x: 15,
y: 99999
},
preventDefaultEvents: false
});
});
it works, but not exactly like Photo library, because images doesnt drag to 50% of width before changing. just like in crmunro's solution, but based on jQuery and plugins.
not sure if you've solved this, but an iWebkit a user has created http://worldofsai.com/photos_flick.html - maybe you could base it on that?
you can check this example. open it in safari on your iPhone))) you can rotate, move and scale images
Qtouch received a significant update in july.
The full source package now include demos for video embedding and swipeable image galleries.
You can find the download of r148 at this url:
http://code.google.com/p/jqextensions/downloads/list
It works very well.