I want to use a lightbox like Shadowbox or similar inside a Firefox extension. But Shadowbox causes Javascript errors like this:
Error: document.write is not a function
Source file: chrome://iframe/content/shadowbox/shadowbox.js
Line: 1557
Which lightbox supports IFRAMEs and will run correctly inside an extension (ie. added to the overlay XUL)?
Which kind of feature are you looking for?
Is it that you can popup "overlays" over the content? The XUL equivelant of overlays are panels. You can also easily add an iframe to XUL by using the HTML namespace. I would not recommend it though, but use some simple javascript to change the content of the panel instead.
You can also try with stack. Here is a small example :
<?xml version="1.0"?>
<!DOCTYPE window PUBLIC "-//MOZILLA//DTD XUL V1.0//EN" "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<window id="test"
title="test"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<stack>
<hbox>
<vbox>
<hbox>
<label value="123"/>
</hbox>
<hbox>
<label value="456"/>
</hbox>
<html:iframe style="width: 800px; height: 400px;" src="http://www.google.com"/>
</vbox>
</hbox>
<vbox style="position: absolute;opacity: 0.5;">
<html:iframe style="position: absolute; top: 100px; left: 100px; width: 500px;" src="http://www.google.com"/>
</vbox>
</stack>
</window>
Quite possibly none. Lightboxes are meant to work with (X)HTML, not XUL.
Related
I'm trying to build an application with Quasar Framework.
I want to have 2 QRouteTabs in the QToolbar that is located inside QLayoutHeader. I have this code:
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar color="primary" :inverted="$q.theme === 'ios'">
<q-tabs>
<div class="row">
<q-route-tab default="true" to="/" label="Найду еду"/>
<q-route-tab to="/contacts" label="Контакты"/>
</div>
</q-tabs>
</q-toolbar>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
This is what I get:
As you see, there is an empty space above the QTabs. I want to get rid of it. How can I do this?
The proper way to do what you want is to remove the surrounding div and add slot="title" to the q-route-tab element.
This will stick the tab in the right place.
<q-tabs>
<q-route-tab slot="title" default="true" to="/" label="Найду еду"></q-route-tab>
<q-route-tab slot="title" to="/contacts" label="Контакты"></q-route-tab>
</q-tabs>
Codepen
I've looked at the page code in the browser and came up with the solution:
<style>
.q-tabs-head {
display: none;
}
</style>
I have an inline SVG inside which I have links to other divs.
On desktop and android mobile devices everything works fine whereas on iPad and iPhone it doesn't.
When I tap on the link it flashes as if it has recognised that it is a link but no action takes place.
My SVG is a map with 15 icons on it and is very very long so there's a greatly simplified
jsfiddle here
Or CSS and HTML below
#link {
margin-top: 1000px;
height: 100px;
width: 100px;
background: red;
}
<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path>
<a xlink:href="#link">
<path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path>
</a>
</g>
</svg>
<div id="link">Linked div</div>
Links to external websites embedded in the SVG work fine on iOS as do normal HTML a href links to both external websites and other divs.
Can I edit the inline SVG so that the links work on iOS? If not would javascript be the solution?
This may or not be the right way to do things but it works.
I removed xlink:href="#" from the anchor tag, gave each one an id then used really simple jquery to open the hidden div.
I have a feeling this breaks rules somewhere but it's the best I can come up with at the moment. Other advice and opinions are welcome.
HTML, CSS, jQuery below:
$('#linkTo').click(function() {
$("#hiddenDiv").toggle();
});
#hiddenDiv {
display: none;
height: 100px;
width: 100px;
background: red;
}
.link {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path>
<a id="linkTo" class="link">
<path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path>
</a>
</g>
</svg>
<div id="hiddenDiv">
</div>
jsfiddle here
TLDR; The answer is to attach a click event, setting location.href to the element. in IOS it seems anchors don't work.
I need to do a simple task but it looks like very heavy for me, i need to create XULRUNNER system which opens WWW.test.com in default window without address bar or any menu and nothing more, here are my codes but it doesn't seem to be working, can anybody help?
main.js
function url() {
windowObjectReference = window.open("http://www.test.com/", "test_WindowName", strWindowFeatures);
}
main.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="500" height="500" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://myapp/content/main.js"/>
</window>
pref.js
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
pref("toolkit.defaultChromeFeatures", "chrome,dialog=no,all");
pref("toolkit.singletonWindowType", "xulmine");
/* debugging prefs, disable these before you deploy your application! */
pref("browser.dom.window.dump.enabled", true);
pref("javascript.options.showInConsole", true);
pref("javascript.options.strict", true);
pref("nglayout.debug.disable_xul_cache", true);
pref("nglayout.debug.disable_xul_fastload", true);
Just use the <browser> element
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="500" height="500" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://myapp/content/main.js"/>
<vbox id="browerbox" flex="1">
<browser flex="1" id="testbrowser" src="http://www.test.com/ />
</vbox>
</window>
The browser is very powerful element I would read up on all Attributes, Properties and Methods that you can use with it, https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/browser. What I gave you above will work but depending on what you ultimately need to do, you may need make a few changes.
I have a XUL tree formed using XML template. I have treecol for URL's and I want to embed those url's as a hyperlink.
<tree id="myTodoListTree" flex="1" seltype="multiple"
datasources="file://C:/mercredi.xml" ref="*" querytype="xml" >
<treecol id="url" label="Facebook" flex="1" />
<template>
<query expr="CONTACT">
<assign var="?facebook" expr="./URL/text()"/>
</query>
<action>
<treechildren id="myTodoListTreeChildren">
<treeitem uri="?">
<treerow>
<treecell value="true" editable="false" label="?facebook"/>
</treerow>
</treeitem>
</treechildren>
</action>
</template>
</tree>
This thread has similar problem but no proper solution.
How to embedded a link in a XUL treecell?
Even in the Mozilla website referred by the above link has no proper solution.
I couldn't find any refrence in XUL School mozilla website.
For emaple, this is one of the url item in the tree-cell: It's a duplicate value
http://www.facebook.com/profile.php?id=101112487211054
Using CSS I can assign something to the entire treecolumn like this: it works.
treechildren:-moz-tree-column {
border-right:1px solid rgb(220,220,220) !important;
}
When i tried to assign to the specific column, it's not working.
#url>treechildren::-moz-tree-column(hover){
cursor: pointer;
text-decoration: underline;
}
This selector is wrong: #url>treechildren::-moz-tree-column(hover). The cell with id url does not have <treechildren> in it, the <treechildren> has a cell in it. Try something like this instead: treechildren .url::-moz-tree-column(hover), which selects any cell with the classs url.
In case user downloads particular type of file (let's say .doc), I should show one more item (i.e. possible action) in addition to Save and Open at unknownContentType Firefox dialog.
How can I do it?
Upd. Looking at FlashGot addon sources, I've extracted the following:
chrome.manifest
overlay chrome://mozapps/content/downloads/unknownContentType.xul chrome://flashgot/content/DMOverlayFx.xul
overlay chrome://global/content/nsHelperAppDlg.xul chrome://flashgot/content/DMOverlayMoz.xul
Why do they have two overlays? What second does? And, how to understand that user chosen my option?
DMOverlayFx.xul
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="DMOverlayFF"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="Common.js"/>
<script type="application/x-javascript" src="DMOverlay.js"/>
<radiogroup id="mode" >
<vbox insertbefore="save" id="synoextcontainer" flex="1">
<hbox flex="1">
<radio id="synoext-dmradio" label="Download with Synology NAS" />
</hbox>
</vbox>
</radiogroup>
</overlay>
DMOverlayMoz.xul
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="DMOverlayMoz"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="Common.js"/>
<script type="application/x-javascript" src="DMOverlay.js"/>
<radiogroup id="mode" >
<hbox position="3" >
<radio id="synoext-dmradio" label="Download with Synology NAS"/>
</hbox>
</radiogroup>
</overlay>
The important file to overlay is unknownContentType.xul. You can see an example here: http://code.google.com/p/firedownload/source/browse/chrome/content/unknownContentType-overlay.xul. This adds a new checkbox to the dialog, but you can use the same approach to add a new radio button. You'll want to include a new JS file in the overlay (like unknownContentType-overlay.js in this example) where you can override the standard processing of the radio buttons. Process your new option and hand off the other options to the existing implementation (look at helperApps.js to see how the standard processing works).