Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Possible conflicts (Bootstrap Modal Remote & Smart-Wizard)

    Hello,

    I am creating a repository page for some quiz forms I am making for work and I am having trouble with the bootstrap modal remote option and my Smart_wizard script.

    Currently I am loading the quizzes via iFrame into the bootstrap modal, but the calling of all the iFrames on the page load is slowing down the site. Since the files are contained on the same server I thought I would try the remote option.

    I can get the quiz to pop up in the remote modal but the content is truncated. The actual 'content' section of the form is not visible. I think there is a conflict with the jquery I am using with bootstrap (since the quiz works fine on its own and via iFrame), but I do not understand enough to debug it.

    An example of the form can be found on the smart wizard page: http://techlaboratory.net/techlab/de...zard2-ajax.htm

    JS is here: http://techlaboratory.net/techlab/de...ard-2.0.min.js

    The smart wizard used JQuery 1.4.2 but I have updated it to 1.7.1 to match the bootstrap.

    I would create a fiddle for you but my work is still rocking XP so I have at least a couple more months of ie8.

    ----
    As an aside if anyone has a bit of code to optimize the loading of muliple iframes on a single page I could use that instead. I am loading 15 - 50 internal html pages via iframe (single quiz per page), but eventhough the iframes are modals the page needs to load them before rendering the full original html page. I could use some help to possibly change the modal code to load the iframe onclick of the modal window.
    Code:
     <!-- ================================================
                    Modal Section    
     ================================================== -->
    <!-- the Acronym Quiz -->
      <div class="modal hide fade myModal_slick" id="acronym" tabindex="-1">
                                        <div class="modal-header">
                                       <iframe frameborder="0" height="100%"  src="Quiz_textfiles/The_Acronym_quiz.html" scrolling="no">
                                        </iframe>
                                        </div>
    
                                        <div class="modal-footer">
                                        <button class="btn" data-dismiss="modal">Close</button>
                                        </div></div>
    <!-- General MF Quiz -->
      <div class="modal hide fade myModal_slick" id="GeneralMFQuiz" tabindex="-1">
                                        <div class="modal-header">
                                       <iframe frameborder="0" height="100%"  src="Quiz_textfiles/MF_General_quiz.html" scrolling="no">
                                        </iframe>
                                        </div>
    
    
    <div class="modal-footer">
                                            <button class="btn" data-dismiss="modal">Close</button>
                                            </div></div>
    Code:
    <tr class="gradeA ">
              <td><a data-toggle="modal" href="#acronym">The Acronym Quiz</a></td>
              <td>Henley Copy</td>
              <td>Septmber 2013</td>
              <td>-</td>
              <td class="center"> 10</td>
              <td class="center">Independent</td>
            </tr>
    
            <tr class="gradeA ">
              <td><a data-toggle="modal" href="#GeneralMFQuiz" ">General MF Quiz</a></td>
                <td>David Smith</td>
                <td>August 2013</td>
                <td><a href="Quiz_textfiles/GeneralMFquiz.txt" target="_blank">Raw Questions</a></td>    
                <td class="center"> 18</td>
                <td class="center"> Email</td>
            </tr>
                                            </div>
    Last edited by premium copy; 09-17-2013 at 04:20 PM. Reason: added the aside.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •