JavaScript - Js To Remove Tr Attributes

I am looking to get a loop which runs through a series of divs (each with an attribute called "position" followed by 5 comma separated values).

for each of these divs i need the 5 comma separated values (from position) to be assigned to variables.

I have the rest of the code sorted out i just cannot get the original variables.

Examples:

divs look like this...
Code:

<div position="100,100,50,50,1"></div>

There are no limits on the number of these divs but there will never be 0.

What i want is something to look like this.

For each div,

var s = string of attribute (position) values (output:a,b,c,d,e)

split string to create

var a = a
var b = b
var c = c
var d = d
var e = e

I from those 5 vars can do what i need.

and i know that vars a,b,c,d,e,s will all be overwritten in when it comes to the next div... that is planned.

Which is considered best practice?
Code:

<div onmouseover="doThis();">

myDiv.onmouseover = doThis;

myDiv.addEventListener("mouseover",doThis,false);

...or something else?

Hi,

I'm not even sure if that's the issue here, but I've isolated it and all the other code is working, so what I'm thinking is that if this:

Code:

      function togglePoly(poly_num) {
        if (document.getElementById('poly'+poly_num)) {
           if (document.getElementById('poly'+poly_num).checked) {
              gpolys[poly_num].show();
			} else {
              gpolys[poly_num].hide();
			}
        }
      } 

      function createClickablePolyline(poly, html, label) {
        gpolys.push(poly);
        var poly_num = gpolys.length - 1;
        if (!html) {html = "";}
        else { html += "<br>";}
        if (html) {
          GEvent.addListener(poly,'click', function(point) {
            if (!point) point = poly.getVertex(Math.floor(poly.getVertexCount()/2));
            map.openInfoWindowHtml(point,html); 
          }); 
        }
        label = "<a href='javascript:GEvent.trigger(gpolys["+poly_num+"],\"click\");'>"+label+"</a>";
        // add a line to the sidebar html
        sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />';
      }

document.getElementById("sidebar").innerHTML = sidebar_html;

works here to hide/show a line,

then this:


Code:

function show(category) {
		for (var a=0; a<gpolylines.length; a++) {
          if (gpolylines[a].mycategory == category) {
            gpolylines[a].show();
		  }
        }
		for (var i=0; i<pts.length; i++) {
		 if (pts[i].mycategory == category) {
            pts[i].show();
		  }
        }
	}
		
function hide(category) {
		for (var a=0; a<gpolylines.length; a++) {
          if (gpolylines[a].mycategory == category) {
            gpolylines[a].hide();
		  }
        }
		for (var i=0; i<pts.length; i++) {
		 if (pts[i].mycategory == category) {
            pts[i].hide();
		  }
        }
	}
	
      // this variable will collect the html which will eventually be placed in the sidebar
function togglePoly(category) {
if (document.getElementById(category)) {
           if (document.getElementById(category).checked) {
         show(category);
        } else {
          hide(category);
        }
      }
}     

function createClickablePolyline(poly, html, name,category) {
        gpolys.push(poly);
        var poly_num = gpolys.length - 1;
		var category = lines[a].getAttribute("category");
 		 midLineArrows(pts, category);
        GEvent.addListener(poly,'click', function(point) {
            if (!point) point = poly.getVertex(Math.floor(poly.getVertexCount()/2));
            map.openInfoWindowHtml(point,html); 
         }); 
		 // add a line to the sidebar html        
		 label = "<a href='javascript:GEvent.trigger(gpolys["+poly_num+"],\"click\");'>"+label+"</a>";  
     sidebar_html += '<input type="checkbox" id="'+category+'" checked="checked" onclick="togglePoly('+category+');">' + label + '<br />';
	  }

document.getElementById("sidebar").innerHTML = sidebar_html;

should work here to show/hide lines and arrows

the difference of course being that the first code uses poly_num, which is taken directly from the
Code:

var poly_num = gpolys.length - 1;

code (because it only needs to show/hide one line at a time) whereas the second uses the xml attribute "category" from here
Code:

var category = lines[a].getAttribute("category");

because it's attempting to hide and show a line with arrows on it (the arrows being in the pts array), both of which share the category attribute.

It's not throwing up any major errors, but it's not working, either... any suggestions would be great...

thanks in advance...

I'm not really much of a javascript programmer, but I occasionally use javascript that I've found here and there. But I'm unable to find anything that helps me in what I'm trying to do now.

I regularly use a snippet of code that pops up a small window to display an image or a very small html file. Using the window.open() function, I'm able to disable scrolling, resizing, etc., and size it to my needs. I'll have a window.close link somewhere on the page.

But in my current project, my customer's page has several links related to other companies. When you click on the link, an that company's ad pops up in a small window. At this point, the viewer can simply close the window, or they should be able to click on the ad and be taken to that company's website.

I'm able to have it close the window and open that new url in the parent browser window, but my website customer doesn't want their site to go away. They want the new company's website in a new window.

Or I can simply NOT close the popup window, but now the new company's website is in a relatively small browser window, unable to scroll, resize, etc.

Is there a way for me to somehow modify an existing window with an onclick directive - something similar to the window.open() function, OR open a new browser window with window.open() AND close the popup window?

If I haven't made myself clear, let me know and I'll try to explain myself better.

Thanks in advance for any help.

how to search through siblings for shared attributes
I have a a long list of links and I suppose Im going to apply a number of classes to each one [describing a number of attributes for each] and I want to do a conditional search probably in javascript/jquery so that when i hover over one of the links I highlight its relatives - those that have the same attributes.

What Im having trouble wrapping my head around is the idea of classes to ID these custom attributes. The attributes are coming from a database converted to XML. In my Javascript I essentially want to say that

for each link
should the user mouseover or mouseclick
for each of its sibling links
if its sibling link share its attributes
style or highlight these compliant siblings a certain way

how do I do the 'if statement' without spelling out every possible attribute entry? I know in plain OOP Java how I could test for this but in that scenario I have access to these entries as fields in an object's instantiation.

Help? thanks so much in advance

Hi All

I have a piece of script which makes a div slide out from the side of the screen with information on it. I can change the innerHtml etc no problem, but i have a problem with change .style attributes dynamically. My code:

Code:

var mystring = "height:500px";
var keyVal = mystring.split(":")
var slidingDiv = document.getElementById('slidingDiv');
slidingDiv.style.keyVal[0] = keyVal[1];

As you see above i get a value which i need to split() to get the key and value to use. So what i would like to see is:

Quote:
slidingDiv.style.height = 500px;
But it does not work, as there is no such function as slidingDiv.style.keyVal[0];
How do i change this?

I hope I've explained this thoroughly enough. Please ask if i need to explain further.

Regards
Marinus

Hi, I'm having trouble with some flash players that don't abide by the style attribute of the div they're created in using Javascript. When the flash-players' source is hard-coded into the page source they render fine, but the more players, the more bloat as you can see in the source of the original page. Any help?

Example:
http://mcbryanmd.webs.com/Playertest.htm
Original Page with old code:
http://mcbryanmd.webs.com/
The problem code:
Code:

<script type="text/javascript">
  function clv(obj){
	var strst="http://static.livestream.com/scripts/playerv2.js?channel=";
	var strnm=obj;
	var strnd="&layout=playerEmbedWide&backgroundColor=0x000000&backgroundAlpha=.5&backgroundGradientStrength=0&chromeColor=0x000000&headerBarGlossEnabled=true&controlBarGlossEnabled=true&chatInputGlossEnabled=true&uiWhite=true&uiAlpha=0.5&uiSelectedAlpha=1&dropShadowEnabled=true&dropShadowHorizontalDistance=10&dropShadowVerticalDistance=10&paddingLeft=0&paddingRight=0&paddingTop=0&paddingBottom=0&cornerRadius=3&backToDirectoryURL=null&bannerURL=null&bannerText=null&bannerWidth=320&bannerHeight=50&showViewers=true&embedEnabled=false&chatEnabled=true&onDemandEnabled=false&programGuideEnabled=false&fullScreenEnabled=false&reportAbuseEnabled=false&gridEnabled=false&initialIsOn=true&initialIsMute=true&initialVolume=10&contentId=null&initThumbUrl=null&playeraspectwidth=4&playeraspectheight=3&mogulusLogoEnabled=false&width=100%&height=100%&wmode=window";
	var clsrc=strst + strnm + strnd;
	var pstrm=document.createElement('script');
	document.getElementById('pcont').appendChild(pstrm);
	pstrm.setAttribute("type","text/javascript");
	pstrm.setAttribute("src", clsrc);
}
</script>

<button onclick="clv('random0')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random0</button>
<button onclick="clv('random1')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random1</button>
<button onclick="clv('random2')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random2</button>

<div id="pcont" style="margin-left:250px;display:;position:fixed;top:40px;right:0px;left:0px;bottom:0px;background-color:#CCCCCC;"></div>

I'm using jQuerys' $.ajax to load a div with some details in it and i want to use the esc key to close the div.

Heres the code so far

Code:

$('.username span').click(function(){
		$('.MiniPro').remove();
		ID = $(this).parent().attr('ID');
		This = $(this).parent();
		miniPro();
	});
	

function miniPro()
{
	$(This).append('<div class="MiniPro">Loading...</div>');
	$.ajax({
		type: 'POST',
		data: 'userID='+ID,
		url: 'processing/miniPro.php',
		success: function(msg)
		{
			$('.MiniPro').remove();
			$(This).append('<div class="MiniPro"'+msg+'<div class="MiniProClose">X</div></div>');
		}
	});
}

Is it even possible to do that?

Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" .
Code:

<html>
<head>
<title>Introduction to the DOM</title>
<script>
window.onload = function(){
var li = document.getElementsByTagName("li");
for ( var j = 0; j < li.length; j++ ) {
     if(li[j].getAttribute('class')=='test'){
li[j].parentNode.removeChild( li[j] );
     }
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the 
DOM is awesome, here are some:</p>
<ul>
<li class="ppp">ppp.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>

Hello,

I'm currently using this code:

I want it so that there isnt a box around the countdown, and the countdown is the same text as "you will be redirected in"

here is it in action: http://www.playelite.org/redirect.html

Code:

<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected in: 
<form>
<input type="text" size="3" border="0" name="redirect2">
</form>
seconds</b></font>
</center>

<script>
<!--
var targetURL="http://google.com"
var countdownfrom=10
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
</script>

Thanks

i am doing an edit operation in my web page by changing a image,
but when i am revisiting the page it is showing older image rather than new one.
So can any one say how to refresh the page without using any button like window.location.reload().
Is there any way to use math.random in url??

I am using this script that gets messed up when you resize the window. I figured out that I could use this other script to do stuff just after the window gets resized.

Code:

(function($,sr){
 
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
 
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
 
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
 
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	// smartresize 
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
})(jQuery,'smartresize');
 
 
// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});

So I re-instantiate the misbehaving script in there so it fires whenever the window is resized (I changed it to 500 so it really only fires once after you are done resizing). This fixes it. The new instance doesn't have a problem but the old instance is still there and messed up. so I use. $($.misbehaving-script).remove(); just before instantiating after window resize, which gets rid of broken instance.

Problem solved.. Except that messes up a different script! It's driving me crazy.

Any advice would of course be very welcome.

I have a check box right now that calls an onClick event.

Here is the Input:
Code:

<input name="usePad" type="checkbox" value="usePad" id="usePad" onclick="showBind('padShow','padOk')" />

Here is the Script:
Code:

var xmlhttpshowBind;
var showBindDiv;

function showBind(BindPage,BindDiv) {
xmlhttpshowBind=GetXmlHttpObject();
if (xmlhttpshowBind==null) 	{
	alert ("Browser does not support HTTP Request");
	return; }
var url="/scripts/"+BindPage+".php";
showBindDiv=BindDiv;
xmlhttpshowBind.onreadystatechange=showBindGet;
xmlhttpshowBind.open("GET",url,true);
xmlhttpshowBind.send(null); }

function showBindGet() {
	if (xmlhttpshowBind.readyState==4) {
	document.getElementById(showBindDiv).innerHTML=xmlhttpshowBind.responseText; } }

It works great to fill the div called for, but I would like it to remove the div contents if it's unchecked, I'm not sure how to do this?? Any help would be appreciated!

Thank you in advance!

I've been working with this script
Code:

function changeImage(layer_id, item_id, position) {
	var theDiv = document.getElementById(layer_id);
	var theImg = (theDiv != null) ? theDiv.firstChild : null;
	if (theImg != null) {
		// If the item id is 0, then just make the image empty lol
		if (item_id == 0)
		{
		theDiv.parentNode.removeChild(theDiv)
		} else {
			theImg.setAttribute('src', 'images/' + layer_id + '-' + item_id + '.png');
		}
	} else {
		var toAppend = '<div id="' + layer_id + '" style="position: absolute; z-index: ' + position + ';"><img src="images/' + layer_id + '-' + item_id + '.png" /></div>';
		document.getElementById("item-images").innerHTML += toAppend;
	}
}

where layer_id, item_id, and position are all defined elsewhere. I've been trying to get the images to append, and then run this line Code:

theDiv.parentNode.removeChild(theDiv)

when you click on them consecutively(click to append, click again to remove, so three consecutive clicks would have the image shown and four would not), but all I've succeeded at so far is breaking the script's functionality. Help?

I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8.

Code:

var selectOptions = document.getElementById('id_employees_cbo');
for (var i=0; i<selectOptions.options.length; i++)
    {
       if (selectOptions.options[i].selected == true)
         {
            selectOptions.options[i].remove();
            break;
         }
     }

Is there another way to do this?

Thanks