Popup.js works great on local but not on my remote server


i redesigned on family website www.lamppakuuma.com using dreamweaver , lot of tutorials on youtube, timothy training videos , framework.  when working on locally in dreamweaver looks how want see image attached.  how looks when loaded on web.  http://www.lamppakuuma.com/kuuma-vapor-fire-high-efficiency-wood-gasification-furnace.html 

 

thoughts or suggestions appreciated?

 

thanks,

 

garrett

 

 

img_0499[2].jpg

 

sorry poor image has click here information opens box. 

 

detailed popup.js , popup.css below

 

 

 

* jquery reveal plugin 1.0

* www.zurb.com

* copyright 2010, zurb

* free use under mit license.

* http://www.opensource.org/licenses/mit-license.php

*/

 

 

 

 

(function($) {

 

 

/*---------------------------

defaults reveal

----------------------------*/

 

/*---------------------------

listener data-reveal-id attributes

----------------------------*/

 

 

          $('a[data-reveal-id]').live('click', function(e) {

                    e.preventdefault();

                    var modallocation = $(this).attr('data-reveal-id');

                    $('#'+modallocation).reveal($(this).data());

          });

 

 

/*---------------------------

extend , execute

----------------------------*/

 

 

    $.fn.reveal = function(options) {

 

 

        var defaults = { 

                        animation: 'fadeandpop', //fade, fadeandpop, none

                        animationspeed: 300, //how fast animtions are

                        closeonbackgroundclick: true, //if click background modal close?

                        dismissmodalclass: 'close-reveal-modal' //the class of button or element close open modal

              };

 

        //extend dem' options

        var options = $.extend({}, defaults, options);

 

        return this.each(function() {

 

/*---------------------------

global variables

----------------------------*/

                  var modal = $(this),

                            topmeasure  = parseint(modal.css('top')),

                                        topoffset = modal.height() + topmeasure,

                              locked = false,

                                        modalbg = $('.reveal-modal-bg');

 

 

/*---------------------------

create modal bg

----------------------------*/

                              if(modalbg.length == 0) {

                                        modalbg = $('<div class="reveal-modal-bg" />').insertafter(modal);

                              }                       

 

/*---------------------------

open , add closing listeners

----------------------------*/

                  //open modal immediately

                        openmodal();

 

                              //close modal listeners

                              var closebutton = $('.' + options.dismissmodalclass).bind('click.modalevent',closemodal)

                              if(options.closeonbackgroundclick) {

                                        modalbg.css({"cursor":"pointer"})

                                        modalbg.bind('click.modalevent',closemodal)

                              }

 

 

/*---------------------------

open & close animations

----------------------------*/

                              //entrance animations

                              function openmodal() {

                                        modalbg.unbind('click.modalevent');

                                        $('.' + options.dismissmodalclass).unbind('click.modalevent');

                                        if(!locked) {

                                                  lockmodal();

                                                  if(options.animation == "fadeandpop") {

                                                            modal.css({'top': $(document).scrolltop()-topoffset, 'opacity' : 0, 'visibility' : 'visible'});

                                                            modalbg.fadein(options.animationspeed/2);

                                                            modal.delay(options.animationspeed/2).animate({

                                                                      "top": $(document).scrolltop()+topmeasure,

                                                                      "opacity" : 1

                                                            }, options.animationspeed,unlockmodal());

                                                  }

                                                  if(options.animation == "fade") {

                                                            modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrolltop()+topmeasure});

                                                            modalbg.fadein(options.animationspeed/2);

                                                            modal.delay(options.animationspeed/2).animate({

                                                                      "opacity" : 1

                                                            }, options.animationspeed,unlockmodal());

                                                  }

                                                  if(options.animation == "none") {

                                                            modal.css({'visibility' : 'visible', 'top':$(document).scrolltop()+topmeasure});

                                                            modalbg.css({"display":"block"});

                                                            unlockmodal()

                                                  }  

                                        }

                              }    

 

                              //closing animation

                              function closemodal() {

                                        if(!locked) {

                                                  lockmodal();

                                                  if(options.animation == "fadeandpop") {

                                                            modalbg.delay(options.animationspeed).fadeout(options.anima tionspeed);

                                                            modal.animate({

                                                                      "top":  $(document).scrolltop()-topoffset,

                                                                      "opacity" : 0

                                                            }, options.animationspeed/2, function() {

                                                                      modal.css({'top':topmeasure, 'opacity' : 1, 'visibility' : 'hidden'});

                                                                      unlockmodal();

                                                            });

                                                  }  

                                                  if(options.animation == "fade") {

                                                            modalbg.delay(options.animationspeed).fadeout(options.anima tionspeed);

                                                            modal.animate({

                                                                      "opacity" : 0

                                                            }, options.animationspeed, function() {

                                                                      modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topmeasure});

                                                                      unlockmodal();

                                                            });

                                                  }  

                                                  if(options.animation == "none") {

                                                            modal.css({'visibility' : 'hidden', 'top' : topmeasure});

                                                            modalbg.css({'display' : 'none'});

                                                  }  

                                        }

                              }

 

/*---------------------------

animations locks

----------------------------*/

                              function unlockmodal() {

                                        locked = false;

                              }

                              function lockmodal() {

                                        locked = true;

                              }

 

        });//each call

    }//orbit plugin call

})(jquery);

 

 

 

/* timothy framework - www.timothyframework.com */

/* work licensed under mit license - http://www.opensource.org/licenses/mit-license.php */

 

 

 

 

/* color legend

 

 

dark orange #b64a23

 

 

*/

 

          .reveal-modal-bg {

                    position: fixed;

                    height: 100%;

                    width: 100%;

                    background: #000;

                    background: rgba(0,0,0,.8);

                    z-index: 100;

                    display: none;

                    top: 0;

                    left: 0;

                    }

 

          .reveal-modal {

                    visibility: hidden;

                    top: 100px;

                    left: 50%;

                    margin-left: -300px;

                    width: 520px;

                    background: #eee url(../images/modal-gloss.png) no-repeat -200px -80px;

                    position: absolute;

                    z-index: 101;

                    padding: 30px 40px 34px;

                    -moz-border-radius: 5px;

                    -webkit-border-radius: 5px;

                    border-radius: 5px;

                    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);

                    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);

                    -box-shadow: 0 0 10px rgba(0,0,0,.4);

                    }

 

          .reveal-modal.small                     { width: 200px; margin-left: -140px;}

          .reveal-modal.medium                     { width: 400px; margin-left: -240px;}

          .reveal-modal.large                     { width: 600px; margin-left: -340px;}

          .reveal-modal.xlarge                     { width: 800px; margin-left: -440px;}

 

          .reveal-modal .close-reveal-modal {

                    font-size: 22px;

                    line-height: .5;

                    position: absolute;

                    top: 8px;

                    right: 11px;

                    color: #aaa;

                    text-shadow: 0 -1px 1px rbga(0,0,0,.6);

                    font-weight: bold;

                    cursor: pointer;

                    }

          /*

 

          notes

 

          close button entity &#215;

 

          example markup

 

          <div id="mymodal" class="reveal-modal">

                    <h2>awesome. have it.</h2>

                    <p class="lead">your couch.  it's mine.</p>

                    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in ultrices aliquet placerat. duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. duis @ magna quis turpis mattis venenatis eget id diam. </p>

                    <a class="close-reveal-modal">&#215;</a>

          </div>

 

          */

these files 404 not found on server.  did upload them?

 

     <script type="text/javascript" src="js/popup.js"></script>


     
<link rel="stylesheet" href="css/popup.css">

 

 

 

nancy o.

 

 




More discussions in Dreamweaver support forum


adobe

Comments