|
JavaScript - Assigning Xml Attributes To Checkboxes Through Innerhtml
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... Similar Tutorialshow 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 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. 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! 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. 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()";
}
}
Hello everyone, Here's the scenario I wish to plan out. I have an index.htm page ready. I want to be able to put in javascript code into the HTML coding that will write the ip address of the actual server that is hosting the website into a hidden text box. Then I want to insert this ip address into a hyperlink in the original index.htm to link to another html page (this will be a SSL secure page instead i.e. https://<ip address>). Also vice versa. (With SSL index.htm page have code that writes ip into hidden text box then hyperlink to the original http index page) thanks. Hope you follow me I am working with the google blogger API, and I am having an issue updating my global variable Response. I thought I understood how global variables worked, so I don't know if there is something different about the blogger API or if I'm making a dumb mistake. Code: <SCRIPT TYPE="text/javascript" src="http://www.google.com/jsapi"></
script>
<script>
google.load("gdata","1.x", {packages: ["blogger"]});
google.setOnLoadCallback(getMyBlogFeed);
blogID = "1601946089552390859";
var feedUri = "http://www.blogger.com/feeds/"+blogID+"/posts/full?alt=json";
var Response = "";
function getMyBlogFeed(){
var myBlog = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
myBlog.getBlogPostFeed(feedUri, handleBlogFeed, handleError);
}
function handleBlogFeed(myResultsFeedRoot) {
Response = myResultsFeedRoot.feed.entry[0].content.$t;
}
function handleError(e) {
alert("There was an error in getBlogPostFeed");
alert(e.caue ? e.cause.statusText : e.message);
}
alert(Response);
</SCRIPT>
Here's what I think SHOULD happen: Response is initialized as a global variable with a value of "" setOnLoadCallback calls getMyBlogFeed which creates a blog object, then calls getBlogPostFeed which calls handleBlogFeed. handleBlogFeed stores a new string to global variable Response an alert pops up with the value of Response (as given by handleBlogFeed) What actually happens is that the alert pops up with the original value of Response. I know that I can issue the alert inside handleBlogFeed, but that isn't the issue. My issue is that I'd like to use Response in other functions, but it isn't being updated as a global variable. What am I doing wrong that Response isn't updating? On a related note, is there a way to return a variable from my handleBlogFeed function? How would I do that? -- I can't seem to figure it out. Thanks! P.S. I recognize that the best place to ask this is the blogger developer group. I've already posted this there, and no one has responded yet. 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 am trying to set my cookies with the click of a button and display them with another button and have them expire one day after visit. I have been having some trouble with this and have written and rewritten code many times. How can I get this code to work? (not very familiar with setting cookies) Any help with this would be greatly appreciated. Thank you. Below is the cookie script I am working on which I am having trouble with: Code: <script>
var equipment = document.forms[0].equipment.value;
var pDate = document.forms[0].pickupDate.value;
var pHour = document.forms[0].pickupHours.value;
var pMin = document.forms[0].pickupMinutes.value;
var rDate = document.forms[0].returnDate.value;
var rHour = document.forms[0].returnHours.value;
var rMin = document.forms[0].returnMinutes.value;
var first = document.forms[0].firstName.value;
var last = document.forms[0].lastName.value;
var street = document.forms[0].street.value;
var city = document.forms[0].city.value;
var zip = document.forms[0].zip.value;
var dob = document.forms[0].date.value;
var cookieValue = equipment +"~" + pDate + "~" + pHour + "~" + pMin + "~" + rDate + "~" + rHour + "~" + rMin + "~" + first + "~" + last + "~" + street + "~" + city + "~" + zip + "~" + dob
var expDate = new Date();
expDate.setTime(expDate.getTime()+(1*24*60*60*1000)); // one day ahead
function setCookie(isName,isValue,dExpires) {
document.cookie = isName + "=" + isValue + ";expires=" + dExpires.toGMTString() + "path=/";
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1) {return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function dispCookie(isName) {
nValue = getCookie(isName);
alert(nValue);
}
function deleteCookie(isName){
if (getCookie(isName)){
document.cookie = isName + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
</script>
This is the input field in the body part of the form: Code: <input type = "button" value = 'Set Cookies' onclick = "setCookie('anyName','Hello',expDate)">
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 Which is considered best practice? Code: <div onmouseover="doThis();">
myDiv.onmouseover = doThis;
myDiv.addEventListener("mouseover",doThis,false);
...or something else? 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 var selwindow = window.open('child1.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); selwindow.document.selectform.childText.value=document.getElementById('pdetails1').value; I am using this code to assign a value for textbox in the child window. It works well in Internet Explorer, but it shows an error when run in Firefox. It shows: selwindow.document.selectform is undefined. Here, "childText" is the current window textbox id, "pdetails1" is the child window text box id,"select form" is child window form id So I am working on an excercise that the User puts in a Lastname, Firstname, and a score via textboxes. When the user pushes the add student score it should show up in the text area with this format " Brown, John: 92". When looking at the logic, I understand that each text box will need to be different arrays if im right, and then I will have to concat all three arrays into the format and assign it to a variable. Then assign the variable to the value of the text area. I just cannot seem to put the function together or how you would go about it. I just need help with how to go about putting it together. The first code is my body of HTML I'm working with. Code: <body>
<div id="content">
<h1>Student Scores</h1>
<div id="buddy">
<b>Last Name: </b><input type="text" id="lastName" />
<b>First Name: </b><input type="text" id="firstName" />
<b>Sco </b><input type="text" id="score" />
<input type="button" id="calculate" value="Add Student Scores" />
</div>
<fieldset>
<legend>Student Scores</legend>
<p id="tasks"><textarea id="task_list" rows="20" cols="100"></textarea></p>
</fieldset>
<div id="yoohoo">
<b>Average sco </b><input type="text" id="averageScore" />
<div>
<div id="yes">
<p><input type="button" name="add_task" id="add_task"
value="Clear Scores" /></p>
<p><input type="button" name="add_task" id="add_task"
value="Sort By Last Name" /></p>
</div>
</body>
I am trying to figure out how to assign a value to a global variable within a function and can't seem to figure it out. Here's my thought, Code: <script type="text/javascript">
var global1=""; var global2="";
function assign(vari,strng){
vari = strng;
}
</script>...
<input name="box1" onblur="assign('global1',this.value)"/>
<input name="box2" onblur="assign('global2',this.value)"/>
...
The purpose behind this is creating a form that will work with an existing database that would normally have a text area with lots of information. I am trying to turn it into a checklist that I can run from a mobile device. The global variables woudl be used to fill in a hidden text area that would then be passed on to the database upon submission. I am trying to keep the code as compact as possible. Any ideas? I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column. I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens. I have Code: document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
Any ideas? function get_price() { var the_price=1000; if (this.speed=="500MGz") the_price+=200; else the_price+=100; if (this.hdspace=="15GB") the_price+=50; else the_price+=25; if (this.ram=="128MB") the_price+=150; else the_price+=75; return the_price; } function computer(speed,hdspace,ram) { this.speed=speed; this.hdspace=hdspace; this.ram=ram; this.price=get_price; } var work_computer=new computer("2GHz","80GB","1GB"); var home_computer=new computer("1.5GHz","40GB","512MB"); var laptop_computer=new computer("1GHz","20GB","256MB"); var work_computer_price=work_computer.price(); var home_computer_price=home_computer.price(); var laptop_computer=laptop_computer.price(); ___________________________________________________ In the above code, the line I'm having trouble with is marked red. Why is it that when I call the method using ... this.price = get_price; It works fine. But if I assign the object this.price with like this... this.price = get_price(); I get an error? Isn't get_price() a function? So shouldn't the parenthesis be included when the method is called? Why are we suppose to leave out the parenthesis?! I'm confused. Thanks! Here's my object constuctor: Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
}
And the execution code: Code: var suggest = new suggest_object(result_id);
document.getElementById(result_id).onmouseover = function(){suggest.in_result_div = true;}
It works as is, but i'd really like to be able to set the onmouseover inside of the object. Something like Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
this.input_element.onmouseover = function()
{
this.in_result_div = true;
}
}
So how can I get the 'this' inside the onmouseover function to refer to the object? |
|||||||