Databases
StackOverflow2013
Postsdbo
POHow to open fancybox containing .html files from jquery UI tabs navigation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to open fancybox containing .html files from jquery UI tabs navigation
    text
    copied!<p>I have a set of jquery tabs for top navigation (tabs are just text links, not "graphical" tabs). When you click a link, I want a fancybox to open containing an external html file. This is not happening. No fancy box is launching. Below is my code. Could you guys/gals let me know what I am doing wrong and how to fix? I'm having trouble figuring it out. Thanks.</p> <p><strong>Scripts</strong>:</p> <pre><code>&lt;link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" /&gt; &lt;script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script language="javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script language="javascript" src="../js/fancybox/jquery.fancybox.js"&gt;&lt;/script&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $("#lesson-tabs").tabs(); $(".tabs-content").fancybox({ 'type':'iframe', 'maxWidth' : 580, 'maxHeight' : 390, 'fitToView' : false, 'width' : 500, 'height' : 300, 'autoSize' : false }); }); &lt;/script&gt; &lt;div class="overhide" id="lesson-tabs"&gt; &lt;ul&gt; &lt;li&gt; &lt;span class="fun2learn-add" &gt;&lt;/span&gt; &lt;a href="lessons/addition1.html" class="first-class2 tabs-content" &gt;Addition&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;span class="fun2learn-subtract" &gt;&lt;/span&gt; &lt;a href="lessons/subtraction1.html" class="first-class2 tabs-content"&gt;Subtraction&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>lessons/addition1.html code for fancybox:</strong></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Just try it!&lt;/title&gt; &lt;style&gt; div {font-family:Arial, Helvetica, sans-serif;font-size:16px;} .blkstyle {display:block;} input[type=submit] {margin-top:10px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;p&gt;If you have 14 apples, Justin has 12 and Mary gives you 7 more apples, but only gives Justin 3 apples, how many apples would you and Justin have altogether?&lt;/p&gt; &lt;form&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;24&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;42&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;36&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;16&lt;/label&gt;&lt;/span&gt; &lt;input type="submit" value="Answer" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>lessons/subtraction1.html code for fancybox:</strong></p> <pre><code> &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Just try it!&lt;/title&gt; &lt;style&gt; div {font-family:Arial, Helvetica, sans-serif;font-size:16px;} .blkstyle {display:block;} input[type=submit] {margin-top:10px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;p&gt;Jamie has 38 lives left in play for his new video game. He loses 6 lives on level Nine and 5 lives on level Twelve. He hasn't gained anymore lives until level Twenty, where he gets 4 more, but loses 1 life in play. How many lives does Jamie have left in play?&lt;/p&gt; &lt;form&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label &gt;26&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;30&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;22&lt;/label&gt;&lt;/span&gt; &lt;span class="blkstyle"&gt;&lt;input type="radio" name="apples" /&gt;&lt;label&gt;16&lt;/label&gt;&lt;/span&gt; &lt;input type="submit" value="Answer" class="blkstyle"/&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://i.stack.imgur.com/qheAT.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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