I have designed the following page using BootStrap, and a Google Earth plugin as a script to the page.
http://www.northeastern.edu/sds/web/demos/coldextremes.shtml
I wonder why the right dropdown menu (Precipitation) drops behind the plugin in Chrome,Version 27.0.1453.110 m. It is working fine in Firefox and IE10
thank you for your help
You need to use an <iframe> shim. This is an <iframe> positioned and sized to match your dropdown menu. I believe this is the only reliable way to overlay other content on top of the Earth plugin in all browsers.
Does the menu system you're using have an option to use a shim? If not, then you will need to add it yourself. A good place to start would be Brandon Aaron's bgiframe plugin.
Also, you will need to get rid of the rounded corners and drop shadows. Those won't work on top of the Earth plugin. You probably noticed that in Firefox, although the menu works, it has sharp edges at the bottom and right, and a pixelated corner. You'll have the same problem with the shim—it's purely rectangular. Luckily, flat design is "in" these days, so use it in this menu: square corners and no drop shadows.
Or, you could finesse the situation…
I recommend at least considering a different approach: Live with, and embrace, the limitations imposed by the Earth plugin. The plugin really wants its own space, so give it to it. Don't try to overlay your own content on top of it. Instead, put the "menu" next to it. This could be an accordion-style list, or some kind of tree, or there are any number of ways you could put some navigation in its own panel next to the Earth plugin. This will avoid all the issues with background iframes and browser compatibility.
Source: I worked on a large Earth-plugin-based product for the educational market, and we spent literally months dealing with the issues that came up as a result of wanting to overlay various kinds of menus and similar material on top of the plugin.
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
Under the iPod Touch, when I click on the blue button the image will be scrolled to the right/left according to the image.
What is this technique called and is it achievable using pure HTML5?
It's just another style of carosel/image gallery design. This is usually done with jQuery. And honestly you can find pre-built templates almost all around the web for this stuff. I have added a couple links below. If you have time check them out and post back with questions.
Coin Slider
Nivo Slider
Presentation Cycle
BXSlider
I'm not sure about only HTML 5, but through CSS3's target pseudo class ( http://www.w3.org/TR/css3-selectors/#target-pseudo ) you can allow users to scroll through images.
The problem with this is, of course, that without JavaScript the functionality is lost in older browsers, and having it animate through the various images automatically (without a user selecting an image to drive the :target class) is going to be difficult at best.
Paul Hayes' CSS3 modal window ( http://www.paulrhayes.com/2011-03/css-modal/ ) explains a lot of these issues, and gives you a lot of the theory behind how one might implement a slider through CSS3.
In the end though, unless you're trying to do a proof of concept, or something that shows the world how cool CSS3 can be, you're better off with one of the JavaScript solutions that Jake has linked — they'll work in the real world.
I was wondering, normally chrome extensions appear in their little area below their icon, but how would I make one that has it's own little space on a side of the browser, like FireBug lite does for chrome? Where it pushes the page up and docks at the bottom.
I have seen the sidebar in the 'experimental.sidebar' chrome api, but I don't want to use it because you have to start chrome with the command line switch --enable-experimental-extension-apis, and not many people would do that.
Basically, until sidebars graduate from experimental status, you use a content script to set a big margin or padding on one side of body or html, inject a position: fixed element into the current page overlaid on that margin, and then draw to that.
Anything that needs to persist between pages gets stored by the extension and you re-create the pseudo-sidebar every time a page is loaded.
See the Firebug Lite or StumbleUpon extensions for examples.
People usually use DOM manipulation. You can take a look at FireBugs source to see how they did the DOM. It is quite slow, but until the sidebars go out of experimental, that is the only way to do it right now.
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.