JQUERY CSS how to modify

Question

Phill Pafford mentioned this code:

and this example:

JS:

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>

I have tried this but it does not work:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <h<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.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.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">      


// WIDTH
// For all buttons use something like this
$('.ui-btn').css('width','100%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// Height of the button
//$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
$('#theButton2').prev().css('height','50px');

// Height of the font in the button
//$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
$('#hrefButton3').children().children().css('font-size','60px');

    </script> 



  </head>
  <body>
    <div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
   </div>
</div>
  </body>
</html>

What should I do to make it work? In my case al the text remain the same and not like in the image.

Thank you in advance.

enter image description here

I fail to see #hrefButton3's children and grandchildren in your html source: $('#hrefButton3').children().children() — biziclop
– biziclop, Commented Aug 5, 2012 at 8:53
I just copy and pasted this example from this example: jsfiddle.net/3DSGT It's working fine in this example — Timo11
– Timo11, Commented Aug 5, 2012 at 10:24

Dogbert · Accepted Answer · 2012-08-05 08:49:23Z

2

You are running your script too early.

Do this:

$(function()
{
    // WIDTH
    // For all buttons use something like this
    $('.ui-btn').css('width','100%');

    // For individual buttons use something like this
    $('#theButton1').parent().css('width', '75%');

    // Or this for HREF data-role buttons
    $('#hrefButton4').css('width', '45%');

    // Height of the button
    //$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
    $('#theButton2').prev().css('height','50px');

    // Height of the font in the button
    //$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
    $('#hrefButton3').children().children().css('font-size','60px');
});

edited Aug 5, 2012 at 8:49

Dogbert

224k43 gold badges419 silver badges416 bronze badges

answered Aug 5, 2012 at 8:49

Paul Fleming

24.6k8 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Timo11 Over a year ago

Thanks flem. I added $(function() { before and }); after the existing code but no change in the outcome.

Timo11 Over a year ago

Do I need to add: $(document).ready(function() instead of $(function() because I tried both and no change.

Timo11 Over a year ago

I have tried the following: js and html in the head, js and html in the body. js in the head while html in the body, html in the head while js in the body, the js with $(document).ready(function() and $(function() none of these comibinations give the desired result. any tips?

Patsy Issa Over a year ago

@Timo11 $(function() is the shorthand for $(document).ready()

Timo11 · Accepted Answer · 2012-08-05 11:11:43Z

Here is the answer:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.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.1/jquery.mobile-1.1.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">      
      $(document).ready(function() {
        $('.ui-btn-text').css('font-size','50px')
        $('.ui-btn-inner').css('height','200px');
        });
</script> 
        <a data-corners="false" href="index.html" data-role="button" data-icon="delete"
          data-iconpos="top" data-theme="a">LIVINGROOM</a> </div>
    </div>
  </body>
</html>

Collectives™ on Stack Overflow

JQUERY CSS how to modify

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related