Databases
StackOverflow2013
Postsdbo
POJquery conflicting in head section - Bootstrap and Supersized
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery conflicting in head section - Bootstrap and Supersized
    primarykey
    data
    text
    <p>I am struggling a bit with conflicting jquery in my head section of my site.</p> <p>The problem happens when if I put the bootstrap jquery underneath then it stops working and the supersized DOES work. </p> <p>But then when I swap them around it is visa versa, supersized DOESN'T work and bootstrap DOES.</p> <p>This is my current head section</p> <pre><code>&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="description" content=""&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt; &lt;link rel="stylesheet" href="/css/normalize.css"&gt; &lt;link rel="stylesheet" href="/css/main.css"&gt; &lt;link rel="stylesheet" href="/css/1140.css"&gt; &lt;link rel="stylesheet" href="/css/ie.css"&gt; &lt;!-- Bootstrap (for mobile navigation) --&gt; &lt;link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)"&gt; &lt;link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)"&gt; &lt;!-- supersized sytlesheets --&gt; &lt;link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" /&gt; &lt;link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" /&gt; &lt;script src="js/vendor/modernizr-2.6.1.min.js"&gt;&lt;/script&gt; &lt;!-- supersized scripts (can't go in the bottom as it stops working --&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt; &lt;!--bootstrap has to go below min jquery for it to work and above supersized--&gt; &lt;script src="/js/bootstrap/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/supersized.3.2.7.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="theme/supersized.shutter.min.js"&gt;&lt;/script&gt; </code></pre> <p></p> <p>When I look in the bootstrap/jquery.js file, I cannot get my head round it as it is just all block text.</p> <p>Anybody got any solutions? I am only using the bootstrap for mobile version also, so is there a way I can just include the jquery at a certain width, for example 480 - (which is when I disable the supersized anyway).</p> <p>I also have script at the bottom of the document also and maybe this could be affecting this also?? </p> <pre><code>&lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.0.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt; &lt;script type="text/javascript" src="js/css3-mediaqueries.js"&gt;&lt;/script&gt; &lt;script src="js/plugins.js"&gt;&lt;/script&gt; &lt;script src="js/main.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap Scripts --&gt; &lt;script src="/js/bootstrap/bootstrap-transition.js"&gt;&lt;/script&gt; &lt;script src="/js/bootstrap/bootstrap-dropdown.js"&gt;&lt;/script&gt; &lt;script src="/js/bootstrap/bootstrap-collapse.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap scripts end --&gt; &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --&gt; &lt;script&gt; var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); &lt;/script&gt; </code></pre> <p>Basically, just due to trial and error, supersized won't work at the bottom for some reason and has to go in my head section. And when bootstrap works then the supersized will not.</p> <p>Please let me know a way to get past this and if there is something I have done wrong in my head section that is causing this.</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSuzi Larsen
    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.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COsorry, needed to clarify - its not the whole part of the supersized that stops working. It is the part where the image thumbnails are shown at the bottom and the left and right scrolling (carousel type animation) has stopped working when bootstrap is included
      singulars
      1. POJquery conflicting in head section - Bootstrap and Supersized
      1. USSuzi Larsen
    2. CODoes the markup here help you at all: http://wbpreview.com/previews/WB009T88H/ View source. Are you getting any console errors? F12 that shiat!
      singulars
      1. POJquery conflicting in head section - Bootstrap and Supersized
      1. USmattdlockyer
    3. COTry placing this line: <script>window.jQuery... directly after the line which calls jQuery from Google.
      singulars
      1. POJquery conflicting in head section - Bootstrap and Supersized
      1. USBilly Moat
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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