|
JavaScript - Spry Master/detail Region And Tabbed Panels Problem
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 Similar TutorialsI 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! Thanks to everyone for all the help so far. I've done a search for this but haven't found anything applicable. I have a Spry dataset pulling form an External XML file. The masterColumn needs to scroll horizontally. You can see what I'm talking about here. Under the "pics" section. (Thanks again JWPhillips and Tiny Script for helping to get the shuffle to work. And yeah, not everything is ready so It looks choppy.) Anyway, this is the div tag in question: Code: <div id="contentpics">
<div class="MasterDetail">
<div spry:region="ds2" class="MasterContainer">
<img class="MasterColumn" spry:repeat="ds2" spry:setrow="ds2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" src="{thumb}" width="80" height="80"/></div>
<div spry:detailregion="ds2" class="DetailContainer">
<div class="DetailColumn"><img name="" src="{large}" alt="" width="350" height="350"/></div>
</div>
<br style="clear:both" />
</div>
</div>
I've tried several JS custom scrollbars, but I don't think that they work with the spry. Any suggestions? Thanks, SweetAnne Hello, I'm in the process of setting up an online store for our company. I'm adding a function whereby the user can view all products for their particular motorcycle model by selecting first the make and then the model they own via drop down boxes. I have the two boxes working fine, that's no problem. The problem I'm running into is in the re-direct to the proper page. What's happening is this: the URL is ending up like this: http://rekluse.mybigcommerce.com/?ma...ucts&x=11&y=16 when it should end up like this: http://rekluse.mybigcommerce.com/cat...F250R-Products Here is what I believe is the relevant code: Code: <script type="text/javascript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function KW_updateItems(d,o,fn) { //v2.6 By Paul Davis www.kaosweaver.com
var i,s,l=MM_findObj(d),b,z=o.options[o.selectedIndex].value;
l.length=0;l.options[0]=new Option('tbd','tbd');b=(z!='nill')?eval(z+'_items'):0;
for(i=0;i<b.length;i++){s=b[i].split("|");l.options[i]=new Option(s[1],s[0]);}
l.selectedIndex=0;if (!fn) return;eval(fn)
}
//-->
</script>
Code: <form name="form" id="form">
<select name="make" id="make" onchange="KW_updateItems('model',this)">
...
<input type="image" src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/GoButton.gif" value="%%LNG_Subscribe%%" class="Button" id= "go_button" onclick="MM_jumpMenuGo('model','parent',0)" />
</form>
...
<script language="JavaScript">
var honda_items = new Array();
honda_items[2]='categories/Honda-CRF250R-Products|CRF250R';
</script>
Any hints? Thanks in advance. Hi, I am having problem in validating my form using spry tools. The problem is that if I try to include any other validation other than spry along with spry validation the spry validation does not work. Plzz tell a possible solution 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-->
Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
};
Many thanks Liam http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. 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 Hello, I am new on forum and javascript. I have got a query for dynamic geo location javascript. I would like to make a page which redirect to another page based on user REGION. Ex. If user from EMEA then page1.html, if user from APAC then page2.html, if user from Other region then page3.html Hope someone will share their ideas with an example to achive this. Thanks Hello, everyone. I have a question regarding an issue I have with the regions on the page. I would like to know how could I resize them... I know there is no HTML or CSS modality, therefore the only solution has to come from Javascript. Image I have four flags on a page and each of those are links to other pages. However, when I resize the page, drag its border lines and so on, everything gets messed up. Any idea how to solve this? Or at least other options, like Tables, Divs, anything that can resize and accept links? Thanks for your time. I'd like to request this thread be moved to the PHP area. Thank you! Hello, I confess, I'm a javascript newbie, but I have a project dilemma that is beyond my capabilities. I'm building a web based scoring system. I will input players names and their individual scores. Each of their 12 "station" scores will be placed into 12 text boxes and the total will be added up and placed into a textbox called Score. I've started with only two textboxes to start out and here is what I have (which works). Code: <HTML>
<HEAD>
<script type="text/javascript">
function popup(form) {
var Box1 = document.scoreform.one.value;
var Box2 = document.scoreform.two.value;
form.Score.value =(Number(Box1) + Number(Box2));
}
</script>
</HEAD>
<BODY>
<table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><FORM ACTION="#" NAME="scoreform" id="scoreform">
Station 1
<INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" >
Station 2
<INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>">
Score
<input type=TEXT name="Score" readonly id="Score">
<BR>
</FORM></td>
</tr>
</table>
</BODY>
</HTML>
My dilemma is when I place a php repeat region (thanks dreamweaver) around this table, nothing works. I think the form needs to have a unique identity but I don't know how to execute it properly. Here's the code that doesn't work. Code: <?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_mooren, $mooren);
$query_Recordset1 = "SELECT * FROM SIGNUP_NSCA";
$Recordset1 = mysql_query($query_Recordset1, $mooren) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<HTML>
<HEAD>
<script type="text/javascript">
function popup(form) {
var Box1 = document.scoreform.one.value;
var Box2 = document.scoreform.two.value;
form.Score.value =(Number(Box1) + Number(Box2));
}
</script>
</HEAD>
<BODY>
<?php do { ?>
<table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><FORM ACTION="#" NAME="scoreform" id="scoreform">
Station 1
<INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" >
Station 2
<INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>">
Score
<input type=TEXT name="Score" readonly id="Score">
<BR>
</FORM></td>
</tr>
</table>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</BODY>
</HTML>
<?php
mysql_free_result($Recordset1);
?>
Thank you for any assistance! overImg=[];outImg=[]; outImg[0]=new Image();outImg[0].src="images/enter1.gif"; overImg[0]=new Image();overImg[0].src="images/enter2.gif"; outImg[1]=new Image();outImg[1].src="images/keio.gif"; overImg[1]=new Image();overImg[1].src="images/inria.gif"; function chgImg(img,type){ switch(type){ case "over":document.images[img].src=overImg[img].src;break; case "out":document.images[img].src=outImg[img].src;break; }} why are arrays used here ? I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable. I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx FROM JAVASCRIPTTOOLBOX A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row. The only requirements a 1. Put a class of "parent" on each parent row (tr) 2. Give each parent row (tr) an id 3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs Original code: Code: $(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing. My code now looks like this: Code: $(document).ready(function() {
$('tr:not(.parent)').hide();
//$('tr.parent')
$('.arrow')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
$(this).toggleClass("up");
});
});
So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me? Thanks I'm looking for a javascript that will detect the following user information: OS version, browser version, quicktime + flash + adobe reader + java + windows media player + sliverlight versions of the users computer. I am looking to put this script into an HTML page and the information be displayed so the user can see what versions of the programs they have. I don't know a whole lot about javascript so if there is a script i could copy and paste, that would be great!!!! Also, is it possible to have the current versions of these programs displayed and automatically updated as well so the user can compare the version they have with the most current version of the program? Any help would be great! Thanks!!! Hi , I need one javascript, which is going to change the color of the region in the particular image. For example one boy wearing the blue color t-shirts, i want to change the blue color into red color by using the color code instead of chaging the image into new one. Whether is this possible to do in javascript ? Any help greatly appreciated. Thanks, Suresh.k Hi, I am working on Salesforce.com application and want to have a standard button named "Save and Send Update" placed on Event object detail page to be hidden. I followed some sample codes shown on net utilising style.visibility/style.display attributes of Javascript. However, I am not able to still remove/hide the standard button. If anyone could please assist me in this, that would be great! Thanks, Vimal Hey I was hoping someone could help me. I have written a form in HTML. But it is very long - I would like to make it a Tabbed form so that at the top there is tabs for each section to make it more managable and less intimidating. I figured it was probably Javascript - but I don't know JS so I was wondering what I would have to do for that form to be made? Is there a predefined function or something or does anyone know how to code a form like that? Regards, Angelous Hi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.
Hi This is what I would like to do: 1. Create a tabbed interface 2. All tabs but one must be able to be closed by clicking a link 3. User must be able to add additional tabs I want this to be done in Javascript but I have no clue how to program in javascipt and tutorials I have seen do not go in to great detail since they just show you basics that a Kindergarten kid could use. Please help Thanks |
|||||||