I've implemented the CodeNameOne sidemenu with the hamburger icon and it works great. My problem, though, is that I can't seem to manipulate the icon. I can't repaint it, I can't resize, and it looks too big compared to the rest of my application. Is there a way to resize it, repaint it, or even replace with a different icon?
Use the designer tool to open your theme and under the constants tab add "sideMenuImage" entry and point it to your own image(make sure this image is a multi image to support the many devices resolutions).
Related
I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
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.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
So, I made this website (lemiart.com) and depending on the image height (if it's too big), the user has to scroll down to view the entire image, specially when using computers with low res. What I would like to do is implement a button in the website so the user can click it and the website will become smaller, like decreasing the zoom in the browser. But I would like to implement it so the user just click it and it zooms out, without having to access the browser config.
Any idea on how to implement it?
Thanks in advance
What you're describing sounds like 'responsive web design'. Rather than have the user initiate an interaction (button click) to zoom or resize the site and images, consider adding some JQuery or other tools that detect the browser dimensions, and automatically reconfigure the page. This is a common approach when designing for multiple platforms (PC, mobile, tablet, etc).
Check out this presentation
You might want to look at some kind of lightbox plugin for jquery.
Fancybox(http://fancybox.net/) is one I have used that is quite good. With these you can have a smaller image on the site and then use the lightbox to zoom to the biiger one.
I'm using the LinkedIn Profile widget on my site and am using the popup version. Although it's functional, I don't like the little LinkedIn icon that's placed as I'm already using a larger LinkedIn icon. Is it possible to hide the smaller one? (I assume it's built into the class, but there may be an option somewhere?) If not, is it possible to overlap a hyperlink so that I can essentially hide the smaller icon behind the larger icon, but ensure the smaller one gets clicked if the large one is clicked on? (Hope that make sense :) )
try adding a style="background-image:none;" to your link.