JavaScript - Getting Attributes From Css Divs

I attempting to set attributes for all tags of a particular type....

I have a bunch of thumbnails <img> tags; when I wand over them I would like to show the corresponding large image with a script but the tags require onMouseOver events. I really don't feel like adding a bunch of onMouseOver="myShowScript" attributes to every img tag manually...

my scripts aren't working... partly because I'm a newbie... I'm sure there is some fundamental concept about java and html I don't get...


here's ONE of the versions that doesn't work.. I've tried a few things but I'm open to scrapping everything for a better way...

I appreciate any direction you can offer...


Code:

function addAtts(){
var numberOf = document.getElementsByTagName("img");
for(i = 0; i < numberOf.length; i++){
numberOf[i].onMouseOver="myShowScript()";
}
}

Which is considered best practice?
Code:

<div onmouseover="doThis();">

myDiv.onmouseover = doThis;

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

...or something else?

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

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.

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...

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>

Hi, I wondering if anyone can help:

I've got rows of divs in this manner

<div class="row">This is row 1 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 1</p></div>
<div class="row">This is row 2 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 2</p></div>
<div class="row">This is row 3 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 3</p></div>
<div class="row">This is row 4 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 4</p></div>

I wish to have some javascript to toggle the hidden row for its corresponding link.

Please can someone help point me to an example if available. Any help will be greatly appreciated

Here is the code I'm using:
Code:

<style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}

</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>

<body> 
  <div id="content">
   <ul id="a-menu">
      <li id="button" onClick="swap(0)"><b>button1</b></li>
      <li id="button" onClick="swap(1)"><b>button2</b></li>
      <li id="button" onClick="swap(2)"><b>button3</b></li>
   </ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
    <ul id="submenu">
       <li id="button" onClick="swap(3)">button1</li>
       <li id="button" onClick="swap(4)">button2</li>
       <li id="button" onClick="swap(5)">button3</li>
       <li id="button" onClick="swap(6)">button4</li>
      </ul> 
       <div id="swap3" class="block">content 2</div>
       <div id="swap4" class="hidden">content 3</div>
       <div id="swap5" class="hidden">content 4</div>
       <div id="swap6" class="hidden">content 5</div>
       
 </div>
<div id="swap2" class="hidden">content 6</div>
                  </div> 
 </body>
</html>

Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this??

Hi, I have a good toggle script that does what I want for the most part.

I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows.

However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy.

I am attaching the code and a link to the page.

Code:

<!-- Hide/Show -->
<script type="text/javascript">
	window.onload=function() {
	var aObj=document.getElementsByTagName('a');
	var i=aObj.length; 
	while(i--) { 
		aObj[i].count = i;
		aObj[i].onclick=function() {return showHide(this);};
		showHide(aObj[i]);
		}
	};
	
	function showHide(obj) {
	var aDiv=document.getElementById('wrapper').getElementsByTagName('div');
	if (typeof showHide.counter == 'undefined' ) {
		showHide.counter = 0;
		}
	aDiv[showHide.counter].style.display = 'none';
	aDiv[obj.count].style.display = 'block';
	showHide.counter = obj.count;
	return false;
	}
</script>

http://www.michelleswann.com/test/index.html

Thanks so much for any help!

I just got this problem when I try to add the expandable divs in my webpage.
However when I click the divs on the page, I can't see the rest of my content.

This is my page, does anybody know what happened with my code??!!

http://www.calibredesign.com/clients..._news_new.html


the divs are on the button of the page.

Thanks!!

So I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this.


var divElement = '';
function show(divElement) {

if(divElement == 'add') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='block';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'edit') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='block';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if (divElement == 'images') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='block';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'pending') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='block';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'upload') {
document.getElementById('uploadImages').style.display='block';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'delete') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='block';
}

}


That is a awful lot of code to do just a few simple things. But don't get me wrong it works... I just wondered if there is a cleaner way of doing this.

Thanks,
Jon W

I have this simple checkbox menu
http://myresearchfinder.com/dev/checktest.html

If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas?

I have five DIV tags that contain a photo and brief bio for partners of an accounting firm. I need to randomize these DIV tags (id="d1" - "d5") to display only one of the tags on each page load.

Normally, I would do this with ColdFusion but the client isn't willing to purchase the language support for their hosting system.

A sample of one of the DIVs is below.

Code:

<div id='d1'>
      <div class="subhead1">Shareholder Spotlight</div>
      
      <img style="float:left;margin:12px 10px 0px 0px" src="images/leonard_summer_photo.jpg">
      
      <div class="subhead2">Leonard M. Sommer, CPA</div>
      
      <div class="subhead3">Managing Shareholder</div>
      
      <div class="body">Leonard has more than 30 years experience in providing tax, business and succession planning advice for family-owned and closely-held businesses. <a href="leonardsommer.html" style="color:#3d3d3d; text-decoration:underline">Learn more</a>.</div>
      </div>

If someone could let me know how to do this in javascript I would appreciate it. You'll have to be very clear in your instructions as I don't know javascript very well.

Thank you in advance for your response!

I was wondering how I could redirect from one div to another div after " x " seconds on the same page.. Is this possible?

So like basically:

Index page: > Shows div1, after x seconds shows div2 etc..