thegingerkid

But sometimes people have their browsers shrunk down to a smaller size. Personally, I'm the type of person who has all windows at maximum all the time, because I don't like having various resized windows on the screen, but not everyone is the same. Some folks, especially Mac users from what I've seen, tend to have windows at half or 3/4 screen view, and I didn't really want the site going into the vertical layout above a particular (lower) width. Unfortunately, it sounds like you're telling me that, unlike the javascript for the galleries, media queries can't specifically target touch devices or identify things like tablets, so general dimension parameters are the only - somewhat inaccurate - way of estimating the appropriate design to use.

I know, and I just did that so it's working on the tablet now. But as I said, that also affects the desktop view. I really didn't want this vertical layout for larger size non-mobile windows. That's why I was hoping there was a way to specifically target mobile devices - or even better, target touch devices (which is what I was able to do when setting conditional javascript for the galleries) - instead of relying on a general width parameter.

Ingolme - but that's exactly the problem. The devices are NOT the same size. Even oriented for landscape, my tablet is just over half the size of my laptop screen. Even if they were closer in size, the photo galleries are set differently for touch devices. On a laptop or desktop, the galleries display as slideshows with hovering controls. On touch devices, it's a pain for people to keep tapping the screen to go from one image to the next, so the images all display in-line instead of as a slideshow. Furthermore, the site is supposed to switch to the vertical responsive design from 979px width downwards, which it seems to do on phones and most tablets, but is for some reason not doing on my cheapie Windows 8 tablet (not even in portrait mode) or an older ipad 3, which are roughly the same size as the other tablets where it worked just fine. dave - Thanks for the suggestion! I already know that the tablet recognizes media queries since as I said, the responsive design works if I kick up max-device-width to 2000px (although at that point, it also changes the standard laptop view too, which isn't good). However, I did upload a test page with the code you offered and got this on my laptop: CSS reports width is greater than 1000px Javascript reports window width: 1600px I then tried it on my tablet in landscape view and got: CSS reports width is greater than 1000px Javascript reports window width: 1024px Not sure where to go with that!

Thanks, but these seem to just be using width/height to identify the type of screen, which I have tried. The problem is that if I set the max-width or max-device-width high enough to work in landscape mode for the tablet, it then is also applying to the regular browser view on the desktop/laptop (in other words, full screen Firefox on my laptop is showing in responsive mode). I was hoping the "device" part would target only mobile devices and make that code irrelevant for laptops and desktops but it seems not...

My site's responsive design kicks in and works perfectly on laptops, desktops, phones (from what I've seen) and good tablets . However, I have a cheapie Windows 8 tablet and the conditional CSS does not work on that, nor does it work on my cousin's old ipad 3. It simply shows the normal desktop version of the site, which is fine for the main page but problematic for the photo galleries (and it's a photo portfolio so that's a major problem). I've copied my main CSS code below. If I duplicate all of the media queries in this file but change max-width to max-device-width, the responsive vertical design does kick in in portrait mode. However, landscape / horizontal view still shows the desktop version. Attempts to fix this by bumping up the max-device-width to 2000px do technically work for the tablet but also affect the normal desktop browser view, so that isn't a viable option. Is there any way to specifically target all mobile devices, both landscape and portrait views, without having it affect how the site is viewed on a laptop or desktop? /** Disable Minimum width of no responsive mode **/ #column-content { min-width : 0; } .hidden { display: none; visibility: hidden; } .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } .visible-desktop { display: block !important; } /* Portrait tablet to landscape and desktop */ @media screen and (max-width: 979px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important ; } .visible-tablet { display: block !important; } .hidden-tablet { display: none !important; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important; } .visible-tablet { display: none !important; } .hidden-tablet { display: block !important; } .visible-phone { display: block !important; } .hidden-phone { display: none !important; } } /** MAIN MENU ** ** you can change the value for max-width below ( don't forget to put the same value in "css/ie8-responsive.css" and "css/ie7-responsive.css" ) **/ @media screen and (max-width: 979px) { .drop-down { position: relative; float: none; margin:0; padding:0; width: auto; height:auto; z-index: 10; } /* Disable position fixed for header */ .website-header { height:auto; } .website-header.fixed { position:relative; top:0; } .website-top.fixed { position:relative; top:0; } .website-top.fixed.with-header { top:0px; } .website-middle.fixed { margin-top: -150px; padding-top:0; } } @media screen and (max-width: 979px) { .website-footer.footer-home-page { position : relative; top:0; left:0; width:auto; } .empty-space-home-page { height:100%; } /** remove the fixed width of Google map **/ div[id*="googlemap"] { width:auto !important; } /** Video and Google map **/ .module_video { margin-top: 0; padding-bottom: 60px; position:relative !important; height: 400px !important; min-height:400px !important; } .module_google_map { margin-top: 0; position:relative !important; height: 50% !important; min-height:50% !important; } /** Column menu **/ #column-menu { position:relative; min-height:0; } .menu-white #column-menu { background-color : #8C001A; } .menu-black #column-menu { background-color : #000; } #main-column-menu { padding: 10px; background-color : #8C001A; } #column-menu, .nav_main, .search-module { width:auto; } .logo { padding:0 0 0 40px; margin: 0; float:left; } .logo span { line-height:48px; } .logo img { max-height : 55px; } h4.customlogo { color: #fff; text-align: left; width: 300px; } p.customlogo { color: #fff; text-align: left; } #translate { position: absolute; bottom: -30px; right: 35px; } .social-links li a img { width:20px; } /** Column content **/ #column-content { position:relative; min-height : 0; margin:0; } .module_google_map, .module_video { padding-left: 0; } #column-content > .top, #column-content > .bottom, #column-content > .full_width { position: relative; top:0; left:0; max-width:100%; } #column-content > .top .all-content { margin-bottom:0px; } #column-content #main-column-content .all-content { padding: 50px 16px 14px 16px; min-height:600px; /** second condition if height > 800px line 390 in this file **/ } .shadow-corner > .bottom { min-height:0px; background-image : none; padding:0; } .shadow-corner > .top { min-height:0px; background-image : none; padding:0; top:0; } /** CONTENT **/ .left_column, .right-module-position, .top-module-position, .bottom-module-position { float:none; padding: 12px 0 12px 0; margin:0; background-image:none; border:none; width : auto ; clear:both; } .left_column > div, .right-module-position > div { background-image:none; padding:0; } .right_column { overflow:visible; } .left_column .moduletable > div, .right-module-position .moduletable > div { clear:both; border:1px solid #ddd; margin:0 ; background: transparent url(../images/black-03.png) 0 0 repeat; } .white-text .left_column .moduletable > div, .white-text .right-module-position .moduletable > div { border:1px solid #666; } .main_component { padding: 0 6px; } } /* To display the background on all screen if tablet with portrait mode */ /* First condition if height < 800px line 266 in this file */ @media screen and (max-width: 979px) and (min-height: 800px) { #column-content #main-column-content .all-content { min-height:900px; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .logo { padding-left :0px; } .top_menu li { padding: 4px 2px 0 2px; } .user1, .user2, .user3, .user4, .user5, .user6, .right-module-position { float:none; padding:12px 0; margin:0; width : 100% !important; clear:both; } .user1, .user2, .user3, .user4, .user5, .user6 { margin : 8px 0 0 0; } .top-module-position .border > div, .bottom-module-position .border > div, .user1 .border > div, .user2 .border > div, .user3 .border > div, .user4 .border > div, .user5 .border > div, .user6 .border > div, .address .border > div, .translate .border > div, .search .border > div, top_menu .border > div, .bottom_menu .border > div { margin-bottom:8px; } .moduletable.shadow > div { margin-bottom:0 !important; } /********** Column layouts *********/ .one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth { float: none; width:auto; margin : 10px 0; } }

Thanks but I'm new to media queries and spent ages getting the rest of the responsive deisgn to work as it does now. Is there any chance you could tell me exactly how to do that (remove the slideshow and force all images for that gallery to display in line)? I've tried a few things but am definitely doing something wrong.

I have a portfolio with js-based photo galleries (slideshow with prev/next controls) and am wondering if there is a simple way to do either of these things: - Force the gallery images to display in line rather than as a slideshow when the viewing window below a specific width, as is done here: http://wells-demo.squarespace.com/ (view it at normal maximum size on a computer and then shrink the window or view on mobile to see what I mean) - Set the gallery to autoplay ONLY on mobile devices, and leave it on manual for laptops and desktops. I've attached the CSS and js for the gallery modules. Is that okay? It seems like a lot of code to paste directly into the post but please let me know if I should do that instead. Just a note, there is an additional separate folder for the module itself but I don't think it's needed, since virtually all of the customization I did for this module was with the css and js files from the main site template folder, and that's where the media queries and autoplay code are located. If anyone knows how to achieve either or both of the above options, I would very much appreciate the help! gallery-css.txt gallery-javascript.txt gallery-javascript-min.txt

Hi, I'm just wondering what services people recommend for basic website monitoring. I don't need anything fancy; I was just hoping for a free or extremely cheap service that sends an email or otherwise notifies you when your site is down. I don't need a lot of in-depth reports or anything like that; just trying to get a general idea of my sites' uptime for now so that I can get an idea of how they're performing. Any suggestions? Thanks!

This is a Joomla extension and that's how it came: http://www.joomlack.fr/en/joomla-extensions/accordeonmenu-ck It's unusual....I've never actually seen php used that way with CSS before and it seems totally unnecessary but I was worried about messing up the extension by removing it. Do you have any idea how I can safely change it to a standard CSS file? It's a free extension so can get it from the link above and view the files and code that way. Any suggestions on altering it to draw from a normal CSS file instead, and removing all of the php code from the stylesheet, would be appreciated!

Sorry, never mind! I just did a temporary restore of the previous backup and downloaded the menu's CSS file to see what I did before. The correct approach was: <?php echo $id; ?> li.current a { color: #990012; background: #fff8b8; font-weight: bold; }

Oh wait...hmm...the background color is changing properly but the bullet point is changing to the color assigned in the {color: } style above, rather than the text changing to that color. I can't figure out how to change the color of the text itself; for some reason it's not working. Also, the style is only being applied to the secondary links, not the first level of links. Granted, I think all of them will have submenus so it probably doesn't matter but it would be nice to figure out why it's not being applied.

Yes! This worked perfectly: <?php echo $id; ?> li .current.active { color: #000; background: #fff8b8; } Thanks!

Hi guys, I'm having trouble setting the style for the current page links with this particular menu: http://tinyurl.com/hj9s9q9 I just want the nav bar link for the current page to be a different color. I actually DID customize it before and had it just right, but then the developer of the extension I'm using pushed an update. I updated and it reset everything I had done. I was able to redo the hover style I want but for some reason, I can't replicate what I did for the current link style. I've tried every combination I know but am clearly doing something wrong this time, even though I managed to do it without a problem the first time around. Here is the code: <?php header('content-type: text/css'); $id = 'ul#'.htmlspecialchars ( $_GET['cssid'] , ENT_QUOTES ); ?> /* main UL container */ <?php echo $id; ?> { padding: 5px; margin: 0; } /* style for all links */ <?php echo $id; ?> li { border-bottom: 1px solid #ddd; margin: 0; text-align: left; list-style: none; color: #666; background: none; } /* style for all links from the second level */ <?php echo $id; ?> li ul li { list-style-type : square; margin: 0 0 0 20px; border-bottom: none; border-top: 1px solid #ddd; } /* style for all anchors */ <?php echo $id; ?> li a { margin: 0; color: #000; text-align: left; display: block; padding-bottom: 7px; padding-left: 15px; padding-right: 4px; padding-top: 7px; text-decoration: none; background: none; } /* style for all anchors on mouseover */ <?php echo $id; ?> li a:hover { color: #000; background: #fff8b8; } /* style for all link descriptions */ <?php echo $id; ?> li a span.accordeonckdesc { display: block; } Can someone please tell me what to add in to gain control over styling the current page links? I tried setting up rules for both li and li ul li with every combination of .current, .current-link, etc. I could think of. Maybe I'm just having a weird brain spasm and blanking out on the obvious, but I have no idea what's going wrong or why I can't seem to do it this time. Thanks! -

Sorry for not responding sooner - for some reason, this forum isn't sending me email updates even though I have it set to instant notification. Anyway, it was getting close but I think ultimately there are just too many glitches when attempting to use the Supersized gallery in that way, so I tried out a different gallery option. It's working as it should in most ways but I need to sort out the fit-to-screen view before it's ready to go. I'm going to post my question for that in a new thread though, because it's a totally different module and a different issue. If I can get the fit-to-screen fixed, this new gallery will be perfect and much easier to manage than the other. Thanks so much for your help!

Well, I altered the code like so and am now getting the floating forward / backward icons I wanted: #prevslide, #nextslide { position:fixed; height:100%; top:0; opacity:0.6; z-index:20; } #prevslide { left:295px; width:58%; } #nextslide { right:10px; width:42%; } #prevslide:hover { cursor: url('img/back.png'), move; } #nextslide:hover { cursor: url('img/forward.png'), move; } However, due to the template's design, the creator set the main index.php file to include the controls on ALL pages. So I've just noticed that now that the forward / backward icons are actually visible / active, they are appearing on every single page, whether or not its a gallery. I'm not sure how to fix that and restrict the controls to gallery pages or the Supersized module only. I tried removing the prevslide and nextslide <a id> tags from index.php and placing them directly into the gallery article. I also copied the relevant code from the Supersized css file to the main css, since I assume the article is drawing directly from that. Unfortunately, nothing at all was showing when I tried that method - the gallery controls were hidden and inaccessible again. I can't imagine there's no easy way to display those controls on specific pages rather than placing them in the index.php file and forcing their presence on *every* page... Also, I've just noticed another unfortunate fact...although the solution you gave me in a previous post, for the positioning of the module, is fantastic on the average computer screen (forcing it to be centered within the black space and not underlap the menu at smaller window sizes, it creates a problem on mobile devices or when viewing the page at a very small browser size. With the default settings, the images are often right up against or slightly underlapping the menu, and they go almost halfway under the menu at certain browser window dimensions. However, the images do retain their normal size and, at small enough dimensions, like on a phone, they look as they should for a responsive design. With the new code, the images are centered on normal computer screens but when the window is sized down, or the page is viewed on a mobile device, the responsive elements seem to be in disarray. The image is tiny and pushed all the way to the right, cut off on the side, and when trying to enlarge it, the menus go all crazy and it disappears. I can certainly live without a play/pause option but I definitely can't have a gallery that looks like a mess on mobile devices, or a site that has gallery controls appearing on every page. I'm so frustrated because I thought I was done, but I just noticed those two issues and need to find a way of fixing them before moving on. Do you have any thoughts about keeping the gallery centered in the main content area, without losing the responsive elements for smaller windows? And/or would you have any suggestions for restricting the controls to the gallery pages? I'm not sure why my method didn't work, unless I overlooked something, which is possible... Thanks again; I truly appreciate your help!

Oh perfect, the prev / next buttons are showing up and working just fine now, thanks! It may be a long shot but is there any chance you have an idea of how to tackle the last two issues? Namely, adding a working play/pause button and then replacing all 3 controls with the mouseover effect that's on my curent site? I've been trying different things but no luck so far. For the play/pause button, I see "pauseplay" mentioned in the js file under General Elements. Code related to play_button seems to appear throughout the various files and there is a "pause on hover" option but I don't see any mention of the pause button itself. It's possible I'm just overlooking it or searching for the wrong terms. I tried to copy and adjust the prevslide CSS to add parameters for #play and #pause (even tried #pauseplay as well), but those buttons aren't showing up on the screen, let alone working as buttons, so I'm obviously way off track. As for the mouseover effects, as you saw from the link in my initial post (to the current SquareS site) plus the cursor code I pasted, that entirely gallery module is basically divided into 3 parts. The left third is the "previous" button, the middle is the "thumbnails" option and the right third is the "next" button. For the new Joomla gallery, I would want to replace the thumbnails button with play/pause, but otherwise I was hoping to get the same functionality. I guess it's some sort of overlay? It seems like I would need to hide the button icons and simultaneously adjust the parameters to make each button take up a certain percentage of the module container...is that completely wrong? I feel like it should be a relatively easy task once I find the right portion of code. I did add in the cursor code for the prev and next buttons but of course the mouseover effect only works when hovering close to each button for now, which makes it redundant. Do you have any ideas about that? Either way, thanks so much for your time and help on this; it's a huge stress relief to at least have the properly positioned gallery with the controls in place! I was just hoping to get these two final touches done, if there's an easy enough way to make it happen :-)

How can I express my love for you right now? Works perfectly! I spent so long playing around with the CSS but just couldn't get it...thanks so much! Now I just need to figure out the whole "make the controls visible and turn them into mouseover controls" part. I contacted the guy who released the template but he wrote back saying he doesn't know enough javascript to help....which confuses me since his notes on the template indicate that he removed a lot of stuff to keep "only the essentials" (making the controls invisible or inactive). I'd assumed that if he was the one to alter the script for the template, he'd know how to...un-alter it? But I guess not! I hope someone else will be able to help me figure that part out because it's sort of imperative... I can't have a gallery with no controls. All of the references to forward / backward / play / pause buttons seem to be there, scattered throughout the code. I just can't figure out how to make them show up on the screen and actually *work*.

Oh...hmm there are also a number of other files for the gallery in the modules folder: css_admin.css helper.php mod_supersized2.php mod_supersized2.xml And then a tmpl folder with default.php in it Should I paste the code for any of those? I found the autoplay setting in default.php so really the only things I want to do are find out how to confine the gallery to the black area rather than having it overlap (or go under) the white menu column. And add the mouseover controls for prev / next / play / pause, which seem to be mentioned all throughout the code but I don't know if they're hidden or deactivated somehow, or just in a position that's not showing up...

jQuery.noConflict(); (function(jQuery){ theme = { /* Initial Placement ----------------------------*/ _init : function(){ // Center Slide Links if (api.options.slide_links) jQuery(vars.slide_list).css('margin-left', -jQuery(vars.slide_list).width()/2); // Start progressbar if autoplay enabled if (api.options.autoplay){ if (api.options.progress_bar) theme.progressBar(); }else{ if (jQuery(vars.play_button).attr('src')) jQuery(vars.play_button).attr("src", vars.image_path + "play.png"); // If pause play button is image, swap src if (api.options.progress_bar) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); // Place progress bar } /* Thumbnail Tray ----------------------------*/ // Hide tray off screen jQuery(vars.thumb_tray).animate({bottom : -jQuery(vars.thumb_tray).height()}, 0 ); // Thumbnail Tray Toggle jQuery(vars.tray_button).toggle(function(){ jQuery(vars.thumb_tray).stop().animate({bottom : -jQuery(vars.thumb_tray).height(), avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }, function() { jQuery(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }); // Make thumb tray proper size jQuery(vars.thumb_list).width(jQuery('> li', vars.thumb_list).length * jQuery('> li', vars.thumb_list).outerWidth(true)); //Adjust to true width of thumb markers // Display total slides if (jQuery(vars.slide_total).length){ jQuery(vars.slide_total).html(api.options.slides.length); } /* Thumbnail Tray Navigation ----------------------------*/ if (api.options.thumb_links){ //Hide thumb arrows if not needed if (jQuery(vars.thumb_list).width() <= jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut(0); } // Thumb Intervals vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); vars.thumb_page = 0; // Cycle thumbs forward jQuery(vars.thumb_forward).click(function(){ if (vars.thumb_page - vars.thumb_interval <= -jQuery(vars.thumb_list).width()){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); // Cycle thumbs backwards jQuery(vars.thumb_back).click(function(){ if (vars.thumb_page + vars.thumb_interval > 0){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); } /* Navigation Items ----------------------------*/ jQuery(vars.next_slide).click(function() { api.nextSlide(); }); jQuery(vars.prev_slide).click(function() { api.prevSlide(); }); // Full Opacity on Hover if(jQuery.support.opacity){ jQuery(vars.prev_slide +','+vars.next_slide).mouseover(function() { jQuery(this).stop().animate({opacity:0.7},100); }).mouseout(function(){ jQuery(this).stop().animate({opacity:0.3},100); }); } if (api.options.thumbnail_navigation){ // Next thumbnail clicked jQuery(vars.next_thumb).click(function() { api.nextSlide(); }); // Previous thumbnail clicked jQuery(vars.prev_thumb).click(function() { api.prevSlide(); }); } jQuery(vars.play_button).click(function() { api.playToggle(); }); /* Thumbnail Mouse Scrub ----------------------------*/ if (api.options.mouse_scrub){ jQuery(vars.thumb_tray).mousemove(function(e) { var containerWidth = jQuery(vars.thumb_tray).width(), listWidth = jQuery(vars.thumb_list).width(); if (listWidth > containerWidth){ var mousePos = 1, diff = e.pageX - mousePos; if (diff > 10 || diff < -10) { mousePos = e.pageX; newX = (containerWidth - listWidth) * (e.pageX/containerWidth); diff = parseInt(Math.abs(parseInt(jQuery(vars.thumb_list).css('left'))-newX )).toFixed(0); jQuery(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*3, easing:'linear'}); } } }); } /* Window Resize ----------------------------*/ jQuery(window).resize(function(){ // Delay progress bar on resize if (api.options.progress_bar && !vars.in_animation){ if (vars.slideshow_interval) clearInterval(vars.slideshow_interval); if (api.options.slides.length - 1 > 0) clearInterval(vars.slideshow_interval); jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); if (!vars.progressDelay && api.options.slideshow){ // Delay slideshow from resuming so Chrome can refocus images vars.progressDelay = setTimeout(function() { if (!vars.is_paused){ theme.progressBar(); vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval); } vars.progressDelay = false; }, 1000); } } // Thumb Links if (api.options.thumb_links && vars.thumb_tray.length){ // Update Thumb Interval & Page vars.thumb_page = 0; vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); // Adjust thumbnail markers if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeIn('fast'); jQuery(vars.thumb_list).stop().animate({'left':0}, 200); }else{ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut('fast'); } } }); }, /* Go To Slide ----------------------------*/ goTo : function(){ if (api.options.progress_bar && !vars.is_paused){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); theme.progressBar(); } }, /* Play & Pause Toggle ----------------------------*/ playToggle : function(state){ if (state =='play'){ // If image, swap to pause if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); }else if (state == 'pause'){ // If image, swap to play if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && vars.is_paused)jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); } }, /* Before Slide Transition ----------------------------*/ beforeAnimation : function(direction){ if (api.options.progress_bar && !vars.is_paused) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); /* Update Fields ----------------------------*/ // Update slide caption if (jQuery(vars.slide_caption).length){ (api.getField('title')) ? jQuery(vars.slide_caption).html(api.getField('title')) : jQuery(vars.slide_caption).html(''); } // Update slide number if (vars.slide_current.length){ jQuery(vars.slide_current).html(vars.current_slide + 1); } // Highlight current thumbnail and adjust row position if (api.options.thumb_links){ jQuery('.current-thumb').removeClass('current-thumb'); jQuery('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb'); // If thumb out of view if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ // If next slide direction if (direction == 'next'){ if (vars.current_slide == 0){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left >= vars.thumb_interval){ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } // If previous slide direction }else if(direction == 'prev'){ if (vars.current_slide == api.options.slides.length - 1){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left < 0){ if (vars.thumb_page + vars.thumb_interval > 0) return false; vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } } } } }, /* After Slide Transition ----------------------------*/ afterAnimation : function(){ if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar }, /* Progress Bar ----------------------------*/ progressBar : function(){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ).animate({ left:0 }, api.options.slide_interval); } }; /* Theme Specific Variables ----------------------------*/ jQuery.supersized.themeVars = { // Internal Variables progress_delay : false, // Delay after resize before resuming slideshow thumb_page : false, // Thumbnail page thumb_interval : false, // Thumbnail interval image_path : 'templates/full_screen_4/images/supersized/', // Default image path // General Elements play_button : '#pauseplay', // Play/Pause button next_slide : '#nextslide', // Next slide button prev_slide : '#prevslide', // Prev slide button next_thumb : '#nextthumb', // Next slide thumb button prev_thumb : '#prevthumb', // Prev slide thumb button slide_caption : '#slidecaption', // Slide caption slide_current : '.slidenumber', // Current slide number slide_total : '.totalslides', // Total Slides slide_list : '#slide-list', // Slide jump list thumb_tray : '#thumb-tray', // Thumbnail tray thumb_list : '#thumb-list', // Thumbnail list thumb_forward : '#thumb-forward', // Cycles forward through thumbnail list thumb_back : '#thumb-back', // Cycles backwards through thumbnail list tray_arrow : '#tray-arrow', // Thumbnail tray button arrow tray_button : '#tray-button', // Thumbnail tray button progress_bar : '#progress-bar' // Progress bar }; /* Theme Specific Options ----------------------------*/ jQuery.supersized.themeOptions = { progress_bar : 1, // Timer for each slide mouse_scrub : 0 // Thumbnails move with mouse }; })(jQuery);

Hi guys, I'm in the process of transferring my photo portfolio from Squarespace to my own Joomla site. I've set up the test pages and and customized the template, etc. to get everything the way I want it. However, I'm having trouble with the last few tweaks needed for the gallery modules. I'm using this template: Full Screen 6 It came with a full screen gallery extension, which is a stripped down version of this: Supersized This is how I've set it up to look on the new site: Test Gallery 1) I would like the images to be centered within the black space rather than being up against the menu column (and inconsistently at that). I can improve the positioning by changing the #supersized width to 120% but, while it looks perfect on my laptop, it's not evenly positioned on larger screens. Also, if you shrink the browser window a certain amount, part of the image goes UNDER the menu column, which I certainly don't want. But I haven't been able to find the appropriate section of code to adjust the gallery to be strictly within that black "container" (content box) on the right. 2) This stripped down version is set to autoplay only. I'm fine with it being on autoplay for now but would like to know where / how to change the code to switch off autoplay and stick to manual only, if I need to. 3) This version also has no visible controls. I would like to add floating gallery controls like I have on my old site here: Squarespace Gallery So when hovering over the left side of the module, the mouse turns into the "previous" arrow; when hovering over the right side of the gallery, it turns into the "next" arrow, and when hovering over the middle, the mouse should turn into a play/pause button. On Squarespace, I'd set up the controls to do that with the following code (the "middle" mouseover effect on Squarespace is actually for thumbnails, but on the new site, it should be play/pause): .collection-type-gallery .overlay-controls.right-control { cursor: url('imagepath'), move; } .collection-type-gallery .overlay-controls.left-control { cursor: url('imagepath'), move; } .collection-type-gallery .overlay-controls.center-control.thumbnail-toggle { cursor: url('imagepath'), move; } I've tried downloading the main Supersized gallery module and going through that to see what code might need to be added or edited to get the gallery controls on screen, add play/pause, etc. but can't seem to figure it out. I've pasted the code for the "basic" version of the gallery below (the one included in the template) and the full version can be downloaded for free at the link I provided above, if any additional info or references are needed. If anyone can help me figure out where to look and how to achieve the results I want, it would be very, very much appreciated! Gallery CSS /** supersize **/ #supersized-loader {position:absolute;top:65%;left:50%;z-index:0;width:60px;height:60px;margin:-30px 0 0 -30px;text-indent:-999em;background:url(../../../images/supersized/progress.gif) no-repeat center center;} #supersized {position:fixed;left:0;top:0;overflow:hidden;z-index: 1;height:100%;width: 100%;} #supersized img {width:auto;height:auto;position:relative;max-width : none;display:none;outline:none;border:none;} #supersized.speed img {-ms-interpolation-mode:nearest-neighbor;image-rendering: -moz-crisp-edges;} /*Speed*/ #supersized.quality img {-ms-interpolation-mode:bicubic;image-rendering: optimizeQuality;} /*Quality*/ #supersized a {z-index:-30;position:fixed;overflow:hidden;top:0; left:0;width:100%;height:100%;background:#111;display:block;} #supersized a.prevslide {z-index: -20;} #supersized a.activeslide {z-index:-10;} #supersized a.image-loading {background:#111 url(../../../images/supersized/progress.gif) no-repeat center center;width:100%;height:100%;} #supersized a.prevslide img, #supersized a.activeslide img {display:inline;} .hide_function, .hide_thumbnails {position:absolute !important;top: -10px !important;left:-9999px !important;height : 0 !important;} /** Prev / Next slide **/ #prevslide, #nextslide {position:fixed;height:43px;width:43px;top:80%;margin-top:-21px;opacity:0.6;z-index:20;} #prevslide {left:10px;background:url('../../../images/supersized/back.png');} #nextslide {right:10px;background:url('../../../images/supersized/forward.png');} #prevslide:active, #nextslide:active {margin-top:-19px;} #prevslide:hover, #nextslide:hover {cursor:pointer;} /* Thumbnail Tray----------------------------*/ #thumb-tray {position:fixed;z-index:20;bottom:0;left:0;margin-bottom:-4px;background: transparent url(../../../images/black-50.png) 0 0 repeat;width:100%;overflow:hidden;text-align:center;-moz-box-shadow: 0px 0px 4px #000;-webkit-box-shadow: 0px 0px 4px #000;box-shadow: 0px 0px 4px #000;} .menu-white #thumb-tray {background:transparent url(../../../images/white-40.png) 0 0 repeat;} #thumb-back, #thumb-forward {position:absolute;z-index:5;bottom:0;height:100%;width:40px;opacity:0.65;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);} #thumb-back {left:0;background: url(../../../images/supersized/thumb-back.png) no-repeat center center;} #thumb-forward {right:0;background:url(../../../images/supersized/thumb-forward.png) no-repeat center center;} #thumb-back:hover, #thumb-forward:hover {cursor:pointer;background-color:rgba(255,255,255, 0.18);opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);} #thumb-back:hover {border-right:1px solid rgba(255,255,255, 0.3);} #thumb-forward:hover {border-left:1px solid rgba(255,255,255, 0.3);} ul#thumb-list {display:inline-block;list-style:none;position:relative;left:0px;padding: 0;} ul#thumb-list li {background:#111;list-style:none;display:inline;width:150px;overflow:hidden;float:left;margin:0;} ul#thumb-list li img {width:150px;height:auto;opacity:0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);} ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);} ul#thumb-list li:hover {cursor:pointer;} Gallery JS jQuery.noConflict(); (function(jQuery){ theme = { /* Initial Placement ----------------------------*/ _init : function(){ // Center Slide Links if (api.options.slide_links) jQuery(vars.slide_list).css('margin-left', -jQuery(vars.slide_list).width()/2); // Start progressbar if autoplay enabled if (api.options.autoplay){ if (api.options.progress_bar) theme.progressBar(); }else{ if (jQuery(vars.play_button).attr('src')) jQuery(vars.play_button).attr("src", vars.image_path + "play.png"); // If pause play button is image, swap src if (api.options.progress_bar) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); // Place progress bar } /* Thumbnail Tray ----------------------------*/ // Hide tray off screen jQuery(vars.thumb_tray).animate({bottom : -jQuery(vars.thumb_tray).height()}, 0 ); // Thumbnail Tray Toggle jQuery(vars.tray_button).toggle(function(){ jQuery(vars.thumb_tray).stop().animate({bottom : -jQuery(vars.thumb_tray).height(), avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }, function() { jQuery(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }); // Make thumb tray proper size jQuery(vars.thumb_list).width(jQuery('> li', vars.thumb_list).length * jQuery('> li', vars.thumb_list).outerWidth(true)); //Adjust to true width of thumb markers // Display total slides if (jQuery(vars.slide_total).length){ jQuery(vars.slide_total).html(api.options.slides.length); } /* Thumbnail Tray Navigation ----------------------------*/ if (api.options.thumb_links){ //Hide thumb arrows if not needed if (jQuery(vars.thumb_list).width() <= jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut(0); } // Thumb Intervals vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); vars.thumb_page = 0; // Cycle thumbs forward jQuery(vars.thumb_forward).click(function(){ if (vars.thumb_page - vars.thumb_interval <= -jQuery(vars.thumb_list).width()){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); // Cycle thumbs backwards jQuery(vars.thumb_back).click(function(){ if (vars.thumb_page + vars.thumb_interval > 0){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); } /* Navigation Items ----------------------------*/ jQuery(vars.next_slide).click(function() { api.nextSlide(); }); jQuery(vars.prev_slide).click(function() { api.prevSlide(); }); // Full Opacity on Hover if(jQuery.support.opacity){ jQuery(vars.prev_slide +','+vars.next_slide).mouseover(function() { jQuery(this).stop().animate({opacity:0.7},100); }).mouseout(function(){ jQuery(this).stop().animate({opacity:0.3},100); }); } if (api.options.thumbnail_navigation){ // Next thumbnail clicked jQuery(vars.next_thumb).click(function() { api.nextSlide(); }); // Previous thumbnail clicked jQuery(vars.prev_thumb).click(function() { api.prevSlide(); }); } jQuery(vars.play_button).click(function() { api.playToggle(); }); /* Thumbnail Mouse Scrub ----------------------------*/ if (api.options.mouse_scrub){ jQuery(vars.thumb_tray).mousemove(function(e) { var containerWidth = jQuery(vars.thumb_tray).width(), listWidth = jQuery(vars.thumb_list).width(); if (listWidth > containerWidth){ var mousePos = 1, diff = e.pageX - mousePos; if (diff > 10 || diff < -10) { mousePos = e.pageX; newX = (containerWidth - listWidth) * (e.pageX/containerWidth); diff = parseInt(Math.abs(parseInt(jQuery(vars.thumb_list).css('left'))-newX )).toFixed(0); jQuery(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*3, easing:'linear'}); } } }); } /* Window Resize ----------------------------*/ jQuery(window).resize(function(){ // Delay progress bar on resize if (api.options.progress_bar && !vars.in_animation){ if (vars.slideshow_interval) clearInterval(vars.slideshow_interval); if (api.options.slides.length - 1 > 0) clearInterval(vars.slideshow_interval); jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); if (!vars.progressDelay && api.options.slideshow){ // Delay slideshow from resuming so Chrome can refocus images vars.progressDelay = setTimeout(function() { if (!vars.is_paused){ theme.progressBar(); vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval); } vars.progressDelay = false; }, 1000); } } // Thumb Links if (api.options.thumb_links && vars.thumb_tray.length){ // Update Thumb Interval & Page vars.thumb_page = 0; vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); // Adjust thumbnail markers if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeIn('fast'); jQuery(vars.thumb_list).stop().animate({'left':0}, 200); }else{ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut('fast'); } } }); }, /* Go To Slide ----------------------------*/ goTo : function(){ if (api.options.progress_bar && !vars.is_paused){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); theme.progressBar(); } }, /* Play & Pause Toggle ----------------------------*/ playToggle : function(state){ if (state =='play'){ // If image, swap to pause if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); }else if (state == 'pause'){ // If image, swap to play if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && vars.is_paused)jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); } }, /* Before Slide Transition ----------------------------*/ beforeAnimation : function(direction){ if (api.options.progress_bar && !vars.is_paused) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); /* Update Fields ----------------------------*/ // Update slide caption if (jQuery(vars.slide_caption).length){ (api.getField('title')) ? jQuery(vars.slide_caption).html(api.getField('title')) : jQuery(vars.slide_caption).html(''); } // Update slide number if (vars.slide_current.length){ jQuery(vars.slide_current).html(vars.current_slide + 1); } // Highlight current thumbnail and adjust row position if (api.options.thumb_links){ jQuery('.current-thumb').removeClass('current-thumb'); jQuery('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb'); // If thumb out of view if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ // If next slide direction if (direction == 'next'){ if (vars.current_slide == 0){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left >= vars.thumb_interval){ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } // If previous slide direction }else if(direction == 'prev'){ if (vars.current_slide == api.options.slides.length - 1){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left < 0){ if (vars.thumb_page + vars.thumb_interval > 0) return false; vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } } } } }, /* After Slide Transition ----------------------------*/ afterAnimation : function(){ if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar }, /* Progress Bar ----------------------------*/ progressBar : function(){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ).animate({ left:0 }, api.options.slide_interval); } }; /* Theme Specific Variables ----------------------------*/ jQuery.supersized.themeVars = { // Internal Variables progress_delay : false, // Delay after resize before resuming slideshow thumb_page : false, // Thumbnail page thumb_interval : false, // Thumbnail interval image_path : 'templates/full_screen_4/images/supersized/', // Default image path // General Elements play_button : '#pauseplay', // Play/Pause button next_slide : '#nextslide', // Next slide button prev_slide : '#prevslide', // Prev slide button next_thumb : '#nextthumb', // Next slide thumb button prev_thumb : '#prevthumb', // Prev slide thumb button slide_caption : '#slidecaption', // Slide caption slide_current : '.slidenumber', // Current slide number slide_total : '.totalslides', // Total Slides slide_list : '#slide-list', // Slide jump list thumb_tray : '#thumb-tray', // Thumbnail tray thumb_list : '#thumb-list', // Thumbnail list thumb_forward : '#thumb-forward', // Cycles forward through thumbnail list thumb_back : '#thumb-back', // Cycles backwards through thumbnail list tray_arrow : '#tray-arrow', // Thumbnail tray button arrow tray_button : '#tray-button', // Thumbnail tray button progress_bar : '#progress-bar' // Progress bar }; /* Theme Specific Options ----------------------------*/ jQuery.supersized.themeOptions = { progress_bar : 1, // Timer for each slide mouse_scrub : 0 // Thumbnails move with mouse }; })(jQuery);

Hi, I'm using the Tabs & Sliders plugin and it's fantastic except for the fact that it does not automatically go to the first tab on page load. For example, if you go to a page using the plugin and click on the third tab, then click a link to a new page from there, you will end up on the third tab of the new page. Furthermore, if you come back to the site a week later, it will still be loading the last tab you were on, on any page that the plugin appears.The people who created the plugin did not address this issue in the last 2 updates, in spite of multiple requests to do so, and someone on their forums claimed that they simply removed 4 cookie references from the js files and it solved the problem. However, they haven't responded regarding exactly what code to remove.Would anyone be willing to review the javascript code below and let me know if they see a way to prevent the plugin from remembering past tab selections and to simply load the first tab on page load? I tried deleting various cookie references from throughout the script (including the OnLoad part) but it would either make no apparent difference or it would cause the entire plugin to disappear, so any thoughts on exactly what to remove or change would be greatly appreciated! var tabberOptions = {'manualStartup': true,'cookie': "jwTabsCookie",'onLoad': function(argsObj) { var t = argsObj.tabber; var i; if (t.id) { t.cookie = t.id + t.cookie; } i = parseInt(getCookie(t.cookie)); if (isNaN(i)) { return; } t.tabShow(i);},'onClick': function(argsObj) { var c = argsObj.tabber.cookie; var i = argsObj.index; setCookie(c, i);}};function setCookie(name, value, expires, path, domain, secure) {document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");}function getCookie(name) {var dc = document.cookie;var prefix = name + "=";var begin = dc.indexOf("; " + prefix);if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) return null;} else { begin += 2;}var end = document.cookie.indexOf(";", begin);if (end == -1) { end = dc.length;}return unescape(dc.substring(begin + prefix.length, end));}function deleteCookie(name, path, domain) {if (getCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";}}function tabberObj(argsObj) {var arg;this.div = null;this.classMain = "jwts_tabber";this.classMainLive = "jwts_tabberlive";this.classTab = "jwts_tabbertab";this.classTabDefault = "jwts_tabbertabdefault";this.classNav = "jwts_tabbernav";this.classTabHide = "jwts_tabbertabhide";this.classNavActive = "jwts_tabberactive";this.titleElements = ['h2', 'h3', 'h4', 'h5', 'h6'];this.titleElementsStripHTML = true;this.removeTitle = true;this.addLinkId = false;this.linkIdFormat = '<tabberid>nav<tabnumberone>';for (arg in argsObj) { this[arg] = argsObj[arg];}this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');this.tabs = new Array();if (this.div) { this.init(this.div); this.div = null;}}tabberObj.prototype.init = function(e) {var childNodes, i, i2, t, defaultTab = 0, DOM_ul, DOM_li, DOM_a, aId, headingElement;if (!document.getElementsByTagName) { return false;}if (e.id) { this.id = e.id;}this.tabs.length = 0;childNodes = e.childNodes;for (i = 0; i < childNodes.length; i++) { if (childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length - 1; } }}DOM_ul = document.createElement("ul");DOM_ul.className = this.classNav;for (i = 0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2 = 0; i2 < this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) { t.headingText = headingElement.innerHTML; if (this.titleElementsStripHTML) { t.headingText.replace(/<br>/gi, " "); t.headingText = t.headingText.replace(/<[^>]+>/g, ""); } break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i + 1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li);}e.insertBefore(DOM_ul, e.firstChild);e.className = e.className.replace(this.REclassMain, this.classMainLive);this.tabShow(defaultTab);if (typeof this.onLoad == 'function') { this.onLoad({ tabber: this });}return this;};tabberObj.prototype.navClick = function(event) {var rVal, a, self, tabberIndex, onClickArgs;a = this;if (!a.tabber) { return false;}self = a.tabber;tabberIndex = a.tabberIndex;a.blur();if (typeof self.onClick == 'function') { onClickArgs = { 'tabber': self, 'index': tabberIndex, 'event': event }; if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; }}self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll = function() {var i;for (i = 0; i < this.tabs.length; i++) { this.tabHide(i);}};tabberObj.prototype.tabHide = function(tabberIndex) {var div;if (!this.tabs[tabberIndex]) { return false;}div = this.tabs[tabberIndex].div;if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide;}this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow = function(tabberIndex) {var div;if (!this.tabs[tabberIndex]) { return false;}this.tabHideAll();div = this.tabs[tabberIndex].div;div.className = div.className.replace(this.REclassTabHide, '');this.navSetActive(tabberIndex);if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({ 'tabber': this, 'index': tabberIndex });}return this;};tabberObj.prototype.navSetActive = function(tabberIndex) {this.tabs[tabberIndex].li.className = this.classNavActive;return this;};tabberObj.prototype.navClearActive = function(tabberIndex) {this.tabs[tabberIndex].li.className = '';return this;};function tabberAutomatic(tabberArgs) {var tempObj, divs, i;if (!tabberArgs) { tabberArgs = {};}tempObj = new tabberObj(tabberArgs);divs = document.getElementsByTagName("div");for (i = 0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); }}return this;}function tabberAutomaticOnLoad(tabberArgs) {var oldOnLoad;if (!tabberArgs) { tabberArgs = {};}oldOnLoad = window.onload;if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); };} else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); };}}if (typeof tabberOptions == 'undefined') {tabberAutomaticOnLoad();} else {if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions);}}// Initiatize everythingwindow.addEvent('domready', function() {// Append an IE specific class to the body tagvar bodyClass = document.getElementsByTagName("body")[0].className;var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;var isIE7 = navigator.userAgent.toLowerCase().indexOf('msie 7') != -1;var isIE8 = navigator.userAgent.toLowerCase().indexOf('msie 8') != -1;if(isIE6) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE6';if(isIE7) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE7';if(isIE8) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE8';// TabstabberAutomatic(tabberOptions);// Sliders (accordions)$$('.jwts_toggleControl').addEvent('click',function(e){ //e.stop(); e.preventDefault();});var jwSliders = new Accordion($$('.jwts_toggleControl'),$$('.jwts_toggleContent'), { display: -1, opacity: false, alwaysHide: true, onActive: function(toggler) { toggler.addClass('jwts_toggleOn'); toggler.removeClass('jwts_toggleOff'); }, onBackground: function(toggler) { toggler.addClass('jwts_toggleOff'); toggler.removeClass('jwts_toggleOn'); }});});eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 J={\'1c\':R,\'r\':"1C",\'S\':5(a){6 t=a.s;6 i;4(t.x){t.r=t.x+t.r}i=1D(T(t.r));4(1E(i)){7}t.K(i)},\'U\':5(a){6 c=a.s.r;6 i=a.V;1d(c,i)}};5 1d(a,b,c,d,e,f){n.r=a+"="+1F(+((c)?"; 1e="+c.1G():"")+((d)?"; 1f="+d:"")+((e)?"; 1g="+e:"")+((f)?"; 1H":"")}5 T(a){6 b=n.r;6 c=a+"=";6 d=b.W("; "+c);4(d==-1){d=b.W(c);4(d!=0)7 L}X{d+=2}6 e=n.r.W(";",d);4(e==-1){e=b.o}7 1I(b.1J(d+c.o,e))}5 1K(a,b,c){4(T(a)){n.r=a+"="+((?"; 1f="+b:"")+((c)?"; 1g="+c:"")+"; 1e=1L, 1h-1M-1N 1i:1i:1h 1O"}}5 p(a){6 b;3.j=L;3.1j="1P";3.Y="1Q";3.1k="1R";3.1l="1S";3.1m="1T";3.Z="1U";3.1n="1V";3.10=[\'1W\',\'1X\',\'1Y\',\'1Z\',\'20\'];3.1o=R;3.1p=R;3.1q=w;3.11=\'<1r>21<1s>\';A(b 22 a){3[b]=a[b]}3.12=u D(\'\\\\b\'+3.1j+\'\\\\b\',\'k\');3.23=u D(\'\\\\b\'+3.Y+\'\\\\b\',\'k\');3.1t=u D(\'\\\\b\'+3.1k+\'\\\\b\',\'k\');3.1u=u D(\'\\\\b\'+3.1l+\'\\\\b\',\'k\');3.13=u D(\'\\\\b\'+3.Z+\'\\\\b\',\'k\');3.8=u 24();4(3.j){3.1v(3.j);3.j=L}}p.y.1v=5(e){6 a,i,E,t,14=0,F,G,q,l,M;4(!n.15){7 w}4(e.x){3.x=e.x}3.8.o=0;a=e.25;A(i=0;i<a.o;i++){4(a[i].h&&a[i].h.N(3.1t)){t=u 26();t.j=a[i];3.8[3.8.o]=t;4(a[i].h.N(3.1u)){14=3.8.o-1}}}F=n.16("27");F.h=3.1m;A(i=0;i<3.8.o;i++){t=3.8[i];t.m=t.j.17;4(3.1p){t.j.17=\'\'}4(!t.m){A(E=0;E<3.10.o;E++){M=t.j.15(3.10[E])[0];4(M){t.m=M.28;4(3.1o){t.m.v(/<29>/k," ");t.m=t.m.v(/<[^>]+>/g,"")}2a}}}4(!t.m){t.m=i+1}G=n.16("O");t.O=G;q=n.16("a");q.18(n.2b(t.m));q.2c="2d:2e(L);";q.17=t.m;q.2f=3.1w;q.s=3;q.B=i;4(3.1q&&3.11){l=3.11;l=l.v(/<1r>/k,3.x);l=l.v(/<2g>/k,i);l=l.v(/<1s>/k,i+1);l=l.v(/<2h>/k,t.m.v(/[^a-2i-2j-9\\-]/k,\'\'));q.x=l}G.18(q);F.18(G)}e.2k(F,e.2l);e.h=e.h.v(3.12,3.Y);3.K(14);4(H 3.S==\'5\'){3.S({s:3})}7 3};p.y.1w=5({6 c,a,C,B,P;a=3;4(!a.s){7 w}C=a.s;B=a.B;a.2m();4(H C.U==\'5\'){P={\'s\':C,\'V\':B,\'19\':b};4(!{P.19=I.19}c=C.U(P);4(c===w){7 w}}C.K(;7 w};p.y.1x=5(){6 i;A(i=0;i<3.8.o;i++){3.1y(i)}};p.y.1y=5(a){6 b;4(!3.8[a]){7 w}b=3.8[a].j;4(!b.h.N(3.13)){b.h+=\' \'+3.Z}3.1z(a);7 3};p.y.K=5(a){6 b;4(!3.8[a]){7 w}3.1x();b=3.8[a].j;b.h=b.h.v(3.13,\'\');3.1A(a);4(H 3.1B==\'5\'){3.1B({\'s\':3,\'V\':a})}7 3};p.y.1A=5(a){3.8[a].O.h=3.1n;7 3};p.y.1z=5(a){3.8[a].O.h=\'\';7 3};5 1a(a){6 b,z,i;4(!a){a={}}b=u p(a);z=n.15("j");A(i=0;i<z.o;i++){4(z[i].h&&z[i].h.N(b.12)){a.j=z[i];z[i].s=u p(a)}}7 3}5 1b(a){6 b;4(!a){a={}}b=I.Q;4(H I.Q!=\'5\'){I.Q=5(){1a(a)}}X{I.Q=5(){b();1a(a)}}}4(H J==\'2n\'){1b()}X{4(!J[\'1c\']){1b(J)}}',62,148,'|||this|if|function|var|return|tabs|||||||||className||div|gi|aId|headingText|document|length|tabberObj|DOM_a|cookie|tabber||new|replace|false|id|prototype|divs|for|tabberIndex|self|RegExp|i2|DOM_ul|DOM_li|typeof|window|tabberOptions|tabShow|null|headingElement|match|li|onClickArgs|onload|true|onLoad|getCookie|onClick|index|indexOf|else|classMainLive|classTabHide|titleElements|linkIdFormat|REclassMain|REclassTabHide|defaultTab|getElementsByTagName|createElement|title|appendChild|event|tabberAutomatic|tabberAutomaticOnLoad|manualStartup|setCookie|expires|path|domain|01|00|classMain|classTab|classTabDefault|classNav|classNavActive|titleElementsStripHTML|removeTitle|addLinkId|tabberid|tabnumberone|REclassTab|REclassTabDefault|init|navClick|tabHideAll|tabHide|navClearActive|navSetActive|onTabDisplay|jwTabsCookie|parseInt|isNaN|escape|toGMTString|secure|unescape|substring|deleteCookie|Thu|Jan|70|GMT|jwts_tabber|jwts_tabberlive|jwts_tabbertab|jwts_tabbertabdefault|jwts_tabbernav|jwts_tabbertabhide|jwts_tabberactive|h2|h3|h4|h5|h6|nav|in|REclassMainLive|Array|childNodes|Object|ul|innerHTML|br|break|createTextNode|href|javascript|void|onclick|tabnumberzero|tabtitle|zA|Z0|insertBefore|firstChild|blur|undefined'.split('|'),0,{}));// Initiatize everythingwindow.addEvent('domready', function() {// Append an IE specific class to the body tagvar bodyClass = document.getElementsByTagName("body")[0].className;var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;var isIE7 = navigator.userAgent.toLowerCase().indexOf('msie 7') != -1;var isIE8 = navigator.userAgent.toLowerCase().indexOf('msie 8') != -1;if(isIE6) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE6';if(isIE7) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE7';if(isIE8) document.getElementsByTagName("body")[0].className = bodyClass + ' jwts_IsIE8';// TabstabberAutomatic(tabberOptions);// Sliders (accordions)$$('.jwts_toggleControl').addEvent('click',function(e){ //e.stop(); e.preventDefault();});var jwSliders = new Accordion($$('.jwts_toggleControl'),$$('.jwts_toggleContent'), { display: -1, opacity: false, alwaysHide: true, onActive: function(toggler) { toggler.addClass('jwts_toggleOn'); toggler.removeClass('jwts_toggleOff'); }, onBackground: function(toggler) { toggler.addClass('jwts_toggleOff'); toggler.removeClass('jwts_toggleOn'); }});});