Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Document ready function conflicting with window onload function
    primarykey
    data
    text
    <p>I have the following codes.<br> Window onload function is for menu button display for mobile devices instead of the full menu display.</p> <p>Document ready function is for full width responsive slider.</p> <pre><code>window.onload = function() { var nav = document.getElementById('nav'); var navItem = nav.getElementsByTagName('li'); //is it floated? var floated = navItem[0].currentStyle ? el.currentStyle['float'] : document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float'); if (floated != 'left') { var collapse = document.getElementById('nav-collapse'); //toggle class utility function var classToggle = function( element, tclass ) { var classes = element.className, pattern = new RegExp( tclass ); hasClass = pattern.test( classes ); //toggle the class classes = hasClass ? classes.replace( pattern, '' ) : classes + ' ' + tclass; element.className = classes.trim(); }; classToggle(nav, 'hide'); classToggle(collapse, 'active'); collapse.onclick = function() { classToggle(nav, 'hide'); return false; } } } $.noConflict(); jQuery(document).ready(function($) { $('#full-width-slider').royalSlider({ arrowsNav: true, loop: false, keyboardNavEnabled: true, controlsInside: false, imageScaleMode: 'fill', arrowsNavAutoHide: false, autoScaleSlider: true, autoScaleSliderWidth: 960, autoScaleSliderHeight: 350, controlNavigation: 'bullets', thumbsFitInViewport: false, navigateByClick: true, startSlideId: 0, autoPlay: false, transitionType:'move', globalCaption: false, fullscreen: { // fullscreen options go gere enabled: true, nativeFS: true }, autoPlay: { // autoplay options go gere enabled: true, pauseOnHover: true }, deeplinking: { enabled: true, change: false }, /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */ imgWidth: 1400, imgHeight: 680 }); }); </code></pre> <p>The Html</p> <pre><code>&lt;nav role="navigation"&gt; &lt;a href="#nav" class="nav-collapse" &gt;&lt;img src="images/btn_menu.jpg" alt="menu" id="nav-collapse"&gt;&lt;/a&gt; &lt;ul class="nav" id="nav"&gt; &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="compliant-reporting.html"&gt;Compliant Reporting&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="setup-training.html"&gt;Setup &amp;amp; Training&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="demo-videos.html"&gt;Demo Videos&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="events-calendar.html"&gt;Events Calendar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact-us.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>Both javascript and jQuery are in the same file default.js The window.onload is working but the slider script is not working. If I remove window.onload then slider is working.</p> <p>They are conflicting. Any help?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload