stackoverflow.com saved me many times, but this is actually the first time I posted a question. Thank you in advance for your help to smart people!
I am trying to use jquery-quickfit ( https://github.com/chunksnbits/jquery-quickfit/blob/master/demo/index.html ) to automatically resize the piece of text that appears in the modules. I use boostrap to handle modals ( http://twitter.github.com/bootstrap/javascript.html#modals ).
At the moment, the text will only change correctly after I open the modal value after resizing the window. When it loads, the text becomes smaller (I'm not sure where it inherits this initial size). I would like javascript to launch the moment the modal fires. I am sure there is an obvious way to do this, but I'm not so good at javascript.
Here's what the corresponding code looks like:
<button class="btn" data-toggle="modal" data-target="#my-modal">Open Modal</button>
<div id="my-modal" class="modal hide fade row">
<div class="modal-body">
<div class="span3 modalicon">
<i class="icon-image"></i>
</div>
<div class="span9" id="modaltextcontainer">
<span class="modaltext">This is the content I want resized</span>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.quickfit.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(window).on('resize', function() {
$('.modaltext').quickfit({ max: 40, min: 0, truncate: false });
});
$(window).trigger('resize');
});
</script>
<span id="meassure" style="position: absolute; left: -1000px; top: -1000px; font-size: 12px;">..........</span>
I assume that I need to enable the show bootstrap modal show event in this last javascript bit, I just can't figure out how to do this.
Many thanks for your help!
source
share