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>
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.
please check this link. All div are closed properly and could not understand whats wrong with footer width where as home page is correct.
thanks a lot. u saved my time
It's because you have class
#footer
{
width:640px;
clear:both;
color:#999999;
text-align:center;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}
where you set footer width to 640px (two times). For ex. remove width declaration.
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/
I've been trying to test my jquery mobile app on multiple devices. I currently have a panel that is opened via swipe or clicking on a 'menu' button.
However, on wide screens, the app just looks funky. WAY too wide. I understand this is meant for mobile, but, why not format it for ipads/surface/androids as well?
To do this, I'd like to shorten the width by requiring the panel to be open at all times when the width exceeds a specific value.
I've dug through the documentation, and the closest thing I found was:
class="ui-responsive-panel" from the following link: http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php
After adding it to my page header, I noticed that I can't 'swipe' the menu away when the window is wide. When I shrink the window (either on a pc browser, or by rotating the device), it can be swiped.
Is anyone familiar with this, and willing to shed some light?
I'm facing the same problem. I want the panel to stay open when the user turns the device in landscape mode (tablets) or if the window is wider than a specific width at the very beginning.
Unfortunately I did not find any solutions and the jQuery Mobilele example for responsive panels in this case.
So I found a way by using some javascript but I'm not happy with this solutions since a pure CSS solution with media queries would be nicer.
However, here is my "workaround" solution.
<script type="text/javascript">
window.onresize = function (event) {
if (window.innerWidth > 800) {
window.setTimeout(openPanel, 1);
}
if (window.innerWidth < 800) {
window.setTimeout(closePanel, 1);
}
};
function closePanel() {
$("#mypanel").panel("close");
}
function openPanel() {
$("#mypanel").panel("open");
}
$( "#mypanel" ).on( "panelcreate", function( event, ui ) {
if (window.innerWidth > 800) {
openPanel();
}
if (window.innerWidth < 800) {
closePanel();
}
});
</script>
So if the window inner width is higher than 800, the panel opens; if it is lower than 800 it closes. Furthermore the window.onresize function is required to provide the same functionality in case the user turns the device from portrait mode to landscape mode.
Hope it helped. But I'm still looking for a better solution ;)
I found a css-only solution for that issue that is much simpler.
In the media query for your responsive panel #media (min-width:55em){...} add/overwrite the following css classes:
.ui-panel-closed { width: 17em; }
.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{ margin-left:17em; }
The second class might be different to yours depending on the swatch you are using; in this case it is "C". However, just take the content wrap class that wraps all your header,content, footer area.
In my example I used a panel with data-display="reveal" data-position="left" If you want it appearing on the right hand side just change margin-left:17em to margin-right:17em
If you want the panel to behave like "overlay", just forget about the second class i posted...
Best regards
I am facing the problem right now and I found the solution of mJay really useful. However it would be great to use media queries instead, something like this perhaps:
#media (min-width:35em){
.ui-panel{
width:30em;
}
.ui-panel-close { width:30em; }
}
Below is my "CSS" solution. What you need to know: mnuMenu is the id of the panel that I want to always have visible on the left side of the screen and lnkMenu is the id of the a tag for the button which normally shows the panel on smaller screen widths.
#media all and (min-width: 900px)
{
#mnuMenu
{
visibility: visible;
position: fixed;
left: 0;
float: left;
width: 300px;
height: 100vh;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#lnkMenu
{
display: none;
}
.ui-content
{
margin-left: 325px;
}
}
I write my application on HTML5/CSS3/JavaScript. For my button I create style (all work fine in browser), but when I start my application on iPad my active effect override standart iOS click effect.
How I can override this standart effect?
My style :
<style type="text/css">
.button {
display: inline-block;
width: 150px;
height: 50px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:ACTIVE {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015' );
}
My Button:
The answer to your problem I believe is very simple.
Add this following CSS code to your button or body tag (to affect the entire document).
body { -webkit-appearance: none; }
This will remove default styles for buttons that iOS places onto certain UI elements.
Hope that helps.
I had the same problem use the button tag and it seems to override.
<button class="button">Link</button>