I'm currently customizing wordpress layout for one company and I have a problem with layout.
I have a logo in header and to the right of it is navigation. But when I'm zooming in, at one point the navigation skips to the next row.
I'd like to ask you how should I keep them on one row when zooming.
Page can be found on dev.machala.cz
Thanks in advance for answers.
When you zoom your page that means viewport size is getting lower and your page starts using your Media Query for that width.
If you don't want to break your menu to down. You have to remove your Media Query.
This is not an issue. You can leave it as it is.
If you are trying to do this for layout purposes on mobile and tablet maybe consider this -
Try changing the font size of the menu text to:
font-size: 1vw;
and then change the media query for the of the mobile menu toggle bar to 1000px
and set the font size back to normal in that media query.
Using VW make the font scale with the width of the browser.
Doing this means you'll be able to shrink the browser for slightly longer and then the media query for the toggle will appear sooner avoiding the text moving to a new row.
Related
I saw a viz in the company's repository, and I wish to replicate one of the feature.
The viz is consist of several pages with an introductory page. The introductory page contained a lot of information with a scrollable canvas, while other detail page had a fixed-to-window way of presenting data, showing each segment in one screen without the overall scroll bar.
What I want to know is how to only make one or part of the pages in the dxp file able to enable the scroll bar (larger canvas height), while the rest having the fit-to screen way of displaying the viz. Any approach will be appreciated.
PS:
The Document Property→General→Visualization area size→Custom size method changes the canvas size of all visualization table. Which is not able to fulfill this feature, as this property changes the canvas size of all pages in the dxp file, which is not what I expected.
sounds like they used a Text Area but it's hard to tell without seeing the document.
you can insert a Text Area the same way you do a visualization (via the toolbar or the main menu). you can then right click the Text Area to edit it either with the WYSIWYG editor or in raw HTML. Text Areas will show scrollbars to match the length of your content.
There is a strange behaviour in one of my installations with ImpressPages: Not all pages have the same width.
I'm using the default theme "Air".
The installation is at
http://www.impresspages.ch
It is the page "Link" that has not the same width as the other pages.
Any idea what causes this?
Your website looks normal. Maybe you see that center content goes slightly to the left on that page? If that's the case, it means that on your screen that page gets a visible scrollbar. And the browser you use hides/shows the scrollbar only when it's needed. For that reason the area for the page shrinks and automated centering ends up on a different position.
It seemed so simple just a day ago, but I can't figure it out:
How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?
It's very important that the page and the image display well on all platforms, without scrollers (!).
The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.
The max size of the image would be 1500x1000px, no minimum size.
I wholeheartedly hope someone can help me out with this, thanks so much!
Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.
Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).
For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.
Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.
I am using FF with Jaws and I have set the role of "scrollbar" on a div but it is not getting picked up by Jaws:
The wai aria spec says aria-valuemax, min and now are compulsory attributes for the scrollbar role but am not really sure it makes sense in this case since all I have is a vertical scrollable area...thoughts?
FF 14.0.1
Jaws 13.0
Currently, JAWS does not support scrollbar role. So if you specify an element with an unsupported role it may result in unexpected results when using JAWS for example, it sometimes tries to announce some of the states and in other cases it just ignores them.
And regarding your second question about aria-valuemax, aria-valuemin and aria-valuenow, these attributes help in determining how much percentage of the scroll contents is being displayed in the viewing area with respect to the position of the thumb. It will help a blind user to know how much more the contents can be scrolled up or down.
And aria-valuenow can be calculated with respect to the thumb position and the height of the scrollbar as below:
Suppose if the viewing area has a height of 200px and thumb height is 30px. So initially when the thumb position is 0 from top then the contents currently displayed in the area is aria-valuemin=aria-valuenow and when the thumb is at 170px from top, the scroll contents is fully displayed aria-valuemax=100.
If you are interested you can take a look at this demo on calculating aria-valuenow. You can tab through the elements and JAWS does not announce any role but seems to announce the value initially and does not update the value in the same way it does for a slider
See also:
Official JAWS aria support list
I am working on a data entry application and I am considering using a fluid layout approach ala Swing and Silverlight where the controls resize based on the window size. My question is simple: what feedback if any have you received from users on each of these approaches? Screen size aside, I will still have a vertical scroll in place so I am wondering if I would be best served to simply go the fixed route and absolute position/size content.
Do not go the fixed route. If the user resizes the window, they do so for a reason. The widgets should resize appropriately. I can think of no valid reason to ever use a fixed layout except in vey specialized circumstances.
That being said, don't have a layout where input fields wrap. That would be very disconcerting. Just let your widgets grow and shrink naturally.