JavaScript - Change Width Of Website Content With Toggle Option.

Hi

Complete novice with Java so need some help please!

I want to put a button on a website that when clicked changes the background. The button needs to be an image.

For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off")

I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click.

I guess it needs an if/else statement but not sure.

Thanks for any help!!!!

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve

I am working on an interest and investment calculator for a class project. On my list of drop down options, one of the options isnt an integer value like the rest. It's value is "other", while the other three are 1000, 5000, 1000, and 25000. What I would like to do is when the user chooses the "other amount" option from the drop down list, a prompt window will come up asking the user for an investment amount. I am having problems creating a function in my javascript file for this, and then taking the value entered and assigning a variable in another function with that new value so that it calculates with the users input. Please help. The first part of the attachment is the label with the "other" value I explained. And the second piece of code is my mess of a function that I tried to create for the prompt window to come up and store the users value and then change the value of the option. I'm new at this and am lost.....


This is in my HTML:

<label for="investment">One-Time Investment:</label>
<select name="investment" id="investment"
<optgroup label="">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other" >Other value</option>
</optgroup>
</select><br />


This is in my javascript file:


var show_prompt = function() {

if ($("other").checked ==true){
var number = prompt("please enter an investment amount", "1000");
var numb = parseFloat(number);
$("other").value = numb;
}else{
alert("Please enter your investment amount");
}
return numb;

}

Need to set the width of a Table that is being spit out by this god awful CMS...

please help me...

change the html attribute width!

i am trying to change my background image after click on given in grid option. any body show me complete code in java script.

resource: HP Laptop Repair and Solution Service Center in Delhi

Dear All,

The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>

<script language="javascript">
function enable_text(status)
{
status=status;
var form = document.forms[0];
var rads = form.elements.radio1;
for (var i=0; i < rads.length; i++)
{
var color = rads[i].checked? "red" : "";
document.getElementById("check"+i).style.backgroundColor = color;
document.getElementById("check"+i).disabled = status;
}
}
</script>
<body onload=enable_text(false);>
<div>
<form name="form1" method="post" action="">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="PortletText1" nowrap><strong>ALL Data</strong></td>
<td class="PortletText1" nowrap><strong>YES</strong></td>
<td class="PortletText1" nowrap><strong>NO</strong></td>
<td class="PortletText1" nowrap><strong>N/A</strong></td>
<td class="PortletText1" nowrap><strong>Comments</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 1:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td>
<td class="PortletText1" nowrap>
<input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 2:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 3:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td>
</tr>
<tr>
</div>
</form>
</body>
</html>
</body>
</html>



thanks in advance.

Regards
sona

Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?

Thanks

Hi,

I'm trying to change the column from javascript using.

cell.width='7';

or
cell.style.width="7px";

when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to.

Please let me know.

I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution?

I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait)

Code:

 <li class="frame" id="sm"> 
      <div class="frm" id="frame1">
	   <img src="image.jpg">
      </div>
</li>

I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much!

One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html

Code:

JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-content") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-content") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("scroller"), 550, 275);
  scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>

I want a code that changes text (of maybe a div) after 10 seconds.
So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over.

THANKS

I'm searching for a crossbrowser script to zoom in/out the full website content (not text only). Who can provide me a link to that kind of script?

Hi all

I'm rather new to java scripting and trying to get this done for over a week now.

I'm building a complete new site (not online yet) which is done for 99,9%

The site consists of:

Index - No frames - Just an entrance of the site with links
main menu
Section1 - 1 iframe ("iframe1") - default src=iframe1defaultsection1content
main menu submenu section1
Section2 - 2 iframes ("iframe1","iframe2") - default src = iframe1defaultsection2content - frame2 contains images that change
main menu submenu section2
Section3 - 1 iframe ("iframe1") - default src=iframe1defaultsection3content
main menu submenu section3
Section4 - 1 iframe ("iframe1") - default src=iframe1defaultsection4content
main menu submenu section4
Contact - 1 iframe ("iframe1") - default src=iframe1defaultcontactcontent
main menu submenu contact

The main menu is plain html that is on every page
I use javascripts to make a loadIframeFunction load content into the iframes

Code:

<head>
<script type="text/javascript>
var iframeids=["iFrame1"]

var iframehide="yes"

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
</script>
</head>
<body>

<iframe id="iframe1" src="iframesection1start.html" width="644px" height="385px" style="position:absolute; left:505px; top:275px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>

<a href="javascript:loadintoIframe('iframe1', 'iframecontent.html')" title="content">Content</a>

</body>

Everything works, but 1 thing.

i can't get the links in the index page link to the specific section page AND change the default src content

can anybody assist me pls?

I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console.

the code that is waiting for the content... Code:

<div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" />

the code that should change the content.... Code:

<? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>

when i view the source code the javascript lines show like so... Code:

<script type="text/javascript">
document.getElementById('desc').value='373';
</script>

do i have the javascript correct ?