JavaScript - Custom Scrollbar In Spry Region?

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 have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/

Thanks for any suggestions or help in advance

Hi Everyone,

I hope it was the right decision to post here and not in the Javascript framework forum, as I think my problem is not necessarily related to the use of jQuery, but my lack of Javascript knowledge and how I can make both scripts work together.

I am using a jQuery tab plugin that shows a different content div on click of each tab. It also has a fade in (http://www.stilbuero.de/jquery/tabs/...n73#fragment-7)

In addition, I am using the scroller scripts from Blueshoes (I also tried another, similar scroller script, but run into the same problem: http://www.dyn-web.com/code/scroll/vert.php).


What I want to achieve:
Have a simple tab function with up to 6 tabs. Each tab content will have a scrollable div with a custom scrollbar that also scrolls on mouseover.

The problem:
The tab and scrollbar on initial page load work fine. Once I click on the second or third tab, the tab content loads fine, but the scroller function does not load. I have to click on the tab number again for the scrollbar to appear (I added an onClick event that loads the scrollbar, but this only seems to be activated on the second click, not the first click)

I thought I could just reload the page again with an onClick event on the tabs, but this only reloads the page with the first tab active, and the tab content fade in effect doesn't quite show anymore. In addition, I do not know how to change the script so the tab that was been clicked on (e.g. tab2 or tab3) is active on page reload.

Please take a look at site, where you can see everything it all in action:
http://www.webjungle.com/TESTDEV/ind...s_reduced.html

I'd prefer a solution that loads the scroller script immediately onClick of each tab without reloading the page.

I tried all kinds of possibilities, and I have been working on this for the past 2 days! My Javascript knowledge is just to limited to grasp what needs to happen.

Here is my code, as simplified as possible, with comments in italics:

CSS, JAVASCRIPT and LINKS to JS libraries and plugins:

Code:

<style type="text/css">
 <!--Begin scroller css --> 
.scrollingtext {
	position:absolute; 
	width: 480px; 
	font-size:13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;		
}
</style>
 <!--End scroller css --> 

 <!--Begin Tab scripts --> 
<script src="scripts/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.tabs.pack.js" type="text/javascript"></script>

 <!--tab content fade in --> 
<script type="text/javascript">
  $(function() {

    $('#tabcontainer').tabs({ fxFade: true, fxSpeed: 'fast' });
				
});
</script>
        
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
  <!--End Tab scripts --> 

 <!--Begin blueshoes scroller scripts --> 
<script type="text/javascript" src="scripts/LibCrossBrowser.js"></script>
<script type="text/javascript" src="scripts/EventHandler.js"></script>
<script type="text/javascript" src="scripts/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="scripts/Bs_Slider.class.js"></script>
<script type="text/javascript" src="scripts/Bs_ScrollableDiv.class.js"></script>
<script type="text/javascript" src="scripts/scrollFunction2.js"></script>
 <!--End blueshoes scroller scripts --> 

HTML:

Code:

<body onLoad="init();"> <!--init() calls the scroller script --> 

  <div class="scroller">
   <div id="tabcontainer">
 
 <!--TABS --> 
            <ul>
                <li><a href="#tab1" onClick="init();"><span>1</span></a></li> <!--i was hoping to be able to initialize the scroller script with a click, but doesn't work when first clicking on it. Only after a second click the scrollbar shows up --> 
                <li><a href="#tab2" onClick="init();"><span>2</span></a></li>
                <li><a href="#tab3" onClick="init();"><span>3</span></a></li>
            </ul>
            
 <!--TAB 1 CONTENT --> 
            <div id="tab1">
              <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1" onLoad="init();">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_1" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_1" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv1"></div></td>
                    </tr>
                  </table>
            </div>
            
 <!--TAB 2 CONTENT --> 
            <div id="tab2">
                   <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_2" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_2" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv2"></div></td>
                    </tr>
                  </table>
                </div>
            
 <!--TAB 3 CONTENT --> 
            <div id="tab3">
               <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_3" class="slidertext" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_3"  class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv3"></div></td>
                    </tr>
                  </table>
                 </div>
        
   </div> <!-- END tabcontainer *****************--> 
 </div> <!-- END scroller *****************--> 


</body>

P.S. I am using a transitional doctype, which seems to be correct and working with each script on its own...
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I would appreciate some hints or tips sooo much!!!!

Thank you for reading my essay.

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

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!