We want to resize the "like" button as we have complaints from Users it's too small on smartphones. We are using HTML5 code. We cannot use iframe as we need to determine user has clicked on "like" button for out social wifi application.
As I mentioned we have constant complaints that the "like" button is too small on smartphones . . . these are users not us saying this.
You can use CSS3 transform to scale the Facebook button:
FIDDLE
#fblike {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
}
Note: you can use a float for scale, e.g: 1.5 = 150% of the original size.
Related
I wrote a script that takes rows of lat long data, image links, & other descriptors and plots those points with Folium. The images and other information are contained in popups, and the images load once the popup is opened. When I open the map files in Firefox, my images are scaled down appropriately:
Yet when other people open the maps in Chrome or Safari, the images are hyper-zoomed to the top left even though the browser receives the entire image properly:
I have tried injecting styling into the map html after creation, but it scales the broken image instead of properly displaying it. In the browser inspector, I have seen mention of a "user agent stylesheet", but my search for a way to control that has not been successful. My questions:
What is causing this loading behavior in non-Gecko browsers?
How can I control how the content of these Iframes renders across browsers?
The map in question
The css that fixes this:
<style>
#img-frame {
transform: scale(1);
-ms-zoom: 1.0;
-moz-transform: scale();
-moz-transform-origin: 0 0;
-o-transform: scale(1);
-o-transform-origin: 0 0;
-webkit-transform: scale(1);
-webkit-transform-origin: 0 0;
}
</style>
I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
It possible to change the ion-range orientation using ionic2/3?
I'm trying to change the ion-range orientation using the ionic2/3.
I changed the ion-range using the css transform:
<ion-label>Range</ion-label>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
ion-range {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
Visually that is work but if i need to change the ion-range value still I need to slide horizontally.
So how to solve it?
Thanks.
There is no solution yet from Ionic team regarding this. This issue was discussed on ionic team github and it is in their feature request backlog now but no commitment yet to implement.
So I am trying to rotate some text for use on a panel (slider) on a SharePoint web page.
.rot-text{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
not supported by the SPS2010 schema? is there a way to get the same thing with older method?
You could create a custom CSS file and add it as a reference to the master page used to format your site.
Erik Swenson has a good overview of the parts of the CSS structure here:
SharePoint 2010 CSS references in Master Pages
Finally here is a page from Microsoft on how to use the Master Page to customize your site:
Customize a master page to brand your site
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here