how to add a home button from css in jquery mobile?

Tags: jquery,css,jquery-mobile

Problem :

I have a jquery mobile site. Its around 50 html pages , and i need to add in my header a simple home button. Is it possible to add this button from the CSS , or i need to open one by one all the html files and add it?

The button is simple as that :

<a href="" data-icon="home" data-iconpos="left" data-direction="reverse" class="ui-btn-right">Home</a>

Also how can i make this button appear on the left side? For some reason it appears on the right.

Also how can i change the theme color of my header from the CSS instead of changing it on every file?

Thank you very much

Solution :

Working example:

$(document).on('pageinit',  function(){       
    $('<a href="#index" data-icon="home" data-iconpos="left" data-direction="reverse" class="ui-btn-left" data-theme="a">Home</a>').button().appendTo('[data-role="header"]');
  1. No you cant add a button using only CSS but you can do it with jQuery, example can be found in a working example on top.

  2. For button ti be displayed on a left side change button attribute class="ui-btn-right" to class="ui-btn-left"

  3. It can be done like this:

    $(document).on('pagebeforecreate',  function(){  

    CSS Howto..

    How can I make my webpage background cover fixed for the full size page in css?

    how to center a form using css?

    android - How to build complex views that stretch?

    Hide one div when showing another with JavaScript

    How to render a template containing CSS with }} sequence inside using Twig

    How to add javascript expression's output to my CSS?

    Cutting out the middle portion of an image (example shown)?

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    How to draw heart with text in middle?

    How to make page layout responsive for every successive little change in window size?

    how to create a rotateY animation via jQuery and css 3

    How to maintain the background image until end of the page

    How to have different size images fluidly respond CSS?

    How to set opacity for background images using css?

    How do I increase the height of a menu divider in a navigation?

    How do you prevent a CSS animation from rerunning when the display property changes?

    How to stop a webpage from loading until all jQuery load functions are complete?

    How to prevent outer
    CSS from affecting inner

    How to make a CSS/javascript feature like this website? [closed]

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    XPath how to find second element with CSS class name

    How to bottom center a span inside a list item

    How to make a simple timer image slideshow using HTML and CSS

    how to make text transparent without changing to an image using css

    How can I make DIV 100% height of browser without vertical scrolling of header

    How I can write CSS for IE. My code not work in IE10 nor 9,7,8?

    How to run PHP through Adobe Muse generated CSS

    How do I select all div-elements where first-child is not a table

    How can I make my website width fit fully on iphone 5?

    CSS question: How to fix several rendering issues on