standard feedback button in many sites? - javascript

I noticed that many website have a nice 'feedback' button in their page.
It usually appear on the left side and it is displayed vertically 'f e e d b a c k' .
see http://www.protectedplanet.net/ for an example.
I would like to know (Because I could not figure that out) if this is achieved just by a css transformation , javascript
(and if so how to do it) or if it just a gif/jpg ?
Thanks
p.s.
Rather than guessing can people explain how exactly it works.
For example if people says it's an image where is it ?

It usually is a background image (for compatibility with older browsers). Some text is also present in the markup, but positioned outside the view-port.
The site you supplied as example uses an image and the feedback functionality is a widget:
a#uservoice-feedback-tab {
background-color: #FF6600;
background-image: url("http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png");
}

It's an image, because only the newest browsers support CSS 2D transforms. Although in theory, you could use 2D transforms and add support for IE8- by using the proprietary DXImage filters. But then, you couldn't get support for other older browsers without equivalent support (Safari 2, Firefox 2.0, Opera 9, etc.).

Related

OpenLayers - Detect Switch between full screen, regular screen

I have been searching but have not come to an answer.
Is there a way to detect the event which OpenLayers enters FullScreen/exits FullScreen? In short, i need to toggle classes of some divs. I tried adding events to the buttons, but then it doesn't work if they press escape instead.
Thanks.
The comment suggesting using 'screenfull' is a good option for now. screenfull is just a wrapper that smooths out the cross browser implementation issues of the fairly new 'Fullscreen API'. Until the browsers have fully implemented the standards for these events, that little wrapper is a good way forward.
If you are just wanting to style things differently, there is a CSS pseudo selector for that - :fullscreen. No JavaScript required! You can read the documentation for it on MDN and there is also a great example. Take special note of the need for the vendor prefixes and the fact that some browsers say full-screen rather than the standard fullscreen. The various mix of selectors you'll need seem to currently be:
:-moz-full-screen - Gecko based browsers
:-ms-fullscreen - IE/Edge
:-webkit-full-screen - WebKit based browsers
:fullscreen - Standards compliant browsers

iOS-like semi-opaque modal which blurs the background behind it

I'd like to revisit this similar question from 2012. I wonder if anything has changed from the time that particular question was posted?
Is it possible to create a modal which doesn't require a canvas rendering of the page, which is then displayed and cropped to the desired size?
If so, is there a way to display this cross-browser?
I see that #Michael Wasser mentioned "-webkit-filter" in a previous question. That's how you would do it these days without relying on Javascript.
img {
-webkit-filter: blur(10px);
}
See this HTML5Rocks article for more on this.
How supported is it?
caniuse.com says that global support is at 43.67% at the moment. All the recent Chrome, WebKit (Safari), and Opera (now that it switched to Blink) should have them. Not sure what the plans are for Mozilla and Microsoft.
In Firefox, you can probably use SVG filters to recreate the blur.

change height of one side of div

I am trying to make an animation of the effect of an opening door. Is there any known algortihms for doing this? If not, I need to alter a rectangular div making the right side longer than the left side, and the top and bottom lines connecting the right to left side of the div would be diagonal, and the contents of the div, are stretched proportionally. Is there a way to change the height properties like so, for a div?
You can do it using CSS Transform however it won't support older browsers.
Here is a good tutorial for that: http://24ways.org/2010/intro-to-css-3d-transforms/
Your best bet is making an animation using several images and changing them.
You can use the css "transform" property, if you don't need to support older browsers.
Have a look at the w3c specification | mozilla dev, and also at this tutorials: css 3d tutorial series.
An alternative solution for older browsers would be a canvas, which is more supported (still not in all browsers).
If you need to support almost all browsers, you could use flash, but I really not recommend that.

use custom border

is there any way to use custom border by css or can make by JavaScript or jquery.
i want to use a different style of border.
like we use
border-style:dashed;
with CSS3 you can use border-image, which is what you are looking for. for more information click here - but note, that this is only supported by very few good browsers (firefox, safari - maybe opera - but no IE (until some day IE9 comes...)).
EDIT:
if you could give some more information how the border should look like, we could try to do some cross-browser-solution - but the best way is to use border-image... and some not-too-ugly-standard-border-fallback for that dumb piece of software called "IE".
CSS3 can do this, but IE won't support it until IE9.
Check out this link: CSS3 border images.

CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...
For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...
So far, I've only managed to get this working with WebKit browsers.
Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%'
style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />
Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").
Another way I hoped this could be achieved was by using XUL in HTML.
I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...
Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.
Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).
Try this jQuery solution: http://jsbin.com/uhuto
Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.
Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

Categories