JavaScript - Explain Me This Program In Detail

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

<script type="text/javascript">

function display(action, id)
{
if (action == 'show')
{
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id) = "javascript:display('hide', "+id+")";
}

if (action == 'hide')
{
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id) = "javascript:display('show', "+id+")";
}
}

</script>

I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs?

When I have an external stylesheet I can't access the properties assigned therein.

I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see.

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()"></div>
<body>

CSS (style.css)
Code:

#box {
 width: 200px;
}

Javascript (js.js)
Code:

function showWidth(){
	var box = document.getElementById('box');
	alert(box.style.width);
}

Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box'

Now, if I assign width as part of the style attribute of the div javascript thus:

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()" style="width: 200px;"></div>
<body>

javascript can see this and the alert fired by showWidth() shows '200px'.


So, I have two questions:

1. Why?

2. Is there a way of accessing these external style elements without having to define styles inline all the time?


Cheers!
Mike

hi,
i would like to know what kind of mechanism does the bolded part trigger

Code:

 G = function(a) {
            if (i !== a) {
                var b = i;
                i = a;
                for (a = 0; a < A.length; ++a)
                    A[a](b)
            }
        }

i dont want to know what the function does, just a wild guess,
would it be the A array is replaced with functions names?
R.

i got this code from this thread http://www.codingforums.com/showthread.php?t=241809(THanks to jmrker) and i was wondering if you could explain how it works(The creating textboxes and the randomization).
Edit: SOrry i forgot to include the code
Code:

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=241809

var maxSeats = 341;
var rndSeats = 10;

function randOrd() { return (Math.round(Math.random())-0.5); }

function createDisplay() {
  var seating = [];;
  var str = '';
  for (var i=0; i<maxSeats; ++i) { seating.push(0); }
  for (var i=0; i<maxSeats; i++) {
    str += '<input type="text" size="1" id="s'+i+'" value="'+seating[i]+'">';
    if ((i % 33) == 32) { str += '<br>'; }
  }
  document.getElementById('auditorium').innerHTML = str;
}

var sarr = [];
function randomize() {
  for (var i=0; i<maxSeats; i++) { sarr[i] = i; }
  sarr.sort(randOrd);
}

var tptr;
var ptr = 0;

function pauseDisplay() {
  document.getElementById('s'+sarr[ptr]).value = 'x';
  document.getElementById('s'+sarr[ptr]).style.backgroundColor = 'red';
  if (ptr < (maxSeats-rndSeats)) { ptr++; tptr = setTimeout("pauseDisplay()",250); }
}

window.onload = function() {
  createDisplay();
  randomize();
  tptr = setTimeout("pauseDisplay()",250);
}
</script>

</head>
<body>
<div id="auditorium"></div>
</body>
</html>

So today I learned about the ()'s for functions so I was like always studying and I cannot understand how this snippit works, here it is.

Quote:
var say = function(what) {
what('say function');
}

var hello = function (who) {
alert('Hello '+who); // outputs "Hello say function"
}

say(hello);
So the say(hello); is activating the function. The (hello) should be passed for (what) so the function(who) is now inside the other or something?

Can someone please list steps like 1-10 of how this code ends up saying

"Hello say function" at the end? thank you so much

umm Hi i wrote a script with little help from internet but i dont truly understand it, can anyone please explain to me what every line in this script is doing ? im asking polite.

var przed="zostalo do urodzin"
var obecnie="dzisiaj urodziny"
var Tablica=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function odliczanie(r,m,d){
theyear=r;themonth=m;theday=d
var dzisiaj=new Date()
var rok=dzisiaj.getYear()


if (rok < 1000)
rok+=1900


var miesiac=dzisiaj.getMonth()
var dzien=dzisiaj.getDate()
var godzina=dzisiaj.getHours()
var minuta=dzisiaj.getMinutes()
var sekunda=dzisiaj.getSeconds()
var dzisiajstring=Tablica[miesiac]+" "+dzien+", "+rok+" "+godzina+":"+minuta+":"+sekunda


dataa=Tablica[m-1]+" "+d+", "+r
dd=Date.parse(dataa)-Date.parse(dzisiajstring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dgodz=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

if(dday==0&&dgodz==0&&dmin==0&&dsec==1){
document.forms.count.count2.value=obecnie
return
}
else
document.forms.count.count2.value=dday+ " dni, "+dgodz+" godzin, "+dmin+" minut, i "+dsec+" sekund "+przed
setTimeout("odliczanie(theyear,themonth,theday)",1000)
}

odliczanie(2015,1,20)

Hi all,

First of all, I am not a student and this is not homework. Secondly, I've been programming in C, Motorola assembler, Intel assembler and even GWBasic for years.

I recently (this year) got into Web / Javascript / PHP / HTML programming and I'm clawing up the learning curve. I know a fair amount, but have a long way to go.

OK here's my problem: I've been trying to integrate a WYSIWYG editor (TinyMCE) into a bulletin board software package (PHPBB3).

All is working well except for one big stumbling block that I've been battling for the past MONTH!...:

I want to support the original BBCode system of PHPBB3 (mostly because of the ability for the admin to add custom BBCodes).

So, what I need to do is this:

(1) Select a range of text.
(2) Either REPLACE it with "[tag]selection[/tag]" or else INSERT "[tag]" before and "[/tag]" after.
(3) Lastly, the original selection must remain selected so that additional BBCodes can be wrapped without the need to re-select.

The purpose of (3) is, say, the user clicks "bold" and "italic" and "underline".... all they should have to do is click those 3, not re-select each time.

I've tried doing this:

(1) get the selection range
(2) get the selection text
(3) delete the range contents
(4) create two "contextual fragments" (one for the opening tag, the other for the closing tag).
(5) create a <span> element containing the selection text
(6) Insert it all into the range with range.insertNode()
(7) finally select the new span element

This seems to work fine, but Internet Explorer fails (it complains when I try to get the selection range).

I just don't know what I'm doing wrong... and worse I'm not even sure if I'm attacking the problem the proper way.

Any ideas would be greatly appreciated!

Thanks!

-- Roger

I tried a a few tutorials but still can't get it, can any simply closures please?

PHP Code:
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementByClass("subMenuWrapper");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script> 


Im trying to get the sub navigation to work in ie 6 but can get it working..

can anybody tell me what the above funtion does and how i might be able to apply it to my code...

the navigation i have so far is on http://www.corkdesigns.ie/ep3/testing.html

Hope someone can help

or is the a simple hack i can use for ie 6 for this navigation http://www.corkdesigns.ie/ep3/navigation1.html

Thanks

So I had the orginial code just switch images, I was under the impression I could use "var clientData" to make an array. However this is not working out the way I had hoped. Any help or explanation, greatly appreciated.

It's very sloppy now! Don't judge.

Here is my Javascript:
Code:

<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
     "This is Data for Client 1";
     "This is Data for Client 2";
  "This is Data for Client 3";
 "This is Data for Client 4";
 "This is Data for Client 5";
 "This is Data for Client 6";
"This is Data for Client 7"
];


var currentMain = 0;
var currentMainT = 0;

function Prev() 
{
    return ShowMain(currentMain-1);
				return ShowMainT(currentMainT-1);
}
function Next() 
{
    return ShowMain(currentMain+1);
			 return ShowMainT(currentMainT+1);
}


function ShowMain(which)
{
    currentMain = which;
				currentMainT = which;
    if ( currentMain < 0 ) currentMain = 0;
				if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; 
    					document.getElementById('mainImg').src = imgList[currentMain];
					    document.getElementById('mainText').src = clientData[currentMainT];
   						 var PD = document.getElementById('Pg');
										var PD2 = document.getElementById('Pg2');
   		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
				  if (PD2 != null ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
    return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>

Here is my area I am showing it.
Code:

<a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1);">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2)">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3)">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4)">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5)">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6)">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a>

<span id="mainText">Click on a Client for Information.</span>

Please, if you would explain this regex fragment [^>]*
to me. Thank you for reading this post.
(I know how to use the ThankYou button )

Hi, I am hoping a JS expert might be able to explain this function. It is part of a larger programme. The program basically checks which profile the user selects and sets the html to display in certain colours.

I am still trying to understand programming. The part I don't understand is the SetCookie("profile", i); What is this function telling the SetCookie function to do? Why does this work?

Really grateful for any info.Thanks in advance.

*************************************************

function updateProfile()
{
for (var i=0;i<document.form1.profile.length;i++)
{
if (document.form1.profile[i].checked)
{
SetCookie("profile", i);
}
}
document.location="cookie3.html";
}

OK, I work for a company that accepts donations. Currently, the donation page looks nothing like the rest of the site. So I recreated the page to look like the rest of the site. But when I do so, Chrome shows it as a "security risk". Someone looked at it and told me that it's because the .js files aren't compressed and the browser considers this a security risk.

So how do I compress the files?

Hi - if you click on any of these radio boxes an effect happens whereby content is pushed down. Can you tell me what causes this?

http://www.emailcraft.com/order-now.html

The reason I ask is because I am after this effect and am looking for someone to code it for me - but am not sure how to describe it - thanks a lot