JavaScript - Horizontal Expanding And Collapsing Panels

Hello everyone!

I'm newly managing a small college website with next to no experience.

There is a file called "bios.js" which creates expanding/collapsing li's. The problem is that I've put some hyperlinks into the expanded content, and it seems that "bios.js" is in front of, so clicking the hyperlink simply collapses the list item instead of opening the link.

Is there any way to:
a) have the hyperlinks trump the javascript?
b) Make "bios.js" apply to the title class of the list item rather than the list item itself?

I'm new to this, so I'm not going to post 100 lines of code before I know if it's doable. And if you reply to this, perhaps you could give me a hint as to what part of the code I should post (the open-hover portion?). Thanks all!

I am using the following code to rotate my banner 3 times.

I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions?

Code:

<script type="text/javascript">


$(document).ready(function(){ 

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);



$(".ui-tabs-panel > a").hover( 
function() { 
$("#featured").tabs("rotate",0,true); 
}, 
function() { 
$("#featured").tabs("rotate",5000,true); 
} 
); 


<div id="featured" >

---------------------------------------------------------
<%
String sCount="";
String stitle = "";
String iPanels = "";
String sShowPanels = "";
String sContent="";
%>

<ul class="ui-tabs-nav">

<%
for(int i=1;i<7;i++){

sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;

//out.print(requestItem.getFieldValue(iPanels) + "=" + sCount);



if(requestItem.getFieldValue(iPanels).equals(sCount)){


if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){

if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){

%>

<li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>">
<%=requestItem.getFieldValue(stitle)%>
</a></li>
<%
}
}
}
}

%>
</ul>


<%


for(int i=1;i<7;i++){


sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
sContent = "sContent";
sContent= sContent + i;



if(requestItem.getFieldValue(iPanels).equals(sCount))
{
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes"))
{
if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2)
{
%>
<div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style="">
<%=requestItem.getFieldValue(sContent)%>
</div>
<%
}
}
}
}
%>

</div>


</div> <!--content-->

Hola!

I'll give you a little background before I ask you guys my question!

I have a Header, a rectangle of 800x100 and directly below that I have Spry Collabsible panels stacked on top of each other with my menu items 'Home' 'About us' etc.

My question is... does anyone know of a way I could vertically center everything on the page, so that when the panels are closed it is nicely in the centre and when you open one, the header moves up to allow room for the content and the whole thing stays vertically centered on the page.

I'm guessing this will need some kind of fancy javascript to make possible.

Thanks in advance for any advice you can give!

Adam

Hi all

I have created a website http://www.clickmunki.com with a jQuery vertical panel that collapses and expands in the top left of each page. In my offline code (which I have not yet uploaded to the live site) I have set the panels to display by default so the user automatically has the information available to them on each page as they scroll through the site. My problem is that the panels are not behaving independently of each other. When one panel is collapsed then they all collapse instead of just the one that the user has clicked. This is my first attempt at using javascript and jQuery and I am not sure how to resolve this. Any assistance would be very much appreciated.

This is my js:

Code:

	$(document).ready(function(){
			$(".trigger").click(function(){
			$(".panel").toggle("fast");  <! panel is for the panel on the home page -->
			$(this).toggleClass("active");
			return false;
		});
		$(document).ready(function(){
		$(".trigger").click(function(){
		$(".panel2").toggle("fast"); <! panel2 is for the panels in the body of the site -->
		$(this).toggleClass("active");
		return false;
	});

Kind regards

Anne

I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container.

( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly).

I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding
[CODE]
google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); });

after var map = new google.maps.Map(document.getElementById(canvas), myOptions);

[CODE]

This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested:

Re-centrering the map around the marker

[CODE]
google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
[CODE]

Zooming in and out again to trigger the resize:

[CODE]
map.setZoom( map.getZoom() );
[CODE]

Or using this to do the same thing:

[CODE]
this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1);
[CODE]

Suggested for use if there are multiple markers:

[CODE]
map.setZoom(map.getZoom()); map.fitBounds(bounds);
[CODE]

I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help!

Hi there!

I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem:

I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong.

First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me.

When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly.

My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities");
rs_ProfAbility.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_ProfAbility.gallery) {
return row;
}
return null;
}
rs_ProfAbility.filter(chooseSet); [CODE]

This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help!

Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he

www.iotheatre.com/GoldenAgeAbilities.php

-Chris Blockus

I would like to create collapsing boxes.

I would like for them to have different colors.

Box1 Box 3
Link 1 Link 1
Link 2 link 2
Link 3 Link 3

Box2 Box 4
Link 1 Link 1
Link 2 link 2
Link 3 Link 3

I got the code to do the first column (box 1 and 2). But I don't know how to add a second column (box 3 and 4). Any help would be appreciated.

Thanks

how do i make this table's initial state to be collapsed rather than expanded

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title>
    
  <script type="text/javascript">

function poorman_toggle(id)
{
	var tr = document.getElementById(id);
	if (tr==null) { return; }
	var bExpand = tr.style.display == '';
	tr.style.display = (bExpand ? 'none' : '');
}
function poorman_changeimage(id, sMinus, sPlus)
{
	var img = document.getElementById(id);
	if (img!=null)
	{
	    var bExpand = img.src.indexOf(sPlus) >= 0;
		if (!bExpand)
			img.src = sPlus;
		else
			img.src = sMinus;
	}
}

function Toggle_trGrpHeader2()
{
    poorman_changeimage('trGrpHeader2_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
    poorman_toggle('row1');
    poorman_toggle('row2');
    poorman_toggle('row3');
}

function Toggle_trGrpHeader1()
{
    poorman_changeimage('trGrpHeader1_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
    poorman_toggle('trRow1');
}
function IMG1_onclick() {

}

function IMG2_onclick() {

}

function IMG8_onclick() {

}

function IMG10_onclick() {

}

function IMG12_onclick() {

}

function IMG13_onclick() {

}

  </script>
    
</head>
<body style="font-size: 12pt">

    <div>
    <table border="0" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; cursor: crosshair; padding-top: 0px; background-color: transparent; border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid;" cellpadding="1" cellspacing="0" align="center">
        <tr>
            <td colspan="12" style="border-bottom: gray thin solid; text-align: center; height: 25px;" class="titlebg">
                <span class="titlebg" style="color: gray">Our Affiliates</span></td>
        </tr>
    
    <tr id="trGrpHeader2">
        <td class="number" colspan="4" rowspan="4" style="border-right: gray thin dashed;">
            <span onclick="javascript:Toggle_trGrpHeader2();">
        <img id="IMG12" src="http://img48.imageshack.us/img48/3168/viewallcopyjo5.png" language="javascript" onclick="return IMG12_onclick()" /></span></td>
        <td colspan="1" style="width: 71px; height: 11px;"><img id="Img5" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
        <td colspan="1" style="width: 63px; height: 11px;"><img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
        <td colspan="1" style="width: 76px; height: 11px;"><img id="Img6" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
        <td colspan="1" style="width: 51px; height: 11px;"><img id="Img7" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
        <td colspan="1" style="width: 40px; height: 11px">
            <img id="IMG8" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
        <td colspan="1" style="width: 55px; height: 11px">
            <img id="IMG10" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
        <td class="number" rowspan="4">
        </td>
        <td class="number" rowspan="4" style="width: 80px; text-align: center; border-left: gray thin dashed;">
            <img id="IMG13" src="http://img61.imageshack.us/img61/613/minibanneruf1.gif" language="javascript" onclick="return IMG13_onclick()" start="" /><br />
            <span style="font-size: 8pt; color: dimgray"></span></td>
</tr>
    
    <tr id="row1">
        <td class="number" rowspan="3" style="width: 71px; height: 22px">
            <img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
        <td class="number" rowspan="3" style="width: 63px; height: 22px">
            <img id="IMG2" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
        <td class="number" rowspan="3" style="width: 76px; height: 22px">
            <img id="Img11" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
        <td class="number" rowspan="3" style="width: 51px; height: 22px">
            <img id="Img9" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
        <td class="number" rowspan="3" style="width: 40px; height: 22px">
        <img id="Img4" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
        <td class="number" rowspan="3" style="width: 55px; height: 22px">
        <img id="Img3" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
</tr>
    <tr id="row2">
</tr>
    <tr id="row3">
</tr>
    
    </table>
    </div>
</body>
</html>

Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code.

Could you please assist me - why is it that the following code works in IE, yet not in Mozilla?

More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so:

HTP.p(
'<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;">
<tr>
<td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td>
</tr><tr>
<td colspan="1" style="display:none;color:#ff0000;">');

<head>
<script language="JavaScript">

function ftoggle(id){
var el = document.getElementById(id);
if(id.parentNode.nextSibling.childNodes.item(0).style.display=="")
{
id.parentNode.nextSibling.childNodes.item(0).style.display="none";
}
else {
id.parentNode.nextSibling.childNodes.item(0).style.display="";
}
}

</script>
</head>');

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet.

I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this:
Menu Item 1 [Click to expand]
-Sub Item 1.1 [Click to expand]
-Sub Item 2.1 [Click to get to page]

Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please?

URL: http://dinotamermeep.blogspot.com/p/blog-archive.html

Thank you,
-Meepski

Code:

function initMenu(){
  var menus, menu, text, a, i, CurrentID;
  menus = getChildrenByElement(document.getElementById("menu"));
  CurrentID = document.getElementById("auto");
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
	
  }

  //CurrentID.showMenu; thought this would work but it doesn.t
}

I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts

Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with.

Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it.

The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK.

The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible.

I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction".

I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish")

Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function?
Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL?

I think option 1 sounds better.....

Again, I need help on making this form pop up on each table row.

Any help or direction would be greatly appreciated.

Sample code follows:

Code:

<table>
<thead>
<tr>
      <th>ID</th>
      <th>Name</th>
      <th>Number</th>
      <th>Address</th>
      <th>Email</th>
      <th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
      <td onclick="javascriptfunction(this)">foo</td>
      <td>bar</td>
      <td>data</td>
      <td>from</td>
      <td>MySQL</td>
      <td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
	<table title="myTable" style="margin: auto; display:hidden">
		<tr class ="theader2"><th colspan="2">TEST TABLE</th>
                </tr>
		<tr>
			<td class="header">Some Field: </td>
			<td class="selector"><select name="foo" style="width: 150px;" id="foo">
                        <option value="" selected="selected">-- Select Value --</option>
                <tr>
                        <input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>

Any help would be greatly appreciated =)

Hi all,

I am looking to create this in JS/DHTML/CSS that I found in a flash script you can view he
http://www.melodicmedia.com/dev/expa...ash_flash.html

I want the red expanding and contracting circle to be on top of a image so it only shows the parts of the image that the circle is around.

Any help you have would be much appreciated =)

Thank you =)

Light and Love and Healing to you,
-Patrick Arden McNally