Hover effects using CSS3 touch events

Use the :active pseudo-class in your css, then add ontouchstart=”” and onmouseover=”” to the body tag. The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices) <style> .boxbutton:active{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); -webkit-box-shadow:0px 0px 20px #FFF; -moz-box-shadow:0px … Read more

Swiper slides – showing end/start of previous/next slides like Airbnb Slider?

Just set the slidesPerView option using decimal places, eg: var swiper = new Swiper(‘.swiper-container’, { … // this shows a bit of the previous/next slides slidesPerView: 1.1, centeredSlides: true, spaceBetween: 10, … }); As long as you don’t set the slideshow to loop then the first and last slides will have extra space instead of … Read more

Difference between a progressive web app and a hybrid mobile app

A hybrid mobile app usually refers to an application built using a combination of web and native technology that is distributed via a native app store. These apps go through Apple, Google, Microsoft, etc’s app store review process. A Progressive Web App is an application built using web technology that runs in the browser and … Read more

Div show/hide media query

I’m not sure, what you mean as the ‘mobile width’. But in each case, the CSS @media can be used for hiding elements in the screen width basis. See some example: <div id=”my-content”></div> …and: @media screen and (min-width: 0px) and (max-width: 400px) { #my-content { display: block; } /* show it on small screens */ … Read more

How does Codename One work?

Codename One has an optional SaaS approach so this might (and probably will) change in the future to accommodate improved architectures. Notice that Codename One also provides an option to build offline which means corporations that have policies forbidding such cloud architectures can still use Codename One with some additional overhead/complexity. It also means you … Read more

Sencha Touch Vs JQTouch

Sencha touch is a little more complicated for those used to web design to use, in that it is almost a purely programmatic model (you don’t design pages in html, you programmatically add elements to a page). It does, however, have a much richer widget model and is a lot more fleshed out than jQTouch … Read more

What is the User Agent string name for Microsoft Edge?

Microsoft Edge UA string: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136 I detail why in this blog post. Neowin recently reported that Microsoft’s new browser for Windows 10, Spartan, uses the Chrome UA string, “Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0″. That is done on purpose. … Read more