I am using split view from the below link:
https://github.com/asyraf9/jquery-mobile/tree/gh-pages
When I click on the Demo button the menu page changes but the right panel is not changing as shown in the demo page. Could some one give some clues whats the issue ?
Below is the demo link:
http://asyraf9.github.com/jquery-mobile/
Thanks
It looks like that demo uses jQuery Mobile 1.0 Final (based on the date at the top of the JS include).
You can ignore the rest if you are actually using jQuery Mobile 1.0 Final.
In 1.0.1, jQuery Mobile moved to only using page-transitions for browsers less than 1000px wide (I believe that's the number). In 1.1.0 this was altered to use only the fade transition for browsers with a screen-width that is too large.
This behavior has been added to jQuery Mobile because transitions usually look chunky on large screens (because so many pixels have to be drawn simultaneously).
Setting a max width for transitions
By default, transitions can be disabled (set to "none") when the
window width is greater than a certain pixel width. This feature is
useful because transitions can be distracting or perform poorly on
larger screens. This value is configurable via the global option
$.mobile.maxTransitionWidth, which defaults to false. The option
accepts any number representing a pixel width or false value. If it's
not false, the handler will use a "none" transition when the window
width is wider than the specified value.
Source: http://jquerymobile.com/demos/1.1.0-rc.2/docs/pages/page-transitions.html
Related
I've implemented a Masonry layout that adjusts dynamically to the window size and it all works very well. I calculate its height and width and reset the cell measurements when any outside dimensions change.
I just need to be able to programmatically slide into view a specific item while it is being edited as well as scroll back to top programatically. Is this possible? I've tried to set scrollTop or scrollToIndex but it has no effect (unlike List). I have the feeling that I'm missing something obvious.
Thank you!
Unfortunately, the Masonry component does not currently support a scrollTop prop (other than a partial support required to work with WindowScroller). I would be willing to review a PR adding this functionality, but whether it landed would depend on the complexity. :)
I am using FullPage JS to display a few sections. On the desktop, it works perfectly.
However, Some sections have quite an amount of content. On smartphones, part of the content of these sections is covered. Put another way, I am only able to see part of the content of these sections when I scroll (I already used media queries to reduce content display on smartphones, but these sections do have more content than what a full screen can display on smartphones).
I need the usual FullPage JS to work for me on the desktop. However, can I disable full screen display on smartphones and simply display a list of sections as a long page on smartphones? Did anyone do this before?
fullpage.js provides options for it such as responsiveWidth and responsiveHeight that will turn off auto scrolling under a given value in px.
Combine those with the class fp-auto-height-responsive and you'll get what you want.
All of this is detailed in the docs.
Responsive auto height sections
A responsive auto height can be applied by using the class fp-auto-height-responsive. This way sections will be full height until the responsive mode gets fired.
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.
The new Unity 4.6 comes with a new GUI, when I change de resolution on Unity the UI Button scales perfectly but when I test on the Nexus 7 device the Button looks too small. Any idea how to solve this?
Unity's new GUI system uses "anchors" to control how gui elements (like buttons) scale in relation to their parent container.
Unity has a tutorial video on how to use the new "Rect Transform" component (where the anchors are configured) here: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform.
The last half of the tutorial is all about anchors. That page has links to the entire tutorial series. It's not too long. You should watch the whole thing.
Specific to your question:
The anchors are visible in your first screen shot. They are those 4 little arrows at the top left of your button.
Right now, your button is only anchored by it's top left corner.
The two right anchors need to be dragged to the right so that the right edge of your button is anchored to a space inside its parent container.
Depending on your situation, the two bottom arrows may need to be dragged down so that the bottom edge of your button is anchored as well.
The video I linked above covers all this in detail.
Lastly, for the font size to scale nicely on different resolutions, you will need to add and configure a reference resolution component to the base canvas of your UI, as Ash-Bash32 wrote earlier.
Update: The best way to add a Reference Resolution component is through the inspector window for the base canvas in your UI.
1) click the "Add Component Button" at the bottom of the inspector.
2) type the word "Reference" in the search filter field.
3) select the "Reference Resolution" component in the search results.
The Reference Resolution is now renamed as Canvas Scaler.. Along with the renaming they have added many more features for the dynamicity of the Canvas. You can go through the Unity Doc of Canvas Scaler and also take a look at this article for a practical example of how and why to use Canvas Scaler. Also make sure you use the Anchor Points to good effect to make this more robust...
To Scale UI added the ReferenceResolution Component to the Canvas you want to scale.
P.S. Theres no Documention for ReferenceResolution
If you want the button to be the same size for all screens and resolutions, you have to add the canvas scaler component to the canvas and the set the screen match mode to: match width or height, here is the link to the docs, this helps a lot if you want to aim to different sizes or resolutions:
http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
This becomes giant and convoluted once you start laying things out in code AND using a canvas scaler, so I wish to provide a thorough answer to save someone the hours I went through.
First, don't use anchoredPosition to position anything, unless you fully realize it is a 0.0 to 1.0 number. Use the RectTransform localPosition to do the actual laying out, and remember it's in relation to the parent anchor. (I had to lay out a grid from the center)
Second, put a canvas scaler on the parent layout object AND the inner ui pieces. One makes the layout in the right position, the other will resize your elements so they actually show up right. You can't rely on the the parent unless the children also have scalers (and Graphic Raycasters to touch them).
Third, if you have a scaler, DON'T use Screen.width and height, instead assume the screen is the same value you put for the scalers (hopefully you used the same, or know what you're doing). The screen width always returns the actual device pixels, retina devices too, but the canvas scalers DO NOT account for this. This probably gives unity the one remaining way to find actual screen dpi if your game wants it. Edit: This paragraph applies to any parent canvas connected to the code doing your laying out. Not stray canvases, you can probably mix it up. Just remember unity's guidelines on performance with canvases.
Fourth, the canvas is still a bit buggy. Even with the above working, some things don't render until you delete and recreate a canvas, if you re-open the scene or it crashes. Otherwise, the above is the general "rules" I've found.
To center a "grid of things" you can't just use half of the canvas scaler's width or height, you have to calculate the height of your grid and set the offset by half of it, otherwise it will always be slightly off. I just added this as an extra tip. This calculation works for all orientations.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
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