JavaScript - Link Description In The Status Bar

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.

hi, all... haven't found exactly the solution here, and trying to cobble something together but it's just not working.

php is doing the heavy lifting in terms of generating the code, but the upshoot is i have a script:

Code:

	<script type="text/javascript">
				var values[1] = "This layout includes a 'title' and 'body' content block.";
				var values[2] = "This layout features everything included in the Standard Page layout as well as a 'comments' block.";
			 function replaceText( var_id) {
				document.getElementByID(pageLayout_replace).innerHTML = values[var_id];
			}
		</script>

and a select box:

Code:

			<fieldset>
				<legend>Page Layouts</legend>
				<label for="pageLayout" class="half left">Choose a page layout<br />

					<select name="pageLayout" id="pageLayout" size="5" onChange="replaceText(this.options[this.selectedIndex]);">
						<option value="1">Standard Page</option>
<option value="2">Standard Page w/Comments</option>
					</select>
				</label>
				<label class="half right">
					Page Layout Description:<br />
					<span id="pageLayout_replace">Click on a page layout title to the left to get a description here.</span>

				</label>
			</fieldset>

however, the error console in firefox says

Code:

Error: missing ; before statement
Line: 14, Column: 8
Source Code:
    var values[1] = "This layout includes a 'title' and 'body' content block.";

and then when i try to select one of the items,

Code:

Error: replaceText is not defined
Line: 1

any insight? thanks in advance!

I have an iFrame that is loaded when a user types a url into a text box. Is it possible to display the meta-description of the page that is diplayed in the iFrame in the main (parent) page ?

Here is the Iframe code I am using in the body:

Code:

<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
</iframe>

and here is the script in the header:

Code:

<script>
    function goTo() {
        var input = get("box").value,
            frame = get("frame");

        if(input.match(/\bhttp(.)*/)) {
            frame.src = input;
        } else {
            input = "http://" + input;
            frame.src = input;
        }      
    }

    function get(id) {
        return document.getElementById(id);    
    }  
</script>

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>

Is the window.status still useful nowadays or is it outdated? If it is still used, why doesn't this work please?

Code:

<a href="javascript_status_bar_messages.cfm"
  onMouseover="JavaScript:window.status='Status Bar Message goes here'; return true"
  onMouseout="JavaScript:window.status=''; return true">Hover over me!</a>

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);
  }
 };
}();

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

Hello,

I have a bit of javascript that is supposed to change picture and its accompanying text when you hover over a bit of link text in another area of the page. This is working, however, the text is toggling without the picture due to an invisible area next to each link. I am not sure if it's an issue with applying my javascript to another bit of code or what.

Here is the code that I have that flips the text:
Code:

<script type="text/javascript">
function tabOver(which)
{
    for ( var d = 1; d <= 31; ++d )
    {
        document.getElementById("TAB"+d).style.display 
           = ( d == which ) ? "block" : "none";
    }
}
</script>

and here is the bit that flips the pics:
Code:

<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("photos/aes1.jpg","photos/aes2.jpg","photos/aes3.jpg","photos/aes4.jpg","photos/aes5.jpg")
</script>

And here is the html where they show up:
Code:

<div id="mainimg-staff"><a href="javascript:warp()"><img src="img/select-aes.gif" name="targetimage" border=0></a>

<div id="TABHOLDER">
	
    <div id="TAB1" class="tabbed" style="display: block;">
       &nbsp;
    </div>


   <div id="TAB2" class="tabbed">
       <h1>Cheryl Lyon</h1>
<ul>
	<li> Basic facials and skin treatments
	<li> Waxing
	<li> Specializing in naturopathic facial treatments
</ul>
    </div>


<div id="TAB3" class="tabbed">
       <h1>Jackie T.</h1>
<ul>
	<li> 10+ years experience
	<li> Facials and skin treatments
	<li> Waxing
	<li> Specializing in <em>Extreme</em> eyelash extensions
</ul>
    </div>

(there are a lot more text bits but I only included 2 to keep this short)

Finally, here is the link that is making all this wonderful stuff happen:
Code:

<div style="left: 100px;" onmouseover="tabOver(2);"><a href="staff-aes.shtml" onMouseover="changeimage(myimages[0],this.href)">Cheryl Lyon</a></div>

Do you see how I combined the pic and text in one code? I promise you that it is on accident that this is working at all.

Could this be a style issue and not a javascript issue? I can't find anything in my css that will fix this.

Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated.

Here is the code I have:

Code:

<html>
<head>
    <style media="screen,projection" type="text/css">

/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

    </style>
    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]-->
    <script type="text/javascript">        document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
        var gal = {
            init: function () {
                if (!document.getElementById || !document.createElement || !document.appendChild) return false;
                if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
                var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
  li[0].className = 'active';
  for (i = 0; i < li.length; i++) {
    li[i].style.backgroundRepeat = 'no-repeat';
    li[i].title = li[i].getElementsByTagName('img')[0].alt;
    gal.addEvent(li[i], 'mouseover', function () {
       var im = document.getElementById('jgal').getElementsByTagName('li');
       for (j = 0; j < im.length; j++) {
          im[j].className = '';
                        }
                        this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
              });
           }
        },
      addEvent: function (obj, type, fn) {
             if (obj.addEventListener) {
                 obj.addEventListener(type, fn, false);
           }
            else if (obj.attachEvent) {
                obj["e" + type + fn] = fn;
                obj[type + fn] = function () { obj["e" + type + fn](window.event); }
                obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
        }
        gal.addEvent(window, 'load', function () {
            gal.init();
        });
    </script>
</head>
<body>
<ul id="gallery">
    <li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>

</ul>
</body>
</html>

Again, any help is greatly appreciated.

Thanks,

Ben.

How do I check the status of a style?

I thought something like this would work, but no joy: Code:

divTest = document.getElementById('link_container');
if (document.divTest.style.display == "none") {
}

Hello guys,

The following excerpt is part of a very huge project(in terms of code involved). Pardon me if it lacks a bit of context. But I assume I have posted adequate information for understanding the problem.

Code:

var sztitlebar_specific= "<table cellpadding='0px' cellspacing='0px' width='100%'><tr>" +"<td class='tiletitle'>" 
"<img src='../images/alert.gif' onclick='toggleAlerts(\"#ID#\")' alt='Toggle Alerts' title='Toggle Alerts' style='cursor: hand'>" + 
"<input type='checkbox' name='pricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" + 
"<input type='checkbox' name='mypricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" +
"<td class='tiletitle' style='text-align: center'>#NAME#</td>" + 
 </tr></table>";

The onclick event fires without any trouble, and the following function is called.
Code:

function applyFilterPricesOnly(filterid, pricesonly, mypricesonly,filtername){
alert("applyFilterPricesOnly called: filterid =" + filterid + "filtername =" + filtername + "mypricesonly =" + mypricesonly + " pricesonly=" + pricesonly);
}

But when I alert the status of the checkboxes they show up as "undefined". As you can see, the first piece of code defines a titlebar with a button and a couple of checkboxes and the name of the titlebar. And it is these checkboxes that remain undefined even though I can see them and check and uncheck them. But the name of the titlebar gets passed to the function correctly when the onclick event fires and it gets alerted. Where am I going wrong?

I am wanting to allow a user to update their twitter status from my website. I was planning on using Twitter's @anywhere feature, but this was not a very friendly solution:
Take over 3 seconds to load Makes 14 requests Calls jQuery twice
Then I found the Twitter REST API: https://dev.twitter.com/docs/api

Using OAuth, I want the user to be able to login, and then update their status using that API. I've been trying to find tutorials on this, but I haven't found any that use the REST API to update the Twitter Status.

Does anyone have code for/know of a tutorial for what I'm looking for?

I have a simple problem, I can't get the status bar to change. I am very new to javascript, and I am trying to practice some simple commands, and the onMouseOver event is suppose to change the status bar in my window. I can get it to change for onMouseOut but not onMouseOver. Here is what I have so far

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

<HTML>
<HEAD>
<TITLE>Exam</TITLE>
</HEAD>

<BODY>

<H3>My Page</H3>


<a href="http://www.google.com"
onMouseOver="window.status='Visit google.';return true;"
onMouseOut="window.status='Come back soon ';return true;">Visit Google</a>


</BODY>
</HTML>

Hello, i wanna use NiceEdit text editor in my site.
but when i load the editor page, always i find the editor non-active, i have to click inside the textarea to active the textarea and the editor. have a look at the demo here http://nicedit.com/demos.php
so i want to set the editor default status active without clicking inside the textarea to active it, so how can i do that please ??
thanks

Hi,

I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0.

Any suggestions and feedback are welcome.

Regards
Totre