reordering elements using jQuery

Question

I'm designing a theme for concrete5. Currently, in release 5.6.2.1 Concrete5 uses jQuery 1.7.2 I've created an about-me bio block like so:

<div class="bio-block row" id="<?php echo rand(); ?>">
    <div class="bio-image 4u" style="text-align: center;">
    <img src="/path/to/pic" width="100%" style="max-width:239px;" margin="auto" alt="" />
</div>
<div class="bio-text 8u">
    <h2><span>Name</span>
 - Title</h2>

    <div class="bio">
    <p dir="ltr">Content</div>
</div>
</div>

When viewed on a desktop, I would like for every-other block to alternate pic on the left, pic on the right, etc. Using jsfiddle, I've gotten this to work using:

var c = jQuery(window).width();
console.log(c);
if (c >= 820){
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").before(jQuery("#"+id+" > .bio-text"));
    }
    });
} else {
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").after(jQuery("#"+id+" > .bio-text"));
    }
    });
}

but then when this is in an external js file, I can't get it to execute on the page.

Do I need to include something to get it started? maybe an on-page-load calling function?

Answer 1

Most likely you are calling it before the elements are on the page. Use dom ready.

$(function() {

    var c = jQuery(window).width();
    console.log(c);
    if (c >= 820){
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").before(jQuery(".bio-text"));
        });
    } else {
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").after(jQuery(".bio-text"));
        });
    }

});

other option is to include the script tag at the end of the body instead of in the head.