|
JavaScript - Close An Accordian Panel On Click
Hi,
I was wondering if anyone knew how I can close an accordian panel by clicking on it. In more detail, when the user clicks the panel title, it opens it, i want it to close if they click the title again. Im using Adobe's Spry framework. Any help would be great. -M Similar TutorialsHello all, I built a javascript accordian menu that works very well. However, after a menu is opened, I have to click on another menu to close the current one. I would like to be able to toggle opening and closing of a menu without having to interact with other menus. I appreciate any help! Here is the Javascript code: Code: var expandFirstItemAutomatically = false; // Expand first menu item automatically ?
var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true;
var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
var dg_activeItem = null;
function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==obj){
objFound = no;
}
}
if(objFound>=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}
function showSubMenu(e,inputObj)
{
if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==divToScroll)return;
}
}
hidingInProcess = false;
if(otherDivsToScroll.length>0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);
}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}
if(e || inputObj) {
if(dg_activeItem) {
dg_activeItem.className = dg_activeItem.className.replace('coursefinder_activeItem','');
}
var aTags = inputObj.getElementsByTagName('A');
if(aTags.length>0) {
aTags[0].className = aTags[0].className + ' coursefinder_activeItem';
dg_activeItem = aTags[0];
if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){
return true;
}
}
}
return false;
}
function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}
function scrollUpMenu()
{
var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';
for(var no=0;no<parentDivToHide.length;no++){
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
}
if(height>0){
setTimeout('scrollUpMenu()',0);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}
function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';
for(var no=1;no<otherDivsToScroll.length;no++){
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
otherDivsToScroll[no].style.height = tmpHeight + 'px';
}
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',0); else {
divToScroll = false;
ulToScroll = false;
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;
showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}
function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV'); // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL>
div.appendChild(inputObj); // Appending <UL> to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
while(menuItem){
if(menuItem.tagName=='LI'){
var aTag = menuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth'+currentDepth;
var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;
}
menuItem = menuItem.nextSibling;
}
}
function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('coursefinder');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}
if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}
else if(expandFirstItemAutomatically>0 ){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}
if(aTag.className.indexOf("active") == -1)
{
aTag.onclick = showSubMenu;
}
else
{
aTag.onclick = scrollUpMenu;
}
mainItemCounter++;
}
if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
var currentLocation = location.pathname;
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
aTags[no].className = aTags[no].className + ' coursefinder_activeList';
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!='coursefinder'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}
if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
}
}
Hello, I have a dialog box and in there I have a button that says New Service. When a user clicks on New Service, another dialog is shown where they the put the name of the service and after they click Create, I want that dialog box and the first one close as well. Here is my code, I can't figure it out. I want the #create-userDialog box to close after the user clicks on Create in #new-serviceDialog. <script> $(function() { $( "#dialog:ui-dialog" ).dialog( "destroy" ); $( "#create-userDialog" ).dialog({ autoOpen: false, width: 600, modal: true, buttons: { "OPEN": function() { var bValid = true; allFields.removeClass( "ui-state-error" ); }, CLOSE: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#create-userDialog" ).dialog( "open" ); }); $( "#new-serviceDialog" ).dialog({ autoOpen: false, width: 400, modal: true, buttons: { "Create": function() { var bValid = true; onclick = $( this ).dialog( "close" ); allFields.removeClass( "ui-state-error" ); }, Close: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#new-service" ) .button() .click(function() { $( "#new-serviceDialog" ).dialog( "open" ); }); }); </script> Hello everyone So I'm new and I have searched but I still got two questions. I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself. The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box. Anyway; internet gave me this small code: Code: objLightbox.onclick = function(e) { // close Lightbox is user clicks shadow overlay
if (!e) var e = window.event;
var clickObj = Event.element(e).id;
if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
myLightbox.end();
}
};
And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?) Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that. Regards Fredrik We have a testing application that displays a timer on the screen using Javascript. It seems to be working very well. However, someone brought to my attention today that if you click-and-hold the browsers close button in the upper right corner (the X button in Windows) that the timer will stop. You can then slide your mouse cursor off of the button, and the browser will not close, but the timer was stopped for the entire time that the button was being held down. This also works for the Minimize and Maximize buttons. Is there any way at all to take care of this problem? Thanks, Jesse I've building a site for a letting agents using Joomla and JomEstate Pro. I've got everything working great and am quite happy with it. However, there is an accordion 'property filter' menu on the right which works fine in every other browser, but not in IE. Would anyone be able to tell me why it is doing this or at least if there is any way i can find out what is wrong. Sample site is at www.dspadtest.co.uk/tapton Thanks. I got this accordion from this site: http://www.stemkoski.com/stupid-simp...ccordion-menu/ I'm trying to implement it into this site: http://tizifolio.com/officelogic/products/reception.php Why does it expand / flash for a second when the page loads on the products pages. Examples: http://tizifolio.com/officelogic/pro...occasional.php http://tizifolio.com/officelogic/products/reception.php This is the js: **************************************************************************************************** ********************/ $(document).ready(function() { //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) $('.accordionButton').click(function() { //REMOVE THE ON CLASS FROM ALL BUTTONS $('.accordionButton').removeClass('on'); //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES $('.accordionContent').slideUp('normal'); //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT if($(this).next().is(':hidden') == true) { //ADD THE ON CLASS TO THE BUTTON $(this).addClass('on'); //OPEN THE SLIDE $(this).next().slideDown('normal'); } }); /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER $('.accordionButton').mouseover(function() { $(this).addClass('over'); //ON MOUSEOUT REMOVE THE OVER CLASS }).mouseout(function() { $(this).removeClass('over'); }); /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ /**************************************************************************************************** **************** CLOSES ALL S ON PAGE LOAD **************************************************************************************************** ****************/ $('.accordionContent').hide(); }); Quote: menu: function( a, b ) { $( b ).observe( 'click', function( event ) { event.stop(); if( $( a ).visible() ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } else { $( a ).show(); $( b ).addClassName( 'selected' ); document.observe( 'click', function( e ) { if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } }); } }); $$( '#' + b + ' > a' ).each( function( element ) { element.observe( 'click', function( event ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); }); }); } This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu.. Thanks. helo, i just want to know how to add the same panel by clicking on a button right below the button.. I'm trying to create a menu navigation system from the top of the page. I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field. I've gotten it to work, somehow but it still isn't right. A few issues a - when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how. - The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind? - Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something. ANY help is appreciated, thanks! Code: <html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function slide() {
$("#panel").slideToggle("slow");
}
$(".drop_slide").hover(slide, stop);
$("#panel").hover(stop, slide);
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: grey;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
background-color: red;
}
.drop_games {
width: 200px;
height: 31px;
padding: 10px 10px 0 0;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="panel">
additional links here...or information
</div>
<p class="slide"><a href="#" class="drop_slide">test link</a></p>
</body>
</html>
hi i was wondering if anybody outhere could refer me to a tut that show how to create a drop down login panel.I've read any tut about drop down from DynamicDrive.com but it's not really what i'm looking forward.I try to change the content in "Drop Down Panel" script released into the relevant tut but it's not working.So help will be welcome. Hello. I've created this sliding panel where I click the Sidebar button and it slides out or in. But I would like to make it run more smoothly. I tried storing references to the elements within the MoveSidebar() as this.variables, so that they wouldn't be re-defined each time, but then FF spits out that 'this.sidebar.style' is undefined?! How can I make it run more smoothly, or get FF to recognise 'this.sidebar.style' please (once I reinstate all the this.references)? Here's the whole page and the button is also attached for ease of testing. Andy. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sidebar Panel</title>
<style type="text/css">
#sidebar {
display: inline-block;
position: fixed;
top: 200px;
right: -100px;
}
#sidebar img {
cursor: pointer;
}
#sidebar ul {
display: inline-block;
list-style-type: none;
padding: 0; margin: 0;
background: lightgrey;
margin-left: -4px;
height: 97px; /* same as the image */
}
#sidebar li {
display: inline;
}
#sidebar a {
float: left;
clear: left;
width: 90px;
text-decoration: none;
padding: 2px 5px;
}
</style>
<script type="text/javascript">
var theTimer;
function MoveSidebar() {
var sidebar = document.getElementById('sidebar');
var sideRight = parseInt(sidebar.style.right || "-100px");
var out = document.getElementById('sideImage').out;
if ( out && sideRight <= 0 ) {
sidebar.style.right = (sideRight + 2) + 'px';
}
else if ( !out && sideRight >= -100 ) {
sidebar.style.right = (sideRight - 2) + 'px';
}
else {
clearInterval(theTimer);
}
}
function InitSide() {
document.getElementById('sideImage').onclick = function () {
this.out = ( this.out ) ? false : true;
clearInterval(theTimer);
theTimer = setInterval(MoveSidebar,10);
}
}
window.onload = InitSide;
</script>
</head>
<body>
<h1>Creating a Sidebar Panel Button</h1>
<div id="sidebar">
<img src="images/sidebar.png" id="sideImage">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#further">Further Info</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Hello, trying to cooperate with Spry atm, and its going fairly ok.. Its just one thing, i would like it when you open one spry panel, the rest of them would close. Anyone know how to do that? Thanks Hi! I'm new to this, so please bare with me. My terminology may not be up to par. Here's the deal: - I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0: Code: on (release) {
getURL("example1.html", "_blank");
}
- Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver: Code: onClick="MM_goToURL('parent','example2.html')"
- On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using: Code: onClick="window.close()" - The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers: Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes." Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes. Opera = Button actually works for each page. Firefox & Chrome = Does not close the window at all. I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work. I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this. Any advice would be greatly appreciated. Thank you. - PW I don't know Jquery/Javascript too well at all but I can look at this code and see its pretty simple.. jQuery Panel: Code: $(document).ready(function() {
// Expand Panel
$(".open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$(".close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
and to trigger it from any link on the page it would need somethin like Code: $(".contact").click(function(){contactPanel()});
but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this? also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible? Hi everyone, So basically what I am trying to do here is make a navigation system for a website. I want to have a series of buttons that drop down a large panel with info and furhter links when you mouseover them, kind of like the Unilever site: http://unilever.com/ (mouseover the arrows to the side of "About us", Our Brands", etc). So I followed WebDesignerWall's Simple slide panel tutorial (http://www.webdesignerwall.com/tutor...for-designers/, which is basically exactly what I am after - except that I want to have the slide out/slide back happen on a mouseover/mouseout. The code I used looks like so: Code: $(document).ready(function(){
$(".btn-slide").mouseover(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$("#panel").mouseout(function(){
$("#panel").slideToggle("slow");
$(".btn-slide").toggleClass("active"); return false;
});
});
It kind of works but is pretty easily broken in a way that you couldn't just put up with. The slider sometimes repeatedly slides in and out, apparently all by itself, and the panel is sometimes stuck open when the mouse is nowhere near it - and therefore technically should be be hidden. I also tried the same thing using hover rather than mouseover, but unfortunately that breaks it even worse, since I want the panel to stay open when the user's mouse is within the panel area, not just within the button. So I'm wondering if anyone can offer me any suggestions as to how to get this to work, or even just an alternative way to achieve a simliar effect? I do like the sliding animation but I'm willing to forgo that for reliable functionality. Thanks in advance for any help! I'm using a script for a drop down panel and it works fine, however I need to add a bit of a margin for the inner content but the script seems to be stripping it out in firefox, it works fine in ie and chrome. I've tried every trick in the book outside of editing the actual js file. I currently have a transparent image as a spacer at the top and it even ignores that. It seems that firefox just wont display anything above the first form field for some reason. Could someone take a look at this script quick and give me an idea on what to change to I can add like a 5px margin to the top of the content? Code: //** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Oct 21st, 08'- Script created
//** March 23rd, 09' v1.01- Arrow images now preloaded
function ddpanel(setting){
setting.dir="up" //initial state of panel (up="contracted")
if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down"){
setting.dir="down"
}
if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
document.write('<style type="text/css">\n')
document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}\n')
document.write('</style>\n')
}
setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
this.setting=setting
if (setting.pointerimage.enabled){ //preload images
var img1=new Image(), img2=new Image()
img1.src=setting.pointerimage.src[0]
img2.src=setting.pointerimage.src[1]
}
var thispanel=this
if (window.addEventListener) //if non IE browsers, initialize panel window.onload
ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
else //else if IE, add 100 millisec after window.onload before initializing
ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(setting)}, 100)}, "load")
ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")
}
ddpanel.events_array=[] //object array to contain events created by script
ddpanel.addEvent=function(target, functionref, tasktype){
var evtmodel=target.addEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
var i=this.events_array.push({ //store event info in ddpanel.events_array[] and return current event's index within array
target: target,
tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
listener: evtmodel=="ie"? function(){return functionref.call(target, window.event)} : functionref
})-1
target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel=="w3c"? false : null)
}
ddpanel.removeEvent=function(target, functionref, tasktype){
var evtmodel=target.removeEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)
}
ddpanel.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
ddpanel.setCookie=function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
ddpanel.addpointer=function(target, className, imagesrc){
var pointer=document.createElement("img")
pointer.src=imagesrc
pointer.className=className
pointer.style.borderWidth=0
target.appendChild(pointer)
return pointer
}
ddpanel.prototype={
togglepanel:function(dir){ //public function that toggles the panel's state. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
var pcontent=setting.pcontent, dir=setting.dir
pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.stateconfig.initial
pcontent.style.height=pcontent._currentheight+"px"
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"
}
ddpanel.setCookie(setting.ids[0], setting.dir)
},
togglepanelplus:function(dir){ //public function that toggles the panel's state w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
if (setting.pointerimage.enabled)
setting.arrow.style.visibility="hidden"
clearTimeout(setting.revealtimer)
this.revealcontent()
},
revealcontent:function(){
var setting=this.setting
var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actualheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=setting.dir
if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
pcontent.style.height=newH+"px"
pcontent._currentheight=newH
}
else{
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"
}
return
}
var thispanel=this
setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)
},
initpanel:function(){
var setting=this.setting
var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
pcontent.style.overflow="scroll"
pcontent._actualheight=pcontent.scrollHeight
setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
pcontent.style.overflow="hidden"
pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.stateconfig.initial
var thispanel=this
ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab is clicked on
if (setting.animate.enabled)
thispanel.togglepanelplus()
else
thispanel.togglepanel()
if (e.preventDefault) e.preventDefault()
return false
}, "click")
if (setting.pointerimage.enabled){
var pointer1=new Image(), pointer2=new Image()
pointer1.src=setting.pointerimage.src[0]
pointer2.src=setting.pointerimage.src[1]
setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir=="down"? 1:0])
}
if (setting.closepanelonclick.enabled){ //assign click behavior when panel content is clicked on (links within panel or elements with class "closepanel"
ddpanel.addEvent(pcontent, function(e){
var rel="nofollow" target=e.srcElement || e.target
if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName=="A" || (target.parentNode && target.parentNode.tagName=="A")){
thispanel.togglepanel("up")
}
}, "click")
}
},
uninit:function(){
var setting=this.setting
if (setting.stateconfig.persiststate){
ddpanel.setCookie(setting.ids[0], setting.dir)
}
for (prop in setting){
setting[prop]=null
}
}
} //end of ddpanel object
//initialize instance of DD Drop Down Panel:
var defaultpanel=new ddpanel({
ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
stateconfig: {initial: "0px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})
Hello, I am trying to get this sliding panel to automatically be open when the page loads. Right now it is closed and I need to click it to open. I would like for it to be automatically opened when the page first loads and click to close it. Can anyone help me with the coding? Here is the 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>Demo</title> <style type="text/css"> @import url(style.css); </style> <script src="jquery.js" type="text/javascript"></script> <script src="javascript.js" type="text/javascript"></script> </head><body> <center> <div class="contenta"><img src="4.jpg" /></div> <div id="header"> <img src="2.jpg" width="938" height="68" border="0" /> </div> <div id="page_container"> <div id="toppanel"> <div style="height: 0px; display: block;" id="panel"><img src="1.jpg" width="938" height="583" /></div> <div class="panel_button" style="display: block;"><a href="#">Expand</a></div> <div class="panel_button" id="hide_button" style="display: none;"><a href="#">Close</a></div> </div> <div id="content"><img src="5.jpg" /></div> </div> </center> </body></html> and javascript.js $(document).ready(function() { $("div.panel_button").click(function(){ $("div#panel").animate({ height: "400px" }) .animate({ height: "300px" }, "fast"); $("div.panel_button").toggle(); }); $("div#hide_button").click(function(){ $("div#panel").animate({ height: "0px" }, "fast"); }); }); and css: body { text-align: center; margin: 0px; background: #000; } #page_container { position: relative; margin-left: 0px; margin-right: 0px; width: 938px; } #header { margin-left: 0px; margin-right: 0px; width: 938px; background: #111; } .panel_button { margin-left: 0px; margin-right: 0px; position: relative; top: -25px; padding-top: 5px; width: 100px; height: 22px; background: url(images/panel_button.png); z-index: 20; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; cursor: pointer; } .panel_button img { position: relative; top: 10px; } .panel_button a { text-decoration: none; color: #FFF; font-size: 12px; font-weight: bold; position: relative; font-family: Arial, Helvetica, sans-serif; } .panel_button a:hover { color: #999999; } #wrapper { margin-left: 0px; margin-right: 0px; width: 100%; text-align: center; } #toppanel { width: 100%; left: 0px; top: 0px; z-index: 25; text-align: center; } #panel { width: 938px; position: relative; top: 1px; height: 0px; margin-left: 0px; margin-right: 0px; z-index: 10; overflow: hidden; text-align: left; } #panel_contents { background: black; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; height: 100%; width: 938px; position: relative; z-index: -1; } #content { margin-left: 0px; margin-right: 0px; width: 100%; position: relative; text-align: left; color: #545454; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } div.contenta { width: 938px; margin-left: 0px; margin-right: 0px; } Thank you. First, here's the URL of the site I'm working on: http://www.georgiadogs.com/fls/8800/meetcentral2010/ Each week, I'd like to be able to have that page load a different tab/panel onload according to who the opponent is that week. For example: this week I want the second tab, Alabama, to load first. I'm using one of the many iterations of the coda slider script (see coda-slider.js). However, I can't seem to get it to cooperate. I found a solution for a similar coda slider, but it won't match with the one I'm using (because the naming conventions for the "panels" are not the same I assume). Here's what that solution was: Code: $().ready(function() {
$('#coda-slider-6').codaSlider({
crossLinking: false,
firstPanelToLoad: 3
});
});
Anyone got any ideas? It doesn't matter to me if the panel just loads from the get-go, or if it loads the first one and then automatically slides to the one I want. Thanks for the help! 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. |
|||||||