SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Code in Jquery Novice to Ninja - Simple Modal Dialog not work in crome and safari

    Chapter 7: Forms, Controls, and Dialogs
    page number: 277
    Simple Modal Dialog


    The Modal Dialog box perfectly works in Mozilla. however doesnot work in crome and safari.. I have played around a lot..but cant get it work.
    I have modified the dialog box and used thought out my website... please help me get it done...

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    It doesn't work... but are you copying the code from the book or using their code archive? Exactly as it goes? are you doing any modification? (then please, post your code) What's the error?

    Be a bit more specific, please

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    It doesn't work... but are you copying the code from the book or using their code archive? Exactly as it goes? are you doing any modification? (then please, post your code) What's the error?

    Be a bit more specific, please
    I have copied entire code from book. Code archive not working..please try the code archive..open it on safari or chrome...you will find it not working

    When I click to open the dialog. Just overlay is showing. The actual dialog box is not showing

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    Sorry for the delay in answering. I've been more than busy and I haven't had the chance to download the book's code but I promise that I will do it as soon as I get home this evening

    I hope that you will forgive me

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    Yep, you're right. It doesn't work in Chrome. I can tell you that on the list of corrections it seems that there's a bug in JQuery 1.4 and they suggest you that you use jQuery 1.4.2 (since the latest version is 1.7.1 that shouldn't be a problem). I don't think that this error comes from this particular bug though.

    Not sure if I have the time to look into this... do you want me to move this thread to the javascript forum so someone can have a look at it?

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    Yep, you're right. It doesn't work in Chrome. I can tell you that on the list of corrections it seems that there's a bug in JQuery 1.4 and they suggest you that you use jQuery 1.4.2 (since the latest version is 1.7.1 that shouldn't be a problem). I don't think that this error comes from this particular bug though.

    Not sure if I have the time to look into this... do you want me to move this thread to the javascript forum so someone can have a look at it?


    Please..

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    I thought that you already solved it because I took so long to asnwer... moving it is then!

  8. #8
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    @Rabbit6147 ; needs a bit of help here... the code in the book doesn't work in all browsers

    This is a simple modal box using jQuery (at the time this was creted, version 1.4). Please, Rabbit, correct me if I'm posting the wrong files

    HTML
    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>StarTrackr!</title>
        
        <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
      <link rel="stylesheet" href="../../css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8"/>
      <link rel="stylesheet" href="dialog.css" type="text/css" media="screen" charset="utf-8"/>
    
        <script src="../../lib/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="../../lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>StarTrackr!</h1
        ></div>
            <div id="content">
                <h2>
            Welcome!
          </h2>
          <div id="navigation">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Buy Now!</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Gift Ideas</a></li>
            </ul>
          </div>
          <p id="intro">
            Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!    
          </p>
          <p id="disclaimer">
            Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. You must agree to our End-User License Agreement: <a href="#" id="eulaOpen">Open eula</a>
          </p>
          <div id="overlay">
            <div id="blanket"></div>
          </div>
          <!-- the dialog contents -->
          <div id="eula" class="dialog">
            <h4>End User License Agreement</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus varius orci, id consequat urna dapibus at. Sed rhoncus, purus in cursus hendrerit, tellus est fermentum lectus, fringilla pretium lacus lectus at orci. Duis ante justo, eleifend interdum accumsan porta, congue lobortis lacus. Morbi pulvinar arcu ac ante pulvinar id dapibus orci tincidunt. Sed iaculis accumsan purus, eget dapibus tortor molestie quis. Suspendisse hendrerit vulputate lacus, id dapibus leo placerat auctor. Nulla pharetra risus eget sapien sodales ultricies. Ut et est risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sed leo enim. Proin pretium euismod dolor ac tempus. Suspendisse pellentesque est nec nibh pellentesque hendrerit. </p>
            <div class="buttons">
              <a href="#" class="ok">Agree</a>
              <a href="#" class="cancel">Disagree</a>
            </div>
          </div>
          
          <div id="news">
            <h2>Latest News</h2>
            <p>
              Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
              <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
            </p>
            <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
          </div>
      
            </div>
    
            <div id="footer">
                <p>
                    &copy; Copyright 2010 CelebriTracker Productions
                </p>
            </div>
        </div>
    </body>
    </html>
    The CSS

    Code:
    #overlay {
        display:none;
        top: 0; right: 0; bottom: 0; left: 0;
        margin-right: auto;
        margin-left: auto;
        position: fixed;
        width: 100%;
        z-index: 100;
    }
    #blanket {
        background-color: #000000;    
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        opacity: 0.8;
        position: absolute;
        width: 100%;
    }
    .dialog {
        display: none;
        margin: 100px auto;
        position: relative;
      width: 500px;
      padding: 40px;
      background: white;
      -moz-border-radius: 10px;
    }
    And, of course, the Javascript
    Code:
    $(document).ready(function(){
      $('#eulaOpen').click(function() {
        openDialog('#eula');
      });
      $('#eula')
      .find('.ok, .cancel')
      .live('click', function() {
          closeDialog(this);
      })
      .end()
      .find('.ok')
      .live( 'click', function(){
          // Clicked Agree!
        console.log('clicked agree!');
      })
      .end()
      .find('.cancel')
      .live('click', function() {
          // Clicked disagree!
        console.log('clicked disagree!');
      });
    });
    
    function openDialog(selector) {
        $(selector)
            .clone()
            .show()
            .appendTo('#overlay')
            .parent()
            .fadeIn('fast');
    }
      
    function closeDialog( selector ) {
    $(selector)
        .parents('#overlay')
        .fadeOut('fast', function() {
            $(this)
                .find('.dialog')
                .remove();
        });
    }


Bookmarks

Posting Permissions

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