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.
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 want to change default loading screen when i navigate between pages on WP8 app but I don't know how to do it.
Thank you
So there is many ways of doing it and you need to address what exactly is your best solution.
So the splash screen is the first place to start, here you can specify images that should be used upon start the app. It is also possible to introduce animations.
Your case (As far as I understand) is referring to navigation in-app. Again here I assume you use Silverlight, and not Win-RT?
For this you can create either popups or change the PhoneApplicationFrame. Popups can be displayed across pages during navigation. This however has the issue with memory leak and low performance, because of the popup implementation in WP.
I would therefore go with changing the PhoneApplicationFrame, you can follow this: Specify Popup location, throughout page navigation
Very little information about you app, but maybe this will help:How to create a custom indeterminate progress bar for Windows Phone 8
I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.
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.
I am new to CSS/HTML and couldn't find the answer to this question probably because I'm not using the proper terminology.
I have my separate pages set-up and don't know how to keep the 'user-zoom' consistent among my pages.
For example:
-User is on home.html. User zooms 3 times (control + '+'). Font is much bigger.
-User navigates to about.html. Font and layout is back to the small, default size.
Is there a CSS/HTML/Javascript attribute to keep the pages consistent? Thanks a lot!
Edit: For newer HTML coders, it appears that when you run the code on your local machine clicking on a link to another page will "reset" all the zoom [IE and Chrome tested]. However, apparently when you run it from a server the browser will remember the specific zoom and you don't have to worry about it. Hope this helps at least one person!
Because the zoom level is controlled by the browser itself, the way it behaves on a per page basis cannot be adjusted using CSS/HTML/JS.
A workaround would be to create custom zoom buttons with JS and the CSS transform property. You would then want to save the zoom level to a cookie and apply the current saved zoom level to each page the user loads.