|
JavaScript - Adding Ul Element To Li
hi All,
I want to add UL item to Li in java script dynamically .so that i can build submenu dynamically.can any one help me. Similar TutorialsI have the following HTML code: Quote: <form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()"> <fieldset> <legend>Fill up this module</legend> Private <input id="private" type="radio" name="type" value="private" onclick="return addPrivate()"/><br/> Community/Organization <input id="organization" type="radio" name="type" onclick="alert('Organization')"/><br/> <br/> and the following javascript code: Quote: function addPrivate() { var root = document.getElementById('registration'); var label1 = document.getElementById('label'); label1.appendChild(document.createTextNode('First Name: ')); var label2 = document.getElementById('label'); label2.appendChild(document.createTextNode('Last Name: ')); var label3 = document.getElementById('label'); label3.appendChild(document.createTextNode('Address*: ')); var label4 = document.getElementById('label'); label4.appendChild(document.createTextNode('Profession: ')); var div = document.createElement('div'); div.appendChild(label1); div.appendChild(label2); div.appendChild(label3); div.appendChild(label4); root.appendChild(div); } but div tag is not added. Where is the problem? Trying to add the text "• " to a text area, but it will just print the symbol. Is there a way you can print the string itself? Code: function add(myValue) {
//IE support
if (document.selection) {
desc.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
Code: ...onclick="add('• ')"
Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event. It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it. I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event. Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch. I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled). Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)? Code: /*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/
### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
wp_enqueue_script('jquery');
}
### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
// Variables
$post_id = get_the_id();
// Extract ShortCode Attributes
extract(shortcode_atts(array(
'type' => 'show',
'more_text' => __('View Full Post'),
'less_text' => __('Close Post'),
'hidden' => 'yes'
), $atts));
// Determine Whether To Show Or Hide Content
$hidden_css = 'display: none;';
if($hidden == 'no') {
$hidden_css = 'display: block;';
$type = 'hide';
$tmp_text = $more_text;
$more_text = $less_text;
$less_text = $tmp_text;
}
// Format HTML Output
$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';
$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
return $output;
}
### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
echo '<script type="text/javascript">'."\n";
echo '/* <![CDATA[ */'."\n";
echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
echo '/* ]]> */'."\n";
echo '</script>'."\n";
}
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! Hi, (new to javascript) Code: digAudio = document.createElement("audio");
digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
digAudio.id = "diggingAudio";
newAudio = document.getElementById("diggingAudio"); //returns null
the audio element is added (I can play the audio) but I can't get it by its id ? thank you I have the following code Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? I am trying to have it so that when someone choose a value from the select box, it then displays it in the html. The problem is im not very good with javascript, and my error keeps coming up as undefined where as before it was coming up as "[object HTMLSelectElement]". Can anyone tell me whats up? PHP Code: <html> <head> <script type="text/javascript"> function moveValue() { var no=document.getElementById("no"); var option=no.options[no.selectedIndex].numberr; document.getElementById('numberr').innerHTML = option; } </script> </head> <body> <form> Select numbers:<br /> <select id="no"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> </select> <input type="button" onclick="moveValue()" value="-->"> <i id="numberr">Testing</i> </form> </body> </html> and now that i look at it, i suspect that the reason that it is not working is that i should have "ID"'s or value's on each of the options but i do not know for certain Hi all i have the following code. Code: $(document).ready(function(){
$("ul, li, a, p, img").hover(
function(){
var origBorder = $(this).css("border");
var elementID = $(this).attr("id");
$(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red");
},
function(){
$(this).css("border", "none").css("z-index", "1");
}
);
});
it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over? Hello I am fairly new to Javascript and found this code online but can't seem to get it to work right. here is the code I am using it is suppose to apply a style attribute the the id "toplink" but I can't seem to get it to work right. Code: $(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$("#toplink").animate({top:offset},{duration:500,queue:false});
});
});
Thanks in advance Hello. I am setting up a simple registration page for a community arts project, but I am new to JS and having some issues. Right now I have a list of check boxes like this: Code: <input type="checkbox" id="HA0001" onclick="updateTotal()" /> Wendy Day <input type="checkbox" id="HA0002" onclick="updateTotal()" /> Al Benne <input type="checkbox" id="HA0003" onclick="updateTotal()" /> Julie Steppe What I would like to do is GET the input boxes ID value - which will be different for every checkbox. That value will correspond with a variable of the same name in my javascript code, that will be added or subtracted from the users total cost. So when a box is clicked, I need my variable (called "currentId") to update to the ID value, such as "HA0001" - etc. I was thinking something along the lines of this, but I know it is incorrect: Code: var currentId = document.getElementById.id; All the other add/subtract stuff I will figure out, but I am having a problem getting the ID value from a checkbox when it is clicked. Can anyone help me figure this out? THANKS! -AJ So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? Im trying to duplicate an image multiple times here is what I have Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var totalNumber = 1000;
function insert(num) {
var cont = document.getElementById("cont");
var img = document.createElement("img");
var percent = num/totalNumber;
var result = cont.offsetWidth * percent;
var dup = result/100*2;
img.src = "guy.jpg";
cont.appendChild(img);
}
</script>
<style type="text/css">
#cont {height:100px; width:500px;}
</style>
</head>
<body>
<div id="cont"></div>
</body>
<script type="text/javascript">
insert(3000);
</script>
</html>
So Im trying to get img to repeat the variable "dup" so you would see <img src="guy.jpg"> 30 times. HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea'))
{
alert(lastRowTD_s[i].id);
//checked, it is the row that does not have "textarea" element.
alert(lastRowTD_s[i].getElementsByTagName('textarea'));
// gives me [Object HTML collection] !?
alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]);
//gives me "undefined", heh where has it gone since previous line ?
}
I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#buttons'
});
});
</script>
Any help with this would be appreciated thanks. I'm trying to add an input element to all forms using appendChild. The script first searches for input elements with the name of "myinput". If it finds an input element with that name, it assigns the value "myvalue". If it can't find an input element with that name, it tries to create a new one for all forms. Code:
if (document.getElementsByName('myinput')) {
var testcode = document.getElementsByName('myinput');
for (var i=0; i < testcode.length; i++){
testcode[i].value = "myvalue";}
}
else {
var z = document.createElement("input");
z.type = "hidden";
z.name = "myinput";
z.value = "myvalue";
z.id = "mycode";
var d = document.getElementsByTagName('form');
for (var i=0; i < d.length; i++){
d.appendChild(z);}
}
What's wrong with my code? Thanks! Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div>
<script type="text/javascript">
function loading(){
?
</script>
<input type="button" name="submit" id="submit" onclick="loading();"/>
How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "change.php",
data: params,
success: function(data){
$('#results').html(data).fadeIn("slow");
}
});
});
});
</script>
Alright, this is going to sound strange, but bear with me here... Code: <input type="text" name="_F0827U" size="015" maxlength="015"> <input type="submit" class="cmdkey" name="_K040827" value="..."> Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation). Is it posable, using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals, say using an onClick() event on either of the elements? greetings everyone! this is my first time trying to join this javascript community. Well then, now I'm telling about my miss-understanding of this keywords of javascript here... here's the html Code: <fieldset > <legend>Attachment</legend>
<table id="attachment" style="height: 50px;" width="200" border="0">
<th width="19%">Title</th>
<th width="26%">File</th>
<th width="41%">Description</th>
<th width="6%">Upload</th>
<th width="6%">More File</th>
<tr>
<td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
<td><input name="filepath" type="file" size="33"></td>
<td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
<td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
<td><div align="center">
<input onclick="addMoreFile()" type="button" value="+">
</div></td>
</tr>
</table>
<!-- end Attachment --> </fieldset>
the aim is that the upload button would eventually changed into image and then changed back to a link. That one is already done here's the javascript Code: var attRow;
function upload(obj){
// obtain the table pointer
var attTable = document.getElementById('attachment');
// post file into the jsp file
// changing the image
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
par.innerHTML = '';
par.appendChild(loImage);
// create the removal link
var text = document.createTextNode('remove');
var liRem = document.createElement('a');
liRem.setAttribute('href','javascript:removeFile(this)');
liRem.appendChild(text);
par.innerHTML = '';
par.appendChild(liRem);
}
function removeFile(obj){
// post fileid
// change the image
}
function addMoreFile(){
// create fully file upload row
// consist of two text elements, file element, and 1 button.
var nFileTitle = document.createElement('input');
nFileTitle.setAttribute('name','title');
nFileTitle.setAttribute('type','text');
nFileTitle.setAttribute('size', '33');
nFileTitle.setAttribute('value','- none -');
nFileTitle.setAttribute('maxlength','50');
var nFilePath = document.createElement('input');
nFilePath.setAttribute('name', 'filepath');
nFilePath.setAttribute('type', 'file');
nFilePath.setAttribute('size', '33');
var nDesc = document.createElement('input');
nDesc.setAttribute('name', 'description');
nDesc.setAttribute('type', 'text');
nDesc.setAttribute('value','- none -');
nDesc.setAttribute('size', '60');
nDesc.setAttribute('maxlength', '200');
var nUpButton = document.createElement('input');
nUpButton.setAttribute('name', 'upload');
nUpButton.setAttribute('type', 'button');
nUpButton.setAttribute('value', ' Upload ');
nUpButton.setAttribute('onclick', 'upload(this)');
// empty element
var ksg = document.createTextNode(' ');
// obtain the table pointer
var attTable = document.getElementById('attachment');
attRow = attTable.rows.length;
alert(attRow);
var nextRow = attTable.insertRow(attRow);
var ceL = nextRow.insertCell(0);
ceL.appendChild(nFileTitle);
ceL = nextRow.insertCell(1);
ceL.appendChild(nFilePath);
ceL = nextRow.insertCell(2);
ceL.appendChild(nDesc);
ceL = nextRow.insertCell(3);
ceL.appendChild(nUpButton);
ceL = nextRow.insertCell(4);
ceL.appendChild(ksg);
}
the problem arise when I try to use the removeFile() function using this keywords. into these; Code: function removeFile(obj){
// post fileid
// change the image back
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
}
I try to apply the same approach as the upload() function. But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed? |
|||||||