Common problem: I'm writing a web app with Dojo that has Google Earth front and centre (via the plugin), and I want to display Dojo dialog boxes (such as confirmations and forms) over the Google Earth display. The dijit.Dialog widget is inevitably rendered underneath the Earth display, even when the dialog has a very large z-index, and the Earth container (and internal elements) have negative z-indexes.
This question is relevant - it seems due to the IFramey nature of the plugin that a shim is required - but I was wondering if there was anything more specific to Dojo? This is a common problem that ExtJS seems to have solved, and I would have thought Dojo would have as well.
That link was relevant after all. I had a play around with the JavaScript for a while, and eventually dug into extending the dijit.Dialog widget. Simply adding a _shim attribute and updating it occasionally was enough to get everything to work seamlessly! Based on my experiences with attempting similar things with Adobe Flex, this is like a dream come true.
You can take a look at the source of my Shimmy Dialog on Bitbucket.
Related
I spent a lot of time looking for JS script for interactive svg maps.
I already found https://imagemappro.com/demo-mall/ and https://mapplic.com/maps/world?location=de. Those two look good and work well. But both of them are using JQ.
I don't want to include JQ to one page, one time use, If possible.
Basically I'm looking for a script that (does not matter if paid):
Have a good API that allows me to select SVG elements and zoom into it etc.
Allow to click into the element and display a popup on top of it with some content.
Responsive and mobile friendly.
Support Drag, zoom.
NO JQ dependency.
Have to support custom SVG.
Allow me to link into an area, or some API hook that allows it.
Thanks for any sugestions.
Mm, tough question. With D3.js library you can do all that but it will require some learning to properly script it.
If you have WordPress then probably easier map plugin than Mapplic (that I still like most) is MapSVG. They offer world maps for free (with named country shapes e.g they have IDs) that you can use without buying MapSVG etc.
Other than that Google and GitHub search would give you various options, this library appears to be widely used (and you can have links in the SVG):
https://github.com/bumbu/svg-pan-zoom
I'm using WinJS 4.4.3 to make a web app. And I'm trying to recreate the Start Menu/Screen. I haven't seen any tutorials on the web or even on Microsoft's website (new or former playground) that shows how to do something like this. Also, I'd like the push animation those tiles display. If there is a way to make tiles like that, is there an animation similar to that?
So in short, how do I make a tile in WinJS (web)?
I just used MetroUICSS to create the tiles. It's much easier. WinJS documentation for making web apps (not store apps) is lacking. The relevant information is hidden away. For anyone who maybe interested. Tiles in grid layout.
So in Silverlight I've seen an app that had 4 windows together in a box shape. When you click on a window, the windows will rotate to the upper right corner and enlarge while the other 3 shrunk. Then if you click on the enlarged window again, all the windows would go back to their normal size. Now I know all of that can be done in Silverlight (w/XAML and Expression Blend). But what would I use in the HTML/CSS/JS libraries to get the same effect.
Another way of putting it is: if you wanted to have a website with heavy UI razzle-dazzle efects what HTML/CSS/JS libraries would you use or recommend?
You should be able to get a fair approximation of this type of functionality using the jquery UI layout plugin. You will have to write some of your own javascript to get it to do exactly what you mention above, but the framework is definitely there
http://layout.jquery-dev.net/
They have a great page with a lot of good demos to look at.
Take a look at jQuery/jQueryUI. It is commonly used to manipulate DOM and has lots of adding. One of them be what you're looking for.
I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax
Is there a component out there that can be used that provides some of the
great capabilities that the Google Waves editor provides (or Google Docs editor)?
If it only works on a certain browser, that is fine. If it is part
of GWT or some other framework, that is fine. I know that this will probably require Google Gears. I would prefer just a javascript library.
It must/should have:
Drag and Drop of images or files into
the area
The ability to have toggle for sections that were changes
(version history)
Basic support for PRE, Links, OL, LI. (Stack overflow editor, is close)
It must have auto-save support
It must have a sane API and system for uploading/communicating with server
It does not need:
Spell check
Real-time character by character
collaboration
Full playback of editor history
I have seen FCKEditor and tinyMce. These editors are way too clunky and complicated.
As noted here, Google Wave uses GWT, so you should be able to get those effects using GWT.
For direct confirmation of this, watch this video, where between 40 and 45 seconds in, a Google employee says about the Google Wave web client "it was built with the Google Web Toolkit".
(See also this search for "wave" and "gwt")
The drag and drop would require Gears as mentioned in the wave presentation, but they are working on getting an html 5 drag and drop api accepted. I don't know of any good solution to do all the other things. I know there are some simple rich text editors that can be used as plugins to mediawiki, so those combined could give you most of that functionality.