www.webdeveloper.com
Results 1 to 8 of 8

Thread: Coda-Slider jQuery

  1. #1
    Join Date
    Feb 2005
    Posts
    97

    Coda-Slider jQuery

    Hi! Newbie here attempting to customize the coda-slider by Niall Doherty. I want my navigation menu to appear below the slider panel. I couldn't find the positioning in the css but I believe it's in the .js file. I'm having a hard time figuring it all out. I know the .stripNav is what I need to reposition but without moving the view panel. The two seem to be attached.

    Code:
    jQuery(function(){
    	jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='images/ajax-loader.gif' alt='loading...'/ ></p>");
    });
    var j = 0;
    jQuery.fn.codaSlider = function(settings) {
    	 settings = jQuery.extend({
         easeFunc: "expoinout",
         easeTime: 750,
         toolTip: false
      }, settings);
    	return this.each(function(){
    		var container = jQuery(this);
    		// Remove the preloader gif...
    		container.find("p.loading").remove();
    		// Self-explanatory...
    		container.removeClass("csw").addClass("stripViewer");
    		// Get the width of a panel, set from CSS...
    		var panelWidth = container.find("div.panel").width();
    		// panelCount gives us a count of the panels in the container...
    		var panelCount = container.find("div.panel").size();
    		// Calculate the width of all the panels when lined up end-to-end...
    		var stripViewerWidth = panelWidth*panelCount;
    		// Use the above width to specify the CSS width for the panelContainer element...
    		container.find("div.panelContainer").css("width" , stripViewerWidth);
    		// Set the navWidth as a multiple of panelCount to account for margin-right on each li
    		var navWidth = panelCount*2;
    		
    		// Specify the current panel.
    		// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
    		if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
    			var cPanel = parseInt(location.hash.slice(1));
    			var cnt = - (panelWidth*(cPanel - 1));
    			jQuery(this).find("div.panelContainer").css({ left: cnt });
    		// Otherwise, we'll just set the current panel to 1...
    		} else { 
    			var cPanel = 1;
    		};
    		
    		// Create appropriate nav
    		container.each(function(i) {
    			
    			// Create the Left and Right arrows
    			jQuery(this).before("<div class='stripNavL' id='stripNavL" + j + "'><a href='#'>Left</a><\/div>");
    			jQuery(this).after("<div class='stripNavR' id='stripNavR" + j + "'><a href='#'>Right</a><\/div>");
    			
    			// Create the Tabs
    			jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>");
    			jQuery(this).find("div.panel").each(function(n) {
    						jQuery("div#stripNav" + j + " ul").append("<li><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>");												
    			});
    			
    			// Tab nav
    			jQuery("div#stripNav" + j + " a").each(function(z) {
    				// Figure out the navWidth by adding up the width of each li
    				navWidth += jQuery(this).parent().width();
    				// What happens when a nav link is clicked
    				jQuery(this).bind("click", function() {
    					jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
    					var cnt = - (panelWidth*z);
    					cPanel = z + 1;
    					jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
    				});
    			});
    			
    			// Left nav
    			jQuery("div#stripNavL" + j + " a").click(function(){
    				if (cPanel == 1) {
    					var cnt = - (panelWidth*(panelCount - 1));
    					cPanel = panelCount;
    					jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
    				} else {
    					cPanel -= 1;
    					var cnt = - (panelWidth*(cPanel - 1));
    					jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().prev().find("a").addClass("current");
    				};
    				jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
    				// Change the URL hash (cross-linking)...
    				location.hash = cPanel;
    				return false;
    			});
    			
    			// Right nav
    			jQuery("div#stripNavR" + j + " a").click(function(){
    				if (cPanel == panelCount) {
    					var cnt = 0;
    					cPanel = 1;
    					jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
    				} else {
    					var cnt = - (panelWidth*cPanel);
    					cPanel += 1;
    					jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().next().find("a").addClass("current");
    				};
    				jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
    				// Change the URL hash (cross-linking)...
    				location.hash = cPanel;
    				return false;
    			});
    			
    			// Same-page cross-linking
    			jQuery("a.cross-link").click(function(){
    				jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click');
    			});	
    			
    			// Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider
    			jQuery("div#stripNav" + j).css("width" , navWidth);
    			
    			// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
    			if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
    				jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
    			} else {
    				jQuery("div#stripNav" + j + " a:eq(0)").addClass("current");
    			}
    			
    		});
    		
    		j++;
      });
    };
    Thanks!

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    The easiest way to get help about this matter would be to post a URL to that page.
    We can then use the "Developer Tools" in the web browser to determine the actual CSS properties of that element.

    Keep in mind that most of the positioning is done in the CSS file. I have a hunch your js file just picks/sets the right CSS class using the jquery addClass(...) function.

  3. #3
    Join Date
    Feb 2005
    Posts
    97
    Thanks for your help! Here's my css so far...

    Code:
    <style type="text/css">
    		
    		* { margin: 0 ; padding: 0 }
    		/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
    		
    		p { text-align: left; margin: 15px 0 }
    		
    		p, ul { font-size: 13px; line-height: 1.4em; color: #590000; background-color: #FFCF88; /*overflow-y: auto;*/ opacity:0.8;
      		filter:alpha(opacity=80); /* For IE8 and earlier */  } 
    		
    		p a, li a { color: #590000; text-decoration:none; font-weight:bold }
    		
    		p.intro { border-bottom: 1px solid #999; background: #999; margin-bottom: 20px; padding: 20px 0 30px 0; color: #999; text-align: center; width: 100% }
    		
    		p#cross-links { text-align: center }
    		
    		p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
    		
    		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
    		noscript a { color: #a00; text-decoration: underline }
    		noscript ol { margin-left: 25px; }
    		
    		a:focus { outline:none }
    		
    		img { border: 0 }
    		
    		h2{color: #FFF; font-family: Verdana, Arial; }
    		
    		h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left ; color: #FFFFFF;}
    		
    		
    		body {
    			font-family: Verdana, Arial;
    			/*background: #ebebeb url("images/body-bg.png") repeat-y center;*/
    			background: #999 url(images/thinkingheadsborder.png) no-repeat center 160px;
    			width: 800px; 
    			margin: auto;
    			text-align: center;
    			padding-bottom: 20px;
    		}
    		
    		.stripViewer .panelContainer .panel ul {
    			text-align: left;
    			margin: 5 15px 0 30px;
    			top: 400px;
    		}
    		
    		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
    			margin: 20px 0; /*this is the position of the menu and viewing window*/
    			position: relative;
    			width: 100%;
    		}
    
    		/* These 2 lines specify style applied while slider is loading */
    		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
    		.csw .loading {margin: 200px 0 300px 0; text-align: center}
    
    		.stripViewer { /* This is the viewing window */
    			position: relative;
    			overflow: hidden; 
    			/*border: 5px solid #999;  this is the border. should have the same value for the links */
    			margin: auto;
    			width: 600px; /* Also specified in  .stripViewer .panelContainer .panel  below */
    			height: 360px;
    			clear: both;
    			background-color: transparent;
    			/*background: url(images/thinkingheadsborder.png) 0px 0px no-repeat;*/
    		}
    		
    		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    			position: relative;
    			left: 0; top: 0;
    			width: 100%;
    			list-style-type: none;
    			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
    		}
    		
    		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
    			float:left;
    			height: 100%;
    			position: relative;
    			width: 600px; /* Also specified in  .stripViewer  above */
    		}
    		
    		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
    			padding: 10px;
    		}
    		
    		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
    			margin: auto;
    		}
    		
    		.stripNav ul { /* The auto-generated set of links */
    			list-style: none;
    		}
    		
    		.stripNav ul li {
    			float:left ;
    			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
    		}
    		
    		.stripNav a { /* The nav links */
    			font-weight: bold;
    			text-align: center;
    			line-height: 32px;
    			background: transparent;
    			color: #FFFFFF;
    			text-decoration: none;
    			display: block;
    			padding: 0px 5px;
    			text-decoration: none;
    			/*font-family: Georgia, "Times New Roman", Times, serif;*/
    			font-family:"Agency FB";
    			font-size: 24px;
    		}
    		
    		.stripNav a:hover {
    			background: transparent;
    		}
    		
    		.stripNav a.current {
    			background: transparent;
    			color: orange;
    		}
    		
    		.stripNavL, .stripNavR { /* The left and right arrows */
    			position: absolute;
    			top: 230px;
    			text-indent: -7000em;
    		}
    		
    		.stripNavL a, .stripNavR a {
    			display: block;
    			height: 40px;
    			width: 40px;
    		}
    		
    		.stripNavL {
    			left: 0;
    		}
    		
    		.stripNavR {
    			right: 0;
    		}
    		
    		.stripNavL {
    			background: url("images/arrow-left.gif") no-repeat center;
    		}
    		
    		.stripNavR {
    			background: url("images/arrow-right.gif") no-repeat center;
    		}
    		
    	</style>

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    As mentioned already, a link to the actual page is really what we need to diagnose. The css is just a part of the picture, we need to see the whole page as it's laid out.
    Best wishes,
    Eye for Video

  5. #5
    Join Date
    Feb 2005
    Posts
    97
    http://www.sidconcepts.com/coda-slider/index2.html
    The css isn't external so you'll see the code there.

    I am trying to place the menu below the slider so that it's like the menu on my current website http://www.sidconcepts.com.

    Thanks for your help!

  6. #6
    Join Date
    Feb 2005
    Posts
    97

    Unhappy

    Any help please?

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Take a look here:
    http://kevinbatdorf.github.com/codaslider/
    scroll down to "Advanced Settings" then in the "dynamic tabs" section. Scroll down to see setting tabs to bottom.
    And/or google more examples of custom tabs coda slider.. for example:
    http://pkarl.com/articles/custom-tab...oda-slider-20/
    Best wishes,
    Eye for Video

  8. #8
    Join Date
    Feb 2005
    Posts
    97
    Awesome!! Just what I was looking for.. Thanks!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles