logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-21-2011, 06:15 PM   #1
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default Enable multiple same-page popUps with JQuery

The [under construction] page referenced here is

http://www.johnmossdesigns.com/gallery.html


I've been able to modify properties with the JQuery magic! code both in the js and the CSS but am getting stumped on this one.

I have 6 pop up boxes under 6 photo galleries. The pop-ups are activated by clicking on the red arrow "read more"...

Right now the first two (small sites, large sites) are the only ones active. Each pop up has it's own wording, but the js script is only reading the last entry. (If you click on the 'small site' button, it is pulling the large site copy.)

The code I pulled was initially set up for a single window on the page, and hence all the css was set to ID, which I changed to class. Everything works fine, except I need for the js script to recognize each pop-up as unique.

Here is one section of the HTML, and the corresponding and script.

The question is what, and where to insert modified script and/or code?

HTML Code:
 
<!--start JQuery-->

<div class="button"><input type="image" src="images/submitButton.gif" alt="Read more"/></div>
 </center>
 <div class="popupContact">

 <h1>More on Smaller Sites...</h1>

 <p class="contactArea">
   <span class="JQBoxPhoto"><img src="images/popUpPicturesSmallSites.gif" width="125" height="71" alt="smallSite Gallery Picture"></span>.....my copy...
</p>

<a class="popupContactClose"><img src="images/closeP.gif" width="78" height="25" alt="closeWindow"></a>
  
</div><!--end popUpContact-->
<div class="backgroundPopup"></div>

<!--end JQuery-->
Code:
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
 //loads popup only if it is disabled
 if(popupStatus==0){
  $(".backgroundPopup").css({
   "opacity": "0.7"
  });
  $(".backgroundPopup").fadeIn("slow");
  $(".popupContact").fadeIn("slow");
  popupStatus = 1;
 }
}
//disabling popup with jQuery magic!
function disablePopup(){
 //disables popup only if it is enabled
 if(popupStatus==1){
  $(".backgroundPopup").fadeOut("slow");
  $(".popupContact").fadeOut("slow");
  popupStatus = 0;
 }
}
//centering popup
function centerPopup(){
 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $(".popupContact").height();
 var popupWidth = $(".popupContact").width();
 //centering
 $(".popupContact").css({
  "position": "fixed",
  "top": windowHeight/2-popupHeight/2,
  "left": windowWidth/2-popupWidth/2
 });
 //only need force for IE6
 
 $(".backgroundPopup").css({
  "height": windowHeight
 });
 
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 
 //LOADING POPUP
 //Click the button event!
 $(".button").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup();
 });
    
 //CLOSING POPUP
 //Click the x event!
 $(".popupContactClose").click(function(){
  disablePopup();
 });
 //Click out event!
 $(".backgroundPopup").click(function(){
  disablePopup();
 });
 //Press Escape event!
 $(document).keypress(function(e){
  if(e.keyCode==27 && popupStatus==1){
   disablePopup();
  }
 });
});
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-21-2011, 07:37 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Hi Johh, why using another script while you have already prettyPhoto on your page? Prettyphoto does support inline content and multiple different ones on the same page just as your gallery.

Check the inline content demo:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 09-21-2011, 07:44 PM   #3
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

Valid point & good call; didn't even occur to me. I'll dive into it. Thanx
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-21-2011, 10:06 PM   #4
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

http://www.johnmossdesigns.com/gallery.html (separate prettyPhoto & JQ magic scripts)

http://www.johnmossdesigns.com/gallery1.html (both scripts prettyPhoto, & pardon the mess!)

OK, I've played with it a bit but it occurs to me I have to have two separate scripts anyway, as I want differences in the box displays. The JQ magic CSS seems a bit easier to manipulate... That said, I've still got issues though:

JQuery Magic
  • The initial problem above is still an active case. And also somewhere along the way I've managed to screw up the opacity when the JQ Magic box opens up. Where before it was partially blacked out, now it's total, except for the gallery images, which do not dim at all...
prettyPhoto
  • The (gallery pictures) prettyPhoto window is jerky when the screen is scrolled. Anyone know a fix for that? Manipulate the scrollbar to see the effect. Also it doesn't center properly when opened.
  • The alt attribute with this script is displayed above the screen but is not viewable or partially obscured into the browser on load. Adjust margin on this? If so where? Kinda would like to change the border. Don't see where the attribute is though..
  • In the prettyPhoto js, the allow resize does it's job allright, but the default width & height settings are being ignored. When changed nothing happens. Reset somewhere else assumedly, but where?
(The css, below, is not very intuitive so sorry for that one!)

prettyPhoto CSS
Code:
div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat}
div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x}
div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat}
div.facebook .pp_content .ppt{color:#000}
div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y}
div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y}
div.facebook .pp_content{background:#fff}
div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.facebook #pp_full_res .pp_inline{color:#000}
div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat}
div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px}
div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default}
div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px}
div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default}
div.facebook .pp_nav{margin-top:0}div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px}
div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px}
div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px}
div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer}
div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer}
div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat}
div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x}
div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat}
div.pp_pic_holder a:focus{outline:none}
div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000}
.pp_top{height:20px;position:relative}* html .pp_top{padding:0 20px}
.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_top .pp_middle{left:0;position:static}
.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_content{height:40px}.pp_fade{display:none}
.pp_content_container{position:relative;text-align:left;width:100%}
.pp_content_container .pp_left{padding-left:20px}
.pp_content_container .pp_right{padding-right:20px}
.pp_content_container .pp_details{float:left;margin:10px 0 2px 0}
.pp_description{display:none;margin:0 0 5px 0}
.pp_nav{clear:left;float:left;margin:3px 0 0 0}
.pp_nav p{float:left;margin:2px 4px}
.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}
a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}
.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000}
.pp_gallery{left:50%;margin-top:-50px;position:absolute;z-index:10000}
.pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;overflow:hidden;padding:0;position:relative}
.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden}
.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff}
.pp_gallery ul a img{border:0}
.pp_gallery li{display:block;float:left;margin:0 5px 0 0}
.pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}
.pp_gallery li.default a img{display:none}
.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important}
a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}
a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}
a.pp_close{display:block;float:right;line-height:22px;text-indent:-10000px}
.pp_bottom{height:20px;position:relative}
* html .pp_bottom{padding:0 20px}
.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_bottom .pp_middle{left:0;position:static}
.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_loaderIcon{display:block;height:24px;left:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px}
#pp_full_res{line-height:1 !important}
#pp_full_res .pp_inline{text-align:left}
#pp_full_res .pp_inline p{margin:0 0 15px 0}
div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
* html .clearfix {height:1%} .lightbox-hide {display: none;}
.clearfix {display:block}
__________________
LinkedIn: jM

Last edited by johnMoss; 09-21-2011 at 10:14 PM.. Reason: add link
johnMoss is offline   Reply With Quote
Old 09-22-2011, 12:28 AM   #5
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

Update:

Quote:
Originally Posted by johnMoss View Post
http://www.johnmossdesigns.com/gallery.html


JQuery Magic
  • The initial problem above is still an active case.
prettyPhoto
  • The (gallery pictures) prettyPhoto window is jerky when the screen is scrolled. Anyone know a fix for that? Manipulate the scrollbar to see the effect. Kinda would like to change the border. Don't see where the attribute is though..
I resolved the other issues, these I'm still working on...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-22-2011, 03:29 AM   #6
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

http://www.johnmossdesigns.com/gallery.html

http://www.johnmossdesigns.com/galleryClassTest.html

I've loaded two identical pages, except that on the second page the Jquery Magic elements have been changed from id to class. The 'ClassTest' page has been given it's own unique JS & CSS files & links, where all is adjusted to class. After a lot of research it looks like an additional line of script is needed to declare the presence of an array in the JS script? I'm getting in over my head on the code but I do get the impression it boils down to some very simple changes. Just don't know how to install them...
__________________
LinkedIn: jM

Last edited by johnMoss; 09-22-2011 at 03:30 AM.. Reason: add info
johnMoss is offline   Reply With Quote
Old 09-24-2011, 01:33 PM   #7
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

I fired off a letter to the author, haven't heard back yet...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-24-2011, 04:48 PM   #8
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

Multiple instances of the popup object have to be created. Not finding a tutorial so far that walks the reader through the code implantation. If anybody knows of one... still looking... New javascript objects have to be created, question remains where to put and how to reference them.
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:14 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com