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
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 ×
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">×</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
Post a Comment