Tag Archives: buttons

Twitter Bootstrap Dropdown Button

Dropdown Button – Twitter Bootstrap

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style='text-align:left;'>
	<div class="btn-group">
	  <a class="btn dropdown-toggle btn-success" data-toggle="dropdown" href="#">
	    Button Text
	    <span class="caret"></span>
	  </a>
	  <ul class="dropdown-menu">
	    <li>
	    	<a href="#">Menu Option #1</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #2</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #3</a>
	    </li>
	    <li class='divider'></li>
	    <li>
	    	<a href="#">Menu Option #4</a>
	    </li>
 
	    <li>
	    	<a href="#">Menu Option #5</a>
	    </li>
	  </ul>
	</div>
</div>

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

Modal Popup – Twitter Bootstrap

Just a quick post on how to create a modal popup using twitter bootstrap:

Step #1:

Add the following to a page element such as a link or button in order to open the modal:

     href="modal_content_name"
     data-toggle="modal"

i.e.

<a type="button" class="btn" style="width:100%;" href="#test_modal" data-toggle="modal">Add Image</a>

Step #2:
Create a content div i.e.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="modal fade" id="test_modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Modal Header</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save Changes</a>
  </div>
</div>

And that’s all there is to it, just make sure you’ve included the bootstrap-modal.js file.

Modal Popup - Twitter Bootstrap

Modal Popup - Twitter Bootstrap


Open Twitter Bootstrap Modal Popup on Page Load:
In order to open the modal dialog on page load simply add the following JavaScript:

1
2
3
4
5
<script type="text/javascript">
    $(document).ready(function(){
        $('#test_modal').modal('show');
    });
</script>

You can also close the modal popup manually by using the following JavaScript:

1
2
3
<script type="text/javascript">
$('#test_modal').modal('hide')
</script>

Adjust Modal Width:
In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
   $('#test_modal').modal({
        backdrop: true,
        keyboard: true,
        show: false \\remove this if you don't want it to show straight away
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });
</script>

Or this CSS from StackOverflow:

1
2
3
4
5
6
body .modal-admin {
    //new custom width
    width: 750px;
    //must be half of the width, minus scrollbar on the left (30px)
    margin: -345px 0 0 -375px;
}

Show modal when the user scrolls past certain div
I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Wait for document to load */
$(document).ready(function(){
 
$(window).scroll(function(){
 
//Retrieve scroll distance from top
var top = $(window).scrollTop();
 
//Retrieve the divs distance from top of page
var div_distance = $('my_div').offset().top;
 
//Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
var buffer_distance = 150;
 
//Check if scrolled past div
if(top >= div_distance && top <= (div_distance + buffer_distance)){
 
//Show modal - you may want to add checks etc to see if it's already show
$('#test_modal').modal('show');
 
} else {
 
//Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
$('#test_modal').modal('hide');                         
}        
}); 
});

Create Button which does not Submit – Ruby on Rails

Just another quick post – how to create a button which does not submit a form when it’s clicked:

<%= submit_tag 'My Button',  :type => 'button', :onclick => 'alert('Button not Submitted - Hopefully!!!!'), :class => "my_class" %>

Let me know if you have any problems.

Custom Form Submit Button Text – Ruby on Rails

Just a quick post on how to set the text of a form submit button. By default, the tag will appear as follows:

1
2
3
<div class="actions" style="text-align:center">
     <%= f.submit %>
</div>

In order to change the text all you have to do is the following, where ‘Set Location’ is your new text:

1
2
3
<div style="float:left">
    <%= f.submit 'Set Location' %>
</div>

Good Luck!

Placing Multiple Button_To on the Same Line – Ruby on Rails

This is a problem that had me confused for an embarrassingly long time. Rails wraps button_to elements within a form and a div. Unfortunately this will take up 100% of the available width. Thankfully the solution is pretty straight forward – simply wrap buttons in a div and float them left like so:

1
2
3
4
5
6
    <div style="float:left;">
      <%= f.submit 'Place Order', :class => 'button'%>
    </div>
    <div style="float:left;">
      <%= button_to 'Cancel', :root, :class => 'button' %>
    </div>

A wrapper div isn’t strictly necessary however I usually add one just to be safe. While this will probably give a bunch of designers another reason to hate developers, I find that wrapping floated elements seems to save a lot of headaches when making changes down the track.

Using the code above you may also find that the divs aren’t filling as expected, simply add a div with a ‘clear:both’ style to the bottom of the wrapper:

1
2
3
4
5
6
7
8
9
10
<div>
    <div style="float:left;">
      <%= f.submit 'Place Order', :class => 'button'%>
    </div>
    <div style="float:left;">
      <%= button_to 'Cancel', :root, :class => 'button' %>
    </div>
    <div style="clear:both;">
    </div>
</div>

Hopefully that doesn’t take anywhere near as long for you guys to figure out as it did me, time for a coffee break I think. Good luck!