Home/ Questions/Q 6982675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:19:13+00:00

I’m trying to change the .show() in my code to .reveal() , and I

  • 0

I’m trying to change the .show() in my code to .reveal(), and I can’t seem how to do this properly. No errors are being generated, as nothing is happening when I select day_listing_mobile <span>s

Here is my JavaScript Code:

(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');

            $('.event_list').hide(); // again hide all possibly shown ones before opening the selected one

            $eventList.show(); // setting display:block on sibling <ul> of clicked <span>

            $('#myMobileModal').reveal();
        });
    }

})(jQuery);

Here is what I’m hiding and wanting to reveal:

{cal_cell_content}<span class="day_listing_mobile">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content}
            {cal_cell_content_today}<span class="day_listing_mobile" id="today_listing">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content_today}

The above code is generating <ul>s using CodeIgniter’s Calendar class that I’m .hide()ing on mobile devices, and that I’m wanting to eventually .reveal() instead of .show().

Here is how .reveal() works:

<script type="text/javascript">
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });
});
</script>

(more information on Reveal by Zurb)

Disclaimer: I’m new to web development, and suck at anything JavaScript related.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    html

    {cal_cell_content}
<span class="day_listing_mobile">{day}</span>
<div id="myMobileModal" class="reveal-modal">
    <ul class="event_list">{content}</ul>
</div>
<a id="myButton" data-reveal-id="myModal" href="javascript://">myButton</a>
{/cal_cell_content}

    js

    $(document).ready(function() {
    $('.day_listing_mobile').click(function(e) {
        var $eventList = $(this).siblings('.event_list');
        $('.event_list').hide();
        $eventList.show();
        $('#myMobileModal').reveal();
    });
});

    css

    // from reveal.css (make sure to include it)

    .reveal-modal {
    visibility: hidden;
    top: 100px;
    left: 50%;
    margin-left: -300px;
    width: 520px;
    background: #eee url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

    fiddle

    http://jsfiddle.net/c4urself/EUPYT/

    • 0