I'm looking to make a small app using TideSDK, but would like to have the window sit in the bottom right and always on top of other windows
e.g. like a transparent overlay showing a graph or some information that is always visible regardless of switching focus to other windows
Is this doable?
on the tiapp.xml define:
<transparent-background>true</transparent-background>
on css define:
<style type="text/css">
html, body {
background : transparent;
}
</style>
on your javascript call:
<script type="text/javascript">
Ti.UI.currentWindow.setTopMost ( true );
Ti.UI.currentWindow.moveTo ( display.width-your.app.width, display.height-your.app.height );
</script>
Related
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
I try to make a lightbox of my own.
I use a div to cover the web page and display in that div the images, buttons etc.
This div has a semi-transparent background image to "dim" everything.
The problem is that three things cannot be dimed. (they overlap the image)
-An openlayers map (inside html5's article)
-An html5 video tag
-An html5 details tag
This happens cross-browser.
Any ideas? Has to do with html5? The place/order the tags have in the DOM or something?
Thanks in advance
EDIT
Here is the code. Hope it helps. Comes from a 2200 lines file, so its edited. Ask me if you want more specifications
<script type='text/javascript'>
//create image element to later append to lightbox div
var elem2 = document.createElement("img");
//open layers - set map...
map = new OpenLayers.Map('map_element', options);
//more openlayers things here
//image takes its source from an array came form a query
elem2.src=mpli[0];
//then, append to the light box div
document.getElementById("lightbox").appendChild(elem2);
//functions for hide/show the lightbox div
function lightboxme(){
document.getElementById("lightbox").style.display="block";
}
function unlightboxme(){
document.getElementById("lightbox").style.display="none";
}
</script>
//map's article
<article id='map_element' style='width: 900px; height: 400px;'>
</article>
//the small div that contains the image gallery - when clicked , shows the lightbox
<div id="smallbox" onClick="lightboxme();" ></div>
//the lightbox's div
<div id="lightbox" style="display:none ;" >
//lightbox's css
#lightbox {
position:fixed; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(semi-transparent.gif) repeat;
text-align:center;
}
Using TideSDK, how can I have a window with no Windows style border, and keep it draggable ?
I try two things :
First config my tiapp.xml like this
<width>3000</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>1280</height>
<max-height>1280</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<transparency >1.0</transparency >
<transparent-background>true</transparent-background>
And contains my application in a div like this :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; left: 10px}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It's cool cause I have my full css customizable window draggable, BUT if I want it's work in dual screen I have to set the maximum width to ~4000 and it's look limited to 3000 max. (even if I set a greater value inside the tiapp.xml file ). Notice, if I'm not setting a huge widht and height, when my application (div) is near from the limit, a scroll bar appear in my desktop.
I trying a quick other thing to add the tag
<chrome>false</chrome>
It's look a better method but, I loose the draggable control on my windows. And I don't know how can drag the tidesdk windows with javascript. May be there is solution to create my own "chrome" ?
Gold mine for this question are the answers posted on this tidesdk google groups thread: https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc
First, you need to provide your own way to let the user move the window around—your own version of something like a Windows 8 Metro style top-is-draggable-where-the-title-bar-used-to-be.
For the sake of example (not worrying about styling), e.g.
<div id="windowTitleBar">
<button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
<button id="windowClose" class="windowMaxMinButtons">[X]</button>
</div>
Second, in your javascript you provide your own drag handling, taking advantage of the Ti.UI API. Here's a sample from a proof of concept I did.
(Note in the following, the minimize function has a little hack (?) to make the window work after being restored. If you find a better way, please add your fix so everyone can benefit!)
$(document).ready(function() {
/*
* WINDOW HIDE
*/
$("#windowMinimize").click(function()
{
event.preventDefault();
// From http://developer.appcelerator.com/question/131596/minimize-unminimize-under-windows-7
// One user found if we follow this magical sequence (max-unmax-min), the
// window will be responsive after restore. Confirmed on my Win 7
Ti.UI.getMainWindow().maximize();
Ti.UI.getMainWindow().unmaximize();
Ti.UI.getMainWindow().minimize();
});
$(".maximize").click(function() {
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
Ti.UI.getMainWindow().maximize();
} else {
Ti.UI.getMainWindow().unmaximize();
}
});
/*
* WINDOW CLOSE
*/
$("#windowClose").click(function()
{
event.preventDefault();
Ti.UI.getMainWindow().close();
//system.window.target.hide();
Ti.App.exit();
});
/*
* WINDOW "Title Bar"
*/
$("#windowTitleBar").mousedown ( function ( event )
{
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
var diffX = event.pageX;
var diffY = event.pageY;
$(document).mousemove ( function ( event )
{
event.preventDefault();
if (event.screenY - diffY < screen.height-100)
Ti.UI.getMainWindow().moveTo(event.screenX - diffX, event.screenY - diffY);
});
}
});
$(document).mouseup ( function ( event )
{
event.preventDefault();
$(document).unbind('mousemove');
});
$("#windowTitleBar").dblclick ( function ( event )
{
event.preventDefault();
if (!Ti.UI.getMainWindow().isMaximized())
Ti.UI.getMainWindow().maximize();
else
Ti.UI.getMainWindow().unmaximize();
});
});
For some reason, when a user has their display set to 125% from the Control panel, IE9 will add extra width inline to elements like so:
<div class="container" id="main" style="width: 1500px">
<!-- Code goes here-->
</div>
The inline style above (with the width) is the one added by IE9. IE8 does not have this problem, and it's definitely triggered by setting the Windows display settings to 125%. Chrome and Firefox display things properly without the extra style too. Don't suppose anybody has a workaround or fix for this? Can't control what settings the users have, but I've seen other sites render properly.
Ok, so I solved this with a conditional comment and a bit of jQuery:
<!--[if IE 9]>
<script type="text/javascript">
window.onload = function () {
if ( $('#main').attr('style') !== 'undefined' ) {
$('#main').removeAttr('style');
}
}
</script>
<![endif]-->
Basically, it checks to see if IE put a "style" attribute on the offending element, and if so, it removes the attribute.
Yep or if you want to be more selective to width and height
jQuery(document).ready(function () {
removeInlineWidthHeightElements($('#main'));
});
function removeInlineWidthHeightElements(element) {
element.attr('style', function (i, style) {
return style.replace(/width[^;]+;?/g, '').replace(/height[^;]+;?/g, '');
});
}
Is it possible to remove inline styles with jQuery?
My app has a modal dialog with an iframe inside it. I've written my jQuery code such that when the dialog opens, it sets the appropriate 'src' attribute of the iframe so the content loads up. However, during the delay between the dialog opening and the content loading, the iframe appears conspicuously as a white box. I'd prefer the iframe have a transparent background.
I've tried setting allowtransparency="yes" on the iframe. Any ideas? Thanks!
I've used this creating an IFrame through Javascript and it worked for me:
// IFrame points to the IFrame element, obviously
IFrame.src = 'about: blank';
IFrame.style.backgroundColor = "transparent";
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";
Not sure if it makes any difference, but I set those properties before adding the IFrame to the DOM.
After adding it to the DOM, I set its src to the real URL.
<style type="text/css">
body {background:none transparent;
}
</style>
that might work (if you put in the iframe)
along with
<iframe src="stuff.htm" allowtransparency="true">
Set the background color of the source page to none and allow transparency in the iframe element.
Source page (for example, source.html):
<style type="text/css">
body
{
background:none transparent;
}
</style>
Page with iframe:
<iframe src="source.html" allowtransparency="true">Error, iFrame failed to load.</iframe>
Why not just load the frame off screen or hidden and then display it once it has finished loading. You could show a loading icon in its place to begin with to give the user immediate feedback that it's loading.
You need to make the iframe's body transparently. It works for me:
const iframe = document.createElement( 'iframe' );
iframe.onload = function() {
const doc = iframe.contentWindow.document,
head = doc.querySelector( 'head' ),
style = doc.createElement( 'style' );
style.setAttribute( 'type', 'text/css' );
style.innerHTML = 'body { background: transparent!important; }';
head.appendChild( style );
}