I'm working on a project that gives people a new browser homepage to be displayed when they open their browser window or new tab. This page will have icons/tiles to popular websites and at some point their own customised websites.
What I want to do is to have tiles that look like that of Windows 8 and have the flip and zoom to full screen effect that they do in the real Windows 8 start screen upon clicking on it, where it will show the icon and site title while the page loads.
I'm not looking to load the site into the homepage, as it will direct them to the site being clicked on, but until they get to the site, it will show the icon and site title on the screen.
Any suggestions as to how this can be achieved along with some examples would be awesome.
Thank you in advance for your time, and I look forward to your response.
There's a pseudo-class if you want to have fullscreen specific styles.
https://developer.mozilla.org/es/docs/Web/CSS/:fullscreen
I think most of your problems will be: selecting a grid system or thechnique to layout those tiles. The zoom and flip effects should be done with the transform property.
Checkout what I've found: http://metroui.org.ua/tiles.html (A style guide with win8 components)
Here's another example by the amazing Sara Soueidan: sarasoueidan . com/demos/windows8-animations (couldn't paste the link because of my low reputation points)
If you need JS or you want to just go with cross-browsers compatibilities, check out this lib. It's just great: GSAP
Pro Tip: this is going to be your friend: backface-visibility: hidden;
Related
i have been having problems in wix mobile website version I have a javascript quoter embedded on the desktop version now how do i make that fit in the mobile dimension? any tips on getting that done www.yourfamiliesfirst.com/tq is where it is i have resized the first page of the quoter where you put in your information and what not. i had to scale the image and push it out of the box to fit the screen, problem is when second page after that loads its not proportional to the mobile version and it looks like the page being displayed is greater than the mobile screen. Please help me out as i have no coding skills to be able to code my way out of it but I'm open to suggestions. Thank you for whoever takes the time of reading this and give me a suggestion much love god bless.
Hey #exodus seems like you're running into responsive site issues. Normally you could resolve it by developing with mobile-first in mind by setting #media responsive CSS.
I'm not too familiar with Wix, however I did find this Wix documentation here which guides you through having a mobile-friendly view and layout.
Background of the problem - I am creating a simple HTML landing page using create react app node package manager.
I started having problem when I tried to make the website mobile friendly.
Specific problem -
When I check the create react app public folder, I do not see anything wrong with the viewport meta tag and it is as is should be.Here is another screenshot.
When I open the website on the mobile its zoomed in and the background color is out of proportion. I am guessing it is happening because of viewport meta data not getting rendered correctly.
Anyone with a react and CSS skill combined will be able to figure out what is making this happen. I am attaching a gif of the problem below.
link two
I need help with fixing the viewport meta data for a landing page created using Reacts scaffolded 'Create react application'.
I am trying to make the site mobile friendly however am facing the following issue. Kindly load the following link on a mobile device or mobile simulation mode in the browser.
http://sagarmunjal.github.io/learnreactjs
Also, when the page resizes. I would want to learn how to make the text resize/ adjust according to the window being resized.
The code is available at master branch. https://github.com/sagarmunjal/learnreactjs.git
Any solutions are highly appreciated.
Your .Hero-h1 has a font size of 3.5em which is making the title stretch outside of the page making it bigger than it should be. This might be a problem with more of your layout.
I suggest you look into media queries if you want to make a responsive website. Here is a good article on the subject: https://css-tricks.com/css-media-queries/
If you look at the Google Docs landing page, as you scroll down, you can see that there are animations such as this computer's screen is animated:
I would like to do something similar. There are other solutions such as an animated SVG, a GIF or a video however I would like to understand how this solution is done.
I'm aware I could use Javascript to create something like this, however surely there must be a library I haven't come across which would automate this process?
Thanks.
In the particular example you bring up - I believe they are using a handful of .png images inside of carefully sized divs which are being powered by pure CSS animations - I concluded this by just looking through the inspect element tool which comes with Google Chrome's developer tools. To see for yourself, just right click on the page and select 'inspect element'.
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!