Navigating between pages with JQuery Mobile using interactive bubble buttons

Is there a way to create a swipe page with 3 pages and incorporate a "bubble" button that indicates the current page being swiped?

I would appreciate any tips or resources where I can find an example of this.

jqueryhtmlcssjquery-mobileswipe

Answer №1

Check out an example in action: http://jsfiddle.net/Gajotres/hrkJq/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Share QR</title>
        <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>

    <body>
        <article data-role="page" id="article1" data-pagination="1">
            <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
                <h1>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 1</p>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>    
            </div>
        </article>

        <article data-role="page" id="article2" data-pagination="2">
            <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
                <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 2</p>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>   
            </div>
        </article>

        <article data-role="page" id="article3" data-pagination="3">
            <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
                <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 3</p>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>   
            </div>
        </article>

    </body>
</html>

Javascript : 

$(document).on('pagebeforeshow', 'article[data-role="page"]', function(){    
    selectbubble($(this));
});

$(document).off('swipeleft').on('swipeleft', 'article', function(event){    
    if(event.handled !== true) // This will prevent event triggering more than once
    {    
        var nextpage = $.mobile.activePage.next('article[data-role="page"]');
        // swipe using the id of the next page if it exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).off('swiperight').on('swiperight', 'article', function(event){   
    if(event.handled !== true) // This will prevent event triggering more than once
    {      
        var prevpage = $(this).prev('article[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

function selectbubble(page) {
    $.each($('#bubble-holder div'), function (index,value) {
        var bubble = $(this);
        bubble.css('background','#3408AE'); 
        if(bubble.attr('id') === 'page' + page.attr('data-pagination') + '-bubble'){
            bubble.css('background','#0B0228');
        }
    });    
}

CSS : 

.ui-footer {
    height: 30px;
}

#bubble-holder {
    margin: 10px auto 0 auto;
    width: 60px;
    height: 10px;
}

#page1-bubble, #page2-bubble, #page3-bubble {
    position: relative;
    float: left;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    background: #3408AE;
    -webkit-border-radius:  5px;
    border-radius: 5px;    
    -moz-box-shadow: inset 0 -1px #eee;    
    -webkit-box-shadow: inset 0 -1px #eee;    
    box-shadow: inset 0 -1px #eee;    
}

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

Tips for integrating an HTML template into a React project

I'm finding it challenging to integrate an HTML template into React. The template I am using is for an admin dashboard with multiple pages. I have successfully copied and pasted the HTML code into JSX files and fixed any syntax issues. Here's wh ...

javascripthtmlreactjs

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

What is the best way to retrieve accurate error messages using AJAX and JSON?

Storing span values into a database has been successful. However, I am encountering an issue with the ajax return error message. For instance, in my save.php code, I mistakenly changed my table name from sample to simple (which does not exist in my databas ...

javascriptphpjqueryajaxjson

jQuery isn't executing properly within the <body> tag

When I try to call a function that is already loaded in a custom JavaScript file in the header, I encounter an issue. <head> <script type="text/javascript" src="/js/jquery-1.5.min.js"></script> <script type="text/javascript" src="/j ...

jquery

The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...

javascriptjqueryhtmlsvg

Automatically refresh a pair of pages in sequence

Seeking advice on how to execute the following steps in JavaScript: - Pause for 120 seconds - Access http://192.168.1.1/internet-disconnect (in an iframe or similar) - Pause for 3 seconds - Access http://192.168.1.1/internet-connect - Repeat Here is ...

javascripthtmlajaxreload

Is there a way to verify the presence of a meta description in Selenium IDE?

Currently, I am utilizing the Command & Target provided by Selenium IDE to validate the precise text of a meta description verifyelementpresent : //meta[@name='description' and @content='description here'] I want to ensure tha ...

htmlcssseleniumautomated-testsselenium-ide

Creating a line with CSS is a straightforward process that involves using properties

I am trying to achieve a yellow line effect similar to the image shown using CSS. I have managed to create line holes so far, but I'm struggling with creating vertical straight lines. Here is an example of my current code: https://i.sstatic.net/MqRUE ...

htmlcss

Incorporate dynamic variables into your HTML code using jQuery or JavaScript

I'm struggling to generate HTML code from JavaScript/jQuery within an HTML template rendered in Django. I need to append HTML code and also insert some values in between. Currently, I am using a basic string append method like this: var features =[&ap ...

javascriptjquerydjangotemplates

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

javascriptjqueryhtmlangularjsangular

The jQuery ajax function fails to invoke the callback function when the data type is specified as 'script'

When using jQuery 1.5.2 or an earlier version, the following code will output 'ololo' in the FireBug console: $.get( 'some_url', { data: 'some_data' }, function() { console.log('ololo') }, 'script' ...

ajaxjquerycallbackjquery-callbackjquery-1.6

Trigger an input file click automatically using vanilla JavaScript with an AJAX request in Google Chrome

Currently, my webapp operates in a way that every button click triggers an ajax request to the server. The server then validates and sends JavaScript code back to the client. Unfortunately, the framework I am using does not allow me to incorporate jQuery a ...

javascripthtmlajaxgoogle-chrome

unable to add information into database using json syntax

I am looking to input my data using JSON. Here is the code I have: <head id="Head1" runat="server"> <title>Register</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="tex ...

jqueryasp.netajaxjson

Is the on.click event fired before the ajax request is made?

Having two events, the second one initiates an Ajax call. When a click creates an input in the <td>, it gets replaced by the success event afterwards - ensuring that the input is correct upon blur. $(document).on("click","#"+table_id+" td",function( ...

javascriptjqueryajaxevents

Mpdf does not support inline CSS rendering

I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...

phpcsssymfonympdf

Utilizing loops for data selection and presentation within a div using MySQL and PHP

I currently have a large table in my MySql database containing numerous rows of records (referred to as the existingbankproducts table): https://i.sstatic.net/jQzd3.png Below is the code I am using to select data from the database: $stmt2 = $DB_con-> ...

phphtmlmysqlsqldatabase

Using PHP to import a file along with POST data

I have a PHP script that currently processes POST data when called through AJAX using jQuery: $.post("myfile.php", { key: value }); Now, I would like to execute the same PHP file within another PHP script. Here is what I aim to accomplish: <?php ...

phpjqueryajaxpostinclude

How can CSS be used to create columns with text of different sizes?

Attempting to construct a text-based webpage entirely with HTML and CSS, the objective is to divide the page into two columns. The first column should occupy 2/3 of the width to accommodate the primary text, while the second column should take up the remai ...

htmlcssmultiple-columns

Make the Bootstrap country picker default to "Not Selected"

When using the Bootstrap country picker, I have implemented the code below to populate countries. Everything is working as expected, however, there is no default selection of "Not Selected." Is there a workaround for this issue? <script> $('.c ...

javascripthtmltwitter-bootstraptwitter-bootstrap-3

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

css