|
JavaScript - Dynamically Changing Attributes
Hi everyone,
I'm currently in the process of making a spreadsheet like webpage and it all working fine... However I have been using setAttribute and removeAttribute in order to dynamically change a table cells onclick property. This of course does not work in IE7 etc and I've been banging my head against a brick wall trying to come up with a solution that will work in all browsers but I just can't seem to get it to work with using methods such as... Code: document.getElementById(myElementId).onclick = scriptToRun;
document.getElementById(myElementId).attachEvent('onclick',scriptToRun);
I get all sorts of not implemented, type mismatch errors when I try to use the above. Below is the setAttribute code which works. Code: document.getElementById("task_" + colName + studentId).setAttribute("onclick","showTaskDropDown('task_" + colName + studentId + "','" + studentId + "','" + colName + "','" + value + "','" + maxValue + "','" + trafficMaxValue + "','" + taskNumber + "')");
If anyone can see why the other methods aren't working and can provide a solution I'll be extremely greatful! Similar TutorialsHi 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 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. ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}
this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed I have the index page which contains the menus with hrefs. Now i have to generate the hrefs dynamically and the problem is the menus are created by the plugin so i can edit that file So i was thinking of loading the new url in hidden elemenst and when the page loads then chnage the hrefs of those menus. I want to ask that where on the page should i display the hidden elements so that when the page loads then by using JS i can chnage the href of few menu items I was thinking of doing that on the top of page but that does not look nice to have any element before body I have a javascript function that changes the src and href of an image within a repeating function. If i call document.getelementbyid("image").src, i can change the image and by calling document.getelementbyid("image").Href, i am able to change the link. The problem i have now is that when the cursor goes over the image it gets the link location as a snapshot. If i leave my cursor and the image and link location changes, it does not update the snapshot and if i click on the new image it uses the previous link rather than the new one. The only way to get the new link is to move off the image and back on to get a new snapshot of the new link. Is there a way i can tell the javascript to change the image, link location and update the browser to the new link without moving the cursor.
hi i am totally frustrated !! i have been using this on my webpage. http://www.barelyfitz.com/projects/tabber/ if u see under the advanced section there is a code for changing tabs dynamically. Code: document.getElementById('mytab1').tabber.tabShow(0);
this doesn't work. basically i have a webpage internet.htm. which has a menubar with loads of menu items. if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is: Code: <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>
the full code is: Code: <ul id="QualityMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
<ul>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
<li><a href="AdminDocuments.htm" >Guidance</a></li>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
<li><a href="AdminDocuments.htm">Plans</a></li>
<li><a href="AdminDocuments.htm">Procedures</a></li>
</ul>
</li>
this is what the admindocuments.htm contains, based on the website link i have borrowed the code from. Code: <div class="tabber" id="admin">
<div class="tabbertab">
<h2>Forms</h2>
<script type="text/javascript" src="adminForms.js"></script>
</div>
<div class="tabbertab">
<h2>Guidance</h2>
<script type="text/javascript" src="adminGuidance.js"></script>
</div>
<div class="tabbertab">
<h2>Org. Chart</h2>
<script type="text/javascript" src="adminOrg.js"></script>
</div>
<div class="tabbertab">
<h2>Plans</h2>
<script type="text/javascript" src="adminPlans.js"></script>
</div>
<div class="tabbertab">
<h2>Procedures</h2>
<script type="text/javascript" src="adminProc.js"></script>
</div>
</div>
whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code. what am i doing wrong here? please advice. Many thanks. Hi all and hope that you can help. I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button. Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do. Thanks for your interest, R I've highlighted the relevant chunks of code below... The HTML / CSS... Code: <style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
#pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
#pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
#pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;}
#next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>
<body>
<div id="midcol">
<table width="592" border="0">
<tr >
<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);"></td>
<td id="pause" onclick="clearTimeout(timerID);"></td>
<td id="pplay" onclick="swapPicture();"></td>
<td id="next" onclick="next();clearTimeout(timerID);"></td>
<td id="last" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>
The JavaScript... Code: var dimages=new Array();
var numImages=31;
var interval = 3000;
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1.";
imageCaption[ImageNum++] = "Caption 2.";
etc. etc.
var curImage=-1;
function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}
function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}
doTimer(interval); // Starts the slideshow on load.
Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? Hi Friends, I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically. Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling . Thanks in Advance, Siva. I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Hi Guys, I'm new at JS. I need to remove TR elements from parent table but the problem is there are no table ID/Name Is it possible to perform it? Please see attach - i need remove red marked block... what scrip i have to use if i will put it to the green block? Thank you. how about getting the attributes of the a tag? href and title and the innerhtml (actually the innerhtml has space on both ends)
Hey there. I want to move a div around a page, and I do this by getting the original top and left values of a div, and then change them. But the problem is getting the original values; I checked online and thought that this would work: Code: var chart = document.getElementById(charDiv).style.top;
var charl = document.getElementById(charDiv).style.left;
alert('char_t:' + chart + ' char_l:' + charl + 'charDiv:' + charDiv);
charDiv is passed into the function (its the id of the div I want to move). I know that charDiv has a value by looking at the values of the alert() statement, but the values of chart and charl are empty. The alert simply outputs char_t: char_l: charDiv: charOne any help would be appreciated hello Sir/Mam i have a piece of code here that creates a dynamic form.. Code: <script type='text/javascript' language='javascript'>
<!--
function createTextbox(){
var textboxtag = document.createElement("input");
textboxtag.setAttribute("name","username");
document.getElementById("form1").appendChild(textboxtag);
}
-->
</script>
<body>
<div id='div1'>
<button name='textbox' onclick='createTextbox()'>Textbox</button>
</div>
<div id='div2'>
<form id='form1' action='#' method='post'>
</form>
</div>
</body>
this code sets the "name" attribute to "username" automatically.. my problem is how to set the name attribute manually by the user after the dynamic textbox is created.. just like in visual basic where after you create a form e.g button or textfield, theres a side pane where you can change attributes like name, value, etc.. tnx for the time reading my post..sorry for my poor explanation of the problem..im new in javascript and trying to learn it all by myself.. 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()";
}
}
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. 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... 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 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>
|
|||||||