I am using fullpage.js on a site and when you view it on mobile the anchor links are not clickable and input fields are not accessible.
Also when I set "responsiveWidth: 640" to disable fullpage on mobile I am no longer able to scroll down or move past the first section on my phone and still can't click any links.
Does anyone know what I am doing wrong?
** EDIT **
This is a WordPress site using the skeleton theme "JointsWP"
Here is the site that this is happening on http://jbirdco.com/
Related
When I click on a link on page 1. I want the following to happen:
Open page 2 at the top
Smoothly scroll to a given location on page 2
How would I go about setting this up?
I have managed to make clicking a link on a single page smoothly scroll to a given location on that page, but do not know how to do this between pages.
you can use hashtag link to move focus any specific link on page. It works fine for other pages.
You can provide the page2.html#linkname in page1 link that will open page2 and move focus to mentioned link.
This is exactly the behaviour of scroll-behaviour: smooth; in compatible browsers (currently Firefox and Chrome).
All other browser will not animate but the links still work. That is a perfect example of progressive enhancement.
I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.
I'm using Twitter Bootstrap tabs - which works fine on the page, but not when you link from another page, because it jumps down the page to the content. Is there any way to turn off this behaviour or do I have to customize Bootstrap javascript myself?
Thanks.
(Very similar to this question).
I need help regarding mobile website on iPhone. I have implemented slide panel jquery plugin with bootstrap. The left-slide panel contains category links, positioned absolutely below the homepage. When I click the navigation button to open the slide-panel opens but the link below in slide-panel also get triggered. As a result page redirects to link after opening the slide-panel. Seeking for help...
Thanks
I am using twitter bootstrap for a one page site at http://uniqueamb.biz/flyersaredead/ and the itunes smart app disappears on an ipad or iphone after a second because twitter bootstrap automatically scrolls down. How do I stop the automatic scroll to keep the app header in place?
If I were you I would find out the html that the phone inserts into the page, you can do this with javascript inserting the whole html into a textarea after the itunes store block is added.
Then you can use css, or js to fix your issues, the bootstrap affix class might be a great way to keep this block on top of the page until it's Xed out.