Question

I’m using SlabText (http://www.frequency-decoder.com/demo/slabText/) in a forthcoming project which is using jQuery to create some content on the fly (i.e. after the doc ready event).

Specifically, after an AJAX form submission, I want to display a little thank you message. Whilst it’s all fairly simple in theory, SlabText does not process on the hidden content in its usual cool way. It process for all of my titles except the ones that were hidden when the page was loaded

Here’s my code:

<div id="result" class="container hide">
    <div class="row">
        <div class="span7">
            <h2 class="slab">
                <span class="slabtext">Thanks!</span>
            </h2>
        </div>
        <div class="span5">
            <h2 class="slab">
                <span class="slabtext">We'll be in touch</span>
                <span class="slabtext">very soon</span>
            </h2>
        </div>
    </div>
</div>

I’m using Twitter’s Bootstrap & the ‘hide’ class to set a parent div (#result) to be display: none. Once the form is submitted I set this div to be display: block (via JS) but no joy.
I’ve also tried to include a line to process slabText again within my JS function (i.e. after changing the display): $('#result').slabText(); Alas this still doesn’t work either.

I’ve created a JSFiddle to better show this issue: http://jsfiddle.net/YeZfd/

I’m sure I’m being stupid & missing something fundamental, if so please advise.

Thanks for any assistance!
George

Answer 1

Without seeing your actual code, you should be able to add the slabText call to the ajax settings under ‘success’. Like below:

success: function(data){
    $('#result').slabText();            
});

See the .ajax documentation for more info.

UPDATE —

Thanks for the example. The issue would appear to be that in the #results DIV, you’re trying to run slabText on the parent container, instead of the actual text.

Change this

$('#result').slabText();

To this

$('#result .slab').slabText();