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="http://myHomepage.com" 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: http://jsfiddle.net/Gajotres/ZUYmt/

$(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(){  
        $('[data-role="header"]').attr('data-theme','a');        
    });
    

    CSS Howto..

    How can I have floated list items display their bullet in IE7?

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

    How would YOU do this: Tables or CSS? [closed]

    How to align an image on css?

    How to adjust font awesome down arrow via css

    How to get 3 div's side by side under an angle

    how to use .css to add an address to the end of every .html page?

    How to make gridview and cells bigger?

    How to add js and css files in ASP.net Core?

    How set a page to maximum and minimum sizes via css

    How to open links in a new tab/window using CSS? [duplicate]

    How to change the included CSS files on button click?

    How can I enable/disable(in real time) javascript plugins on a webpage?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to align an image inside a DIV without adding new classes using CSS

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How to get the div block to be centered in a modal window

    How to center without the
    tag using CSS?

    How can I block clicks and Java Script in a HTML

    How to rotate an image by a random amount using CSS?

    how to create inline style with :before and :after

    How to override group of css class?

    How to force Jade not to indent block tag?

    how to make the file input field wrap?

    How to prevent opening multiple popup windows?

    How to use CSS transforms to translate product info into view

    How do I use CSS to reposition this image?

    How to integrate CSS