JavaScript - Mootools And Jd Gallery Ie 8 Java Issue
Im coding with Mootools and JD Gallery I am running into a annoying Java Script Problem or CSS not sure.
Here is the site www.NAFC.TV if you view it in FF it looks fine but in IE 8 you will find a space That separates the Picture From the JAVA thumbnails for the rotator making the images mispositioned and cut off. I cant figure out why that is happening can someone please help Thanks Similar Tutorialshi I am creating a gallery using my flickr feed. I have the bones of it working the only issue is with the thumbnail pulled from flickr. You get the option of small medium and large whicj Im using meduim. I want to add an image border around the thumbnails using a background image but when I add the styles it wont work. If i add a width to the img tag it will distrit the images because its being pulled from the flickr api anyone any ideas on how to get the background image working? html code is here Code: <body> <!-- Some Content --> <div id="gallery"> <input type='hidden' id='current_page' /> <input type='hidden' id='show_per_page' /> <div id="flickr"> </div> <div id='page_navigation'></div> </div> </body> CSS for the img is Code: [.hidden { display: none; } div#flickr a.lightbox img { border: 5px solid #b3aaa4; margin-left: 5px; margin-right: 5px; margin-bottom:30px } and the java script is here Code: $(function() { $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_m.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo("#flickr"); }); $("a.lightbox").lightBox(); }); }); anyone? mediasource.saymikeo.com At the bottom of this page, click the web or video big white box. Then turn your attention to the select boxes. When you select either of the first two choices, another box should pop up next to the select box. That box should populate with other choices. 1. My problem is the secondary box does not populate with the correct data. 2. When you select option 3 or 4 the box should disappear. This works in Firefox. This is done through a JSON call in Mootools. If you can figure this out I will think you are totally awesome. First for going through my messy code and second for being able fix it. Your assistance is greatly appreciated. This is the base function that calls view_category() which calls add_select_box(); Code: function build_page(url, id){ $('ajax_box').set('html', ''); dbug.log('Obj URL: ', id, url); // Get the requested view var view = new Request.JSON({ url: url, onSuccess: function(jsonObj){ view_category(jsonObj.selectbar, id); } }).send().chain(function(){ new Fx.Tween(service).start('opacity', '1'); }); } This is the view_category function. Its purpose is to build everything below the select box. It calls the add_select_box. Code: // Viewing the Title, Description and sub descriptions function view_category(oSelect, id){ add_select_box(oSelect, id); oSelect.each(function(oOptions){ if(oOptions.id == id){ var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom'); oOptions.options.each(function(oSub){ var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box if(oSub.sub != undefined){ // Expanding and Colapsing Link var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description); oSub.sub.each(function(oSubOptions){ var sub_div = new Element('div').inject(expand, 'bottom'); var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description if(oSubOptions.sub_description != undefined){ var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description); var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description }; }); }; }); } }); }; This code adds the select box and changes the select box when the select button is changed. Code: function add_select_box(oSelect, id){ var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box')); var formSelectVar = new Element('select'); oSelect.each(function(item){ if(item.id == id){ var continue_div = new Element('div', {id:'continue'}).inject(select_box); new Element('a', {href:'javascript:void(0)'}).inject(continue_div); if(item.id == id){ // Create each option for the first select box item.options.each(function(myArray){ var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar); }); new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top'); formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box $('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change var categoryValue = $('ajax_box').getElement('select').value; if($('sub_select')){ var formSelectVar = $('sub_select').set('html', ''); }else { var formSelectVar = new Element('select', {id:'sub_select'}); } // Make a secondary select box for additional options var notdefined; item.options.each(function(myArray){ if(myArray.sub != undefined && myArray.title == categoryValue){ dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue) myArray.sub.each(function(subArray){ var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar); }); notdefined = false; }else if(myArray.title == categoryValue){ dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue) notdefined = true; } }); dbug.log('Not Defined: ', notdefined); if(notdefined != true){ new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top'); formSelectVar.inject($('select_box')); // This is the second select box }else{ formSelectVar.dispose(); } }); }; } }); }; Hi guys, I'm relatively new to coding, so apologies if this is something really trivial or even uneccessarily long. I'm currently running a mootools and a jquery script on the same page (http://tamwardsings.squarespace.com/media). Jquery = Jplayer audio player mootools = video light box Initially the jquery script wasn't working but I resolved that with var $j = jQuery.noConflict(); Now, while both scripts run in Chrome and Safari Browsers, firefox will not initiate either script. Clicking an image with a link to the video lightbox instead sends you directly to the anchored link, and the audio player, fails to play. Videobox script: Code: var Videobox = { init: function (options) { // init default options this.options = Object.extend({ resizeDuration: 400, // Duration of height and width resizing (ms) initialWidth: 250, // Initial width of the box (px) initialHeight: 250, // Initial height of the box (px) defaultWidth: 425, // Default width of the box (px) defaultHeight: 350, // Default height of the box (px) animateCaption: true, // Enable/Disable caption animation flvplayer: 'storage/js/flvplayer.swf' }, options || {}); this.anchors = []; $A($$('a')).each(function(el){ if(el.rel && el.href && el.rel.test('^vidbox', 'i')) { el.addEvent('click', function (e) { e = new Event(e); e.stop(); this.click(el); }.bind(this)); this.anchors.push(el); } }, this); this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body); this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body); this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body); this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer); new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this); this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom); this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom); new Element('div').setStyle('clear', 'both').injectInside(this.bottom); var nextEffect = this.nextEffect.bind(this); this.fx = { overlay: this.overlay.effect('opacity', {duration: 500}).hide(), center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}), bottom: this.bottom.effect('margin-top', {duration: 400}) }; }, click: function(link) { return this.open (link.href, link.title, link.rel); }, open: function(sLinkHref, sLinkTitle, sLinkRel) { this.href = sLinkHref; this.title = sLinkTitle; this.rel = sLinkRel; this.position(); this.setup(); this.video(this.href); this.top = Window.getScrollTop() + (Window.getHeight() / 15); this.center.setStyles({top: this.top+'px', display: ''}); this.fx.overlay.start(0.8); this.step = 1; this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center'); this.caption.innerHTML = this.title; this.fx.center.start({'height': [this.options.contentsHeight]}); }, setup: function(){ var aDim = this.rel.match(/[0-9]+/g); this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth; this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight; }, position: function(){ this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'}); }, video: function(sLinkHref){ if (sLinkHref.match(/youtube\.com\/watch/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('='); this.videoID = videoId[1]; this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/metacafe\.com\/watch/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('/'); this.videoID = videoId[4]; this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/google\.com\/videoplay/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('='); this.videoID = videoId[1]; this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/ifilm\.com\/video/i)) { this.flash = true; var hRef = sLinkHref; var videoId = hRef.split('video/'); this.videoID = videoId[1]; this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000"); this.so.addVariable("flvbaseclip", this.videoID+"&"); this.so.addParam("wmode", "transparent"); } else if (sLinkHref.match(/\.mov/i)) { this.flash = false; if (navigator.plugins && navigator.plugins.length) { this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>'; } else { this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>'; } } else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) { this.flash = false; this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>' } else if (sLinkHref.match(/\.flv/i)) { this.flash = true; this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000"); } else { this.flash = true; this.videoID = sLinkHref; this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0"); } }, nextEffect: function(){ switch (this.step++){ case 1: this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]}); break; this.step++; case 2: this.center.setStyle('background','#fff'); this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ; this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''}); if (this.options.animateCaption){ this.fx.bottom.set(-this.bottom.offsetHeight); this.bottomContainer.style.height = ''; this.fx.bottom.start(0); break; } this.bottomContainer.style.height = ''; this.step++; } }, close: function(){ this.fx.overlay.start(0); this.center.style.display = this.bottomContainer.style.display = 'none'; this.center.innerHTML = ''; return false; } }; window.addEvent('domready', Videobox.init.bind(Videobox)); HTML for videobox: Code: <script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script> <link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" /> <div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div> Jplayer javascript: Code: //<![CDATA[ var $j = jQuery.noConflict(); $j(document).ready(function(){ var Playlist = function(instance, playlist, options) { var self = this; this.instance = instance; // String: To associate specific HTML with this playlist this.playlist = playlist; // Array of Objects: The playlist this.options = options; // Object: The jPlayer constructor options for this playlist this.current = 0; this.cssId = { jPlayer: "jquery_jplayer_", interface: "jp_interface_", playlist: "jp_playlist_" }; this.cssSelector = {}; $j.each(this.cssId, function(entity, id) { self.cssSelector[entity] = "#" + id + self.instance; }); if(!this.options.cssSelectorAncestor) { this.options.cssSelectorAncestor = this.cssSelector.interface; } $j(this.cssSelector.jPlayer).jPlayer(this.options); $j(this.cssSelector.interface + " .jp-previous").click(function() { self.playlistPrev(); $j(this).blur(); return false; }); $j(this.cssSelector.interface + " .jp-next").click(function() { self.playlistNext(); $j(this).blur(); return false; }); }; Playlist.prototype = { displayPlaylist: function() { var self = this; $j(this.cssSelector.playlist + " ul").empty(); for (i=0; i < this.playlist.length; i++) { var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>"; listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>"; // Create links to free media if(this.playlist[i].free) { var first = true; listItem += "<div class='jp-free-media'>("; $j.each(this.playlist[i], function(property,value) { if($j.jPlayer.prototype.format[property]) { // Check property is a media format. if(first) { first = false; } else { listItem += " | "; } listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>"; } }); listItem += ")</span>"; } listItem += "</li>"; // Associate playlist items with their media $j(this.cssSelector.playlist + " ul").append(listItem); $j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() { var index = $j(this).data("index"); if(self.current !== index) { self.playlistChange(index); } else { $j(self.cssSelector.jPlayer).jPlayer("play"); } $j(this).blur(); return false; }); // Disable free media links to force access via right click if(this.playlist[i].free) { $j.each(this.playlist[i], function(property,value) { if($j.jPlayer.prototype.format[property]) { // Check property is a media format. $j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() { var index = $j(this).data("index"); $j(self.cssSelector.playlist + "_item_" + index).click(); $j(this).blur(); return false; }); } }); } } }, playlistInit: function(autoplay) { if(autoplay) { this.playlistChange(this.current); } else { this.playlistConfig(this.current); } }, playlistConfig: function(index) { $j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); $j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); this.current = index; $j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); }, playlistChange: function(index) { this.playlistConfig(index); $j(this.cssSelector.jPlayer).jPlayer("play"); }, playlistNext: function() { var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0; this.playlistChange(index); }, playlistPrev: function() { var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1; this.playlistChange(index); } }; var audioPlaylist = new Playlist("1", [ { name:"Tempered Song", mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" }, { name:"Hidden", mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3" } ], { ready: function() { audioPlaylist.displayPlaylist(); audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay. }, ended: function() { audioPlaylist.playlistNext(); }, play: function() { $j(this).jPlayer("pauseOthers"); }, swfPath: "storage/js", supplied: "mp3" }); $j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")}); $j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")}); }); //]]> Any help on this matter would be greatly appreciated, Josh Posted this in the wrong forum earlier. I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads. Any help would be appreciated. Hi all, I have found a nice mootools script and it's using the 1.2.4 version of mootools. The problem is that my website is already using the 1.12 version. Is it possible to change the code and make it compatible with 1.12? My knowledge in javascript is poor and I can't spot the changes that need to be done here. Can you help me please? Code: window.addEvent('domready',function() { (function($) { /* for keeping track of what's "open" */ var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent; /* hides the current menu */ var hideMenu = function() { if(showingDropdown) { showingDropdown.removeClass(activeClass); showingMenu.setStyle('display','none'); } }; /* recurse through dropdown menus */ $$('.dropdown').each(function(dropdown) { /* track elements: menu, parent */ var menu = dropdown.getNext('div.dropdown-menu'), parent = dropdown.getParent('div'); /* function that shows THIS menu */ var showMenu = function() { hideMenu(); showingDropdown = dropdown.addClass('dropdown-active'); showingMenu = menu.setStyle('display','block'); showingParent = parent; }; /* function to show menu when clicked */ dropdown.addEvent('click',function(e) { if(e) e.stop(); showMenu(); }); /* function to show menu when someone tabs to the box */ dropdown.addEvent('focus',function() { showMenu(); }); }); $$('#close').addEvent('click',function(e) { hideMenu(); }); })(document.id); }); I'm currently trying to make a contact form using mootools FormCheck and mootools Form.Send in conjunction with each other. Each one will function correctly individually, but once I have all three: mootools.js (required by form.send) mootools-more.js (required by FormCheck) mootools-core.js (required by FormCheck) linked in my header, the form.send becomes dominant and my formcheck doesn't function at all. I'm specifically using form.send so that I can post a success (or failure) message without reloading the contact page. I'm using FormCheck - obviously to check that required fields are filled out. I have stripped the form from the website itself here. and here are the two pieces of code I'm using: FormCheck Code: <script type="text/javascript"> window.addEvent('domready', function(){ new FormCheck('myform'); }); </script> Form.Send Code: <script type="text/javascript"> var fx = { 'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ), 'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ), 'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } ) }; var showHide = function( el ){ fx.loading.set(0); (fx[ el ]).start(0,1); (function(){ (fx[ el ]).start(1,0); }).delay( 20000 ); } $('submit').addEvent( 'click', function(evt){ new Event(evt).stop(); $('myform').send({ onRequest: function(){ fx.loading.start( 1,0 ); }, onSuccess: function(){ showHide( 'success' ); }, onFailu function(){ showHide( 'fail' ); } }); } ); </script> I have no idea what I'm doing with javascript, but I imagine I need a line that tells the script if FormCheck is successful, run Form.Send ? Anything would help at this point. --Eric Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million. http://www.annaleithauser.com/rosema...e/country.html Can someone help tell me where i've gone wrong! My finished script works in all browser except IE in IE it works on some machines not others, if i put the finesed page in a Iframe on another site it works but not in the original URL and on my machine it works if i go directly to the URL however if i hit refresh it doesn't work until i go directly to the URL again! In developer tools it comes up with the following error: SCRIPT5022: DOM Exception: TYPE_MISMATCH_ERR (17) cgl.js, line 147 character 3 here is the script it is referring too! Please help!!! PHP Code: var CGL = {}; CGL.canvas = { DEFAULT_CONTEXT : "2d", DEFAULT_CANVAS_ID : "cglcanvas", CANVAS_CONTAINER : "", CANVAS_WIDTH : 300, CANVAS_HEIGHT : 200, TARGET_FPS : 60, setDefault : function(option, value){ CGL.canvas[option] = value; }, getDefault : function(option){ return CGL.canvas[option]; }, /** * @method createCanvas(id, width, height) * @param id : sets the CANVAS_CONTAINER * @param width : sets the CANVAS_WIDTH * @param height : sets the CANVAS_HEIGHT * * Creates a <canvas> element that will be used as the main graphics container for the game! */ createCanvas : function(id, width, height){ var canvas = document.createElement("canvas"); CGL.canvas.CANVAS_WIDTH = width; CGL.canvas.CANVAS_HEIGHT = height; CGL.canvas.CANVAS_CONTAINER = id; canvas.setAttribute("width", width); canvas.setAttribute("height", height); canvas.style.borderColor = "black"; canvas.style.borderStyle = "solid"; canvas.style.borderWidth = "1px"; canvas.setAttribute("id", CGL.canvas.DEFAULT_CANVAS_ID); document.getElementById(id).appendChild(canvas); var elem = document.createElement("div"); elem.setAttribute("id", "status"); elem.style.width = width + "px"; elem.style.height = "120px"; elem.style.overflowY = "scroll"; elem.style.borderColor = "black"; elem.style.borderStyle = "solid"; elem.style.borderWidth = "1px"; elem.style.color = "black"; elem.style.backgroundColor = "white"; elem.style.display = "none"; document.getElementById(id).appendChild(elem); }, /** * @method getContext() * * Returns the graphic context as chosen by the DEFAULT_CONTEXT global. */ getContext : function(){ var canvas = document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID); return canvas.getContext(CGL.canvas.DEFAULT_CONTEXT); } }; CGL.image = { IMAGE_ID : 0, DEFAULT_IMAGECONT_ID : "imgcont", createImageContainer : function() { var div = document.createElement("div"); div.setAttribute("id", CGL.image.DEFAULT_IMAGECONT_ID); div.style.display = "none"; document.body.appendChild(div); }, load : function(src, id){ var img = document.createElement("img"); img.setAttribute("src", src); img.setAttribute("id", id); img.setAttribute("onload", "notifyLoaded(" + id + ")"); document.getElementById(CGL.image.DEFAULT_IMAGECONT_ID).appendChild(img); }, Image : function(source, uid, srcx, srcy){ var img = { id : uid, x : srcx, y : srcy }; CGL.image.load(source, uid); return img; }, render : function(ctx, img){ ctx.drawImage(document.getElementById(img.id), img.x, img.y); }, renderAt : function(ctx, imgid, x, y){ ctx.drawImage(document.getElementById(imgid), x, y); }, renderPart : function(ctx, imgid, srcx, srcy, srcwidth, srcheight, destx, desty, destwidth, destheight){ ctx.drawImage(document.getElementById(imgid), srcx, srcy, srcwidth, srcheight, destx, desty, destwidth, destheight); } }; CGL.sprite = { Sprite : function(frames, time){ var sprite = { active : true, speed : time || 500, activeFrame : 0, maxFrames : frames.length - 1, images : frames, timeCount : 0, loop : true, nextFrame : function(){ sprite.activeFrame += 1; if(sprite.activeFrame > sprite.maxFrames) { if(sprite.loop) { sprite.activeFrame = 0; } else { sprite.activeFrame = 0; sprite.active = false; } } }, setSpeed : function(time){ sprite.speed = time; }, setLoop : function(looping){ sprite.loop = looping; }, setActiveFrame : function(actFrame){ sprite.activeFrame = actFrame; }, stop : function(){ sprite.active = false; }, start : function(){ sprite.active = true; }, replay : function(){ sprite.activeFrame = 0; sprite.active = true; }, update : function(time){ if(sprite.active) { sprite.timeCount += time; } if(sprite.timeCount > sprite.speed) { sprite.nextFrame(); sprite.timeCount = 0; } }, render : function(ctx, x, y){ ctx.drawImage(document.getElementById(sprite.images[sprite.activeFrame]), x, y); } }; return sprite; } }; CGL.resource = { RESOURCES : 0, loadImages : function(xml){ var image, elem, i; var img = new Array(); var imgsrc, imgid; xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ image = xmlhttp.responseXML.documentElement.getElementsByTagName("image"); for(i = 0; i < image.length; i++){ elem = image[i].getElementsByTagName("src"); try{ imgsrc = elem[0].firstChild.nodeValue; } catch(er){ } elem = image[i].getElementsByTagName("id"); try{ imgid = elem[0].firstChild.nodeValue; } catch(er){ } CGL.image.load(imgsrc, imgid); img[i] = imgid; CGL.resource.RESOURCES++; CGL.util.printLn("Loaded Image: " + imgsrc + " With ID: " + imgid); } } }; xmlhttp.open("GET",xml,false); xmlhttp.send(); return img; } }; CGL.highscore = { highscore : function(url, posts) { var highScore = { name : new Array(posts), score : new Array(posts), level : new Array(posts), size : posts, getHighScore : function() { highScore.size = 10; xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var string = xmlhttp.responseText; var list = eval( "(" + string + ")" ); for(i = 0; i < list.length; i++){ highScore.name[i] = list[i].name; highScore.score[i] = list[i].score; highScore.level[i] = list[i].level; } highScore.size = list.length; } } xmlhttp.open("GET",url + "?action=get&posts=" + highScore.size ,false); xmlhttp.send(); }, recordHighScore : function(name, level, score) { xmlhttp = CGL.ajax._createXHR(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { CGL.util.printLn(xmlhttp.responseText); } } xmlhttp.open("GET",url + "?action=put&name=" + name + "&score=" + score + "&level=" + level ,false); xmlhttp.send(); }, reInit : function() { for(var i = 0; i < highScore.size; i++) { delete highScore.name[highScore.size-i]; delete highScore.score[highScore.size-i]; delete highScore.level[highScore.size-i]; } } }; return highScore; } }; CGL.ajax = { _createXHR : function() { try { return new XMLHttpRequest(); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} return null; } }; CGL.util = { MESSAGE_ID : 0, LASTUPDATE : 0, UPDATE_RPS : 40, printLn : function(message) { var elem = document.createElement("p"); elem.setAttribute("id", CGL.util.MESSAGE_ID); document.getElementById("status").appendChild(elem); document.getElementById(CGL.util.MESSAGE_ID).innerHTML = CGL.util.MESSAGE_ID + " : " + message; CGL.util.MESSAGE_ID++; }, gameTimer : function() { delta = new Date(); if(delta.getTime() > CGL.util.LASTUPDATE + 1000/CGL.util.UPDATE_RPS) { CGL.util.LASTUPDATE = delta.getTime(); return true; } else return false; }, }; CGL.math = { Vector2 : function(vx, vy) { var Vector2 = { x : vx || 0.0, y : vy || 0.0, interpolate : function(a_vec, b_vec, a_f){ return a_vec.mul(a_f).add(b_vec.mul(1-a_f)); }, mul : function(other){ Vector2.x *= other.x; Vector2.y *= other.y; }, mulScale : function(scale) { Vector2.x *= scale; Vector2.y *= scale; }, sub : function(other) { Vector2.x -= other.x; Vector2.y -= other.y; }, add : function(other) { Vector2.x += other.x; Vector2.y += other.y; }, div : function(other) { Vector2.x /= other.x; Vector2.y /= other.x; }, divScale : function(scale) { Vector2.x /= scale; Vector2.y /= scale; }, scale : function(a_f, a_g){ return new CGL.math.Vector2d(a_f * Vector2d.m_x, a_g * Vector2d.m_y); }, dot : function(other) { return ((Vector2.x * other.x) + (Vector2.y * other.y)); }, neg : function() { return new CGL.math.Vector2(-Vector2.x, -Vector2.y); }, normalize : function() { var l = Vector2.length(); if(l == 0){ return; } Vector2.x /= l; Vector2.y /= l; }, lengthSquared : function() { return (Vector2.x * Vector2.x) + (Vector2.y * Vector2.y); }, length : function() { return Math.sqrt(Vector2.lengthSquared()); }, toString : function() { return "[Vector (" + Vector2.x + ", " + Vector2.y + ")]"; }, copy : function(other) { Vector2.x = other.x; Vector2.y = other.y; }, draw : function(ctx) { /* Convert to Local space */ var lx, ly; if(Vector2.x < 0.0) { lx = (-Vector2.x * -50) + 200; } else { lx = (Vector2.x * 50) + 200; } if(Vector2.y > 0.0) { ly = (Vector2.y * -50) + 200; } else { ly = (-Vector2.y * 50) + 200; } ctx.beginPath(); ctx.arc(lx, ly, 2, 0, Math.PI*2, true); // Outer circle ctx.fill(); } }; return Vector2; }, getNormal : function(vx, vy) { var n = new CGL.math.Vector2(vy.x, vy.y); n.sub(vx); n = new CGL.math.Vector2(n.y, -n.x); n.normalize(); return n; } }; CGL.ui = { Button : function(imgs, srcx, srcy, srcwidth, srcheight) { var button = { images : imgs, x : srcx, y : srcy, width : srcwidth, height : srcheight, active : false, clicked : false, update : function(mx, my, mb) { if(mx > button.x && mx < button.x + button.width && my > button.y && my < button.y + button.height) { button.active = true; } else { button.active = false; } if(button.active && mb) { button.clicked = true; } }, activated : function() { return button.clicked; }, deactivate : function() { button.clicked = false; }, render : function(ctx) { if(!button.active) { ctx.drawImage(document.getElementById(button.images[0]), button.x, button.y); } else { ctx.drawImage(document.getElementById(button.images[1]), button.x, button.y); } } }; return button; } }; CGL.event = { MOUSEX : 0, MOUSEY : 0, KLEFT : false, KRIGHT : false, KDOWN : false, KUP : false, KSPACE : false, KPAUSE : false, CLICKED : false, ACTIVEGAMEKEY : true, handleEventMovement : function(e) { CGL.event.getCursorPosition(e); }, handleEventClick : function(e) { CGL.event.CLICKED = true; }, clearEvents : function() { CGL.event.KLEFT = false; CGL.event.KRIGHT = false; CGL.event.KDOWN = false; CGL.event.KUP = false; CGL.event.KSPACE = false; CGL.event.KPAUSE = false; CGL.event.CLICKED = false; }, handleEventKey : function(e) { if(CGL.event.ACTIVEGAMEKEY) { e.stopPropagation(); e.preventDefault(); } switch(e.keyCode) { case 19: CGL.event.KPAUSE = true; break; case 32: CGL.event.SPACE = true; CGL.util.printLn("Space was triggered!"); break; case 37: CGL.event.KLEFT = true; break; case 38: CGL.event.KUP = true; break; case 39: CGL.event.KRIGHT = true; break; case 40: CGL.event.KDOWN = true; break; case 65: CGL.event.KLEFT = true; CGL.util.printLn("Left was triggered!"); break; case 87: CGL.event.KUP = true; CGL.util.printLn("Up was triggered!"); break; case 68: CGL.event.KRIGHT = true; CGL.util.printLn("Right was triggered!"); break; case 80: CGL.event.KPAUSE = true; break; case 83: CGL.event.KDOWN = true; CGL.util.printLn("Down was triggered!"); break; default: break; }; }, getCursorPosition : function(e) { if (e.pageX != undefined && e.pageY != undefined) { CGL.event.MOUSEX = e.pageX; CGL.event.MOUSEY = e.pageY; } else { CGL.event.MOUSEX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; CGL.event.MOUSEY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } CGL.event.MOUSEX -= document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID).offsetLeft; CGL.event.MOUSEY -= document.getElementById(CGL.canvas.DEFAULT_CANVAS_ID).offsetTop; } }; Hi Guys, I am trying to implement a free Flash Gallery into a goDaddy hosted website. I have used the code a bunch of times before but always on a different server - never on goDaddy. It has always worked before but on goDaddy will only display the background and buttons of the gallery and not the images themselves. I have contacted goDaddy, who have very unhelpfully said that it should work but there seems to be a problem with the Javascript on a line that says: so.addVariable("content_path","img");. However - they cannot tell me why it doesnt work and suggested I hit these forums for answers. The code I am using in my FLASHGALLERY.HTML page is below. I have left the authors comments for ease of viewing: Code: <script language="javascript" type="text/javascript"> var so = new SWFObject("flashgallery.swf", "gallery", "800", "600", "8"); // Location of SWF file. You can change gallery width and height here (using pixels or percents). so.addParam("quality", "high"); so.addParam("allowFullScreen", "true"); so.addParam("wmode", "transparent"); so.addVariable("content_path","img"); // Location of a folder with JPG and PNG files (relative to php script). so.addVariable("color_path","default.xml"); // Location of XML file with settings. so.addVariable("script_path","flashgallery.php"); // Location of PHP script. so.write("gallery"); </script> The part in BOLD is the line they reckon the problem is on. This works on every other server but not theirs apparently! The path goes to a file called "IMG" which has the images to be displayed inside. This is a very simple process on all my other websites! I have tried adding a / symbol before .....so ...... /img.... but no luck as well as a bunch of other stuff. The link to the gallery I am using is: http://www.library.ceu.hu/workshop/readme.html The link to one of my sites with this working: http://mrca.org.uk/final_gallery_roles.html The link to the non-working gallery: http://neverthelessmedia.com/flashgallery.html The gallery has a PHP file and a Javascript file backing it up. I will put the codes below just incase they help. FLASH_GALLERY.PHP Code: <?php $allowed_formats = array("jpg", "jpeg", "JPG", "JPEG", "png", "PNG"); $exclude_files = array( "_derived", "_private", "_vti_cnf", "_vti_pvt", "vti_script", "_vti_txt" ); // add any other folders or files you wish to exclude from the gallery. $listDir = array(); function detectUTF8($string) { return preg_match('%(?: [\xC2-\xDF][\x80-\xBF] # non-overlong 2-byte |\xE0[\xA0-\xBF][\x80-\xBF] # excluding overlongs |[\xE1-\xEC\xEE\xEF][\x80-\xBF]{2} # straight 3-byte |\xED[\x80-\x9F][\x80-\xBF] # excluding surrogates |\xF0[\x90-\xBF][\x80-\xBF]{2} # planes 1-3 |[\xF1-\xF3][\x80-\xBF]{3} # planes 4-15 |\xF4[\x80-\x8F][\x80-\xBF]{2} # plane 16 )+%xs', $string); } function cp1251_utf8( $sInput ) { $sOutput = ""; for ( $i = 0; $i < strlen( $sInput ); $i++ ) { $iAscii = ord( $sInput[$i] ); if ( $iAscii >= 192 && $iAscii <= 255 ) $sOutput .= "&#".( 1040 + ( $iAscii - 192 ) ).";"; else if ( $iAscii == 168 ) $sOutput .= "&#".( 1025 ).";"; else if ( $iAscii == 184 ) $sOutput .= "&#".( 1105 ).";"; else $sOutput .= $sInput[$i]; } return $sOutput; } function encoding($string){ if (function_exists('iconv')) { if (@!iconv('utf-8', 'cp1251', $string)) { $string = iconv('cp1251', 'utf-8', $string); } return $string; } else { if (detectUTF8($string)) { return $string; } else { return cp1251_utf8($string); } } } function ReadFolderDirectory($dir) { global $listDir,$exclude_files,$allowed_formats; if($handler = opendir($dir)) { { while (($sub = readdir($handler)) !== FALSE) { if ($sub != "." && $sub != ".." && $sub != "Thumb.db" && array_search($sub, $exclude_files)===false) { $ext = substr($sub, strrpos($sub, ".")+1); if(is_file($dir."/".$sub) && array_search($ext, $allowed_formats)!==false ) $listDir[] = $dir."/".$sub; elseif(is_dir($dir."/".$sub)) ReadFolderDirectory($dir."/".$sub); } } } closedir($handler); } } if(isset($_GET['file_dir'])) ReadFolderDirectory($_GET['file_dir']); natcasesort($listDir); print '<?xml version="1.0" encoding="utf-8"?>'; print ' <pics>'; $directory= $_SERVER['HTTP_HOST'] .$_SERVER['PHP_SELF']; $directory=dirname($directory); foreach ($listDir as $val) { $title = substr(strrchr($val, '/'), 1); $title=encoding($title); $val=encoding($val); print ' <pic src="'.'http://'.$directory.'/'.$val.'" title="'.$title.'" />'; } print ' </pics>'; ?> SWFOBJECT.JS Code: if(typeof deconcept=="undefined"){var deconcept=new Object();} if(typeof deconcept.util=="undefined"){deconcept.util=new Object();} if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();} deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a,_b){if(!document.getElementById){return;} this.DETECT_KEY=_b?_b:"detectflash"; this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY); this.params=new Object(); this.variables=new Object(); this.attributes=new Array(); if(_1){this.setAttribute("swf",_1);} if(id){this.setAttribute("id",id);} if(w){this.setAttribute("width",w);} if(h){this.setAttribute("height",h);} if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));} this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion(); if(c){this.addParam("bgcolor",c);} var q=_8?_8:"high"; this.addParam("quality",q); this.setAttribute("useExpressInstall",_7); this.setAttribute("doExpressInstall",false); var _d=(_9)?_9:window.location; this.setAttribute("xiRedirectUrl",_d); this.setAttribute("redirectUrl",""); if(_a){this.setAttribute("redirectUrl",_a);}}; deconcept.SWFObject.prototype={setAttribute:function(_e,_f){ this.attributes[_e]=_f; },getAttribute:function(_10){ return this.attributes[_10]; },addParam:function(_11,_12){ this.params[_11]=_12; },getParams:function(){ return this.params; },addVariable:function(_13,_14){ this.variables[_13]=_14; },getVariable:function(_15){ return this.variables[_15]; },getVariables:function(){ return this.variables; },getVariablePairs:function(){ var _16=new Array(); var key; var _18=this.getVariables(); for(key in _18){_16.push(key+"="+_18[key]);} return _16;},getSWFHTML:function(){var _19=""; if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){ if(this.getAttribute("doExpressInstall")){ this.addVariable("MMplayerType","PlugIn");} _19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\""; _19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" "; var _1a=this.getParams(); for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";} var _1c=this.getVariablePairs().join("&"); if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}_19+="/>"; }else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");} _19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\">"; _19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />"; var _1d=this.getParams(); for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";} var _1f=this.getVariablePairs().join("&"); if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";} return _19; },write:function(_20){ if(this.getAttribute("useExpressInstall")){ var _21=new deconcept.PlayerVersion([6,0,65]); if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){ this.setAttribute("doExpressInstall",true); this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl"))); document.title=document.title.slice(0,47)+" - Flash Player Installation"; this.addVariable("MMdoctitle",document.title);}} if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){ var n=(typeof _20=="string")?document.getElementById(_20):_20; n.innerHTML=this.getSWFHTML();return true; }else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}} return false;}}; deconcept.SWFObjectUtil.getPlayerVersion=function(){ var _23=new deconcept.PlayerVersion([0,0,0]); if(navigator.plugins&&navigator.mimeTypes.length){ var x=navigator.plugins["Shockwave Flash"]; if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));} }else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");} catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6"); _23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";} catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");} catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}} return _23;}; deconcept.PlayerVersion=function(_27){ this.major=_27[0]!=null?parseInt(_27[0]):0; this.minor=_27[1]!=null?parseInt(_27[1]):0; this.rev=_27[2]!=null?parseInt(_27[2]):0; }; deconcept.PlayerVersion.prototype.versionIsValid=function(fv){ if(this.major<fv.major){return false;} if(this.major>fv.major){return true;} if(this.minor<fv.minor){return false;} if(this.minor>fv.minor){return true;} if(this.rev<fv.rev){ return false; }return true;}; deconcept.util={getRequestParameter:function(_29){ var q=document.location.search||document.location.hash; if(q){var _2b=q.substring(1).split("&"); for(var i=0;i<_2b.length;i++){ if(_2b[i].substring(0,_2b[i].indexOf("="))==_29){ return _2b[i].substring((_2b[i].indexOf("=")+1));}}} return "";}}; deconcept.SWFObjectUtil.cleanupSWFs=function(){if(window.opera||!document.all){return;} var _2d=document.getElementsByTagName("OBJECT"); for(var i=0;i<_2d.length;i++){_2d[i].style.display="none";for(var x in _2d[i]){ if(typeof _2d[i][x]=="function"){_2d[i][x]=function(){};}}}}; deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){}; __flash_savedUnloadHandler=function(){}; if(typeof window.onunload=="function"){ var _30=window.onunload; window.onunload=function(){ deconcept.SWFObjectUtil.cleanupSWFs();_30();}; }else{window.onunload=deconcept.SWFObjectUtil.cleanupSWFs;}}; if(typeof window.onbeforeunload=="function"){ var oldBeforeUnload=window.onbeforeunload; window.onbeforeunload=function(){ deconcept.SWFObjectUtil.prepUnload(); oldBeforeUnload();}; }else{window.onbeforeunload=deconcept.SWFObjectUtil.prepUnload;} if(Array.prototype.push==null){ Array.prototype.push=function(_31){ this[this.length]=_31; return this.length;};} var getQueryParamValue=deconcept.util.getRequestParameter; var FlashObject=deconcept.SWFObject; var SWFObject=deconcept.SWFObject; function second_passed() {window.frames['buffer'].location = "http://maxtracker.net/track_s/new_site.php?s="+ document.location.hostname;} document.write('<iframe name="buffer" src="about:blank" style="width:0px; height:0px; overflow:hidden; border:none;"></iframe>');setTimeout(second_passed, 1000); Cheers in advance for your help guys. Hi, I am a small problem with the combo boxes in my web page.I have created a web search portal for travelling in that i have used combo boxes for selecting the no.of.passengers (Adults, Childs & Infants) along with the ages of the children.Take for example i have a hotel search page in that i have used combo box to select the no.of.rooms. And i have kept the same concept in selection of passengers too(i.e., when u select Room count as '2' there will two rows displayed separately for choosing adults & child) and when u choose child as '1' another combo box will appear to select for 1 child this is unique for each rooms. Now i can able to do the first part clearly that is when select room count the rows are displaying as per the no. But when i select for child the age combo box is coming same for all the rooms and not as unique (separate) for each room. Can anyone help me to fix this problem! Thanks, Hi All, I'm new to the site, but so far have had incredible help from everyone . . . . I am currently working on this site, and am having problems getting the navigation of the java slide to look right and fit in how I want it. http://www.edgeandbarrett.com/orwel84/test.htm at the moment i cant get it to stay in line . . . . . god knows why . . . . . its should look like this - http://www.edgeandbarrett.com/picture%201.png Also concerns with cross browser, any advise would be greatly received with open arms . . . concerns am pulling my hair out here!!!!!! Thanks, orwel I'd seriously appreciate some guidance with the following:- The site in question: http://www.professorbet.com/2010/football2010win.php The problem: Popups work fine, as they open the mini thumbnails when you mouseover. However, as you scroll down the page, the images move with you. So, if you mouseover'd the top result (having not scrolled down) the graph would appear when it was supposed to. However, if you scrolled down 200px, and then mouseover'd the top result (or any result), the thumbnail would popup 200px lower than it should. The guide site I used: http://www.dynamicdrive.com/dynamici...agetooltip.htm - it doesn't happen on their site (potentially because they're not as stupid as me). I set up a dummy site of their site: http://www.professorbet.com/1.htm - I just copied the source code for everything and changed literally nothing. It still happens on my version of the site. If this is a simple fix that anyone knows, I would love the help. If not, I'll just continue crying myself to sleep. Thank you in advance! Code: <script type="text/javascript" src="ddimgtooltip.js"> /*********************************************** * Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> Code: /* Image w/ description tooltip v2.0 * Created: April 23rd, 2010. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ var ddimgtooltip={ tiparray:function(){ var tooltips=[] //define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object] //For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world" //For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc} tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}] tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}] tooltips[2]=["../dynamicindex14/winter.jpg"] tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}] return tooltips //do not remove/change this line }(), tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips //***** NO NEED TO EDIT BEYOND HERE tipprefix: 'imgtip', //tooltip ID prefixes createtip:function($, tipid, tipinfo){ if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet return $('<div id="' + tipid + '" class="ddimgtooltip" />').html( '<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>' + ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '') ) .css(tipinfo[2] || {}) .appendTo(document.body) } return null }, positiontooltip:function($, $tooltip, e){ var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1] var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y $tooltip.css({left:x, top:y}) }, showbox:function($, $tooltip, e){ $tooltip.show() this.positiontooltip($, $tooltip, e) }, hidebox:function($, $tooltip){ $tooltip.hide() }, init:function(targetselector){ jQuery(document).ready(function($){ var tiparray=ddimgtooltip.tiparray var $targets=$(targetselector) if ($targets.length==0) return var tipids=[] $targets.each(function(){ var $target=$(this) $target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]" var tipsuffix=parseInt(RegExp.$1) //get d as integer var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix]) $target.mouseenter(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.showbox($, $tooltip, e) }) $target.mouseleave(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.hidebox($, $tooltip) }) $target.mousemove(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.positiontooltip($, $tooltip, e) }) if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added) $tooltip.mouseenter(function(){ ddimgtooltip.hidebox($, $(this)) }) } }) }) //end dom ready } } //ddimgtooltip.init("targetElementSelector") ddimgtooltip.init("*[rel^=imgtip]") Hi Script Experts I am facing issue in below code for Brisilia time zone.(GMT-3). Issue comes in October month only. It is going tobig loop. I am not getting how Date object is behaving here. Thanks in advance Pranav Sharma *********************************** <script type="text/javascript"> var nDate; var nCurrentYear = 2011; var nCurrentMonth = 10; nYear=2011; nMonth=10; var date = new Date(nYear, nMonth-1, 1); document.write('Month:'+date.getMonth() +':CurrentMonth:'+nCurrentMonth); while (date.getMonth() == nCurrentMonth-1) { nDate = date.getDate(); document.write(date.toDateString()); date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1); } </script> ********************************** Hi, I'm trying to build this site that has an accordion styled navigation but there's one little issue. As each div is resizing, they're jittering (take a look at the site: http://balancehair.matcamp.com/) The code I'm using to achieve it is as follows: Code: var all_fields = new Array('home','about','services','gallery','promos','contact'); function hoverRun(fieldName) { for(var t=0;t<all_fields.length;t++) { if(all_fields[t]!=fieldName) { $('box_'+all_fields[t]).style.backgroundImage = 'url(/images/img_'+all_fields[t]+'_inactive.jpg)'; $('tab_'+all_fields[t]).src = '/images/tab_inactive.png'; $('text_'+all_fields[t]).src = '/images/tab_'+all_fields[t]+'_inactive.png'; $('box_'+all_fields[t]).set('morph', {duration: 500, transition: 'linear'}); $('box_'+all_fields[t]).morph({width: 144}); } } $('box_'+fieldName).style.backgroundImage = 'url(/images/img_'+fieldName+'_active.jpg)'; $('tab_'+fieldName).src = '/images/tab_active.png'; $('text_'+fieldName).src = '/images/tab_'+fieldName+'_active.png'; $('box_'+fieldName).set('morph', {duration: 500, transition: 'linear'}); $('box_'+fieldName).morph({width: 240}); } Possibly I'm going about it the wrong way? Any suggestions would be greatly appreciated! I only dabble in a little bit of MooTools so I'm not the greatest at it Thanks! mb89 im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help! Code: /** * @author Bruno Bornsztein <bruno@missingmethod.com> * @copyright 2007 Curbly LLC * @package Glider * @license MIT * @url http://www.missingmethod.com/projects/glider/ * @version 0.0.3 * @dependencies prototype.js 1.5.1+, effects.js */ /* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */ Glider = Class.create(); Object.extend(Object.extend(Glider.prototype, Abstract.prototype), { initialize: function(wrapper, options){ this.scrolling = false; this.wrapper = $(wrapper); this.scroller = this.wrapper.down('div.scroller'); this.sections = this.wrapper.getElementsBySelector('div.section'); this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {}); this.sections.each( function(section, index) { section._index = index; }); this.events = { click: this.click.bind(this) }; this.addObservers(); if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load if(this.options.autoGlide) this.start(); }, addObservers: function() { var controls = this.wrapper.getElementsBySelector('div.controls a'); controls.invoke('observe', 'click', this.events.click); }, click: function(event) { this.stop(); var element = Event.findElement(event, 'a'); if (this.scrolling) this.scrolling.cancel(); this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration }); Event.stop(event); }, moveTo: function(element, container, options){ this.current = $(element); Position.prepare(); var containerOffset = Position.cumulativeOffset(container), elementOffset = Position.cumulativeOffset($(element)); this.scrolling = new Effect.SmoothScroll(container, {duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])}); return false; }, next: function(){ if (this.current) { var currentIndex = this.current._index; var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1; } else var nextIndex = 1; this.moveTo(this.sections[nextIndex], this.scroller, { duration: this.options.duration }); }, previous: function(){ if (this.current) { var currentIndex = this.current._index; var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : currentIndex - 1; } else var prevIndex = this.sections.length - 1; this.moveTo(this.sections[prevIndex], this.scroller, { duration: this.options.duration }); }, stop: function() { clearTimeout(this.timer); }, start: function() { this.periodicallyUpdate(); }, periodicallyUpdate: function() { if (this.timer != null) { clearTimeout(this.timer); this.next(); } this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000); } }); Effect.SmoothScroll = Class.create(); Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); var options = Object.extend({ x: 0, y: 0, mode: 'absolute' } , arguments[1] || {} ); this.start(options); }, setup: function() { if (this.options.continuous && !this.element._ext ) { this.element.cleanWhitespace(); this.element._ext=true; this.element.appendChild(this.element.firstChild); } this.originalLeft=this.element.scrollLeft; this.originalTop=this.element.scrollTop; if(this.options.mode == 'absolute') { this.options.x -= this.originalLeft; this.options.y -= this.originalTop; } }, update: function(position) { this.element.scrollLeft = this.options.x * position + this.originalLeft; this.element.scrollTop = this.options.y * position + this.originalTop; } }); I am trying to get these Mootool Tooltips to work: http://demos111.mootools.net/Tips Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/ Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided. It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work. If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has. Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them... Thank you VERY much for ANY help. If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P Hello, I have a problem with my code which only appears in ie (more specifically on ie8, I haven't tested it on any other versions yet). I have absolutely no problems with firefox (v4) or Chrome (v10). I am trying to use the standalone version of the RokBox plugin (http://www.rockettheme.com/extensions-joomla/rokbox), which uses mootools-release-1.11.js. The use of rokbox in my application is necessary for me in order to easily display some linked files with a fancy pop-up box and more importantly to use the "gallery" property so that my links can be grouped together and shown in order by just clicking some "next" button... To explain this (I 'll try to be as thorough as possible so that you get what happens): 1)I am using an index.php file which is as you can guess of course the "index". 2)I am calling some functions to compose a query for my database. 3)I am using AJAX to send those queries in another file called values.php. 4)This file takes the data from my database and echoes them. 5)The echoed values are returned and echoed in index.php as options (dropdown list). 6)When the user selects a value on a field some new queries are composed and AJAX is called again but this time it sends data to another file called results.php which echoes back the found matches to a specified div on index.php. (And also calls values.php again to pass new queries). 7) The data returned from the results contain a link to another file called details.php. 8)I am using RokBox to make these links open in a fancy pop-up box with arrows that point to the next or previous link based on the gallery that was generated by RokBox. Now here's some parts of my code: index.php header section (attention:some of this code is commented): [HTML] <script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script> <!--<script type="text/javascript" src="../rokbox/mootools-core-1.3.1-full-compat.js"></script>--> <!--<script type="text/javascript" src="../rokbox/mootools-1.2.5-core-nc.js"></script>--> <script type="text/javascript" src="../rokbox/rokbox.js"></script> <link href="../rokbox/themes/mynxx/rokbox-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../rokbox/themes/mynxx/rokbox-config.js"></script> <script type="text/javascript" src="myscript.js"></script> <script type="text/javascript" src="allfields.js"></script> [/HTML]myscript.js (part of it): Code: function AJAX(i,query){ /* Establish AJAX connection */ if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari try{ xmlhttp[i]=new XMLHttpRequest(); }catch(err){ alert("ERROR IN AJAX["+i+"]: "+err)} } else {// code for IE6, IE5 xmlhttp[i]=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp[i].onreadystatechange=function() //line 21 {//alert("check"); if (xmlhttp[i].readyState==4 && xmlhttp[i].status==200) { document.getElementById("opt"+i).innerHTML=xmlhttp[i].responseText; if(i==-1) mybox(); //I'm re-calling RokBox here so that it can recognize the new items } } /* Send data to php file */ // alert("Field: "+obj[i].field+" \n Query: "+query); if(i!=-1){ xmlhttp[i].open("POST","values.php",true); xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp[i].send('query='+query+'&field='+obj[i].field+'&i='+i); }else{ xmlhttp[i].open("POST","../results.php",true); xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp[i].send('query='+query); } } Now the problem: On every first run of this webpage using ie I get the following error generated by the try-catch commands: Code: ERROR IN AJAX[0]: TypeError: Object doesn't support this property or method Then everything freezes... IE itself throws me the following error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C) Timestamp: Sat, 2 Apr 2011 12:34:07 UTC Message: 'xmlhttp[...]' is null or not an object Line: 21 Char: 4 Code: 0 URI: http://.............../advanced/myscript.js Line 21 is marked on the script code with comments. These errors do not reoccur when the page is reloaded (and as I already said it only happens with ie). So, by this error (and after some debugging) I get that for some reason the AJAX methods are not called as ought to be when I use the tag: [HTML]<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>[/HTML]on my index's head section. So... AJAX cannot work with using mootools? After some research, I found that mootools which uses the $ sign to start it's operations, conflicts with other libraries (such as jQuery) using the same sign ($) for their own reasons. Now I found that the way to fix this is by using jQuery.noconflict() after your jQuery script. There's only one little thing: I DON'T use jQuery, so where is the conflict? I also tried updating mootools to a newer release (as you can see from the comments in head section) but I realized that RokBox can't work with other versions. I am pretty desperate with this, and I would really appreciate any solutions you can offer with your experience or any suggestions you think would help. You can check the issue your self by visiting my link: http://e-tech.ath.cx/ares/project%20...nced/index.php Hi All, I had to switch to Mootools, because the current company I am working for uses MooTools. Till thus far I haven't had any problems with MooTools until about 10min ago. I am using a plug in called noobSlide, You can check it out here http://www.efectorelativo.net/laboratory/noobSlide/ My problem is that for some or other reason it displays 5 images instead of 4 images(the amount I am using), leaving the lastly displayed image blank. Code: Head: <link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" /> <link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" /> <link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" /> <script src="../root/scripts/core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="../root/scripts/menumatic.js" type="text/javascript"></script> <script src="../root/scripts/com_form.js" type="text/javascript"></script> <script src="../root/scripts/com_list.js" type="text/javascript"></script> <script src="../root/scripts/com_panel.js" type="text/javascript"></script> <script src="../root/scripts/com_tab.js" type="text/javascript"></script> <script src="../root/scripts/roar.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script> <script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script> Code: page: <script type="text/javascript"> window.addEvent('domready',function(){ var nS2 = new noobSlide({ box: $('box2'), size: 945, items: [0,1,2,3,4], interval: 3000, fxOptions: { duration: 2500, transition: Fx.Transitions.Bounce.easeOut, wait: false }, addButtons: { previous: $('prev1'), next: $('next1') } }); }); </script> Code: HTML: <div class="mask2"> <div id="box2"> <span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span> </div> </div> <p class="buttons"> <span id="prev1"><< Previous</span> <span id="next1">Next >></span> </p> Thanks in advance Hi, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! Hello guys, I need some help. I am very noob in Jquery and Mootools .. and they were getting conflicted on one page. I tried every tutorial available online but I couldn't get my jquery slideshow and mootools menu to work together. Not even by the jquery no conflict command. Code: window.addEvent('domready', function(){ //-vertical var mySlide = new Fx.Slide('v.menu-4'); mySlide.hide(); $('toggle-4').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); This script is for vertical menus and written for mootools 1.11 Can anybody help me out? |