Scroll and click functionality with CSS in jQuery mobile

I'm currently in the process of creating a mobile website specifically designed for smartphones using jQuery Mobile. For my first test, you can view it here:

I have successfully added content to the page and made it scrollable. However, I've encountered an issue where the header and footer are disabled while scrolling, which is frustrating. Here's a link to my second test:

After referring to the jQuery Mobile documentation (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html), I learned that adding data-position="fixed" should prevent the hiding of my header and footer elements.

I'm unsure what mistake I might be making in my implementation. Any suggestions or advice would be greatly appreciated!

jquerycssjquery-mobilescrollsmartphone

Answer №1

When you scroll with jQm, this is the natural behavior that occurs. You may want to explore various jQm widgets that will enhance the jQm framework. One option to consider is iScroll 4, which could meet your needs in this situation.

In regards to fixed positioning, based on the information provided in your original question:

Fixed toolbars

If a browser supports CSS position: fixed (typically most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more), toolbars using the "fixedtoolbar" plugin will stay fixed at the top or bottom of the viewport while the page content scrolls freely in between. In browsers without fixed positioning support, the toolbars will default to static inline positioning within the page.

To implement this on a header or footer, simply add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

Example markup for a fixed header:

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

Example markup for a fixed footer:

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

It's important to note that there is no indication that the toolbars should disappear upon scrolling. This is simply the expected behavior in jQm, but additional plugins can be utilized to address this issue.

Answer №2

Upon closer inspection, I have noticed that you are currently utilizing jQuery version 1.0.1. While this is indeed the latest stable release, it is worth noting that jQuery Mobile team has made significant improvements in fixed headers/footers with version 1.1.0-RC1: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed.html

It would be beneficial for you to consider upgrading to jQuery Mobile 1.1.0-RC1:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

I have prepared a demonstration using your existing code but incorporating the aforementioned updates instead of the 1.0.1 versions. You can view the demo here: http://jsfiddle.net/tLNFu/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to still access the data from a radio button even if it hasn't been selected?

I'm currently working on a questionnaire feature and facing an issue where I need to capture all answers, even if the radio button is not checked. Here's a snippet of the HTML code: $('input:radio').each(function () { if ($(this). ...

javascriptjquery

Tips for generating a JSON string with nested structure

Can someone assist me in generating a JSON based on the HTML elements provided below? { "AppName": "ERP", "ModuleDesc": [ { "Name": "Payroll", "AcCESSRIGHTS": [ { "Create": "Y", "Retrive": "Y", "U ...

javascriptjqueryhtml

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

jquerycssmodel-view-controller

Utilizing flexbox to enable unordered lists to wrap based on content

Here is the current code I have: HTML return ( <Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}> {children} <div className={classes.box}> <ul> {props.pizzas?.topp ...

cssreactjsflexboxmaterial-ui

Tips for updating the label content once a dropdown has been chosen

Currently, I am working on a Python project and have created a dropdown field in models.py. However, I am facing an issue while trying to display it in the HTML template despite having written the necessary jQuery code. models.py addtype = models.CharFie ...

jquerypythondjango

Align the text to the right within a display flex container

Below is the code snippet: <div className="listContent"> <div> <div className="titleAndCounterBox"> <div className="headerListTitle">{list.name}</div><br /> <div ...

htmlcsssassflexbox

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

javascriptjquerychartsgoogle-visualization

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

Activate the resizing feature for materializecss textareas once the text has been filled in

Imagine having the following code snippet: <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s12"> <textarea id="textarea1" class="materialize-textarea"></te ...

javascriptjquerymaterialize

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

htmlcss

Adding miscellaneous PHP scripts

When a user clicks on the sample button, my PHP code gets appended. It works fine, but I want to clean up my process. After some research, I learned that using jQuery AJAX is the way to go. The only problem is, I'm not sure how to implement AJAX. I&ap ...

javascriptphpjqueryajaxwordpress

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...

javascriptjquerycssajax

Tips for managing an event using the bxSlider callback API

I am currently using bxSlider to create a slideshow on my website. However, I now want to implement a manually controlled slideshow that also displays text content related to each image below the slideshow: Here is the code I have so far: <!--SlideSho ...

javascriptjqueryhtmlsliderbxslider

Using jQuery and Django to send a list of numbers in order

My task list is simple, allowing users to choose their preferred order for tasks. I need to send all the tasks' IDs in that specific order to the server from a JavaScript array and fetch the values in a Django view. In essence, what is the most effi ...

jquerydjangourlparametersurl-parameters

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

cssbootstrap-4

Utilizing jQuery's getElementById method to access data from an AJAX request

My JavaScript function checks the length of a username and then sends it to a page for testing. If the test is successful, the element with id "username" will display true, otherwise it will display false. However, I'm encountering an error related t ...

phpjqueryajaxxmlhttprequestclean-urls

Modifying background with CSS and JavaScript

I am currently facing a dilemma and could really use some fresh perspectives on how to tackle this problem. var vaction = "{{vaction}}"; if(vaction === "Driving") document.getElementByClassName("cover").style.backgroundImage = url(https://media.na ...

javascripthtmlcss

Saving HTML data into the WordPress database with the help of Ajax

After developing a WordPress plugin, I encountered an issue while working with div elements. My goal is to retrieve the content of a specific div using the following code snippet: var archive = j( "div.page2" ).html(); console.log(archive); Everything wo ...

phpjqueryhtmlajax

How can we convert multiple arrays into a single JSON object?

I have multiple arrays like the ones shown below: var a=[1,2,3,4,5,6,7,8,9]; var b=["a","b","c","d","e","f","g","h","i","j"]; However, I need to convert these arrays into an array object structured like this: ab=[ ["1","a"], ...

javascriptjqueryarraysjsonconverters

Is there an issue with JQM plugin due to jQuery's append() function?

I am just starting to learn about jQuery mobile as I develop an app using it. Whenever I click on the Add_details button, I want to add dynamic input fields only once. After saving, if I click on the Add_details button again, I need to append more dynamic ...

javascriptjqueryhtmljquery-mobile