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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple scripts conflicting with each other

    Hello everyone,
    I've been scratching my head over this one for quite a while.

    I'm having trouble running two different scripts on my site- one named accordion and the other named lightbox. I think that it might because of a similar behavior in both the scripts (and if I had to guess I'd say maybe its preload.)

    I'd appreciate any help/questions. The page that I'm having the problem with is here: http://lehdesigns.com/bearpaws.html

    And here are the codes..

    Lightbox
    Code:
    LightboxOptions = Object.extend({
        fileLoadingImage:        'images/loading.gif',     
        fileBottomNavCloseImage: 'images/closelabel.gif',
    
        overlayOpacity: 0.8,   // controls transparency of shadow overlay
    
        animate: true,         // toggles resizing animations
        resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
        borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable
    
    	// When grouping images this is used to write: Image # of #.
    	// Change it for non-english localization
    	labelImage: "Image",
    	labelOf: "of"
    }, window.LightboxOptions || {});
    
    // -----------------------------------------------------------------------------------
    
    var Lightbox = Class.create();
    
    Lightbox.prototype = {
        imageArray: [],
        activeImage: undefined,
        
        // initialize()
        // Constructor runs on completion of the DOM loading. Calls updateImageList and then
        // the function inserts html at the bottom of the page which is used to display the shadow 
        // overlay and the image container.
        //
        initialize: function() {    
            
            this.updateImageList();
            
            this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
    
            if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
            if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
    
    	    this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
    	    this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
    
            // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
            // If animations are turned off, it will be hidden as to prevent a flicker of a
            // white 250 by 250 box.
            var size = (LightboxOptions.animate ? 250 : 1) + 'px';
            
    
            // Code inserts html at the bottom of the page that looks similar to this:
            //
            //  <div id="overlay"></div>
            //  <div id="lightbox">
            //      <div id="outerImageContainer">
            //          <div id="imageContainer">
            //              <img id="lightboxImage">
            //              <div style="" id="hoverNav">
            //                  <a href="#" id="prevLink"></a>
            //                  <a href="#" id="nextLink"></a>
            //              </div>
            //              <div id="loading">
            //                  <a href="#" id="loadingLink">
            //                      <img src="images/loading.gif">
            //                  </a>
            //              </div>
            //          </div>
            //      </div>
            //      <div id="imageDataContainer">
            //          <div id="imageData">
            //              <div id="imageDetails">
            //                  <span id="caption"></span>
            //                  <span id="numberDisplay"></span>
            //              </div>
            //              <div id="bottomNav">
            //                  <a href="#" id="bottomNavClose">
            //                      <img src="images/close.gif">
            //                  </a>
            //              </div>
            //          </div>
            //      </div>
            //  </div>
    
    
            var objBody = $$('body')[0];
    
    		objBody.appendChild(Builder.node('div',{id:'overlay'}));
    	
            objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
                Builder.node('div',{id:'outerImageContainer'}, 
                    Builder.node('div',{id:'imageContainer'}, [
                        Builder.node('img',{id:'lightboxImage'}), 
                        Builder.node('div',{id:'hoverNav'}, [
                            Builder.node('a',{id:'prevLink', href: '#' }),
                            Builder.node('a',{id:'nextLink', href: '#' })
                        ]),
                        Builder.node('div',{id:'loading'}, 
                            Builder.node('a',{id:'loadingLink', href: '#' }, 
                                Builder.node('img', {src: LightboxOptions.fileLoadingImage})
                            )
                        )
                    ])
                ),
                Builder.node('div', {id:'imageDataContainer'},
                    Builder.node('div',{id:'imageData'}, [
                        Builder.node('div',{id:'imageDetails'}, [
                            Builder.node('span',{id:'caption'}),
                            Builder.node('span',{id:'numberDisplay'})
                        ]),
                        Builder.node('div',{id:'bottomNav'},
                            Builder.node('a',{id:'bottomNavClose', href: '#' },
                                Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
                            )
                        )
                    ])
                )
            ]));
    
    
    		$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
    		$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
    		$('outerImageContainer').setStyle({ width: size, height: size });
    		$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
    		$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
    		$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
    		$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
    
            var th = this;
            (function(){
                var ids = 
                    'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 
                    'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';   
                $w(ids).each(function(id){ th[id] = $(id); });
            }).defer();
        },
    
        //
        // updateImageList()
        // Loops through anchor tags looking for 'lightbox' references and applies onclick
        // events to appropriate links. You can rerun after dynamically adding images w/ajax.
        //
        updateImageList: function() {   
            this.updateImageList = Prototype.emptyFunction;
    
            document.observe('click', (function(event){
                var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
                if (target) {
                    event.stop();
                    this.start(target);
                }
            }).bind(this));
        },
        
        //
        //  start()
        //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
        //
        start: function(imageLink) {    
    
            $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
    
            // stretch overlay to fill page and fade in
            var arrayPageSize = this.getPageSize();
            $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
    
            new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
    
            this.imageArray = [];
            var imageNum = 0;       
    
            if ((imageLink.rel == 'lightbox')){
                // if image is NOT part of a set, add single image to imageArray
                this.imageArray.push([imageLink.href, imageLink.title]);         
            } else {
                // if image is part of a set..
                this.imageArray = 
                    $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                    collect(function(anchor){ return [anchor.href, anchor.title]; }).
                    uniq();
                
                while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
            }
    
            // calculate top and left offset for the lightbox 
            var arrayPageScroll = document.viewport.getScrollOffsets();
            var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
            var lightboxLeft = arrayPageScroll[0];
            this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
            
            this.changeImage(imageNum);
        },
    
        //
        //  changeImage()
        //  Hide most elements and preload image in preparation for resizing image container.
        //
        changeImage: function(imageNum) {   
            
            this.activeImage = imageNum; // update global var
    
            // hide elements during transition
            if (LightboxOptions.animate) this.loading.show();
            this.lightboxImage.hide();
            this.hoverNav.hide();
            this.prevLink.hide();
            this.nextLink.hide();
    		// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
            this.imageDataContainer.setStyle({opacity: .0001});
            this.numberDisplay.hide();      
            
            var imgPreloader = new Image();
            
            // once image is preloaded, resize image container
    
    
            imgPreloader.onload = (function(){
                this.lightboxImage.src = this.imageArray[this.activeImage][0];
                this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
            }).bind(this);
            imgPreloader.src = this.imageArray[this.activeImage][0];
        },
    
        //
        //  resizeImageContainer()
        //
        resizeImageContainer: function(imgWidth, imgHeight) {
    
            // get current width and height
            var widthCurrent  = this.outerImageContainer.getWidth();
            var heightCurrent = this.outerImageContainer.getHeight();
    
            // get new width and height
            var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
            var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
    
            // scalars based on change from old to new
            var xScale = (widthNew  / widthCurrent)  * 100;
            var yScale = (heightNew / heightCurrent) * 100;
    
            // calculate size difference between new and old image, and resize if necessary
            var wDiff = widthCurrent - widthNew;
            var hDiff = heightCurrent - heightNew;
    
            if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
            if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 
    
            // if new and old image are same size and no scaling transition is necessary, 
            // do a quick pause to prevent image flicker.
            var timeout = 0;
            if ((hDiff == 0) && (wDiff == 0)){
                timeout = 100;
                if (Prototype.Browser.IE) timeout = 250;   
            }
    
            (function(){
                this.prevLink.setStyle({ height: imgHeight + 'px' });
                this.nextLink.setStyle({ height: imgHeight + 'px' });
                this.imageDataContainer.setStyle({ width: widthNew + 'px' });
    
                this.showImage();
            }).bind(this).delay(timeout / 1000);
        },
        
        //
        //  showImage()
        //  Display image and begin preloading neighbors.
        //
        showImage: function(){
            this.loading.hide();
            new Effect.Appear(this.lightboxImage, { 
                duration: this.resizeDuration, 
                queue: 'end', 
                afterFinish: (function(){ this.updateDetails(); }).bind(this) 
            });
            this.preloadNeighborImages();
        },
    
        //
        //  updateDetails()
        //  Display caption, image number, and bottom nav.
        //
        updateDetails: function() {
        
            // if caption is not null
            if (this.imageArray[this.activeImage][1] != ""){
                this.caption.update(this.imageArray[this.activeImage][1]).show();
            }
            
            // if image is part of set display 'Image x of x' 
            if (this.imageArray.length > 1){
                this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
            }
    
            new Effect.Parallel(
                [ 
                    new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
                    new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 
                ], 
                { 
                    duration: this.resizeDuration, 
                    afterFinish: (function() {
    	                // update overlay size and update nav
    	                var arrayPageSize = this.getPageSize();
    	                this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
    	                this.updateNav();
                    }).bind(this)
                } 
            );
        },
    
        //
        //  updateNav()
        //  Display appropriate previous and next hover navigation.
        //
        updateNav: function() {
    
            this.hoverNav.show();               
    
            // if not first image in set, display prev image button
            if (this.activeImage > 0) this.prevLink.show();
    
            // if not last image in set, display next image button
            if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
            
            this.enableKeyboardNav();
        },
    
        //
        //  enableKeyboardNav()
        //
        enableKeyboardNav: function() {
            document.observe('keydown', this.keyboardAction); 
        },
    
        //
        //  disableKeyboardNav()
        //
        disableKeyboardNav: function() {
            document.stopObserving('keydown', this.keyboardAction); 
        },
    
        //
        //  keyboardAction()
        //
        keyboardAction: function(event) {
            var keycode = event.keyCode;
    
            var escapeKey;
            if (event.DOM_VK_ESCAPE) {  // mozilla
                escapeKey = event.DOM_VK_ESCAPE;
            } else { // ie
                escapeKey = 27;
            }
    
            var key = String.fromCharCode(keycode).toLowerCase();
            
            if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
                this.end();
            } else if ((key == 'p') || (keycode == 37)){ // display previous image
                if (this.activeImage != 0){
                    this.disableKeyboardNav();
                    this.changeImage(this.activeImage - 1);
                }
            } else if ((key == 'n') || (keycode == 39)){ // display next image
                if (this.activeImage != (this.imageArray.length - 1)){
                    this.disableKeyboardNav();
                    this.changeImage(this.activeImage + 1);
                }
            }
        },
    
        //
        //  preloadNeighborImages()
        //  Preload previous and next images.
        //
        preloadNeighborImages: function(){
            var preloadNextImage, preloadPrevImage;
            if (this.imageArray.length > this.activeImage + 1){
                preloadNextImage = new Image();
                preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
            }
            if (this.activeImage > 0){
                preloadPrevImage = new Image();
                preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
            }
        
        },
    
        //
        //  end()
        //
        end: function() {
            this.disableKeyboardNav();
            this.lightbox.hide();
            new Effect.Fade(this.overlay, { duration: this.overlayDuration });
            $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
        },
    
        //
        //  getPageSize()
        //
        getPageSize: function() {
    	        
    	     var xScroll, yScroll;
    		
    		if (window.innerHeight && window.scrollMaxY) {	
    			xScroll = window.innerWidth + window.scrollMaxX;
    			yScroll = window.innerHeight + window.scrollMaxY;
    		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    			xScroll = document.body.scrollWidth;
    			yScroll = document.body.scrollHeight;
    		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    			xScroll = document.body.offsetWidth;
    			yScroll = document.body.offsetHeight;
    		}
    		
    		var windowWidth, windowHeight;
    		
    		if (self.innerHeight) {	// all except Explorer
    			if(document.documentElement.clientWidth){
    				windowWidth = document.documentElement.clientWidth; 
    			} else {
    				windowWidth = self.innerWidth;
    			}
    			windowHeight = self.innerHeight;
    		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    			windowWidth = document.documentElement.clientWidth;
    			windowHeight = document.documentElement.clientHeight;
    		} else if (document.body) { // other Explorers
    			windowWidth = document.body.clientWidth;
    			windowHeight = document.body.clientHeight;
    		}	
    		
    		// for small pages with total height less then height of the viewport
    		if(yScroll < windowHeight){
    			pageHeight = windowHeight;
    		} else { 
    			pageHeight = yScroll;
    		}
    	
    		// for small pages with total width less then width of the viewport
    		if(xScroll < windowWidth){	
    			pageWidth = xScroll;		
    		} else {
    			pageWidth = windowWidth;
    		}
    
    		return [pageWidth,pageHeight];
    	}
    }
    
    document.observe('dom:loaded', function () { new Lightbox(); });

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and here's the accordion code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    
    <script type="text/javascript">
    
    
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    
    </script>
    
    
    <style type="text/css">
    
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    }
    
    .applemenu div.silverheader a{
    background: black url(silvergradient.gif) repeat-x center left;
    font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 5px 0;
    padding-left: 8px;
    text-decoration: none;
    }
    
    
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    
    
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url(silvergradientover.gif);
    color: white;
    }
    
    .applemenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    padding: 5px;
    height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="applemenu">
    <div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	<img src="http://i27.tinypic.com/sy7295.gif" />
    	</div>
    <div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>		
    </div>
    
    <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
    <p>
    - <a href="current.htm?silverheader=0">Expand 1st header within "submenuheader" header group</a><br />
    </p>
    
    <p>Helpful links: </p>
    <p>
    - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
    - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
    </p>
    
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,978
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Surely there must be a good accordion menu based on jQuery.That's what I would look for.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,456
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Old Pedant View Post
    The first one is Prototype and the other is jQuery. I'm not sure if the 2 frameworks collide.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Surely there must be a good accordion menu based on jQuery.That's what I would look for.
    Maybe finding a different menu would be easier than rewriting the script (I didnt even THINK of getting another menu)- I'm completely baffled by all of it, but willing to learn!

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, and I noticed that when I deleted the
    Code:
    </script>
    right after the first paragraph of code for the accordion script(which would make the menu not work), lightbox would work just fine.

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,978
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Darn, it does use jQuery. Sheesh, you'd think they would make two applications that use jQuery to be compatible. But still, finding another menu might be easier.


  •  

    Posting Permissions

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