Question

Update: I have changed my JavaScript code, and I am now receiving errors in my iPhone Debug Console.

Disclaimer: I’m new to web development, and I’m not too good with JavaScript.

Scenario: I’m building an event calendar with CodeIgniter, and I’m hiding elements on mobile devices that need to be displayed elsewhere on the page when an event occurs. The elements being hidden are <ul>s, and they need to be displayed on another portion of the page when their cooresponding <span>s with the class .day_listing_mobile are selected. I’ve been working with different methods, but I haven’t been able to find a solution out for hours as I’m not strong in the realm of jQuery/Ajax/JavaScript.

Question: What methods would be required to make the hidden <ul>s be displayed on a different portion of the page when their corresponding <span>s are selected?

JavaScript (Updated):

(function($) {
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (isMobile) {
        $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements

        // attach click event to the <span class="day_listing"> elements
        $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('#mobile_show_content').append(eventList);
        });
    }

})(jQuery);

I’m Receiving this error on this line of code var $eventList = $(this).sibling('.event_list').clone(); :

CodeIgniter Calendar Template (Controller):

            {cal_cell_content}      
                <span class="day_listing_mobile">
                    {day}
                </span>
                <ul class="event_list">
                    {content}       
                </ul>
            {/cal_cell_content}

            {cal_cell_content_today}
                <span class="day_listing_mobile" id="today_listing">
                    {day}
                </span>
                <ul class="event_list">
                    {content}   
                </ul>
            {/cal_cell_content_today}

View:

<div class="row">
    <div class="twelve columns">
        <?php echo $calendar; ?>
    </div>
</div>
<div class="show-on-phones">
    <div class="row">
        <div class="twelve columns" id="mobile_show_content">
           <!--I want the <ul>s to show up here-->  
        </div>
    </div>
</div>

Note that the CodeIgniter calendar class generates above where I want to display the <ul>s.

Answer 1

Just modify your click event to move the data around the dom.

  $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('.mobile_show_content').append(eventList);
        });