JavaScript - Status Bar Option Still Valid?

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks

Hi i'm in need of some help with a javascript function I have been working day and night trying to get this to work and its almost there, basicly what I am trying to do is create a facebook like status update box with user tagging and member search drop down.

Currently I have the status update input where users can enter in their status update, this also has a user tagging system with it which when you type the '@' symbol the friend search displays and once a name is clicked the @ sign plus what you was writing gets replaced with that name but what I am in need of is someone who can sort this problem out, this problem is I want the user to click on the name but once clicked i need the name to show up as a blue link just like facebook do and also i need the backend of the system to check when a name is click to get the id number of that user and set the bbcode in the status area as my bbcode system uses [quote=123432]username[/quote] which is how what quotes the user now I also need to have a rich text area instead of the standard html one as I need the area to display the link and not the bbcode.

If any one can help please reply, Thank you, DJCMBear.

P.S. Here are the codes I have so far just for someone to over look to see if they can sort it out.

The Javascript Class:
Code:

<script type="text/javascript">
var SDK = {
  setCursor: function(el)
  {
    if(el.selectionStart)
    {
      return el.selectionStart;
    }
    else if (document.selection)
    {
      el.focus();
      var r = document.selection.createRange();
      if (r == null)
      {
        return 0;
      }
      var re = el.createTextRange(),
      rc = re.duplicate();
      re.moveToBookmark(r.getBookmark());
      rc.setEndPoint('EndToStart', re);
      return rc.text.length;
    } 
    return 0;
  },

  displayFriends: function(cp)
  {
    var friendSession = document.getElementById('fsi');
    var friendSelect  = document.getElementById('fs');
    var selectText    = document.getElementById('fst');
    var info          = friendSession.value.split(':');
    var checker       = info[0];
    var position      = parseInt(info[1]);
    if(window.event.keyCode == 192 && friendSession.value == 0)
    {
      friendSelect.style.display = 'block';
      friendSession.value = 1+':'+this.setCursor(cp);
    }
    else if(friendSession.value == 0)
    {
      friendSelect.style.display = 'none';
    }
    else if(friendSession.value == 1 && window.event.keyCode == 8 && selectText.value.substr(position,1) != "@")
    {
      friendSession.value = 0;
      friendSelect.style.display = 'none';
    }
  },
  
  selectFriend: function(selection)
  {
    var input    = document.getElementById('fst');
    var info     = document.getElementById('fsi').value.split(':');
    var checker  = info[0];
    var position = parseInt(info[1]);
    if(checker == 1)
    {
      input.focus();
      input.value = input.value.substring(0,position)+selection.innerHTML+' ';
      document.getElementById('fsi').value = 0;
      document.getElementById('fs').style.display = 'none';
      input.focus();
    }
  },

  shrink: function(current,newid)
  {
    var friendSession = document.getElementById('fsi');
    var old = document.getElementById(newid);
    if(current.value == '' && friendSession.value.substring(0,1) != 1)
    {
      current.style.display = 'none';
      current.value = '';
      old.style.display = 'block';
    }
  },

  grow: function(current,newid)
  {
    var input = document.getElementById(newid);
    current.style.display = 'none';
    input.style.display = 'block';
    input.style.height = '70px';
    input.focus();
  },

  StatusForm: function(info)
  {
    var form  = "<div id=\"statusUpdater\"><div onclick=\"SDK.grow(this,\'fst\');\" id=\"dfst\">"+info.defaultTxt+"</div>";
        form += "<textarea style=\"display:none;\" id=\"fst\" onclick=\"SDK.grow(this,'fst');\" onblur=\"SDK.shrink(this,'dfst');\" onkeydown=\"SDK.displayFriends(this);\" onkeyup=\"SDK.displayFriends(this);\"></textarea>";
        form += "<input type=\"hidden\" id=\"fsi\" value=\"0\" /><div id=\"fs\" style=\"display:none;\">";
        form += "<ul><li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Bobby Frank</li>";
        form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Dan Dave</li>";
        form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">John Doe</li></ul></div></div>";
    document.write(form);
  }
}
</script>

The CSS Styles:
Code:

<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

#statusUpdater {
  width: 500px;
  margin: 30px auto;
}

#fst {
  width: 100%;
}

#dfst {
  width: 98.5%;
}

#fst, #dfst {
  font-family: arial;
  padding: 3px;
  font-size: 14px;
  resize: none;
  border: 1px solid #666;
  color: #666;
  cursor: text;
  background: #fff;
  overflow-y: auto;
  height: 16px;
}

#fs {
  margin: 0;
  width: 99.8%;
  border: 1px solid #000;
  border-top: 0px;
}

#fs ul {
  list-style: none;
}

#fs li {
  padding: 3px;
}
</style>

The Javascript Form Call:
Code:

<script type="text/javascript">SDK.StatusForm({'defaultTxt':'What\'s on your mind?','action':'http:\/\/www.example.com\/ajax\/statusPost.ax'});</script>

I've started studying JavaScript recently. The following simple scenario from the Russian textbook is not implemented properly on my PC.
Code:

<HTML>
<HEAD>
<TITLE>Link Description</TITLE>

<SCRIPT LANGUAGE="JavaScript">
function describe(text) {
	window.status = text;
	return true;
}
function clearstatus() {
window.status="";
}
</SCRIPT>

</HEAD>
<BODY>
<h1>Link Description</h1>
<P><i>Put mouse pointer over links to display their description</i></P>
<ul>
<li><A HREF="order.html"
	onMouseOver="describe('Закажите товар'); return true;"
	onMouseOut="clearstatus()";>
Заказ товаров</A>
<li><A HREF="email.html"
	onMouseOver="describe('Направьте письмо'); return true;"
	onMouseOut="clearstatus()";>
Email</A>
<li><A HREF="complain.html"
	onMouseOver="describe('Раскритикуйте все'); return true;"
	onMouseOut="clearstatus()";>
Отдел защиты прав потребителей</A>
</ul>
</BODY>
</HTML>

I just typed the script from the book char by char. I use Firefox browser, v.3.5.7. The error console does not display any mistakes.
Please, explain me why on placing mouse over a link the status bar displays A HREF text instead of the link description.

Hi All
I have a list of links on my website with anchors coded the following way:

<ul class="fav"><a href="/cgi-bin/send.pl?ID=XX" onMouseOver="window.status='http://www.domain.com'; return true;" onMouseOut="func_clear(); return true;" onClick="stat(294);" target="_blank">Linked domain name</a></ul>

Then I have found on http://www.askthecssguy.com/2006/12/..._favicons.html
a javascript to display a favicon image before each one of my links in the list;
this script is working fine when getting the domain name from href value.
But in my case the suitable domain name to load each favicon is present in window.status value.

I have played a bit with the above scripts and finally I'm trying to use the following function:

Code:

function faviconizeFavicon() { 
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var ul = document.getElementsByTagName("ul");
  for (var i=0; i<ul.length; i++) {
  	if (ul[i].className == "fav") {
  		var links = ul[i].getElementsByTagName("a");
  		for (var j=0; j<links.length; j++) {
  		var hrefvalue = links[j].parentNode.innerHTML;
	             var domain = 'default_favicon.gif';		
domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)\'/g);
			
try{
	             var cue1 = document.createElement("img");
		cue1.className = "favicon";
		cue1.src = 'default_favicon.gif';
		cue1.id = 'img' +i+ j;
		links[j].parentNode.insertBefore(cue1,links[j]);						

		var cue = document.createElement("img");
		cue.className = "favicon";

		var cuesrc = "http://"+ domain + "/favicon.ico";
		cuesrc = cuesrc.replace("http://http://","http://");
		cuesrc = cuesrc.replace("'/favicon.ico","/favicon.ico");
		cue.setAttribute("imgid",'img' +i+ j);
		cue.setAttribute("src",cuesrc);
		cue.onload = function () {
		document.getElementById(this.getAttribute("imgid")).src = this.src;
		}
		cue.setAttribute("src",cuesrc);
		}
		catch ( ex )
		{
		}						
		}
  	}
  }
}

This javascript should display first the default locally available favicon gif before each link and then try to load original favicons from each domain and display them at the place of default favicon gif only if available.

The above code works with any console errors but very randomly and not with all websites ??
Some favicons are loaded from distant websites and some of them never, independing of network quality or other factors!

So I'm wondering why this code is not working for each link ?


My question is:

could you please have a look on my following Regex if this should work in every case with each domain name ?

domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)\'/g);

I put the apostrophe at the end because my url in window.status is always ended by a single closing.

Also I'm asking if taking into account that ONLY my window.status value is placed between single apostrophes and ALL other values of my anchors are opened and closed with double apostrophes, maybe it would be easier to get my domain value searching for any value between two single apostrophes ??

My another question is:
Is it possible that other javascripts present in my html code could interfere with this script and make it working randomly ?

Thanks in advance for any clues

Hi.
I'm currently putting together a website. On one of my pages, I get "Error on page" in the status bar when viewing it in Internet Explorer. I don't get this message in Firefox. I have an external javascript (code below) for tooltips on the webpage. I did not write the script, I merely changed one or two things.
When I double click the status bar to see what the message is, it says:

'tt.timer' is null or not an object.
Line: 70
Char: 3

I'm new to javascript, and so I'm not sure of what I need to alter. Can anyone see what i'm missing/doing wrong?
Any help would be really appreciated!

Code:

var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 60;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.getElementById('faqid').scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();