CODEWITHSUNDEEP
jqueryhtml
Irakli Lekishvili
Irakli Lekishvili

Reputation: 34158

Changing height of buttons in jQuery with .css not working

I have div and buttons. .buttons size is not changing.

(script.js is in the same directory as HTML index file.)

$(document).ready(function(){
    $('#next').click(function(){
        $('.button').css('height','1200');
    });
});
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js" ></script>
<title></title>
</head>
<body>

    <div id="slide_container">
        <div id="slide">

        </div>
        <a id='next' href="#">Next One</a>
        <input type="button" id="btnPrev" value="Prevous" class="button"/>
        <input type="button" id="btnNext" value="Next" class="button"/>
    </div>

</body>
</html>

Upvotes: 0

Views: 111

Answers (4)

GoodSp33d
GoodSp33d

Reputation: 6282

I think You have not included jQuery Library.

Try including this and post errors from error console

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Upvotes: 3

Richard Dalton
Richard Dalton

Reputation: 35793

You don't appear to have included a reference to the jQuery library.

Add this to the head section (assuming jquery is in the same folder):

<script type="text/javascript" src="jquery.js" ></script>

Upvotes: 1

Joseph at SwiftOtter
Joseph at SwiftOtter

Reputation: 4321

Good Morning,

It looks as if your next id is not named correctly (unless I'm missing something).

In your example you have the following line:

<input type="button" id="btnNext" value="Next" class="button"/>

Based on that, your jQuery needs to be:

$(document).ready(function(){
    $('#btnNext').click(function(){
        $('.button').css('height','1200');
    });
});

Let me know if that doesn't work!

JMax

Upvotes: 1

David Thomas
David Thomas

Reputation: 253358

Without further information, I can only assume that the link is being followed before the effect takes place, to avoid that (and to prevent the link from being followed (and a new page opened)):

$('#next').click(function(){
    $('.button').css('height','1200');
    return false;
});

JS Fiddle demo.

Return false both prevents the default behaviour of the element (a new page being loaded) and stops propagation of the click event, if you only want to prevent the navigation aspect/default behaviour, you can instead use:

$('#next').click(function(e){
    e.preventDefault();
    $('.button').css('height','1200');
});

JS Fiddle demo.

Upvotes: 0

Related Questions