|
JavaScript - Linking To Specific Tabs In Accordion Widget
Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.
I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page. My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top. Javascript counts the top panel as 0, the second panel as 1 etc etc. So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story. My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added. Thanks! Similar TutorialsAnother thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. I'm creating a Jquery UI accordion and here are my customize options... http://jqueryui.com/demos/accordion/ These options do not include how to make all the accordions start off closed or choosing which one you want open as default when a user sees the page. Right now the user sees the first accordion open. I want to keep them all closed by default or have the option to have the last one open by default. Any guidance would be great... also not sure what code to post here but I guess I'll add the javaScript used to create the accordion with Jquery.... Code: /*
* jQuery UI Accordion 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Accordion
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function( $, undefined ) {
$.widget( "ui.accordion", {
options: {
active: 0,
animated: "slide",
autoHeight: true,
clearStyle: false,
collapsible: false,
event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even",
icons: {
header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s"
},
navigation: false,
navigationFilter: function() {
return this.href.toLowerCase() === location.href.toLowerCase();
}
},
_create: function() {
var self = this,
options = self.options;
self.running = 0;
self.element
.addClass( "ui-accordion ui-widget ui-helper-reset" )
// in lack of child-selectors in CSS
// we need to mark top-LIs in a UL-accordion for some IE-fix
.children( "li" )
.addClass( "ui-accordion-li-fix" );
self.headers = self.element.find( options.header )
.addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" )
.bind( "mouseenter.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-hover" );
})
.bind( "mouseleave.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-hover" );
})
.bind( "focus.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-focus" );
})
.bind( "blur.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-focus" );
});
self.headers.next()
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
if ( options.navigation ) {
var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
if ( current.length ) {
var header = current.closest( ".ui-accordion-header" );
if ( header.length ) {
// anchor within header
self.active = header;
} else {
// anchor within content
self.active = current.closest( ".ui-accordion-content" ).prev();
}
}
}
self.active = self._findActive( self.active || options.active )
.addClass( "ui-state-default ui-state-active" )
.toggleClass( "ui-corner-all" )
.toggleClass( "ui-corner-top" );
self.active.next().addClass( "ui-accordion-content-active" );
self._createIcons();
self.resize();
// ARIA
self.element.attr( "role", "tablist" );
self.headers
.attr( "role", "tab" )
.bind( "keydown.accordion", function( event ) {
return self._keydown( event );
})
.next()
.attr( "role", "tabpanel" );
self.headers
.not( self.active || "" )
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.next()
.hide();
// make sure at least one header is in the tab order
if ( !self.active.length ) {
self.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
self.active
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
});
}
// only need links in tab order for Safari
if ( !$.browser.safari ) {
self.headers.find( "a" ).attr( "tabIndex", -1 );
}
if ( options.event ) {
self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
self._clickHandler.call( self, event, this );
event.preventDefault();
});
}
},
_createIcons: function() {
var options = this.options;
if ( options.icons ) {
$( "<span></span>" )
.addClass( "ui-icon " + options.icons.header )
.prependTo( this.headers );
this.active.children( ".ui-icon" )
.toggleClass(options.icons.header)
.toggleClass(options.icons.headerSelected);
this.element.addClass( "ui-accordion-icons" );
}
},
_destroyIcons: function() {
this.headers.children( ".ui-icon" ).remove();
this.element.removeClass( "ui-accordion-icons" );
},
destroy: function() {
var options = this.options;
this.element
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
.removeAttr( "role" );
this.headers
.unbind( ".accordion" )
.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
.removeAttr( "role" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-selected" )
.removeAttr( "tabIndex" );
this.headers.find( "a" ).removeAttr( "tabIndex" );
this._destroyIcons();
var contents = this.headers.next()
.css( "display", "" )
.removeAttr( "role" )
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
if ( options.autoHeight || options.fillHeight ) {
contents.css( "height", "" );
}
return $.Widget.prototype.destroy.call( this );
},
_setOption: function( key, value ) {
$.Widget.prototype._setOption.apply( this, arguments );
if ( key == "active" ) {
this.activate( value );
}
if ( key == "icons" ) {
this._destroyIcons();
if ( value ) {
this._createIcons();
}
}
// #5332 - opacity doesn't cascade to positioned elements in IE
// so we need to add the disabled class to the headers and panels
if ( key == "disabled" ) {
this.headers.add(this.headers.next())
[ value ? "addClass" : "removeClass" ](
"ui-accordion-disabled ui-state-disabled" );
}
},
_keydown: function( event ) {
if ( this.options.disabled || event.altKey || event.ctrlKey ) {
return;
}
var keyCode = $.ui.keyCode,
length = this.headers.length,
currentIndex = this.headers.index( event.target ),
toFocus = false;
switch ( event.keyCode ) {
case keyCode.RIGHT:
case keyCode.DOWN:
toFocus = this.headers[ ( currentIndex + 1 ) % length ];
break;
case keyCode.LEFT:
case keyCode.UP:
toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
break;
case keyCode.SPACE:
case keyCode.ENTER:
this._clickHandler( { target: event.target }, event.target );
event.preventDefault();
}
if ( toFocus ) {
$( event.target ).attr( "tabIndex", -1 );
$( toFocus ).attr( "tabIndex", 0 );
toFocus.focus();
return false;
}
return true;
},
resize: function() {
var options = this.options,
maxHeight;
if ( options.fillSpace ) {
if ( $.browser.msie ) {
var defOverflow = this.element.parent().css( "overflow" );
this.element.parent().css( "overflow", "hidden");
}
maxHeight = this.element.parent().height();
if ($.browser.msie) {
this.element.parent().css( "overflow", defOverflow );
}
this.headers.each(function() {
maxHeight -= $( this ).outerHeight( true );
});
this.headers.next()
.each(function() {
$( this ).height( Math.max( 0, maxHeight -
$( this ).innerHeight() + $( this ).height() ) );
})
.css( "overflow", "auto" );
} else if ( options.autoHeight ) {
maxHeight = 0;
this.headers.next()
.each(function() {
maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
})
.height( maxHeight );
}
return this;
},
activate: function( index ) {
// TODO this gets called on init, changing the option without an explicit call for that
this.options.active = index;
// call clickHandler with custom event
var active = this._findActive( index )[ 0 ];
this._clickHandler( { target: active }, active );
return this;
},
_findActive: function( selector ) {
return selector
? typeof selector === "number"
? this.headers.filter( ":eq(" + selector + ")" )
: this.headers.not( this.headers.not( selector ) )
: selector === false
? $( [] )
: this.headers.filter( ":eq(0)" );
},
// TODO isn't event.target enough? why the separate target argument?
_clickHandler: function( event, target ) {
var options = this.options;
if ( options.disabled ) {
return;
}
// called only when using activate(false) to close all parts programmatically
if ( !event.target ) {
if ( !options.collapsible ) {
return;
}
this.active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
this.active.next().addClass( "ui-accordion-content-active" );
var toHide = this.active.next(),
data = {
options: options,
newHeader: $( [] ),
oldHeader: options.active,
newContent: $( [] ),
oldContent: toHide
},
toShow = ( this.active = $( [] ) );
this._toggle( toShow, toHide, data );
return;
}
// get the click target
var clicked = $( event.currentTarget || target ),
clickedIsActive = clicked[0] === this.active[0];
// TODO the option is changed, is that correct?
// TODO if it is correct, shouldn't that happen after determining that the click is valid?
options.active = options.collapsible && clickedIsActive ?
false :
this.headers.index( clicked );
// if animations are still active, or the active header is the target, ignore click
if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
return;
}
// find elements to show and hide
var active = this.active,
toShow = clicked.next(),
toHide = this.active.next(),
data = {
options: options,
newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
oldHeader: this.active,
newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
oldContent: toHide
},
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
// when the call to ._toggle() comes after the class changes
// it causes a very odd bug in IE 8 (see #6720)
this.active = clickedIsActive ? $([]) : clicked;
this._toggle( toShow, toHide, data, clickedIsActive, down );
// switch classes
active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
if ( !clickedIsActive ) {
clicked
.removeClass( "ui-state-default ui-corner-all" )
.addClass( "ui-state-active ui-corner-top" )
.children( ".ui-icon" )
.removeClass( options.icons.header )
.addClass( options.icons.headerSelected );
clicked
.next()
.addClass( "ui-accordion-content-active" );
}
return;
},
_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
var self = this,
options = self.options;
self.toShow = toShow;
self.toHide = toHide;
self.data = data;
var complete = function() {
if ( !self ) {
return;
}
return self._completed.apply( self, arguments );
};
// trigger changestart event
self._trigger( "changestart", null, self.data );
// count elements to animate
self.running = toHide.size() === 0 ? toShow.size() : toHide.size();
if ( options.animated ) {
var animOptions = {};
if ( options.collapsible && clickedIsActive ) {
animOptions = {
toShow: $( [] ),
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
} else {
animOptions = {
toShow: toShow,
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
}
if ( !options.proxied ) {
options.proxied = options.animated;
}
if ( !options.proxiedDuration ) {
options.proxiedDuration = options.duration;
}
options.animated = $.isFunction( options.proxied ) ?
options.proxied( animOptions ) :
options.proxied;
options.duration = $.isFunction( options.proxiedDuration ) ?
options.proxiedDuration( animOptions ) :
options.proxiedDuration;
var animations = $.ui.accordion.animations,
duration = options.duration,
easing = options.animated;
if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
easing = "slide";
}
if ( !animations[ easing ] ) {
animations[ easing ] = function( options ) {
this.slide( options, {
easing: easing,
duration: duration || 700
});
};
}
animations[ easing ]( animOptions );
} else {
if ( options.collapsible && clickedIsActive ) {
toShow.toggle();
} else {
toHide.hide();
toShow.show();
}
complete( true );
}
// TODO assert that the blur and focus triggers are really necessary, remove otherwise
toHide.prev()
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.blur();
toShow.prev()
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
})
.focus();
},
_completed: function( cancel ) {
this.running = cancel ? 0 : --this.running;
if ( this.running ) {
return;
}
if ( this.options.clearStyle ) {
this.toShow.add( this.toHide ).css({
height: "",
overflow: ""
});
}
// other classes are removed before the animation; this one needs to stay until completed
this.toHide.removeClass( "ui-accordion-content-active" );
// Work around for rendering bug in IE (#5421)
if ( this.toHide.length ) {
this.toHide.parent()[0].className = this.toHide.parent()[0].className;
}
this._trigger( "change", null, this.data );
}
});
$.extend( $.ui.accordion, {
version: "1.8.16",
animations: {
slide: function( options, additions ) {
options = $.extend({
easing: "swing",
duration: 300
}, options, additions );
if ( !options.toHide.size() ) {
options.toShow.animate({
height: "show",
paddingTop: "show",
paddingBottom: "show"
}, options );
return;
}
if ( !options.toShow.size() ) {
options.toHide.animate({
height: "hide",
paddingTop: "hide",
paddingBottom: "hide"
}, options );
return;
}
var overflow = options.toShow.css( "overflow" ),
percentDone = 0,
showProps = {},
hideProps = {},
fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
originalWidth;
// fix width before calculating height of hidden element
var s = options.toShow;
originalWidth = s[0].style.width;
s.width( parseInt( s.parent().width(), 10 )
- parseInt( s.css( "paddingLeft" ), 10 )
- parseInt( s.css( "paddingRight" ), 10 )
- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );
$.each( fxAttrs, function( i, prop ) {
hideProps[ prop ] = "hide";
var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
showProps[ prop ] = {
value: parts[ 1 ],
unit: parts[ 2 ] || "px"
};
});
options.toShow.css({ height: 0, overflow: "hidden" }).show();
options.toHide
.filter( ":hidden" )
.each( options.complete )
.end()
.filter( ":visible" )
.animate( hideProps, {
step: function( now, settings ) {
// only calculate the percent when animating height
// IE gets very inconsistent results when animating elements
// with small values, which is common for padding
if ( settings.prop == "height" ) {
percentDone = ( settings.end - settings.start === 0 ) ? 0 :
( settings.now - settings.start ) / ( settings.end - settings.start );
}
options.toShow[ 0 ].style[ settings.prop ] =
( percentDone * showProps[ settings.prop ].value )
+ showProps[ settings.prop ].unit;
},
duration: options.duration,
easing: options.easing,
complete: function() {
if ( !options.autoHeight ) {
options.toShow.css( "height", "" );
}
options.toShow.css({
width: originalWidth,
overflow: overflow
});
options.complete();
}
});
},
bounceslide: function( options ) {
this.slide( options, {
easing: options.down ? "easeOutBounce" : "swing",
duration: options.down ? 1000 : 200
});
}
}
});
})( jQuery );
Hi All, I want an accordion menu and which is as follows 1.it should be a vertical accordion menu 2.every menu should display with image and link 3.if i click on image or link then only menu should display or open to show sub menu otherwise it should not display. Please tell the solution for the above ThanksAhead Venkat Hi All, So i have been trying over the past few weeks (among other things) to get this menu figured out. I would really appreciate some advice/help/direction with this... Please see attached pic... what i have is three elements: "Home" "Services" "Contact". What i want is on page load they are all 100px wide... now whenever user hovers over an item it expands to be 200px wide while the other two shrink to 50px... remove hover they revert to original... I am not too familiar with javascript as i mainly use C# to do the tasks normally done by javascript (i work on asp.net platform)... i have presented a similar question to this in ajax section (thinkin that what i had was an ajax work around) but upon further reading of sources i think that is not really what i want... I am unsure where to begin and what to do... i know i need to set up a function and i have the math part figured out (i think)... i guess what i am really unclear as to whether this is a modification to the accordion menu frame... the issues i see are that i do not want the menu to have a traditional "content" area that collapses; i want the menu "headers" to expand... i also need them to expand horizontally not vertically... i am not looking for someone to "do this" for me; i am looking for advice and guidance... possibly a link to a tutorial? i have tried this but it does not work right... i can revisit it (possibly type-Oed something) but i havent because it is not really what i am looking for Hello to all, I have a little problem with my accordion menu and I CRAVE for your help! I try to make this: when you visit my page I need the menu to be all collapsed. Also the history of clicks (it remembers which menus where left opened) works fine on IE but not on firefox. Here is the js code: function add_menu_event_handlers() { var elems = document.getElementsByTagName('h3'); for (i = 0; i < elems.length; i++) { switch (elems[i].parentNode.className) { /*case 'moduletable': case 'moduletable_menu':*/ case 'left_module_title': case 'left_module_title_menu': { if (elems[i].parentNode.parentNode.parentNode.id == 'xp-left') { xplike_addEvent(elems[i], 'click', function(){menu_header_click(this);}); // menu_header_click(elems[i]); //Load status from cookies and collapse if required var cookie_array = document.cookie.split(';'); for(var j=0; j<cookie_array.length; j++) { var c = cookie_array[j]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf('xplike_menu_status_' + elems[i].firstChild.nodeValue.replace('.', '_').replace(' ', '_')) == 0) { var menu_cookie = c.split('=') if (menu_cookie.length == 2 && menu_cookie[1] == '1') { menu_header_click(elems[i]); } } } } } } } } And it also has this for the history thing. function save_menu_status(menu_title, value, how_many_days) { var date = new Date(); date.setTime(date.getTime()+(how_many_days*24*60*6 0*1000)); var expires = ""; document.cookie = 'xplike_menu_status_' + menu_title.replace('.', '_').replace(' ', '_') + '=' + value + expires + '; path=/'; } It might be easy and stupid, I know, but since I'm a designer - not a developer - all look weird to me! Any thoughts? I have this accordion : accordion example I want to separate each item into 3 columns. I tried using table but it doesn't work (it made the text not clickable). Any idea how? Thank you Hello people, I got a problem. This is the code for hiding en showing informatie in an acordion. It looks fine and it works! But it only handles one div! The main thing i want is that when i click on the text "button" the next div, with all the span's within it, has to slide under. Example: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion div").hide();
$(".accordion p").hide();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow").siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
$(".accordion p").show();
$(".accordion .button").show();
});
});
</script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="accordion">
<h3>Title</h3>
<div class="test">
<p>subtext</p>
<div class="button"> <a href="" title="">Button</a> </div>
</div>
<div>
<span style="display:block; height: 20px; width: 220px; margin-top: 10px; margin-left: -5px;"><input type="radio" checked="checked" value="" name="" id="" /><label for="">test</label></span>
<span style="display:block; height: 20px; width: 220px; margin-top: 0px; margin-left: -5px; margin-bottom: 20px;"><input type="radio" value="" name="" id="" /><label for="">test</label></span>
<span style="font-weight:bold;">Vanaf<input type="text" style="width: 20px; height: 15px;" class="" value="1" readonly=""></input>-<input type="text" style="width: 20px; height: 15px;" class="" value="" readonly=""></input>-<input type="text" style="width: 40px; height: 15px;" class="" value="1" readonly=""></input> change to <input type="text" style="width: 20px; height: 10px;" class="" value="" readonly=""></input>%</span>
<span style="display:block; text-align: right; text-decoration:underline; font-weight:bold; color: red;">count</span>
</div>
</div>
</body>
</html>
CSS: Code: body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #004584;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color: #FFFFFF;
}
.accordion h3:hover {
background-color: #00AEE7;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion .test {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion .extra {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
Hi All, Does anyone know of any good horizontal accordion scripts that use jquery, like this one: http://www.slidedeck.com/ I would like something very similar to that but unfortunately the free version is as customizable as I need it to be. I've done a Google search but found nothing as of yet... Thanks, Greens85 Hey everyone. If you go he
Code: http://store.inspirationsdancewear.com/?xls_offlinekey=4888254 you will see an "accordion" navigation on the left side. It opens and contracts like it should, HOWEVER I need to add the following functionality. 1. I want to have ONLY 1 "parent" category displaying it's "child" categories at a time. So when I open another "parent" link, I want the previous one to collapse, so only 1 accordion is open at a time (right now you are able to open all of them without the other ones collapsing). 2. When I select a "child" category from the "parent" category, I need the menu to stay open when going to the "child" category page and I also need the relevant "child" category to be "highlighted" so the user knows which page they are on. Please let me know if you can help me with any of this. I would GREATLY appreciate it!! PHP Code: <script type="text/javascript"> //----------------------------NAVIGATION DROPDOWN------------------------------------// sfHover = function() { var sfEls = document.getElementById("left").getElementsByTagName("h2"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); function initMenu() { $('#left div').hide(); $('#left h2').click( function() { $(this).next().slideToggle('normal'); } ); } $(document).ready(function() {initMenu();}); </script> <?php function print_childs($categ){ $childs = $categ->categ_childs; if(!$childs || (count($childs) == 0)){ echo "</a>"; return; } echo "»</a><ul>\n"; foreach($childs as $category){ if(!$category->HasChildOrProduct()) continue; ?> <li><a class="childcats" href="<?= $category->Link; ?>"><?= $category->Name; ?><?php print_childs($category); ?></a></li> <?php } echo "</ul><br/>\n"; } ?> <div id="leftwrapper"> <h2 style="margin-top:-25px; padding-bottom:15px; color:#900; margin-left:15px; font-size:1.2em">Shop Online</h2> <div id="left"> <?php foreach($this->menu_categories as $category): ?> <h2 class="headings"> <?= $category->Name; ?></h2> <div> <a class="childcats" href="<?= $category->Link; ?>"> See all <?= $category->Name; ?> <?php print_childs($category); ?></a> </div> <?php endforeach; ?> <?php if(_xls_get_conf('ENABLE_FAMILIES', 1)): ?> <?php $families = Family::LoadAll();?> <?php foreach($families as $family): ?> <a href="index.php?family=<?= $family->Family ?>"><?= $family->Family ?></a> <?php endforeach; ?> <?php endif; ?> </div> </div> I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".
For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>
Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.
If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.
Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/
//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
var c;
for(c in array) {
document.getElementById(array[c]).style.display = "none";
}
click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
click.style.display = "inline";
}}
I’m trying to implement a JavaScript that creates an accordion menu. As the script currently stands, your able to tell the first list within the menu to expand when the page loads. You do this by adding .expandfirst into the ul class tag. My question is... Does anyone know how to edit the JavaScript so that I can also tell the menu (on some pages) to expand the second or third list? I only need one list to be expanded at any one time. Here's the script... Code: function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first).show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
Hope someone can help!? I have tried using Microsofts translator widget but it messes up my menu that I wish it to sit beside, the widget is almost twice the height if my menu bar. I am after a widget that is just text and the user clicks it to open up a select language box. Does anyone have other widgets they use that is based on a single line selector not more than say 15px high or some thing like that ? Howdy Community, I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action. I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work. I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!! Help!! Thanks, Cesar Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site: Javascript And CSS Tutorial - Accordion Menus | Switch on the Code It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload? Thanks for the help, --Anamaniac I'm making an JS accordion and I just miss the final step. That is - say: I click menu 1, content 1 slides down (shows up). After that, I click menu 2, content 2 slides down but content 1 of menu 1 just display: none (abruptly disappers) but not slides up. For the slide up effect, I wrote a function called cutHeight(). The cutHeight function works perfectly independently but not coherent with the accordion function. Is there anything wrong with my scripts? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function accordion(openAccordionID){
document.getElementById("content"+openAccordionID).style.display =
(document.getElementById("content"+openAccordionID).style.display == "none")
? "block" : "none" ;
var sumAccordion;
if(document.all){
sumAccordion = document.body.getElementsByTagName("div").length/2;
}
else {sumAccordion = document.getElementsByClassName("content").length;}
for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){
if(closeAccordionID == openAccordionID){continue;}
document.getElementById("content"+closeAccordionID).style.display = "none";
}
addHeight(openAccordionID);
cutHeight(closeAccordionID);
}
var h=0;
var t;
function addHeight(openAccordionID){
clearInterval(t);
document.getElementById("content"+openAccordionID).style.height = h+"px";
h+=1;
t = setInterval("addHeight('"+openAccordionID+"')",10);
if(h==100){clearInterval(t);h=0;}
}
var T;
function cutHeight(closeAccordionID){
var h=100;
clearInterval(T);
document.getElementById("content"+closeAccordionID).style.height = h+"px";
h-=1;
T = setInterval("cutHeight('"+closeAccordionID+"')",10);
if(h==0){clearInterval(T);}
}
</script>
<style>
.menu {
background-color: #6F6;
width: 200px;
height: 50px;}
.content {
display: none;
background-color: yellow;
width: 200px;
height:0px;
overflow: hidden;}
</style>
</head>
<body>
<div onclick="accordion(1)" class="menu">Menu 1</div>
<div id="content1" class="content">Content 1</div>
<div onclick="accordion(2)" class="menu">Menu 2</div>
<div id="content2" class="content">Content 2</div>
<div onclick="accordion(3)" class="menu">Menu 3</div>
<div id="content3" class="content">Content 3</div>
</body>
</html>
Hello, Im a coding noob and trying to make this widget display in 3 columns. Can some one help me? I am able to do it with simple css modifications, but the container still only shows up as 1 column rather than 3. Any ideas? Code: <!-- Show static HTML/CSS as a placeholder in case js is not enabled - javascript include will override this if things work -->
<style type="text/css" media="screen">
.gr_custom_container_1318614690 {
/* customize your Goodreads widget container here*/
border: 1px solid gray;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 10px 5px 10px 5px;
background-color: #FFFFFF;
color: #000000;
width: 300px
}
.gr_custom_header_1318614690 {
/* customize your Goodreads header here*/
border-bottom: 1px solid gray;
width: 100%;
margin-bottom: 5px;
text-align: center;
font-size: 120%
}
.gr_custom_each_container_1318614690 {
/* customize each individual book container here */
width: 100%;
clear: both;
margin-bottom: 10px;
overflow: auto;
padding-bottom: 4px;
border-bottom: 1px solid #aaa;
}
.gr_custom_book_container_1318614690 {
/* customize your book covers here */
overflow: hidden;
height: 60px;
float: left;
margin-right: 4px;
width: 39px;
}
.gr_custom_author_1318614690 {
/* customize your author names here */
font-size: 10px;
}
.gr_custom_tags_1318614690 {
/* customize your tags here */
font-size: 10px;
color: gray;
}
.gr_custom_rating_1318614690 {
/* customize your rating stars here */
float: right;
}
</style>
<div id="gr_custom_widget_1318614690">
<div class="gr_custom_container_1318614690">
<h2 class="gr_custom_header_1318614690">
<a href="http://www.goodreads.com/review/list/6131699-kevin?shelf=read&utm_medium=api&utm_source=custom_widget" style="text-decoration: none;">Kevin's bookshelf: read</a>
</h2>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget" title="The Great Gatsby"><img alt="The Great Gatsby" border="0" src="http://photo.goodreads.com/books/1273944449s/4671.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget">The Great Gatsby</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/3190.F_Scott_Fitzgerald">F. Scott Fitzgerald</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget" title="Where the Sidewalk Ends"><img alt="Where the Sidewalk Ends" border="0" src="http://photo.goodreads.com/books/1168052448s/30119.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget">Where the Sidewalk Ends</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/435477.Shel_Silverstein">Shel Silverstein</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget" title="The Alchemist"><img alt="The Alchemist" border="0" src="http://photo.goodreads.com/books/1287827991s/865.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget">The Alchemist</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/566.Paulo_Coelho">Paulo Coelho</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget" title="Slaughterhouse-Five"><img alt="Slaughterhouse-Five" border="0" src="http://photo.goodreads.com/books/1316813479s/4981.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget">Slaughterhouse-Five</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/2778055.Kurt_Vonnegut">Kurt Vonnegut</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget" title="Of Mice and Men"><img alt="Of Mice and Men" border="0" src="http://photo.goodreads.com/books/1309211906s/890.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget">Of Mice and Men</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/585.John_Steinbeck">John Steinbeck</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget" title="Lord of the Flies"><img alt="Lord of the Flies" border="0" src="http://photo.goodreads.com/books/1165637417s/7624.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget">Lord of the Flies</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/306.William_Golding">William Golding</a>
</div>
</div>
<br style="clear: both"/>
<center>
<a href="http://www.goodreads.com/"><img src="http://www.goodreads.com/images/widget/widget_logo.gif" alt="goodreads.com" style="border:0;" /></a>
</center>
<noscript>
Share <a href="http://www.goodreads.com">book reviews</a> and ratings with Kevin, and even join a <a href="http://www.goodreads.com/group/">book club</a> on Goodreads.
</noscript>
</div>
</div>
<script src="http://www.goodreads.com/review/custom_widget/6131699.Kevin's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=6&order=a&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=&widget_border_width=1&widget_id=1318614690&widget_text_color=000000&widget_title_size=medium&widget_width=medium" type="text/javascript" charset="utf-8"></script>
I work for a university in Texas, and recently my boss indicated he wanted me to build a "help button" widget for our computers. We run both Mac and Windows, and will be upgrading to Windows 7 soon, as I understand it supports widgets. According to the guide I'm working my way through, Widgets can built using a combination of HTML and Javascript. While I know HTML, I know next to nothing about Javascript, hence, my question. Here's what I need the script to do: Pull the logged in username, pull the machine name, pull the time and date, then throw up a dialogue box which will send everything to an e-mail address/server. Does anyone know a spot for me to begin? I must confess, I'm a little befuddled by Javascript. Thanks Hi friends, Am customizing a Joomla website and i need to know how to get a nice and fine javascript accordion horizontal panel which is so smooth and good looking to add in Joomla Home page. Please suggest me some horizontal javascript accordion with images and link to another page. Thanks in Advance. Hey, I'm having trouble with this site http://bit.ly/hL0u0w... If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections. This is the javascript Quote: <script type="text/javascript"> $(document).ready (function() { $('#link1').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); $(document).ready (function() { $('#link2').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); $(document).ready (function() { $('#link3').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); }); </script> and here is the html Quote: <div id="subnav4"> <ul class="navigation4 pagination"> <li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li> <li style="display: none;" class="dome slide"><a href="#">corporate id</a></li> <li style="display: none;" class="dome slide"><a href="#">branding</a></li> <li style="display: none;" class="dome slide"><a href="#">brochures</a></li> <li style="display: none;" class="dome slide"><a href="#">direct mail</a></li> <li class="tab4"><a id="link2" href="#">heading 2</a></li> <li style="display: none;" class="dome slide"><a href="#">email marketing</a></li> <li style="display: none;" class="dome slide"><a href="#">websites</a></li> <li class="tab4"><a id="link3" href="#">heading 3</a></li> <li style="display: none;" class="dome slide"><a href="#">advertising</a></li> <li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li> <li class="tab4"><a id="heading 3" href="#">exhibitions</a></li> </ul> </div> Hope someone can help with this! Many thanks! |
|||||||