JavaScript - Javascript Dynamic Element Name Validation

I have this code in a .js file:

<code>
function addElement() {
addbranch();
}


function IfElseActivity(element) {
this.element = element
var innerBar=document.createElement("DIV")
innerBar.className="bar"
innerBar.style["width"]=100+"%"
innerBar.style["heigth"]=28+"px"
//innerBar.innerHTML = "<p>"+item.id+"</p>"
innerBar.innerHTML = "<DIV id='"+element.id+"_id' class='idlabel'>"+element.id+"</DIV>"
element.appendChild(innerBar)
this.group = Quanticks.drag().createSimpleActivity(element, innerBar)
this.Branches = new Array()
this.Properties = new Array()
this.ActWidth = 360
this.BlockWidth = 160
this.noResizeFlag = false
this.noBranchResizeFlag = false
}

IfElseActivity.GetToolboxIcon = function()
{
return "/images/ifelse.GIF";
}

IfElseActivity.prototype = {
Initialize : function()
{
this.header = document.createElement("img")
this.header.src = "images/ifelsehead.GIF"
this.header.setAttribute("width", "268");
this.header.setAttribute("height", "49");
this.header.onclick = function() {addElement();};
this.element.appendChild(this.header)
this.table = document.createElement("table")
this.tablebody = document.createElement("tbody")
this.tablerow = document.createElement("tr")
this.tablebody.appendChild(this.tablerow)
this.table.appendChild(this.tablebody)
this.element.appendChild(this.table)
this.table.setAttribute("border", "0");
this.addBranch()
this.addBranch()
this.footer = document.createElement("img")
this.footer.src = "images/ifelsefoot.GIF"
this.footer.setAttribute("width", "268");
this.footer.setAttribute("height", "49");
this.element.appendChild(this.footer)
},

addBranch : function() {
var cell = document.createElement("td");
var branch=document.createElement("DIV")
branch.className="SequenceActivity"
var branchConnector=document.createElement("DIV")
branchConnector.className="connector"
var innerImg=document.createElement("IMG")
innerImg.src="images/connector.gif"
branchConnector.appendChild(innerImg)
connectors[connectors.length] = branchConnector
branch.appendChild(branchConnector)
cell.appendChild(branch)
this.tablerow.appendChild(cell)
cell.setAttribute("vAlign","top")
branch.onresize=BranchResize
branch.name = getNewId("IfElseBranchActivity");
this.Branches[this.Branches.length] = branch
return branch;
},
</code>

This code creates a kind of ifelse figure on a page with two braches. This works. However, when "this.header.onclick" is clicked an extra branche must be added. Obviously my function does not work. Is the a way to get this working? I would really like to use the original addbranch function

Its about this:
http://www.wduffy.co.uk/blog/keep-el...omment-page-1/

Everywhere is used for a whole div on some side and when its on the top of the page.
But what if its in the middle..?
Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013
Scroll down and then up.Anyway to fix this?

I am very new to javascript(and these forums) and I am teaching my self to use the canvas element.
I am trying to draw an image to the canvas but nothing is appearing.
And I am getting no error in the chrome console.
Can anyone see why?


Code:

function RPGanimation(options)
{	
	
	this.initcanvas(options);
	this.initbackground(options);
	
	
};

RPGanimation.prototype = {

initbackground: function(options){

this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();

},
initcanvas:function(options){

this.canvas	= document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}




};

I create the object in a webpage with the canvas element created just before that script tag...

i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why?

i test it on this
site: Quote:
http://bowser.effectgames.com/~jhuck...rd/test10.html

Code:

$(document).ready(function(){
   $("#d_clip_container").hover(
  function () {
    $(this).append($('<span class="tip">click to copy</span>'));
  },
  function () {
    $(this).find("span:last").remove();
  });
})

i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you.

Hello.

I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html

I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy.

Is there any way I could do that?

Thanks!

I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only.

Kindly help.

Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question.

At the moment I have the following function for handling events such as onclick, mouseover, mouseout.

Code:

function switcher(action, img){
	switch(action){
		case "hover": 
			//mouse is on image
			document.imgSeat.src = "images/hover.gif";
		break;
		case "click":
			//mouse has clicked image
			document.imgSeat.src = "images/click.gif";
		break;
		default:
			//mouse elsewhere
			document.imgSeat.src = "images/defaulter.gif";
		break;
	}
}

And the html the function refers to
Code:

<body>
<div id="imagesholder">
	<a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a>
</div>
</body>

What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead.
However I seem to be banging my head against the wall.

I've tried using the following

Code:

document.getElementById(img).src = "images/available.gif"; //no error, just does nothing

//where img is "0" instead of "seat0"
document.seat[img].src = "images/available.gif";  //error: document.seat is undefined

Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong.

I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script: Code:

var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
	
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}

here is the html
Code:

<html>
<head><title>Image dropdown</title>
<script type = "text/javascript" src = "experimento5.js">
</script>
</head>
<body onload = "initialize()">
<h1> Choose any image</h1>
<img  id = "thumbnail" src = "images/desk1.gif" >
<form>
<select id = "imageChooser">
<option value = "image1"> Bands</option>
<option value = "image2"> Clips</option>
<option value = "image3"> Lamp</option>
<option value = "image4"> Erasers</option>
</select>
</form>
</body>
</html>

I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news

I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out.

This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/

I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window.

If anyone can help me do this, it would be appreciated.

This is the iframe data that was generated by the wizard:

Code:

<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe>

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";
}

I need to highlight rows in a dropdownlist. I need to do this inside a function. I have a textbox filled with the indexes of the rows which need to be highlighted - e.g. by changing the background colour to blue. This is my function:

function HighlightSelection() {
var myList = document.getElementById('dropdown');
var myString = document.getElementById('textbox').value;
var listitem;
if (myString.length>0){
var mySplitResult = myString.split(";");
var thisInx;
for (i = 0; i < mySplitResult.length; i++) {
thisInx = mySplitResult[i]
listitem = myList.options[thisInx];
// listitem.style.color='red';
}

}

}

the index (thisInx) is correct - but setting its color does not work.

never mind

Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question.

Here is the form I need, the post method is email :

Name (txtfield)

DOB (Date)

Address (txtarea)

Programme (Select list) : Options : Programme1, Programme2, Programme3

Date (Select list) : options : 10/10/2009 to 12/09/2009
15/10/2009 to 16/10/2009

Venue : Mainland
Harvey
Waterloo

Time : 9am - 12 noon
1 pm - 3 pm
3 pm - 5 pm

Here is the Logic :

Date : Conditions

If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this.

Venue : Conditions

If Programme = Programme1 then all the venues should be selectable.

If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable.

If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable.

If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it.

Time :Conditions : Always should be default selection and greyed out

If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon.

If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm.

If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm

If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm

Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this.

Thanks for having a look and thanks in advance for any help.

Cheers

Hi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible.

I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show he
http://www.pauljameswilliams.com/demo2a.html

This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links.

check out the site he
http://www.pauljameswilliams.com/portfolio.html

As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that.

this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed.
Code:

function tabSwitch(new_tab, new_content) {  
  
    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';
	document.getElementById('content_4').style.display = 'none';
    document.getElementById(new_content).style.display = 'block';     
  
    document.getElementById('btn_1').className = '';  
    document.getElementById('btn_2').className = '';  
    document.getElementById('btn_3').className = '';
	document.getElementById('btn_4').className = '';
    document.getElementById(new_tab).className = 'current';        
  
}

thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me.