I have to do a web page destined for iPhone and iPod-touch that needs to incorporate the Coverflow style of apple in a page to display a list of videos.
I've heard something about gizmos that could help, but I can't find anything relevant or that could work properly with the iPhone/iPod-Touch navigation.
Anyone knows something that could help me getting started?
Thanks
-Stephanie
Try ContentFlow:
http://www.jacksasylum.eu/ContentFlow/
Here is an example that is working on my iPhone :
http://www.majes.fr/
This is the best one which i found till now ;) Coverflow
This is a cross-browser implementation of Cover Flow: http://luwes.co/labs/js-cover-flow/
The primary mode works in HTML5 (JavaScript/CSS) and it has a fallback for older browsers in flash. It supports mobile, you can flip through the covers with a simple swipe gesture.
Tested on: Safari, Chrome, Firefox, Opera, IE8+, iPad, iPhone
This might help you: http://paulbakaus.com/2008/05/31/coverflow-anyone/
Though it doesn't seem that there is any official way to do it because CSS transforms only all a 2d matrix, so you can't get a trapezium shape.
you can find tons of coverflow samples in google
but all the samples that i found are too complex(a lot of files or hard to implement) and they don't give what i was looking
so i decide to create a coverflow
1.- less files
2.- easy to implement
3.- Works with Webkit (Safari, Safari Mobile and Chrome)
the code that i'm going to show is just to give you a clue
of what can you do with your project
this is a very simple sample that only shows you the essential
it's not a final work
this coverflow works with a input range (slider)
and thats it
When you get the idea of how coverflow works
you will be able to add more features clicks, touches, flip cover....
Finally here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CoverFlow</title>
<style>
html { height: 100%; }
body { background-image: -webkit-radial-gradient(gray 0%, black 100%); }
#coverflow {
width: 800px;
height: 400px;
overflow: hidden;
margin: 100px auto;
-webkit-perspective: 500;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
}
#container {
height: 100%;
width: 100%;
margin-left: 350px;
background-color: transparent;
-webkit-transition: all 400ms ease-in-out;
}
.holder {
float: left;
position: absolute;
margin-top: 100px;
margin-left: 20px;
-webkit-transition: all 300ms ease-in-out;
-webkit-box-reflect: below 4px
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(1, rgba(255, 255, 255, .3))
);
}
.slider {
position: absolute;
width: 200px;
height: 30px;
margin: 0 0 0 430px;
-webkit-appearance: none !important;
border-radius: 6px;
border: 1px solid white;
background: #999;
opacity: .5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 50px;
height: 18px;
border-radius: 8px;
border: 2px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999), color-stop(.5, #000) );
}
#log { color: white; font-size: 30pt; }
</style>
</head>
<body onload="flow()">
<div id="coverflow">
<div id="container">
<div class="holder" id="1"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="2"><img src="../img/2.jpg" width="200"></div>
<div class="holder" id="3"><img src="../img/3.jpg" width="200"></div>
<div class="holder" id="4"><img src="../img/4.jpg" width="200"></div>
<div class="holder" id="5"><img src="../img/5.jpg" width="200"></div>
<div class="holder" id="6"><img src="../img/6.jpg" width="200"></div>
<div class="holder" id="7"><img src="../img/7.jpg" width="200"></div>
<div class="holder" id="8"><img src="../img/8.jpg" width="200"></div>
<div class="holder" id="9"><img src="../img/9.jpg" width="200"></div>
<div class="holder" id="10"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="11"><img src="../img/2.jpg" width="200"></div>
</div>
</div>
<input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();">
<a id="log">value</a>
<script>
function flow() {
var space = 2;
var coverCount = 11;
var current = slider.value;
var cover = document.getElementById(current + "");
var position = [0, 230, 180, 130, 80, 30, -20, -70, -120, -170, -220, -270];
for (var i = current; i < (coverCount +1); i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i+space)*50)+"px,0,-10px) rotateY(-65deg)";
document.getElementById(i + "").style.zIndex = -i + "";
}
for (var i = 1; i < current; i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i-space)*50)+"px,0,-10px) rotateY(65deg)";
document.getElementById(i + "").style.zIndex = i + "";
}
cover.style.webkitTransform = "translate3d("+(slider.value*50)+"px,0,100px) rotateY(0deg)";
cover.style.zIndex = current + "";
document.getElementById("container").style.marginLeft = position[current] + "px";
document.getElementById("log").innerHTML = slider.value + "";
}
</script>
</body>
</html>
i know you can find a lot of better coverflows this is just to share
Just remember to replace the path of the images and/or names
Hope it helps
Good Luck
I mainly stick with native App development, so I don't know if there is an existing cover flow implementation, but using Dashcode Parts you can add some more complex UI elements.
You could try xFlow! http://xflow.pwhitrow.com
i just made this
http://coulisse.luvdasun.com/
not sure if it works on iphone / ipod, i still have to test that
gr.
You can try this, I have developed specifically for iOS devices. Has touch gestures enabled.
http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
Related
Consider the following example: (live demo)
HTML:
<div>div</div>
<iframe></iframe>
CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Result:
Why the iframe is not centrally aligned like the div? How could I centrally align it?
Add display:block; to your iframe css.
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
best way and more simple to center an iframe on your webpage is :
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video
Depending on the video source and if you want to have old videos become responsive your tactics will need to change.
If this is your first video, here is a simple solution:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
And add this css:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Disclaimer: none of this is my code, but I've tested it and was happy with the results.
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
link
If you can't access the iFrame class then add below css to wrapper div.
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left: auto;margin-right: auto;
Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally.
Give me THUMBS UP VOTE if you like.👍⯅.
style > img & iframe > this is your tag name so change that if you're want any other tag in center
<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
</style>
</head>
<body >
<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180" />
</body>
</html>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
use it and embed facebook in iframe in center of html page
Hi I am a mobile app developer and not much familiar with web development, I was finding any approach to implement Progress Indicator before loading the flutter web app like Gmail loading screen. Flutter web is cool but it takes few moments before loading the app. Can we add any indicator for this loading duration? Any code implemented in flutter would be the part of flutter app and it won't work, There should be another approach to achieve this.
With the help of #Abhilash, I was able to accomplish this. I got loader code from w3schools.
My project/web/index.html is like this.
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer src="index.dart.js" type="application/javascript"></script>
<style>
.loading {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loader"></div>
</div>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
In your question you mentioned
Any code implemented in flutter would be the part of flutter app and it won't work,...
I assume you tried to add the splash screen approach for android or IOS. Since flutter-web is simply an index.html and a couple of js files(for eg., main.dart.js), you should perhaps try the CSS loading animation trick. Since you didn't share any code I am not writing any code but the following would be my approach as explained by this red stapler video. He/she kindly provided a lot of CSS based animations here along with the codepen implementations for that.
So following would be my steps in the flutter_web_project\web\index.html file.
Add a span element in the body of index.html to show the css animation itself.
Create a div wrapper to position the span animation in your index.html.
Then listen to the onLoad event of the window and remove the div element from your page or fade it out as described in the video.
In addition to answer of #Shahzad Akram you should remove the loading div because in Safari browser it may cause of flickering. So in the first screen you need to implement the folowing code (for example, in initState method):
import 'package:universal_html/html.dart'
...
#override
void initState() {
super.initState()
// Remove `loading` div
final loader = document.getElementsByClassName('loading');
if(loader.isNotEmpty) {
loader.first.remove();
}
}
P.S. For nice loaders you can visit loading.io.
Adam's answer will remove loader before flutter is actually loaded.
I found this script to be the most complete answer:
<html>
<head>
<style>
.loading {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #00AD87;
border-right: 8px solid #C30E48;
border-bottom: 8px solid #00AD87;
border-left: 8px solid #C30E48;
width: 60px !important;
height: 60px !important;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- First time loading -->
<div class="loading">
<div class="loader"></div>
</div>
<!-- Ensure first time loading progress is gone after app loads -->
<script>
window.addEventListener("flutter-first-frame", function() {
var element = document.getElementsByClassName("loading");
element[0].parentNode.removeChild(element[0]);
});
</script>
<script defer src="main.dart.js" type="application/javascript"</script>
</body>
</html>
If you want to remove loading div with just JS use this code
<script>
window.onload = (event) => {
console.log('page is fully loaded');
var element = document.getElementById("loader");
element.parentNode.removeChild(element);
};
</script>
Notice that it assumes that loader is a <div id="loader"></div> tag
In addition to answers from #Shahzad and #BambinoUA, I also needed to add defer keyword for main.dart.js script tag as well.
<script defer src="main.dart.js" type="application/javascript"></script>
Below is my scenario where this was needed:
app was hosted on Gitlab pages
browser was Chrome (with a slow internet)
In this case, only blank screen was visible until the whole script is downloaded. Then the animation was visible only for 0.5 second and flutter widgets loaded immediately after that. Thus failing the purpose of having loading animation. This doesn't happen in local testing.
I also tried putting the animation div before all scripts, but it didn't help.
I think the accepted answer is partially right as it's presented a loading indicator rather than a progress indicator. From flutter doc you can have a rough estimation of the flutter's actual loading progress. I've compiled an example using this indicator and it's showcased here.
Add this style
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.progress-bar__container {
width: 80%;
height: 2rem;
border-radius: 2rem;
position: relative;
overflow: hidden;
transition: all 0.5s;
will-change: transform;
box-shadow: 0 0 5px #e76f51;
}
.progress-bar {
position: absolute;
height: 100%;
width: 100%;
content: "";
background-color: #e76f51;
top:0;
bottom: 0;
left: -100%;
border-radius: inherit;
display: flex;
justify-content: center;
align-items:center;
color: white;
font-family: sans-serif;
}
.progress-bar__text {
display: none;
}
and append this code on index.html of your flutter app.
function updateProgress(num) {
const progressBarContainer = document.querySelector('.progress-bar__container');
const progressBar = document.querySelector('.progress-bar');
const progressBarText = document.querySelector('.progress-bar__text');
let time = 0;
let endState = 100;
gsap.to(progressBar, {
x: num + "%",
duration: 2,
});
}
window.addEventListener('load', function(ev) {
var loading = document.querySelector('#loading');
loading.textContent = "Loading entrypoint...";
updateProgress(15);
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: async function(engineInitializer) {
loading.textContent = "Initializing engine...";
updateProgress(50);
let appRunner = await engineInitializer.initializeEngine();
updateProgress(80);
loading.textContent = "Running app...";
await appRunner.runApp();
updateProgress(100);
}
});
});
During startup of a flutter web app, we have the 2 phases: the first phase is when the index.html page has already loaded but the actually flutter app is loading. Then when the flutter app is loaded, we still might need to do some preparation within the flutter app. I like both phases to show an indication of loading and I want this to be the same. So... what I did:
First my index.html displays a gif which shows a circular progress indicator similar to the one I have in flutter (see 2) loading.gif
I do this similar to what this person describes: https://retroportalstudio.medium.com/indicate-website-loading-for-flutter-web-apps-7dc5e2c59e24
Then in my flutter app, I show this indicator:
return Container(
decoration: BoxDecoration(color: Colors.white),
child: Center(child: CircularProgressIndicator())
);
This indicator is pretty much the same as the gif. I created this gif with a combination of https://gifcap.dev/ and gimp to crop it.
The result is a fairly smooth loading circular progress indicator almost instant upon opening my website all the way up to when my flutterweb app opens.
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.
I'm creating an HTML mail template for an app, and the template includes a 440px wide image.
When i look at it on my iphone, it goes beyond the width of the screen. I've seen plenty of times when iOS Mail shrinks the size of the email to fit everything in (for instance, emails from Apple).
Any ideas on what I might be doing wrong? The image CSS and it's container CSS is:
.photo {
width: 400px;
height: 460px;
padding: 20px;
background: #fff;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.photo img.main-photo {
max-width: 400px;
}
.photo div.caption {
width: 400px;
position: absolute;
bottom: 20px;
font-family: 'Indie Flower';
height: 50px;
font-size: 20px;
}
and the actual HTML is
<div class="photo">
<img src="{{ photo.images.standard_resolution.url }}" class="main-photo" />
<div class="caption">
{{ photo.caption.text }}
</div>
</div>
UPDATE: Here is an example of how it looks. I dont want it to stretch beyond the screen
try to delete the width and only use max-width. I think that would solve your problem.
400px is too wide, the non-retina iPhone's are 320px wide. If Mail is like Mobile Safari, it'll even treat it the iPhone 4 as 320px wide. Have you tried smaller sizes?