Learn VBA & Macros in 1 Week!

JavaScript - Expand-contract Javascript With Button

Full Excel VBA Course - Beginner to Expert

Expand-contract Javascript With Button	View Content

Hi everybody,

I have this expand/contract thing, whereby a button is situated below a label "Advanced Features".

And so when the user clicks on "Advanced Features", the button will drop below the whole expansion. The button should be situated BEFORE the label before clicking onto "Advanced Features".

Any ideas on how I can do this?

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 language = "javascript" type = "text/javascript">
   var collapsable_parent_name = "collapseExpand"; 
var collapsable_parent_type = "div"; 
var collapsable_child_type = "div"; 

var collapsable_expand = "Advanced Features"; 
var collapsable_shrink = "Simple Features"; 

init = function() 
{ 
    if(document.getElementById && document.createTextNode) 
    { 
        var entries = document.getElementsByTagName(collapsable_parent_type); 
        for(i = 0; i < entries.length; i++) 
        if (entries[i].className == collapsable_parent_name) 
                assignCollapse(entries[i]);
    } 
} 

assignCollapse = function (div) 
{ 
    var button = document.createElement("collapse_add_adv_features");
    button.style.cursor = "pointer"; 
    button.setAttribute("expand", collapsable_expand); 
    button.setAttribute("shrink", collapsable_shrink); 
    button.setAttribute("state", -1); 
    div.insertBefore(button, div.getElementsByTagName(collapsable_child_type)[0]); 

    button.onclick=function()
    { 
        var state = -(1*this.getAttribute("state")); 
        this.setAttribute("state", state); 
        this.parentNode.getElementsByTagName(collapsable_child_type)[0].style.display=state==1?'none':'block'; 
        this.innerHTML = this.getAttribute(state==1?"expand":"shrink"); 
    };                    
    button.onclick(); 
} 


window.onload = init;
   
   </script>
    
</head>
<body>
    <table>

                        <label>
                            *First Name:</label>
                        <input id="Text16" type="text" name="First Name" onkeydown="return noSpace(event)" />
                        <br />
                        <br />
                        <label>
                            *Last Name:</label>
                        <input id="Text17" type="text" name="Last Name" onkeydown="return noSpace(event)" /><br />
                        <br />

                        <div class="collapseExpand">
                            <div>
                                <br />
                                <ul id="mailboxTabs" class="shadetabs">
                                    <li><a class="selected" href="#" rel="mailbox1">1</a></li>
                                    <li><a class="" href="#" rel="mailbox2">2</a></li>
                                    <li><a class="" href="#" rel="mailbox3">3</a></li>
                                </ul>
                                <div class="contentBox">
                                    <div style="display: block;" id="mailbox1" class="tabcontent">

                                    </div>                                
                                
                                
                                    
                                    <div style="display: none;" id="mailbox2" class="tabcontent">
                                    </div>
                                
                                
                                
                                
                                    <div style="display: none;" id="mailbox3" class="tabcontent">

                                    </div>
                                    
                                    
                                    <div style="display: none;" id="mailbox4" class="tabcontent">
                                        </form> 
                                                               
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <script type="text/javascript">
                        var switchMBTabs=new ddtabcontent("mailboxTabs")
                        switchMBTabs.setpersist(true)
                        switchMBTabs.setselectedClassTarget("link") //"link" or "linkparent"
                        switchMBTabs.init()
                    </script>

                <input id="Submit17" type="submit" value="Submit" onclick="return check()"/>
                </td>
            </tr>
    </table>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Expand-contract Javascript

Similar Tutorials

View Content

Hi there, I have this form whereby when there is a "File Upload Input" aka

"<input id="File1" type="file" />" (I don't know the actual name, but that's not the point).

The user will be able to click on "Add another attachment", which is situated below the File Upload Input. Right now, when the user clicks on it, another "File Upload Input" will appear, and will be placed below the newly-added "File Upload Input".

Therefore, whenever the user clicks on the "Add another attachment", it will automatically move downwards to be situated below the newly-added "File Upload Input". How should I do it?

Also, when I click on the "textbox" of the "File Upload Input", it will pop up the dialog box for me to upload my file. How can I disable it so that the user can only upload it via the "Browse" button?

My code is shown as below:

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>Untitled Page</title>
    <style type="text/css">
        #Select1
        {
            width: 209px;
        }
        #Text1
        {
            height: 143px;
            width: 209px;
        }
        .style17
        {
	        height: 330px;
	        width: 427px;
	        margin-left: 50px;
        }
        
        #Submit1
        {
	        margin-left: 240px;
        }


    </style>
    <script type="text/javascript">
    var COLLAPSABLE_HELPDESK_PARENT_NAME = "collapsable_helpdesk"; 
    var COLLAPSABLE_HELPDESK_PARENT_TYPE = "div"; 
    var COLLAPSABLE_HELPDESK_CHILD_TYPE = "p"; 

    var COLLAPSABLE_HELPDESK_EXPAND = "Add another attachment"; 
    var COLLAPSABLE_HELPDESK_SHRINK = "Add another attachment"; 

    init = function() { 
        if(document.getElementById && document.createTextNode) { 
            var entries = document.getElementsByTagName(COLLAPSABLE_HELPDESK_PARENT_TYPE); 
            for(i=0;i<entries.length;i++) 
                if (entries[i].className==COLLAPSABLE_HELPDESK_PARENT_NAME) 
                    assignCollapse(entries[i]); 
        } 
    } 

    assignCollapse = function (div) { 
        var button = document.createElement('collapse_add_attachment'); 
        button.style.cursor='pointer'; 
        button.setAttribute('expand', COLLAPSABLE_HELPDESK_EXPAND); 
        button.setAttribute('shrink', COLLAPSABLE_HELPDESK_SHRINK); 
        button.setAttribute('state', -1); 
        button.innerHTML='dsds'; 
        div.insertBefore(button, div.getElementsByTagName(COLLAPSABLE_HELPDESK_CHILD_TYPE)[0]); 

        button.onclick=function(){ 
            var state = -(1*this.getAttribute('state')); 
            this.setAttribute('state', state); 
            this.parentNode.getElementsByTagName(COLLAPSABLE_HELPDESK_CHILD_TYPE)[0].style.display=state==1?'none':'block'; 
            this.innerHTML = this.getAttribute(state==1?'expand':'shrink'); 
        };                    
        button.onclick(); 
    } 


    window.onload=init;
    
    </script>
</head>
<body>
    <div class="style17">
        <table cellpadding="5">
            <tr>
                <td>
                    Category:
                </td>
                
                <td>
                    <select id="Select1" name="D1">
                        <option></option>
                    </select><br />
                </td>
            </tr>
            
            <tr>
                <td>
                    Description:<br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                </td>
                
                <td>
                    <input id="Text1" type="text" />
                </td>
            </tr>
            
            <tr>
                <td>
                    Attachment:
                </td>
                
                <td>
                    <input id="File1" type="file" />
                </td>
            </tr>
        </table>
        
        <div class="collapsable_helpdesk">
            <p>
                                             
                <input id="File2" type="file" />
            </p>
        </div>
        
        <br />
            <input id="Submit1" type="submit" value="Submit" />
    </div>
</body>
</html>

Need Help With Expand/collapse Toggle Button/icon

Similar Tutorials

View Content

I am a beginner with coding and have no idea what I'm doing. Hopefully I'm posting this on the right forum.

I have just registered a domain for my business and am maintaining my webpage through tumblr. I have stumbled around into finding a code that will allow me to hide/collapse certain content. The problem is that I want it to become an icon that changes from a "plus" to a "minus" sign, or any one character to another, as opposed to having it be the title that gets clicked on in order to be expanded.

One major issue I'm having revolves around content expanding where a link is displayed. I am coding this on the "links" section of my page, which is links to other businesses and webpages I support. So, for example, I'll have a link to a business, and the hidden content will be something I have to say about it, that the person viewing can chose to read by clicking to expand content. I want it hidden by default to take up less space.

This is the code I put into my head section:





<script language="JavaScript" type="text/javascript">


</style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>

And this is what the html looks like, which I've placed within a table (the list of businesses/pages I support or recommend):

<td width=[]>
<h2><u>[list name]</u></h2>

<p>
<a href="http://[link to business].com">[name]</a>
<br>
<div onClick="openClose('a3')" style="cursor:hand; cursorointer">∇</div>
<div id="a1" class="texter"><font style="font-size:90%" color="maroon">
[hidden content]</font></p></div>

Is is possible for me to place some kind of code where I have the ∇ that will switch between two icons when shown/hidden? Do I have to use a completely different script? Also, is it possible to keep both a link and a toggle icon on the same line without a break, yet have them lead to different places? Maybe this is more difficult than I think it should be, but I really cant find a good script on the internet for this. Any help would be appreciated. Thanks.

How Do I Make This Script Expand / Collapse / Expand Table Headers?

Similar Tutorials

View Content

Hello everyone, I am just learning the basics of javascript, and am finding myself stuck. Any help is greatly appreciated.

So, I'm using the below javascript for expand / collapse text, it suffices well. However it will only collapse either table rows, or table data cells. Now, I know that these tags

Code:

 
{var trs = table.getElementsByTagName('tr');
{var a = trs[i].getElementsByTagName('td')

Make the rows / data cells expand. However, I cannot seem to make it work on headers.

To be lucid, I would like to know what I have to add, or edit to make the below code expand table headers (<th>), and perhaps div tags. The full javascript is thus :

Code:

 
window.onload = function()
{
var table = document.getElementById('stjorn');
if (table)
{
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++) 
{
var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0];
a.onclick = function()
{
var span = this.parentNode.getElementsByTagName('span')[0];
span.style.display = span.style.display == 'none' ? 'block' : 'none';
this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';};
}
}
};

Thank you for your time.

Javascript - Swap An Image Within An Expand/collapse Effect

Similar Tutorials

View Content

Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...

Here is the CSS I used to create the look of the "buttons"...

Code:

div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}

Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:

<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>

Here is the JavaScript I used to create the expand/collapse effect...

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}

Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.

This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.

This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:

function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!

Fixing Forum Through Javascript Source: Adding Picture Button And Html Button

Similar Tutorials

View Content

Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS

Javascript Function Works On First Button, But Shows Same Output On Second Button

Similar Tutorials

View Content

Hi,

I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple.

I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here.

My page is:
Code:

<script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
	try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }	
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php

	$con = mysql_connect("localhost","user","password");
	if (!$con)		{
		die('Could not connect: ' . mysql_error());
		}
	mysql_select_db("mydb", $con);

	$result = mysql_query("SELECT DISTINCT theme FROM goods	WHERE category='{$_POST['category']}'
	ORDER BY theme DESC");
	

	while($row = mysql_fetch_array($result)){
		echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" >&nbsp';
		}
echo '<br /><br />

<div id="txtHint"><div>
<br />
<br />';

	mysql_close($con);
?>

And getShow.php produces a table with a list of product images, names and prices, based on theme.

So basically not sure where I am going wrong here?

Iframe Auto Resize, Expands But Does Not Contract In Ie/safari.

Similar Tutorials

View Content

http://isensors.com.sg/isensors-GJ/

That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.
<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["contentframe", "newsframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<=iframeids.length; i++){
var iframeid = iframeids[i];
if (document.getElementById)
resizeIframe(iframeid)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight+50;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script> Could someone kindly help me find the problem? Thanks.

Javascript-how To Disable Html Button By Javascript

Similar Tutorials

View Content

Hi Guys,
I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
I create the following code but it did not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="JavaScript" type="">
function changeColor(){
document.bgColor = "Gray";
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var person = "";
person = prompt('What is Your Name:');
if (person == "Foo") {
document.write("<h1 />Welcome " + person);
document.bgColor = "Yellow";
}
else {
document.write("<h1 />Access Denied!!!!");
document.bgColor = "Red";
document.getElementById("gree").disabled = true;
}
</script>

<div>
<p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
</div>
</body>
</html>

as you can see I used the:
document.getElementById("gree").disabled = true;
but it did not work , could you please give an idea how I can solve this problem?
Thanks

Javascript Button Help

Similar Tutorials

View Content

hello everyone

I am working on a quiz which marks the user and displays to different screens when the total has been calculated. If the user gets over 80% a congratulations page is shown but if you score less your told to go back and look at some of the material again.
I would like the congratulations page to show a button to let the users continue on to the next section of the tutorial. Does any one have any ideas how I could do this? im stumped. I have inserted the code below, any help would be much appreciated as I'm a little stuck :/

Code:

// Function to create arrays.
function makeArray(len) {
    for (var i = 0; i < len; i++) this[i] = null;
this.length = len;
}

// creates objects for this question.
function makeQuestion(question, correctAnswer) {
var args = makeQuestion.arguments;
this.question = question;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
this.isCorrect = isCorrect;
this.showForm = showForm;
this.userChoices = new makeArray(args.length - 2);
   for (var i = 0; i < args.length - 2; i++) { 
   this.userChoices[i] = args[i + 2];
   }
}

// determins if the questions answered correctly
function isCorrect() {
if (this.correctAnswer == this.userAnswer) return true;
else return false;
}

// Method to display contents of question object.
function showForm(n) { //argument n is the number of the question.
document.write((n + 1) + '. ' + this.question + '<BLOCKQUOTE><FORM>'); //n+1 = the number of the question in the array (has to add one because the array starts with 0 or the first question would be number 0, this question displays the questions text, blockquote off sets the answer making them indented.
    for (var i = 0; i < this.userChoices.length; i++) { //goes through the questions one by one.
        document.write('<INPUT TYPE = "RADIO" NAME = "q' + n + //create the radio buttons.
                       '" onClick = "quiz[' + n + '].userAnswer = ' + i + '">');
        document.write(this.userChoices[i] + '<BR>');
    }
document.write('</FORM></BLOCKQUOTE>');
}

// 	This corrects the quiz, dispays the correct answers and the score.
function correctQuiz() {
var correct = 0; // sets the correct page to a score of zero
correctPage = '<HTML><TITLE>Corrections</TITLE><BODY BGCOLOR = "#FFFFFF">'; // sets the attributes of the correction page
    for (var i = 0; i < quiz.length; i++) { //loop runs through questions
    if (quiz[i].isCorrect()) correct++; // the is correct starts at 0 every time is correct returns true (an answer is correct) it adds 1 to the number adding up correct answers.
    }
var score = Math.round((correct / quiz.length) * 100); // find out the % of correct answers by using math and the % equation
correctPage += 'Sco  <STRONG>' + score + '</STRONG> %';
    if (correct < (quiz.length / 100) * 80) {  //if the correct number is less than the quiz length then not all the answers were correct if it is the same then all ansers were correct.
    correctPage += ifWrong; // if there were wrong answers
        for (var i = 0; i < quiz.length; i++) {  // starts a for loop through the answers
            if (!quiz[i].isCorrect()) { // if quiz doesn't = to iscorrect.
            correctPage += (i + 1) + '. ' + // this shows what number was wrong.
            quiz[i].userChoices[quiz[i].correctAnswer] + '<BR>'; // displays the correct answes for the questions that were wrong
            }
        }
    }
    else correctPage += ifAced;  // this is the correct page displayed if all the answers were right.
correctPage += '</BODY></HTML>'; // opens the window of correct page
correctwin = window.open ('', '', 'height=300,width=300,scrollbars=yes'); 
    if (correctwin.opener == null) correctwin.opener = window;
correctwin.location = 'javascript:opener.correctPage';
}

// Message to display if quiz is aced.
var ifAced = "<P>Well done! you have passed the test. You can now move on to the next section of the tutorial<P>"; 
// Message to display if any are wrong.
var ifWrong = "<P>Check below to see the answers that you got wrong. It maybe helpful if you go back and read the bits your unsure of.<P>";

// Create seven question objects...
quiz = new makeArray(8); // this is how many questions there is in the quiz 
quiz[0] = new makeQuestion("What is the correct name for the leg marking found in picture 1?", // 1st question  starts at 0 because thats the first number in an array
                            2,                             // correct answer           
                           "Sock",                // choice 0
                           "Stocking",                // choice 1
                           "Coronet band",                    // choice 2         
                           "half cannon");    // choice 3        

quiz[1] = new makeQuestion("What is the correct name for the leg marking found in picture 2?",         // 2nd question 
                            0,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon"); //choice 3

quiz[2] = new makeQuestion("What is the correct name for the leg marking found in picture 3?",         
                            1,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon");

quiz[3] = new makeQuestion("What is the correct name for the leg marking found in picture 4?",
                             3,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon");

quiz[4] = new makeQuestion("What is the correct name for the face marking found in picture 5?", 
                            2, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

quiz[5] = new makeQuestion("what is the correct name for the face marking found in picture 6?",
                              0, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

quiz[6] = new makeQuestion("what is the correct name for the face marking found in picture 7?",
                              3, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");
quiz[7] = new makeQuestion("what is the correct name for the face marking found in picture 8?",
                             1, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

Javascript Button

Similar Tutorials

View Content

i am trying to achieve a JS driven button for a cms. for example i have a text in a textarea so i select the text and add the bold attribute to this text.
my text before : text
my text with bold added : <b>text</b>
what the function to achieve this ?
thanks

Javascript Button With Css

Similar Tutorials

View Content

Trying to build a timer for an image array, it works, I've created also a stopTimer on hover event. But, what I wish to do Is create buttons so the users can press previous or next and see the sliding images as they wish.

here'S my code so far :

<script type="text/javascript">

var currPic=1;

var totPics=8;

var keepTime;

function setupPicChange()

{ keepTime=setTimeout("changePic()", 15000); }

function changePic()

{ currPic++; if(currPic>totPics) currPic=1;

document.getElementById("picture").src="/images/services/picture"+currPic+".png";

setupPicChange(); }

function stopTimer()

{ clearTimeout(keepTime); }

function startTimer()

{ keepTime=setTimeout("changePic()", 5000); }

function prevTimer()

{ currPic-1 }

function nextTimer()
{currPic+1}

</script>

I've created the nextTimer and prevTimer functions but they do not seem to work. I do not know how to integrated these functions in CSS sor my button, which are designed with CSS hover, down and active states...

can you guys help me out ? am pretty basic here with codes...

Need Help In Coding A Button With Javascript

Similar Tutorials

View Content

I have a basic Javascript slideshow that flicks through a series of 6 jpg images very quickly.
I also have a button that i need coded so that when a user clicks on the button, the script for the slide show slows down the speed of the flicking images slowly over the coarse of ten seconds and stops on an image.
How do i go about coding the button in javascript?
I hope this makes sense.

Thankyou

Here is my code so far.

var i, imgs, pic;

function rotate()
{
pic.src=imgs[i];
(i===(imgs.length -1))? i=0:i++;
setTimeout(rotate,500);
}

function diceroll()
{
pic=document.getElementById("yes");
imgs=["photo1.jpg", "photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg"];

var preload=new Array();
for(i=0;i<imgs.length;i++)
{
preload[i]=new Image();
preload[i].src=imgs[i];
}

i=0;
rotate();
}

Javascript Button Issues

Similar Tutorials

View Content

Hey everyone I want to go ahead and say my issue with javascript is in a homework assignment so...I'm just looking to get more of a nudge in the right direction of how to fix this issue than anything ^^' I'm not asking to have the code fixed for me. I've been assigned to code a simple currency converter of just US dollars to a few other kinds of currency. I have most of the basic stuff done, I used an example piece of javascript and am editing it to try and make it into what I need. I'm just having issues with the button that is supposed to run the function and output the value of the currency, I can't seem to get the button to work. Here is the code I've gotten so far, if someone could just point out maybe where the issue is as sort of a hint I'd be really grateful!

Code:

<html>
<head>
<title>Currency Converter</title>




<script type = "text/javascript">

function calcvalue() {
   
   if (CurrencyType == "USDollars")
      {price = 1;}
   if (CurrencyType == "BritishPounds")
      {price = 0.632766;}
   if (CurrencyType == "Euros")
      {price = '.709723';}
   if (CurrencyType == "CanadianDollars")
      {price = 0.970476;}
   if (CurrencyType == "JapaneeseYen")
      {price = 83.073;}
    if (CurrencyType == "ChineeseYuan")
      {price = 6.55649;

Currency.answer.value=price*DollarAmount;
}
  

   if (!( DollarAmount >= 1001 || DollarAmount <= 0))
   {
       alert ("Please Enter a value between 1 and 1000");
	   return;
	}

	
   


}


</script>
<body>
<body bgcolor="CCCCFF">





<form name="Currency">

  <center>
  <table>
  <tr> 
    <td>Currency Type: </td>
    <td>
      <select name="Currency">
        <option value="USDollars">US Dollars</option>

        <option value="BritishPounds">British Pounds</option>
	<option value="Euros">Euros</option>

        <option value="CanadianDollars">Canadian Dollars</option>
        <option value="JapaneeseYen">Japaneese Yen</option>
	 <option value="ChineeseYuan">Chineese Yuan</option>



       </select>
  

   <tr>
     <td>Dollar Amount</td>
     <td> $<input type=parsefloat() value="1" name="DollarAmount" size=3></td>
   </tr>
   <tr>

      <td> </td>

      <td><p class="submit"> 
           <input type=button value="Convert" onclick=calcvalue()></p></td>
   </tr>
   <tr>
      <td>value:</td>
      <td><input  type=text size=6 name="answer"><td>
   </tr>

   </table>

   </center>

</form>
</body>
</html>

Javascript Not Showing Button..

Similar Tutorials

View Content

Hi all. Can someone tell me why I can select both HTML AND another radio button, but when I unselect, and select a # of 1 through 4, I can switch between the radio buttons, but I can't if I select HTML first?

Also, what's wrong w/ this code?

Code:

<html>
<head>
<title>Webpage Teacher - V 1.0</title>
</head>
<body>
<script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
	if(!radioObj)
		return;
	var radioLength = radioObj.length;
	if(radioLength == undefined) {
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()) {
			radioObj[i].checked = true;
		}
	}
}
function getCheckedValue(radioObj) {
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}
	return "";
}
</script>
<form name="radioExampleForm" method="get" action="">
<p>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
&nbsp;<label for="number0"><input type="radio" value="0" name="number" id="number0"> Zero</label>
&nbsp;<label for="number1"><input type="radio" value="1" name="number" id="number1"> One</label>
&nbsp;<label for="number2"><input type="radio" value="2" name="number" id="number2"> Two</label>
&nbsp;<label for="number3"><input type="radio" value="3" name="number" id="number3"> Three</label>
&nbsp;<label for="number4"><input type="radio" value="4" name="number" id="number4"> Four</label>
</p>
<p>
<script>
var thevar='';
if(document.forms['radioExampleForm'].elements['number']){
thevar='number';
}else{
thevar='code';
}
document.write(''
+'<input type="button" onclick="alert(\'Checked value is: '+getCheckedValue(document.forms[\'radioExampleForm\'].elements[\''+thevar+'\']));" value="Show Checked Value">');
</script>
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['code'], 'HTML');" value="Set Checked to HTML">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '1');" value="Set Checked to One">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '2');" value="Set Checked to Two"> 
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '3');" value="Set Checked to Three">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '4');" value="Set Checked to Four">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], ''),setCheckedValue(document.forms['radioExampleForm'].elements['code'],'');" value="Uncheck All">
</p>
</form>
</body>
</html>

I simply want it to display the Check Value button and detect 2 different id's for 2 different radio buttons (which is 'code' and 'number')

Thanks!

Javascript Button For Database

Similar Tutorials

View Content

Okay, I'm good at PHP but using javascript so the user doesnt need to refresh the page is a neat thing.

I want to make a button that says "Do you like this game? Yes or No"

How can I use javascript to tell Yes to send

games->rating_yes = 1
or
No games->rating_no = 1

Or if you could link me with resource on building something that can teach me how to use javascript to update/insert into my database.

I've tried stuff like this

Code:

Do you like this game? <a href="javascript://" onclick="ajaxYESorNO('<?=$gameid;?>','like');">Yes</a> or <a href="javascript://" onclick="ajaxYESorNO('<?=$gameid;?>','dislike');">No</a>

Code:

function ajaxYESorNO(gameid,answer) {
	ajax = ajaxFunction();
	ajax.onreadystatechange = function () { ajaxRateGame_stateChanged(vote); };
	var url = base_url+ "includes/ajaxYESorNO.php";
	url = url+ "?vote=" +answer;
	url = url+ "&gameid=" +gameid;
	ajax.open("GET",url,true);
	ajax.send(null);
}

PHP Code:
<?php
$gameid = $_GET[gameid];
$vote = $_GET[vote];

@include "config.php";

if($_GET['vote']=='like')
{
    $result = $GLOBALS['dFetch']->exec ("update games
                        set rate_yes=rate_yes+1
                        where gameid = $gameid");
} else {

    $result = $GLOBALS['dFetch']->exec ("update games
                        set rate_no=rate_no+1
                        where gameid = $gameid");
}
?>

But yet cant seem to figure how to get it working properly

Thanks.

Help With Javascript + Form Button

Similar Tutorials

View Content

Good afternoon.

I'm trying to make it so a 'radio button' in a 'form' will 'collapse' a Div that I have hidden.

I'm using the JavaScript to control the collapse, and google's Jquery for the rest of it.

here's the code.

Code:

<head>
<script type="text/javascript" src="SpryAssets/collapse.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('test', 'fade=1, group=test, speed=400')

animatedcollapse.ontoggle=function($, divobj, state) { //fires each time a DIV is expanded/contracted
		//$: Access to Jquery
		//divobj: DOM reference to DIV being expanded/collapsed. Use "divobj.id" to get the ID.
		//state: "block" or "none", depending on the state.
	}
	
	animatedcollapse.init()
</script>
</head>

and the body code...

Code:

<form action="myform.php" method="post">
<a id="collapsable" href="javascript:animatedcollapse.toggle('test')"> [+]
        Testing the Collapsability of this Scripting.</a>
	<div id="test" style="display:none;">	
    	<h1> You can see that if you toggle the 'Image Display' Button. This will display Properly.</h1>
    </div>
</form>

You can find a completely working version (When not using Radio buttons and forms) located at My Toggle Works Here.

Alternatively, you can find the NON working version, which is what I'm attempting to get to work, located at My Toggle Doesn't Work.

you can see that in the version that doesn't work, if you hit the 'Radio button', it will collapse, and immediately uncollapse the Div, I don't get why it does this.

Any help is greatly appreciated.

Clicking A Button With Javascript

Similar Tutorials

View Content

For school I'm supposed to write a JS code which visits a website, and then clicks on a button on that website. I used the document.location method to visit the web page, but then if I use the document.forms[0].elements[0].click() function to click a button, nothing happens. The click() function has always worked for me when the JS code is embedded in the web page, but its not in this case because the code has to click a button on an external website. So how can I do this? I just need me Javscript program to visit a site, and then click a button on that site. Please help, thanks.

Javascript Button Color.

Similar Tutorials

View Content

when creating a button with javascript, is it possible to change the blue color when you mouse over it? I know its a stupid question but I am curious... I'm new to this javascript stuff..

New To Javascript Need Radio Button Help

Similar Tutorials

View Content

I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click. However, after looking it up for a while I have nothing since some tell me to do document.formName.name.value; some tell me to use an id with my buttons and just use a document.getElementByID(""); etc.

This is for a project and we havent used parameters yet and I dont know how to implement them in the HTML as well

This is my code:

function classchoice()
{
if(document.getElementById('mage') == true)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.paladin == true)
{
classtype = "<img class='display' src='paladin.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.hunter == true)
{
classtype = "<img class='display' src='hunter.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.rogue == true)
{
classtype = "<img class='display' src='rogue.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
}

This is the HTML:

<form name="classes">
<input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" />
<input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" />
<input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" />
<input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" />
</form>

I hope it's readable because I copy and pasted my code and the indentations are a bit messed up

Javascript And Radio Button

Similar Tutorials

View Content

Hello, I am trying to implement a radio button option so that users can search specific sites such as google, yahoo, or bing from input box. Here's my code. Please help.

<script type="text/javascript">

</script>

<h1>Search Option</h1><br />
<input type="radio" name="search" id="google"/><a href="http://www.google.com" rel="nofollow" target="_blank"><img src="images/google.jpg" /></a>
<input type="radio" name="search" id="yahoo"/><a href="http://www.yahoo.com" rel="nofollow" target="_blank"><img src="images/yahoo.jpg" /> </a>
<input type="radio" name="search" id="bing" /><a href="http://www.bing.com" rel="nofollow" target="_blank"><img src="images/bing.jpg" /> </a>
<br /><br />

<form method="get" action="goSearch()" rel="nofollow" target="_blank">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search" />
</td>
</tr>
</table>
</div>
</form>