I'm trying to write a progress bar or add a loading gif to my Smart Gwt application, which starts in onModuleLoad, and ends when the app is just about to display. Is there some type of event handler that can determine this? I've looked but i haven't found anything.
Noticed no one has answered this while searching for something else.
If you look at the SmartGWT showcase they have a popup that displays while the application is loading. In my application, I coopted the mechanism there and you simply have to add this to your webapp.html:
as part of the <head>
<!--CSS for loading message at application Startup-->
<style type="text/css">
body { overflow:hidden }
#loading {
border: 1px solid #ccc;
position: absolute;
left: 45%;
top: 40%;
padding: 2px;
z-index: 20001;
height: auto;
}
#loading a {
color: #225588;
}
#loading .loadingIndicator {
background: white;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
color: #444;
}
#loadingMsg {
font: normal 10px arial, tahoma, sans-serif;
}
</style>
as part of the <body> before the script tag loading your WebApp.nocache.js:
<!--add loading indicator while the app is being loaded-->
<div id="loadingWrapper">
<div id="loading">
<div class="loadingIndicator">
<!--<img src="images/pieces/48/cube_green.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>-->
<img src="WebApp/sc/skins/EnterpriseBlue/images/loading.gif" width="16" height="16" style="margin-right:8px;float:left;vertical-align:top;"/>WebApp<br/>
<span id="loadingMsg">Loading styles and images...</span></div>
</div>
</div>
<!--load skin-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>
<script type="text/javascript">
document.write("<"+"script src=WebApp/sc/skins/EnterpriseBlue/load_skin.js isc_version=7.1.js><"+"/script>");
</script>
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Application<br>Please wait...';</script>
<!--include the application JS-->
Related
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
I've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
I have a Flowplayer flash issue. I'm using multiple video overlays and the player works perfectly on multiple desktop browsers but not on ios devices. I've tried the iPad js include and .ipad(). but nothing works. Can anyone point out the flaw here or a work around to get this to play on ios devices? Here's the full code... Thanks!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/example/flowplayer-3.2.6.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<style>
#overlay {
display: none;
padding: 0px;
width: 720px;
height: 466px;
background-image: url('http://www.angelmedflight.com/assets/images/BlackBox.png');
}
.close {
background: url('http://www.angelmedflight.com/assets/images/close.png') no-repeat;
position: absolute;
top: 2px;
right: 5px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
}
.close:hover {
background: url('http://www.angelmedflight.com/assets/images/closeHover.png') no-repeat;
}
#player {
display: block;
width: 640px;
height: 360px;
margin-top: 40px;
margin-left: 40px;
border-top: 1px solid #000;
border-left: 1px solid #111;
border-right: 1px solid #444;
border-bottom: 1px solid #666;
border: 1px solid #000;
}
#player *:focus {
outline-style: none;
}
</style>
<script>
$(function () {
var player = $f("player", "http://angelmedflight.com/flowplayer/flowplayer-3.2.15.swf").ipad();
$("a[rel]").overlay({
mask: {
color: '#000',
opacity: 0.8
},
onLoad: function () {
player.play(this.getTrigger().attr("href"));
},
onClose: function () {
player.unload();
}
});
});
</script>
</head>
<body>
<div class="ls-layer">
<img class="ls-bg" src="assets/images/carousel/video1.jpg" />
<a rel="#overlay" href="http://www.angelmedflight.com/video/Process_640x360_vegas_i.mp4"><img class="ls-s1" src="http://www.angelmedflight.com/assets/images/carousel/layer_play_button.png" /></a>
</div>
<div id="overlay">
<a class="close"></a>
<div id="player"> </div>
</div>
</body>
</html>
When you say "it doesn't work" what exactly is the experience?
Does it not load the video at all or just not load it in an overlay?
I believe the plugin opens the player in fullscreen mode and customizes the appearance of this mode.
When a player is loaded in full screen mode on iOS it is rendered in the system player, so the JS you are trying to use would have no effect.
If it is not playing at all, I cannot help you. Perhaps you could provide more information.
I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle