I use the plugin fullpage.js for a new project.
Now there is a problem. The Scrolling animation doesn't work on mobile devices. Here is the URL: www.manu-oliver.de/web/test.html
I hope somebody can help me. :)
You are using responsive: 900, which means fullPage.js will stop auto scrolling in screens with less than 900 pixels width as pointed in the docs.
responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container 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.
Related
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.
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 would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
I made an adaptive theme with Drupal 7.22, which works very fine. Unfortunately the size of the iFrame's opened by Colorbox are not adaptive.
To open them, I do the following:
<a class="colorbox" href ="http://mydomain.tld?width=800&height=700&iframe=true">Link</a>
But the width and height properties are hard-coded. How can I specify different values for the width and height properties based on the browser aperture/screen definitions?
For example, all screens which have a width between 0 and 1024px should have a colorbox iFrame with the following properties:
width=800px
height700px
and all screens which have a resolution greater than 1024px should have a colorbox iFrame with the following properties:
width=500px
height400px
Do you have any suggestion on how to make these adaptive?
Take a look at jRespond:
https://github.com/ten1seven/jRespond
that might be the easiest way to accomplish what you are looking for.
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