I'm working on a JQuery Mobile app. I need to enlarge the font used for the title text. Whenever I enlarge the text size, the height of the ui-header bar grows. I do not want it to grow. Instead, I want the ui-header to stay the same size of the default ui-header. I just want to enlarge the text size. Currently, I have the following:
.t1 { color: blue; font-size:24pt; font-weight:normal; }
.t2 { color: white; font-size:24pt; font-weight:normal; }
<div data-role="header" data-position="fixed">
Back
<h1><span class="t1">My</span><span class="t2">App</span></h1>
</div>
How do I change the font size without making the header grow?
You also have to modify .ui-header .ui-title rule changing top and bottom margin values. For example:
.ui-header .ui-title {
margin: 0 30% 0;
}
http://jsfiddle.net/Pwqtm/1/
Related
I can only find questions where people have the opposite problem.
I want my fixed content to go above the iOS keyboard.
Image of the problem:
I want iOS to behave like Android.
Is there a simple way to achieve this?
Parent element css:
.parent{
position:fixed;
top: 0;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
Button css:
.button{
position:fixed;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 5rem;
}
We can use VisualViewport to calculate keyboard height. So we can set fixed-content pos correct.
Small demo: https://whatwg6.github.io/pos-above-keyboard/index.html
Code snippet:
const button = document.getElementById("button");
const input = document.getElementById("input");
const height = window.visualViewport.height;
const viewport = window.visualViewport;
window.addEventListener("scroll", () => input.blur());
window.visualViewport.addEventListener("resize", resizeHandler);
function resizeHandler() {
if (!/iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
height = viewport.height;
}
button.style.bottom = `${height - viewport.height + 10}px`;
}
function blurHandler() {
button.style.bottom = "10px";
}
html,
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
width: 100%;
bottom: 10px;
background-color: rebeccapurple;
line-height: 40px;
text-align: center;
}
<input type="text" inputmode="decimal" value="0.99" id="input" onblur="blurHandler()" />
<div id="button">Button</div>
Problems: https://developers.google.com/web/updates/2017/09/visual-viewport-api#the_event_rate_is_slow
Why not innerHeight?: Iphone safari not resizing viewport on keyboard open
Mobile Safari does not support position: fixed when an input focused and virtual keyboard displayed.
To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events.
The trick is to put the tapped input control to the bottom of screen before it activates focus. In that case iOS Safari always scrolls viewport predictably and window.innerHeight becomes exactly visible height.
Open https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html in Mobile Safari to see how it works.
Please avoid forms where you have several focusable elements because more tricks to fix position will be necessary, those were added just for demonstration purposes.
Note that for rotation and landscape mode, additional tricks are necessary. I'm working on a framework called Tuff.js which will provide a full-screen container helping mobile web developers to build web applications much faster. I've spend almost a year on the research.
By the way, to prevent scrolling of the whole window when virtual keyboard is active, you can use this super simple trick
var hack = document.getElementById('scroll-hack');
function addScrollPixel() {
if (hack.scrollTop === 0) {
// element is at the top of its scroll position, so scroll 1 pixel down
hack.scrollTop = 1;
}
if (hack.scrollHeight - hack.scrollTop === hack.clientHeight) {
// element is at the bottom of its scroll position, so scroll 1 pixel up
hack.scrollTop -= 1;
}
}
if (window.addEventListener) {
// Avoid just launching a function on every scroll event as it could affect performance.
// You should add a "debounce" to limit how many times the function is fired
hack.addEventListener('scroll', addScrollPixel, true);
} else if (window.attachEvent) {
hack.attachEvent('scroll', addScrollPixel);
}
body {
margin: 0 auto;
padding: 10px;
max-width: 800px;
}
h1>small {
font-size: 50%;
}
.container {
display: flex;
align-items: top;
justify-content: space-between;
}
.container>div {
border: #000 1px solid;
height: 200px;
overflow: auto;
width: 48%;
-webkit-overflow-scrolling: touch;
}
<h1>iOS Scroll Hack</h1>
<p>Elements with overflow:scroll have a slightly irritating behaviour on iOS, where when the contents of the element are scrolled to the top or bottom and another scroll is attempted, the browser window is scrolled instead. I hacked up a fix using minimal,
native JavaScript.</p>
<p>Both lists have standard scrolling CSS applied (<code>overflow: auto; -webkit-overflow-scrolling: touch;</code>), but the list on the right has the hack applied. You'll notice you can't trigger the browser to scroll whilst attempting to scroll the list
on the right.</p>
<p>The only very slight drawback to this is the slight "jump" that occurs when at the top or bottom of the list in the hack.</p>
<div class='container'>
<div id='scroll-orig'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
<div id='scroll-hack'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>
Got this answer from here
This is a well known problem, and unfortunately one must resort to hacky tricks like the accepted answer for now. The W3C is however in the process of specifying The VirtualKeyboard API.
Note: At the time of writing, this answer is not yet ready for prime time. It's important to understand that this specification must also be forward looking, to adapt to the myriad possible virtual keyboards of the future. It may be a few years before reliable cross platform browser support begins to appear and this answer becomes the correct one.
I found an interesting solution to this problem.
The solution is to create a hidden input and focus on it on the touchstart event.
<input id="backinput" style="position:absolute;top:0;opacity:0;pointer-events: none;">
<input id="input" style="position:absolute;bottom:0;">
Using JQuery:
$('#backinput').on('focus',function(e)
{
e.preventDefault();
e.stopPropagation();
const input = document.getElementById('input');
input.focus({ preventScroll: true });
})
$('#input').on("touchstart", function (event) {
if(!$(this).is(":focus"))
{
event.stopPropagation();
event.preventDefault();
$('#backinput').focus();
}
})
Finally, resize the viewport so that the bottom input moves above the keyboard (if needed)
window.visualViewport.addEventListener("resize", (event) => {
$('body').height(parseInt(visualViewport.height));
});
For me it works perfect. I am building a messenger.
I have a footer toolbar on my ionic2 app that has a center-aligned text, but the text only seems to take the center 50% or so of the width of the toolbar and then cuts off with an ellipses (see image). The width seems to correspond to the same width of the text allowed for the header toolbar (which I've grayed out in the image). Is there a way to override this and make the text take up the full space? So far I've only noticed this issue on an iPhone 6, although I haven't tried that many devices.
<ion-content class="no-scroll">
<ion-tabs [selectedIndex]="mySelectedIndex">
tabs omitted..
</ion-tabs>
</ion-content>
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center>
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
You can apply below SCSS change only for iOS platform.
.scss
.ios,
{
your-page {
.padding-0 {
padding-left: 0;
padding-right: 0;
}
}
}
.html
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center class="padding-0">
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
I want to make an element draggable in a fixed area that has its overflow property set to scroll.
If I use containment property in the draggable element, then the dragging downwards or to the right becomes flickery.
What I mean by this is that when the edge of dragged element hits the edge of the container, it does not scroll until the cursor hits the edge as well.
I can prevent this by not setting the containment property on the draggable setup. However when I drag to the left or top, the dragged element becomes invisible by being dragged to some negative x/y position.
How can I prevent the flicker when using containment property?
Plunkr -> http://plnkr.co/edit/pmGO6lswaSJtwMSC1bXe?p=preview
#container {
border:1px solid red;
min-height:3in;
overflow:scroll;
margin-left:120px;
}
.widget {
background: beige;
border:1px solid black;
height: 100px; width:100px;
}
<div id="container">
<div class="widget"></div>
</div>
$(function(){
$('.widget').draggable({
scroll:true,
containment: '#container' // comment out to see the smoothness on bottom/right edge drags
});
})
Fixed it with this
$(function(){
$('.widget').draggable({
scroll:true,
drag:function(evt, obj) {
if (obj.position.top < 0) {
obj.position.top = 0;
}
if (obj.position.left < 0) {
obj.position.left = 0;
}
}
});
})
Inspired by answer to this question -> jQuery UI draggable, stop drag but let dragging the other way
I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?
You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.
If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.
http://getbootstrap.com/components/#responsive-embed
There's some example code below.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Refined Javascript only solution for YouTube and Vimeo using jQuery.
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
Simple to use with only embed:
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
Or with responsive style framework like Bootstrap.
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Relies on width and height of iframe to preserve aspect ratio
Can use aspect ratio for width and height (width="16" height="9")
Waits until document is ready before resizing
Uses jQuery substring *= selector instead of start of string ^=
Gets reference width from video iframe parent instead of predefined element
Javascript solution
No CSS
No wrapper needed
Thanks to #Dampas for starting point.
https://stackoverflow.com/a/33354009/1011746
I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015. The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos. Black bands across top and bottom.
I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to 56.45%. Seems to look good.
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
#magi182's solution is solid, but it lacks the ability to set a maximum width. I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated.
My solution with two wrappers works like a charm for me:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
I also set the padding-bottom in the inner wrapper to 50 %, because with #magi182's 56 %, a black bar on top and bottom appeared.
Modern simple css solution
The new aspect-ratio is the modern solution to this problem.
aspect-ratio: 16 / 9;
That's all you need to make a div, image, iframe size automatically. Samples.
It's got good support, but is not yet in Safari (will be for upcoming iOS15) - so for now you'll still need to use a fallback. You can achieve that with the #supports feature
.element
{
aspect-ratio: 16 / 9;
#supports not (aspect-ratio: 16 / 9)
{
// take your pick from the other solutions on this page
}
}
Assuming your development browser does support this property be sure to test without it by commenting out both aspect-ratio and #supports.
This is old thread, but I have find new answer on https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
The problem with previous solution is that you need to have special div around video code, which is not suitable for most uses. So here is JavaScript solution without special div.
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
If you are using Bootstrap 5.0, you can use .ratio
https://getbootstrap.com/docs/5.0/helpers/ratio/
Example
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
With credits to previous answer https://stackoverflow.com/a/36549068/7149454
Boostrap compatible, adust your container width (300px in this example) and you're good to go:
<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
Okay, looks like big solutions.
Why not to add width: 100%; directly in your iframe. ;)
So your code would looks something like <iframe style="width: 100%;" ...></iframe>
Try this it'll work as it worked in my case.
Enjoy! :)
I make this with simple css as follows
HTML CODE
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS CODE
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}
Is there a way to modify the Twitter 'follow' button to display the number of followers in a bubble but hide the word "followers"? I basically want my 'follow' button to look the same as the 'tweet' button.
The current code looks like this:
<a href="https://twitter.com/User" class="twitter-follow-button" data-show-count="true"
data-show-screen-name="false" data-dnt="true">Follow #User</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I had this same issue and solved it by basically hiding the word 'followers' and creating a fake right edge to the bubble, if that makes sense. So, you have to wrap the button in its own div, then hide the overflow of that div and set the width to the exact point where the word disappears and the height precisely to the height of the button you are using. Here's a code example:
#titter-div {
border-radius: 4px; /* to mimic the curved edges of the count box */
border-right: 1px solid #AAAAAA; /* this is the width and color of the count box border */
height: 20px; /* this height works for the medium button */
width: 88px; /* precise width to hide the word */
overflow: hidden; /* actually hides the word */
}
This worked for me to create exactly what you are looking for. Hope this helps.
To display the number of followers in a bubble but hide the word "followers", here is the code I use with an iframe :
<iframe
src="//platform.twitter.com/widgets/follow_button.html?screen_name=Vacance_Luberon&show_screen_name=false"
style="width: 88px; height: 20px;"
allowtransparency="true"
frameborder="0"
scrolling="no">
</iframe>