I'm trying to make an image gallery that's navigated by dragging horizontally. The issue I'm currently facing is that there are no boundaries on the left and right for when the elements should stop dragging. I've tried using the 'container' element, but when I do, it stops dragging altogether.
I've tried using 'parent' or the actual div as the container and neither has worked properly. I saw on another message board that using flexbox in this situation makes things more complicated, so I switched to using display: inline-block on images.
This is my current draft: https://jsfiddle.net/samseurynck/ka1e9soj/21/
HTML
<div class="item_block_left">
<div class="item_block_left_gallery_container">
<div class="item_block_left_gallery">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/480/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/200/200/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/400/animals">
</div>
</div>
</div>
SCSS
.item_block_left{
height:200px;
width: 50%;
border: 1px solid pink;
overflow: hidden;
.item_block_left_gallery_container{
position: relative;
height:100%;
width: auto;
.item_block_left_gallery{
height:100%;
display: flex;
cursor: grab;
.item_block_left_gallery_item{
position: relative;
height:100%;
width:auto;
display: inline-block;
}
}
}
}
JQUERY
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
});
The intended result is only being able to scroll/drag horizontally as far as the images go, with no white space on the left or right sides.
Working Example: https://jsfiddle.net/Twisty/4ak6q0zu/44/
JavaScript
$(function() {
var bounds = {
left: $(".item_block_left_gallery").position().left
};
bounds.right = bounds.left - $(".item_block_left_gallery").width() - $(".item_block_left").width() + 10;
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
drag: function(e, ui) {
var l = ui.position.left;
if (l > bounds.left) {
console.log("Hit Left Boundry");
ui.position.left = bounds.left;
}
if (l <= bounds.right) {
console.log("Hit Right Boundry");
ui.position.left = bounds.right;
}
}
});
});
Using drag callback, you can check and set the position of the draggable item. Basing things off the left edge of the drag item, we can check and restrict the movement based on some specific boundaries. It appears that there was a 10px padding or margin on the right hand side, might just be white space, so I just adjusted to correct for this.
See more: http://api.jqueryui.com/draggable/#event-drag
Hope that helps.
I am having trouble resizing a SVG to fit inside a jQuery Mobile page.
This should work on mobile devices and also in a normal browser.
Please see this example.
<div data-role="content">
<object type="image/svg+xml" data="http://simonamby.dk/wdhtest/img/A_0.svg?id=1"></object>
CSS:
#map .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
Bonus: How do I get the fading animation to work in Internet Explorer? Only works in Chrome right now.
You just need to apply the CSS to the object tag:
#map-page object {
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
Updated FIDDLE
Is there any way to auto resize the chart to auto fit the page when printing?
It does not fit the page when I'm printing, check the image, can you see the right side of the page? It's cut. It's a common A4 page.
Btw, I'm using the print button from the chart.
Thanks :)
It looks like a bug, reported: https://github.com/highslide-software/highcharts.com/issues/2088
#page {
size: A4;
margin-top: 9mm;
margin-bottom: 8mm;
margin-left: 2mm;
margin-right: 2mm;
}
#media print {
body {
width: 780px;
overflow: hidden;
}
#container {
max-width: 780px;
}
}
paste this in css file.
I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.
I have a YouTube video I want to put on my web page.
I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.
I have tried this:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
But that does only make the player wider, not higher.
Does I have to resort to JavaScript (or non-standard CSS)?
What i believe to be the best CSS solution.
.auto-resizable-iframe {
max-width: 420px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
</div>
Demo http://jsfiddle.net/46vp592y/
I hit a similar issue with my site when developing some responsive CSS. I wanted any embedded Youtube objects to resize, with aspect, when switching from the desktop CSS to something smaller (I use media queries to re-render content for mobile devices).
The solution I settled on was CSS and mark-up based. Basically, I have three video classes in my CSS thus:
.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}
… and I assign one of these to the Youtube content I include, depending on its original size (you may need more classes, I just picked the most common sizes).
In the media query CSS for smaller devices, these same classes are simply re-stated like so:
.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}
I appreciate this requires some mark-up "up-front" when including videos in your HTML (i.e. adding a class), but if you don't want to go down the Javascript route, this works pretty well -- you could re-state your video classes for as many different sizes as you require. Here's how the Youtube mark-up looks:
<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
<param name="movie" value="YOUTUBE URL"></param>
</object>
Quite easy with some javascript.
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
This jQuery plugin has been making the rounds of late, it's called FitVids and does exactly what you need, resizes videos based on browser size whilst maintaining aspect ratio.
http://fitvidsjs.com/
Modern Solution (2022) - aspect-ratio
With the introduction of the aspect-ratio property in CSS, it's now very simple to scale a YouTube video without resorting to CSS hacks or JS.
Example:
iframe {
aspect-ratio: 16 / 9;
height: auto;
width: 100%;
}
The aspect-ratio property is widely supported across browsers making it suitable for the vast majority of sites: https://caniuse.com/mdn-css_properties_aspect-ratio
These work a treat no JS. Responsive for both single palyer and list player modified from somewhere not sure, no credit sorry. Load your iframe Youtube player inside a container div, the iframe style sets the player specific sizing, 100% will fill the container to any size, src= your-youtube-ID, add own player options
https://jsfiddle.net/jcb01/04sf3byz/
<div style=" position: relative; padding-bottom: 56.25%;">
<!--- load iframe Youtube player inside this div -->
<iframe
style="border: 1; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
src="https://www.youtube-nocookie.com/embed/?
list=PL590L5WQmH8fmto8QIHxA9oU7PLVa3ntk;
&autoplay=0&enablejsapi=1&index=0&
listType=playlist&loop=1&modestbranding=1"
allowfullscreen scrolling="no"
allow="encrypted-media; accelerometer;
gyroscope; picture-in-picture">
</iframe>
</div>
The trick to make a youtube video autoresize is to make the iframe width 100% and put it in a div with a "padding-bottom" equal to the aspect ratio in percentage. E.g.
But the problem is - you would have a lot of pages with embedded YoutTube videos already. Here's a jquery plugin that will scan all videos on the page and make them resizable automatically by changing the iframe code to be as above. That means you don't have to change any code. Include the javascript and all your YouTube videos become autoresizing.
https://skipser.googlecode.com/files/youtube-autoresizer.js
Old question, but I think the #media CSS 3 tags would be helpful in this instance.
Here is my solution to a similar problem.
The CSS:
#media only screen and (min-width: 769px) {
.yVid {
width: 640px;
height: 360px;
margin: 0 auto;
}
}
#media only screen and (max-width: 768px) {
.yVid {
width: 560px;
height: 315px;
margin: 0 auto;
}
}
The HTML:
<div class="yVid">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
This basically adds a breakpoint at 768px where the video resizes itself. You could also add breakpoints at 992 and 1280 for an even more repsonsive video size. (numbers based on Bootstrap standard sizes).
This is what worked for me. This is slightly modified code from the YouTube Embed Code Generator.
The CSS:
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The HTML:
<div class="video-container">
<iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>
You can use style="max-width: %87; max-height: %87;"
In addition to Darwin and Todd the following solution will
avoid the bottom margin
maximize the width for large screens
minimize the height in mobile view
keep a fixed size for #media none compatible browsers
The HTML:
<div class="video_player">
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
</div>
</div>
</div>
The CSS:
.videoplayer{
text-align: center;
vertical-align: middle;
background-color:#000000;
margin: 0;
padding: 0;
width: 100%;
height:420px;
overflow:hidden;
top: 0;
bottom: 0;
}
.auto-resizable-iframe {
width:100%;
max-width:100%;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom:420px;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
//full screen
#media (min-width:0px) {
.videoplayer{
height:100%;
}
.auto-resizable-iframe > div {
padding-bottom:100%;
}
}
//mobile/pad view
#media (min-width:600px) {
.videoplayer{
height:420px;
}
.auto-resizable-iframe > div {
padding-bottom:420px;
}
}
There are a few suggestions on the list of answers to use js to modify the structure of generated iframe. I think there is a risk with that because when you wrap the iframe inside other elements it's possible that the YouTube API will lose 'connection' with the iframe (especially if you pass the element in as a node instead of using specific id like me). It's rather to get around it actually, use javascript to modify the content before you actually trigger the youtube player.
a snippet from my code:
/**
* Given the player container, we will generate a new structure like this
*
* <div class="this-is-the-container">
* <div class="video-player">
* <div class="auto-resizable-iframe">
* <div>
* <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
* </div>
* </div>
* </div>
* </div>
*
* #return {Node} the real player node deep inside
*/
YouTube.renderResizable = function (playerContainer) {
// clean up the content of player container
playerContainer.textContent = '';
var playerDiv = document.createElement('div');
playerDiv.setAttribute('class', 'video-player');
playerContainer.appendChild(playerDiv);
// add the auto-resizable-frame-div
var resizeableDiv = document.createElement('div');
resizeableDiv.setAttribute('class', 'auto-resizable-iframe');
playerDiv.appendChild(resizeableDiv);
// create the empty div
var div = document.createElement('div');
resizeableDiv.appendChild(div);
// create the real player
var player = document.createElement('div');
div.appendChild(player);
return player;
};
Just set iframe height and width with CSS vw metric. It uses device width as parameter:
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
You could use two classes that would scale the size of the video based on the size of the wrapping div. Consider this example:
<div class="content-wrapper">
<div class="iframe-wrapper res-16by9">
<iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now look at the css.
.content-wrapper{
max-width: 800px;
margin: 0 auto;
background-color: #fff;
}
.iframe-wrapper{
width: 100%;
position: relative;
}
.res-4by3{
padding-bottom: 75%;
}
.res-16by9{
padding-bottom: 56.25%;
}
.iframe-wrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note that you will have to wrap the iframe in a div who's width is set to 100% and position is set to relative. You have to also add a bottom-padding to iframe wrapper. This padding will define the height of a video. I recommend to create two classes that will represent the image ratio.
It is quite easy to calculate the right bottom-padding for wrappers that represent certain resolution. For example for res 4 by 3 and 16 by 9 would have bottom-padding equal to:
[4/3 res]
100 / 4 * 3 = 75%;
[16/9 res]
100 / 16 * 9 = 56.25%
Then position the iframe as absolute and push it to the top left corner of the wraping div. Also meke sure to set iframe width and height to 100%. You are done.
Add the class that fits the right resolution for you. It will scale the image width and height respectively keeping the right proportions in place.
The example above works for any iframe. Thats mean you can also use it for google maps iframe.
Add JavaScript code to give each youtube iFrame a class:
$('iframe[src*="youtube"]').addClass('youtube')
Then in the Media Queries use the you tube class to set a different size.
.youtube {
/* Do stuff here */
}
Easier and optimized to CMS than the manual way.