add a button next to text box

Question

when you reduce the browser window you will see a different lay out for iphone lay out... how to add button next to search text box.... the problem here is i am getting the text box in js... dont know how to get the button in js....

providing my code below

http://jsfiddle.net/bz2C4/11/

<script type="text/javascript" >
$(document).ready(function() {
    $('#inventoryTable').dataTable( {
        "bFilter": true,
        "bLengthChange": false,
        //"bJQueryUI": true,
        "bSort": false,
        "iDisplayLength": 20,
        "sPaginationType": "full_numbers"
    } );
    $('.dataTables_length').remove();
    $('.dataTables_info').remove();
    $('.dataTables_filter').css("text-align", "center");

    $(function() {
        var search = $('.dataTables_filter').detach();
        $('.page-title').before(search);
        search.css('margin-left','0');

        var div = $('.dataTables_filter');
                var start = $(div).offset().top;

                $.event.add(window, "scroll", function() {
                    var p = $(window).scrollTop();
                    $(div).css('position', ((p) > start) ? 'fixed' : 'static');
                    $(div).css('top', ((p) > start) ? '0px' : '');
                });
    });
});
</script>

Answer 1

If that is what you wanted to see: JsFiddle ? ...css('position', 'fixed') Just made the position fixed. If you want the positioning changing according to the scrolling, just use the other's example's event listener.