javascript - Modal not working in external file but works when added as a script before closing body tag -
background
i have modal works when added script before closing </body>
<script> // simple modal jquery(function ($) { // load dialog on click $('#basic-modal .basic').click(function (e) { $('#basic-modal-content').modal(); homecoming false; }); }); </script> or if have function own .js file , phone call way.
yes, did clear cache , verify in inspect element see if script beingness called.
problemwhen set function in main javascript file in app.js it, modal not work.
current pagethe test page available @ http://bruxzir.jgallardo.me/test.aspx
codethis order in calling scripts <head>
<script src="/assets/js/jquery.js"></script> <script src="/assets/js/mustache.js"></script> <script src="/assets/js/headroom.min.js"></script> <script src="/assets/js/jquery.simplemodal.js"></script> <script src="/assets/js/swipe.js"></script> <script src="/assets/js/app.js"></script> <script src="/assets/js/google-analytics.js"></script> html
<div id='basic-modal'> <h3>basic modal dialog</h3> <input type='button' name='basic' value='demo' class='basic'/> </div> <!-- modal content --> <div id="basic-modal-content" class="featured-video"> <img src="http://placehold.it/720x360&text=image+1"> <img src="http://placehold.it/720x360&text=image+2"> </div> app.js
/* video modal */ function overlay() { el = document.getelementbyid("overlay"); el.style.display = (el.style.display == "block") ? "none" : "block"; } /* fixed header */ $(window).scroll(function(){ if ($(window).scrolltop() >= 180) { $('nav#page-menu').addclass('fixed-header'); } else { $('nav#page-menu').removeclass('fixed-header'); } }); /* main functionality search of labs in */ $('#search').keyup(function () { var searchfield = $('#search').val(); var myexp = new regexp(searchfield, "i"); $.getjson('labs.js', function (data) { console.log(data) var output = '<ul class="searchresults">'; $.each(data, function (key, val) { if ((val.abbr.search(myexp) != -1) || (val.state.search(myexp) != -1)) { output += '<li>'; output += '<h5>' + val.name + '</h5>'; output += val.city + ', ' + val.abbr + ' ' + val.country + '<br />'; output += val.phone + '<br />'; output += '<a href="http://' + val.website + '"' + 'target="_blank"' + '>' + val.website + '</a>'; output += '</li>'; } }); output += '</ul>'; $('#labs-container').html(output); }); }); /* passes info json international lab list */ $(function() { $.getjson('labs-international.js', function(data) { var template = $('#labscountrylist').html(); var html = mustache.to_html(template, data); $('#countries').html(html); }); }); /* filter international labs */ $('#lab-country-select').on('change', function (e) { e.preventdefault(); var cat = $(this).val(); var nam = $(this).val(); $('#countries > div').hide(); $('#countries > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show(); }); /* main functionality search of international labs */ $('#search-intl').keyup(function () { var searchfield = $('#search-intl').val(); var myexp = new regexp(searchfield, "i"); $.getjson('labs-intl.js', function (data) { console.log(data) var output = '<ul class="searchresults">'; $.each(data, function (key, val) { if ((val.country.search(myexp) != -1)) { output += '<li>'; output += '<h5>' + val.name + '</h5>'; output += val.city + '<br />'; output += val.country + '<br />'; output += val.phone + '<br />'; output += '<a href="http://' + val.website + '"' + 'target="_blank"' + '>' + val.website + '</a>'; output += '</li>'; } }); output += '</ul>'; $('#labs-container').html(output); }); }); /* hide page navigation */ (function() { new headroom(document.queryselector("#page-menu"), { tolerance: 5, offset : 180, classes: { initial: "slide", pinned: "slide--reset", unpinned: "slide--up" } }).init(); }()); /* mobile layout */ $("p").has("img").css({textalign: "center"}); // slider techincal info - polishing kit window.myswipe = new swipe(document.getelementbyid('slider'), { startslide: 0, speed: 300, auto: 600000, continuous: true, disablescroll: false, stoppropagation: false, callback: function(index, elem) {}, transitionend: function(index, elem) {} }); // slider techincal info - seating instructions // add together myswipe2 here , in html command window.myswipe2 = new swipe(document.getelementbyid('slider-2'), { startslide: 0, speed: 300, auto: 600000, continuous: true, disablescroll: false, stoppropagation: false, callback: function(index, elem) {}, transitionend: function(index, elem) {} }); // captions slider in technical info $(document).ready(function () { var rm = $(".read-more"); var hi = $('.hide'); rm.click(function (e) { e.preventdefault(); var = $(".hide"); now.slidetoggle(); hi.not(now).filter(':visible').slidetoggle(); }); }); // simple modal jquery(function ($) { // load dialog on click $('#basic-modal .basic').click(function (e) { $('#basic-modal-content').modal(); homecoming false; }); }); my initial thoughts there might conflict in app.js, so
try this:
// captions slider in technical info $(document).ready(function () { var rm = $(".read-more"); var hi = $('.hide'); rm.click(function (e) { e.preventdefault(); var = $(".hide"); now.slidetoggle(); hi.not(now).filter(':visible').slidetoggle(); }); // load dialog on click $('#basic-modal .basic').click(function (e) { $('#basic-modal-content').modal(); homecoming false; }); }); mentioned before on comments might know problem, didn't test see if helps. inserted code document.ready() function
javascript jquery html
No comments:
Post a Comment