JavaScript - 'blind.js' Toggle Only Works On Homepage Page

Hello:


I need help with an issue I'm having with the HTML5 audio, the createsoundbite
works fine for onClick if your reference is for current/ same page, here is an example of what I mean.

<a href="#" onClick=uniquevar.playclip()><img src="some image"></a>
I can here my click cound.

But if I actually have a link to another page on the href no sound is heard
it just navigate to the html page.

<a href="New_html" onClick=uniquevar.playclip()><img src="someimage"></a>
no sound is hear.


Can anyone tell me what the problem may be or what it is I'm doing wrong.
I surely hope it was not designed to work this way.


Thanks in advance.
PDH

So, I am working out a current issue I'm having with a sortable table script.

Code:

var sortableTable = new Class({:thumbsup:
							  
	getOptions: function(){
		return {
			overCls: false,
			onClick: true,
			sortOn: 0,
			sortBy: 'ASC',
			filterHide: true,
			filterHideCls: 'hide',
			filterSelectedCls: 'selected'
		};
	},

	initialize: function(table, options){
		this.setOptions(this.getOptions(), options);
		this.table = $(table);
		this.tHead = this.table.getElement('thead');
		this.tBody = this.table.getElement('tbody');
		this.tFoot = this.table.getElement('tfoot');
		this.elements = this.tBody.getElements('tr');
		this.filtered = false;
		
		/*for(i=0;i<10;i++){
			this.elements.clone().injectInside(this.tBody);
		}
		this.elements = this.tBody.getElements('tr');*/
		
		//THIS IS FOR ANIMATION AND POINTER EFFECT ON HOVER
		
	 this.elements.each(function(el,i){
			if(this.options.overCls){
				el.addEvent('mouseover', function(){
					el.addClass(options.overCls);
				}, this);
				el.addEvent('mouseout', function(){
					el.removeClass(options.overCls);
				});
			}
			if(this.options.onClick){
				el.addEvent('click', options.onClick);
			}
		}, this);
	
		
		//setup header
		this.tHead.getElements('th').each(function(el,i){
			if(el.axis){
				el.addEvent('click', this.sort.bind(this,i));
				el.addEvent('mouseover', function(){
					el.addClass('tableHeaderOver');
				});
				el.addEvent('mouseout', function(){
					el.removeClass('tableHeaderOver');
				});
				el.getdate = function(str){
					// inner util function to convert 2-digit years to 4
					function fixYear(yr) {
						yr = +yr;
						if (yr<50) { yr += 2000; }
						else if (yr<100) { yr += 1900; }
						return yr;
					};
					var ret;
					//
					if (str.length>12){
						strtime = str.substring(str.lastIndexOf(' ')+1);
						strtime = strtime.substring(0,2)+strtime.substr(-2)
					}else{
						strtime = '0000';
					}
					//
					// YYYY-MM-DD
					if (ret=str.match(/(\d{2,4})-(\d{1,2})-(\d{1,2})/)) {
						return (fixYear(ret[1])*10000) + (ret[2]*100) + (+ret[3]) + strtime;
					}
					// DD/MM/YY[YY] or DD-MM-YY[YY]
					if (ret=str.match(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{2,4})/)) {
						return (fixYear(ret[3])*10000) + (ret[2]*100) + (+ret[1]) + strtime;
					}
					return 999999990000; // So non-parsed dates will be last, not first
				};
				//
				el.findData = function(elem){
					var child = elem.getFirst();
					if(child){
						return el.findData(child);
					}else{
						return elem.innerHTML.trim();
					}
				};
				//
				el.compare = function(a,b){
					var1 = el.findData(a.getChildren()[i]);
					var2 = el.findData(b.getChildren()[i]);
					//var1 = a.getChildren()[i].firstChild.data;
					//var2 = b.getChildren()[i].firstChild.data;
					
					if(el.axis == 'number'){
						var1 = parseFloat(var1);
						var2 = parseFloat(var2);
						
						if(el.sortBy == 'ASC'){
							return var1-var2;
						}else{
							return var2-var1;
						}
						
					}else if(el.axis == 'string'){
						var1 = var1.toUpperCase();
						var2 = var2.toUpperCase();
						
						if(var1==var2){return 0};
						if(el.sortBy == 'ASC'){
							if(var1<var2){return -1};
						}else{
							if(var1>var2){return -1};
						}
						return 1;
						
					}else if(el.axis == 'date'){
						var1 = parseFloat(el.getdate(var1));
						var2 = parseFloat(el.getdate(var2));
						
						if(el.sortBy == 'ASC'){
							return var1-var2;
						}else{
							return var2-var1;
						}
						
					}else if(el.axis == 'currency'){
						var1 = parseFloat(var1.substr(1).replace(',',''));
						var2 = parseFloat(var2.substr(1).replace(',',''));
						
						if(el.sortBy == 'ASC'){
							return var1-var2;
						}else{
							return var2-var1;
						}
						
					}
					
				}
				
				if(i == this.options.sortOn){
					el.fireEvent('click');
				}
			}
		}, this);
	},
	
	sort: function(index){
		if(this.options.onStart){
			this.fireEvent('onStart');
		}
		//
		this.options.sortOn = index;
		var header = this.tHead.getElements('th');
		var el = header[index];
		
		header.each(function(e,i){
			if(i != index){
				e.removeClass('sortedASC');
				e.removeClass('sortedDESC');
			}
		});
		
		if(el.hasClass('sortedASC')){
			el.removeClass('sortedASC');
			el.addClass('sortedDESC');
			el.sortBy = 'DESC';
		}else if(el.hasClass('sortedDESC')){
			el.removeClass('sortedDESC');
			el.addClass('sortedASC');
			el.sortBy = 'ASC';
		}else{
			if(this.options.sortBy == 'ASC'){
				el.addClass('sortedASC');
				el.sortBy = 'ASC';
			}else if(this.options.sortBy == 'DESC'){
				el.addClass('sortedDESC');
				el.sortBy = 'DESC';
			}
		}
		//
		this.elements.sort(el.compare);
		this.elements.injectInside(this.tBody);
		//
		if(this.filtered){
			this.filteredAltRow();
		}else{
			this.altRow();
		}
		
		//
		if(this.options.onComplete){
			this.fireEvent('onComplete');
		}
	},
	
	altRow: function(){
		this.elements.each(function(el,i){
			if(i % 2){
				el.removeClass('altRow');
			}else{
				el.addClass('altRow');
			}
		});
	},
	
	filteredAltRow: function(){
		this.table.getElements('.'+this.options.filterSelectedCls).each(function(el,i){
			if(i % 2){
				el.removeClass('altRow');
			}else{
				el.addClass('altRow');
			}
		});
	},
	
	filter: function(form){
		var form = $(form);
		var col = 0;
		var key = '';
		
		form.getChildren().each(function(el,i){
			if(el.id == 'column'){
				col = Number(el.value);
			}
			if(el.id == 'keyword'){
				key = el.value.toLowerCase();
			}
			if(el.type == 'reset'){
				el.addEvent('click',this.clearFilter.bind(this));
			}
		}, this);
		
		if(key){
		this.elements.each(function(el,i){
			if(this.options.filterHide){
				el.removeClass('altRow');
			}
			if(el.getChildren()[col].firstChild.data.toLowerCase().indexOf(key) > -1){
				el.addClass(this.options.filterSelectedCls);
				if(this.options.filterHide){
					el.removeClass(this.options.filterHideCls);
				}
			}else{
				el.removeClass(this.options.filterSelectedCls);
				if(this.options.filterHide){
					el.addClass(this.options.filterHideCls);
				}
			}
		}, this);
		if(this.options.filterHide){
			this.filteredAltRow();
			this.filtered = true;
		}
		}
	},
	
	clearFilter: function(){
		this.elements.each(function(el,i){
			el.removeClass(this.options.filterSelectedCls);
			if(this.options.filterHide){
				el.removeClass(this.options.filterHideCls);
			}
		}, this);
		if(this.options.filterHide){
			this.altRow();
			this.filtered = false;
		}
	}

});
sortableTable.implement(new Events);
sortableTable.implement(new Options);

It works flawlessly on my dev page: http://www.align.com/Dev/Resources/
But I am having issues with is on my live page: http://www.align.com/Resources/

My first thought is that it could be a labeling issue (ie: I forgot to remove "/dev" when moving the HTML over to live) but after reviewing for an hour, I don't believe this is the issue.

Could it be an ASP issue? thx in advance....

-Mike Fortuna

I've seen a few people elsewhere with a similar problem, but couldn't get the solutions to work for my individual problems.

I am currently trying to display a gallery of images using Lightbox, and a contact form in a different modal window using a different script.

Here is the URL, so you can view the source.

Clicking 'contact' opens the Contact window, which currently works, and clicking the images SHOULD open lightbox but doesn't. If I shuffle the code around, I can get Lightbox to work but the contact window then breaks.

If someone could provide just the code I should replace mine with so I can just copy and paste it in, that would be great because I don't know anything about javascript and struggled to follow the instructions for this I found elsewhere. However any help is appreciated! Thanks in advance. (:

(Just in case you notice - please excuse my use of tables in the coding, this is just temporary)

I want to set www.google.com into IE home page,so I use following code:
Code:

<script language="javascript">
  function abc(){
    setHomePage("http://www.google.com");
 }
</script>

When I run it under IE8,it raise javascript error:
missing object

Where is wrong? How to correct my code?
Thanks

I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.)

The site is http://d-n-ddiner.com

I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1).

I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users.

All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother?

I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name.

My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer.

this page will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related - anyone want to offer any clues?

Does any one have any ideas for javascript homepage apps

Hi,

My site IE layout is messed up. is there a way to make a java neat screen before site loads showing "Optimised for FF and Chrome with some other text"
The style similar to ( graying rest of screen groupon.de)

Please help want to implement ASAP

Regards

Hi Folks,

I've been trying to create a drag drop homepage like www.bbc.co.uk, google etc.

I can get the basic drag and drop to work, but I can't get the layout to save anywhere. Can anyone please help?

Here is what I have so far.

http://www.sandwell.nhs.uk/test/test.html

It uses Glow, which doesn't have any cookie functions apparantly.

Could anyone please help me save my layout, any example code would be much appreciated

Manu thanks

Hi,

I have a form and am calling the insert into page using ajax. However when I click on submit my welcome page, set as my default page is called.

Looking around I think possibly a 401 is being generated by my Header and so it is being set to my default page.

So I guess my questions a
1. Is this the most likely reason or when you look at my script does something else spring to mind?
2. How would I test to see if I am right (I tried getHeader but I don't think I understood how to set it out properly)
3. How would I resolve this.

My code is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } 

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }
var params='wallpost='+encodeURI(document.getElementById('wallpost').value);
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);

}

</script>
</head>
<body>
<?php include("headermenu.php"); ?>
<br />
<br />

<form action="" method="post">
						<div class="scroll">
						<textarea rows="5" cols="60" class="input" name="message" id="message" value="message"  >
Leave a wall post...
						</textarea>
						</div>
	<br />
	<br />
		<input type="button" value="Submit" onclick="loadXMLDoc('insert.php','txtHint')" /><br />
					</form>
	<br />
	<div id="txtHintWall"></div>
<br />
</body>
</html>

Hi,
I am having a Main homepage in my site which contains many pages rendered from different sources.

And all these rendered pages are having a table like
<table id="toc" class="toc"></table> .

As all these are rendered in my homepage , those tables are appearing in my homepage..
I am trying to remove these tables from my homepage coding by javascript.

So i tried with a onload option to remove it .. But i dono how to do this. Since by any way only one table in the first page rendered is removed and all others are having the table..

How can i do this??
Please help me..

I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;
Code:

function toggle_visibility(o,id) {
 var obj = document.getElementById(id);
 obj.style.display=(obj.style.display == 'block')?'none':'block';
 if (obj.style.display!='none') {
 obj.style.left=zxcPos(o)[0]+20+'px';
 obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

Here is a sample of my a to z table;
Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
        
</tr></table>

And here is an example of the Brand name div ;
Code:

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give

I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears.

Here is the code that I have ended up with so far.

Code:

$(function() {
	$("#textbox1").hide();
	$("#wrap").click(function() {
				$("#button-top").animate({right: "860px"}, 2000);
				$('#textbox1').animate({height: "toggle"}, 2000);
	});
});

Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded.


The first toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>



The second toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>

Here is the referenced page:

http://sprintexperts.info/phones/#

Thanks in advance!