I'm looking for a JavaScript/jQuery plugin which allows to use a fixed header on mobile browser.
iScroll seems to be the most popular solution but I was interested in a plugin that isn't constantly calculating the position of the header while scrolling.
The idea is the same used by jQueryMobile fixed toolbars, while the user is scrolling the header disappears and only reappears after finishing scrolling.
It's more simple than what you think.
I use this code:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
See more info:
http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Related
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
I have been searching online for a few days now trying to crack this:
My code approx layout:
<body>
<div id="wrapper">
<div id="top-header"></div> <!-- This is a fixed position header -->
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
I'm trying to make my footer so it works in the following two scenarios:
1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)
2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).
Unsuccessful FIX #1
So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.
Unsuccessful FIX #2
I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.
I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.
JMSSTKS
I have a problem with this website
http://www.Ghitulescu.de/beta/index.html
on an iPhone or at small browser windows: the navbar collapse as expected at smaller screen-widths, expands then when clicked on the navbar-toggle BUT when I am choosing one of the navbar-menu-items, the navbar remains like this (and covers more than the half of the iPhone-screen) until I click on the navbar-toggle again.
Could you please give me a hint?
Thank you!
Kind regards,
Vlad
That's how Bootstrap is designed.
If you would like it do that, add the following code to your site (Tested on Win7 Chrome 32):
$('ul.navbar-nav').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.
The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?
I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.
UPDATE: I found this "patch" on the jQuery UI website
http://bugs.jqueryui.com/ticket/4143
that says it facilitates slider on iPhone, but now for another question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?
This library seems to offer what you're looking for:
https://github.com/furf/jquery-ui-touch-punch#readme
It also has some example use code (simply add the plugin):
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#widget').draggable();
</script>
Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)
The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:
-ms-touch-action: none;
touch-action: none;
Hope this helps
As #dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent.
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({
axis: "x",
containment: "parent"
});
</script>
EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.
I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.
Just use noUiSlider.
It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.