|
JavaScript - Help With Code, Using Image For Checkbox And Then Displaying Divs
Hello everyone, my 1st post here and my 1st day with javascript!
I am having some problems with the below script: Code: <html>
<head>
<title></title>
<script type="text/javascript">
var electronics = ["mobiles", "hi-fi"];
var entertainment = ["books", "dvds",];
function check(checkboxid) {
document.getElementById(checkboxid).checked = "checked";
}
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.hide
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body>
<img src="images/electronics.png" onclick="check('electronics');">
<input type="checkbox" id="electronics" onchange="chk(electronics, this.checked);" > <br>
<input type="checkbox" onclick="chk(entertainment, this.checked);"> Entertainment<br>
<br>
<br>
<div id="mobiles" class="hide">Mobiles</div><br>
<div id="hi-fi" class="hide">Hi-Fi</div><br>
<div id="books" class="hide">Books</div><br>
<div id="dvds" class="hide">DVD's</div><br>
</body>
</html>
Basically what happens is, when you select a checkbox it displays the relevant divs, this works fine with the entertainment checkbox in the code. What I am trying to achieve is use an image to trigger the checkbox (which will be hidden) and the run the chk code to display the divs What actually happens when you click the image the checkbox does become checked, however the divs do not display, if I uncheck the checkbox itself and then check the actual checkbox then it works. Basically getting very frustrated as I can't seem to see whats wrong! I am guessing that for some reason the check code stops the chk running, but I dont know why! Many thanks for any help Similar TutorialsHi friends, I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this? Thank You Madhusudan I dont claim any of the JS below as my own. link to an example page http://www.clansngamers.com/add_new_game.php You see the PS3 checkbox is standard: Working, It brings up the hidden div. The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem. have tried to code this and failed asking for any help i suck at JS. The Code Im trying to add Code: function showMe(id){ var obj = document.getElementById(id);
if (obj.style.display == "none"){obj.style.display = "inherit";}
else {obj.style.display = "none";}
}
The basic layout Code: <input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>
Custom Checkbox code Code: var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.top = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
This code is designed to send people either to List 1 or List 2 in the Aweber form. At this time, I cannot make the uncheck go to List 2 to receive that thankyou email. Can you tell me what is wrong??? Check--Yes I would like to subscribe--List 1 email--thank you uncheck--No, I do not want to subscribe--List 2--you need more information I am omitting the top of the Aweber code before <body>-- <script language="javascript"> function magCheck(){ var magcheckbox = document.MainForm.magcheckbox.checked; if(magcheckbox == true){ document.getElementById("keylivingwell").value = '1355523361' document.getElementById("redirect").value = 'http://www.aweber.com/thankyou-coi.htm?m=text'; }else if(magcheckbox == false){ document.getElementById("keylivingwund").value = '1357528764' document.getElementById("redirect").value = 'http://www.aweber.com/thankyou-coi.htm?m=text'; } } </script> { } </style> <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" > <div style="display: none;"> <input type="hidden" id="meta_web_form_id" name="meta_web_form_id" value="1355523361" /> <input type="hidden" name="meta_split_id" value="" /> <input type="hidden" name="listname" value="keylivingwell" /> <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_77879d6b0d1bc03d212e86d72e1eae3c" /> <input type="hidden" name="meta_adtracking" value="Key_to_Living_Well_in_Retirement" /> <input type="hidden" name="meta_message" value="1" /> <input type="hidden" name="meta_required" value="name,email" /> <input type="hidden" name="meta_tooltip" value="" /> </div> <div id="af-form-1355523361" class="af-form"><div id="af-header-1355523361" class="af-header"><div class="bodyText"><p> Yes, thank you, I would like</p> <p> a copy of the Report!</p></div></div> <div id="af-body-1355523361" class="af-body af-standards"> <div class="af-element"> <label class="previewLabel" for="awf_field-25981213">Name: </label> <div class="af-textWrap"> <input id="awf_field-25981213" type="text" name="name" class="text" value="" tabindex="500" /> </div> <div class="af-clear"></div></div> <div class="af-element"> <label class="previewLabel" for="awf_field-25981214">Email: </label> <div class="af-textWrap"><input class="text" id="awf_field-25981214" type="text" name="email" value="" tabindex="501" /> </div><div class="af-clear"></div> </div> <div class="af-element buttonContainer"> <input name="submit" id="af-submit-image-1355523361" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.aweber.com/images/forms/modern/blue/button.png" tabindex="502" /> <div class="af-clear"></div> </div> <div class="af-element privacyPolicy" style="text-align: center"><p><a title="Privacy Policy" href="http://www.aweber.com/permission.htm" target="_blank">We respect your email privacy</a></p> <div class="af-clear"></div> </div> <div class="af-element poweredBy" style="text-align: center; font-size: 9px;"><p>Powered by <a href="http://www.aweber.com" title="Email Marketing Services">AWeber</a> <a href="http://www.aweber.com" title="Email Marketing Services">Email Marketing Services</a></p> <div class="af-clear"></div> </div> </div> <div id="af-footer-1355523361" class="af-footer"><input id="magcheckbox" name="magcheckbox" onclick="magCheck();" type="checkbox" value="1" checked> <div class="bodyText"><p><span style="font-size: 14px;"> Yes, I would like to subscribe</span></p> <p><span style="font-size: 14px;"> to Baby Boomers Magazine.</span> </p></div></div> </div> <div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jMysrKxMzMxsjA==" alt="" /></div> </form> <script type="text/javascript"> <!-- (function() { var IE = /*@cc_on!@*/false; if (!IE) { return; } if (document.compatMode && document.compatMode == 'BackCompat') { if (document.getElementById("af-form-1355523361")) { document.getElementById("af-form-1355523361").className = 'af-form af-quirksMode'; } if (document.getElementById("af-body-1355523361")) { document.getElementById("af-body-1355523361").className = "af-body inline af-quirksMode"; } if (document.getElementById("af-header-1355523361")) { document.getElementById("af-header-1355523361").className = "af-header af-quirksMode"; } if (document.getElementById("af-footer-1355523361")) { document.getElementById("af-footer-1355523361").className = "af-footer af-quirksMode"; } } })(); --> </script> I have looked at it so long time, I can't find it. Thanks for your help, Pat I am trying to use some JavaScript code that I found by searching the web, my goal is to have a form with a "required" checkbox to force my users to acknowledge they have read my "Terms and Conditions" section. The code that I found ALMOST works properly - it does pop-up the "Alert" window when the checkbox is blank and the submit button is clicked... however, if the user closes the Alert window in order to click the checkbox in compliance, the "submit.form" command is executed before they have a chance. In other words, there is no "pause" in the execution of the script to allow the user to make the correction by clicking the checkbox. Here is the code: Code: <script LANGUAGE="JavaScript">
<!--
function ValidateForm(form){
ErrorText= "";
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; }
if (ErrorText= "") { form.submit() }}
-->
</script>
Here is the HTML for the checkbox: Code: <input name="terms" type="checkbox" value="Yes" /> Here is the HTML for the submit button that calls the function: Code: <input type="submit" value="Continue" onclick="ValidateForm(this.form)" /> I've searched for other examples of code to accomplish this objective, but I'm hoping for a quicker solution by coming to the experts who can see the flaw in this JavaScript. Thanks for any help, Rob Hello everyone. I have been trying 2 days straight to figure out how to make this script work. Basically I am trying to have a hidden checkbox with a drop down menu. I want the user to be able to choose 0-9 where 0 the check box will not be checked and 1-9 if picked from the dropdown menu it will automatically check the hidden box. Here is the closest string of code I could find out there to help me figure it out but I am having no luck. The closest I got was....well I never really figured out how to make it work. Can someone please help me? Thanks. <script type="text/javascript"> function checkUncheck (selected) { var checkBox = document.getElementById("box"); if ((selected == 2) || (selected == 3)) { checkBox.checked = "checked"; } if ((selected == 0) || (selected == 1)) { checkBox.checked = "false"; } } </script> <form id="frm"> <table> <tr> <td><input type="checkbox" id="box" checked="false"/></td> <td> <select id="sel0" onchange="checkUncheck(this.selectedIndex)"> <option value="zero">zero</option> <option value="one">one</option> <option value="two">two</option> <option value="three">three</option> </select> </td> </tr> </table> </form> I am creating a script to display some variable but it won't work. Did I do something wrong? Code: <script type="text/javascript">
/* <![CDATA[ */
var yotta = le24;
var zetta = le21;
document.write("<table border='1' width='100%'><tr><th>Prefix</th><th>Decimal Equivalent</th></tr>");
document.write("<tr><td>Yotta</td><td>" + yotta + "</td></tr>");
document.write("<tr><td>Zetta</td><td>" + zetta + "</td></tr>");
document.write("</table>");
/* ]]> */
</script>
Everything looks right, I think. Anyone see something wrong? Thank you, I am a firefighter of 25 years. Hello, I have an html script and a .php script. The .php requests a random word from a table of words in a mysql database. I wrote a html form to display the requested word in a text box. Here is my html file: Code:
<html>
<body>
<script type="text/javascript">
function myfunction()
{
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp= newHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myLingo.word.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "get_Word.php",true);
xmlhttp.send(null);
}
</script>
<form name="myLingo">
<input type="button" name="button" value="New Word" onClick="myFunction();" />
<input type="text" name="word" />
</form>
</body>
</html>
and here is my .php script: Code:
<?php
$con=mysql_connect('localhost', 'xxxx', 'xxxx');
if (!$con)
{
die('Could not connect: '.mysql_error());
}
mysql_select_db("my_lingo", $con);
$sql=mysql_query("SELECT `word` FROM `words` ORDER BY RAND()") or trigger_error('Error: ' .mysql_error());
$word=mysql_fetch_array($sql);
echo $word[0];
mysql_close($con);
?>
When I run this in Internet Explorer; I get a error that is asking for an object on line 32 which is the line that has my button in the javascript. When i run it in firefox, I don't receive an error, but the page still does nothing. Any suggestions? The main function of the page is that, when I click the button, it's supposed to return me a random word from the .php script Thanks, jcjst21 Basically what I need to do is cause a bit of HTML to only display on a specific page. I have figured out how to do most of the work i.e. figuring out what page that the code is being displayed on, etc. However, for some reason the DOM element that I am using will not update based on the Javascript. I have searched the Internet for a solution and unfortunately I have found none. Here is the version of the code that I am currently working on: Code: <html>
<head>
<script type="text/javascript">
window.onload = function DisplayButton() {
var DesiredPage = 'Page to Display';
//Page that I want the code to display on
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
//This determines and places in a variable what page that the code will be on
if (sPage == DesiredPage) {
document.getElementById('HiddenCode').style.display = "block";
}
}
</script>
<p Id="HiddenCode" style="display:none">Code only to be displayed on indicated page</p>
</head>
</html>
I am somewhat new to Javascript so I feel like I might be missing something obvious here. Thank You to anyone who can help. Zbot Hi, I'm having problems displaying images on a site. Basically I have a to change an image each time a button is pressed on a piece of hardware. This is the code to detect a button press Code: // Check Button
tstileo = new Image();
tstilec = new Image();
tstileo.src = '/images/1.jpg';
tstilec.src = '/images/2.jpg';
document.getElementById('btn0').innerHTML = (getXMLValue(xmlData, 'btn0') == 'up') ? document.Image=(tstileo): document.Image=(tstilec);
So when the button is pressed/unpressed it should display tstileo and tstilec What format should my HTML code be to display the image ? This is whats there at the moment Code: <span id="btn0">?</span></p> When running all I get is text saying Code: [OBJECT HTMLImageElement] This site is being hosted on a microchip, btn0 is a press button switch on the board. The idea is to use this as a remote monitoring system. It runs Javascript XML HTML and CSS. Any help would be greatly appreciated, I have spent hours searching for a way to do this ( simple ? ) task but haven't got any further than this. Thanks Jay I have the following code to display an image (and link if there is one): Code: if (ads[adNumber].href)
{
tempCode += ('<a href="'+ ads[adNumber].href +'" target=_blank "> \n')
tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
tempCode += ('</a>')
}
else
{
tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
}
return tempCode;
This works OK in IE9 but only shows the image if there is no link in IE7 (that is, if (ads[adNumber].href) is not true). Thanks for any help! Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol. I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript. What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML? The following is my Javascript code which grabs the text from the XML and displays it in the HTML; Code: <script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
And this is the XML file; Code: <?xml version="1.0" encoding="ISO-8859-1"?> <BULLETIN> <NEWS> <PIC>"newssmall.jpg"</PIC> <DATE>14/3/2010</DATE> <TITLE>News Story 1</TITLE> <STITLE>This is a short sentence to describe the story in brief</STITLE> <STORY>This is the text of the news story</STORY> </NEWS> </BULLETIN> So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site. Thanks for helping if you can, Dan Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide. My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates). Any help would be much appreciated, thanks. HEAD: Code: <style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;width:880px;height:400px;
}
#paginate {
position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}
#paginate .default {
position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}
#paginate .active {
background:url(images/imagehold_o.png);
}
/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// The functional code size is 1.39K
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
d=Math.max(d,s<0||f<0?d:0);
this.data[0]=d;
this.apply();
if (ms<this.mS){
this.to=setTimeout(function(){oop.cng(); },10);
}
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
BODY: Code: <script type="text/javascript">
/*<![CDATA[*/
function zxcFadeSlideShow(o){
var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex=z0>0?'0':'2';
imgs[z0].style.left='0px';
imgs[z0].style.top='0px';
zxcOpacity(imgs[z0],z0>0?0:100);
ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
}
if (pag){
this.cls=['default','default active'];
for (;z1<ary.length;z1++){
pary[z1]=document.createElement('DIV');
pary[z1].className=this.cls[z1>0?0:1];
pag.appendChild(pary[z1]);
this.addevt(pary[z1],'mouseup','page',z1);
}
}
this.ary=ary;
this.pary=pary;
this.lstp=pary[0];
this.ms=typeof(ms)=='number'?ms:1000;
this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
this.srt=typeof(srt)=='number'?srt+this.ms:false;
this.to=null;
this.cnt=0;
this.lst=ary[this.cnt];
this.Auto(this.hold);
}
zxcFadeSlideShow.prototype={
Next:function(cnt,goto){
this.Pause();
if (this.lstp){
this.lstp.className=this.cls[0];
}
this.lst.obj.style.zIndex='0';
this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
this.lst=this.ary[cnt];
this.lst.obj.style.zIndex='2';
this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
if (this.pary[cnt]){
this.lstp=this.pary[cnt];
this.lstp.className=this.cls[1];
}
this.cnt=cnt;
if (goto&&this.srt){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },this.srt);
}
},
page:function(nu){
this.Next(nu,true);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
},
Auto:function(ms){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },ms||500);
},
Pause:function(){
clearTimeout(this.to);
},
auto:function(){
this.Pause();
var oop=this,cnt=this.cnt;
cnt=++cnt%this.ary.length;
this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
}
}
S=new zxcFadeSlideShow({
ID:'tst', //(optional) unique ID name of the paent DIV. (string )
PaginateID:'paginate', //(optional) unique ID name of the paginate DIV. (string, default = no pagination)
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
Hold:6000, //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
AutoStart:2000 //(optional) auto start after goto. (number, default = no auto start)
});
x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>
Hello and thanks for the help. I'm no expert by any means, and I have no idea what the problem could be. Internet Explorer crops my images on my image fade, but Chrome and Safari view it just fine. the website is www.pisanchynproductions.com If you open it in IE and Chrome you can see Chrome shows image fadeshow fine, and IE crops the images. For the record, I don't want the images cropped. The problem must be in here somewhere. Code: var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/SSPP1.JPG", "", ""] //plain image syntax
fadeimages[1]=["images/SSPP2.JPG", "", ""] //plain image syntax
fadeimages[2]=["images/SSPP3.JPG", "", ""] //plain image syntax
fadeimages[3]=["images/SSPP4.JPG", "", ""] //plain image syntax
fadeimages[4]=["images/SSPP5.JPG", "", ""] //plain image syntax
fadeimages[5]=["images/SSPP6.JPG", "", ""] //plain image syntax
fadeimages[6]=["images/SSPP7.JPG", "", ""] //plain image syntax
fadeimages[7]=["images/SSPP11.JPG", "", ""] //plain image syntax
fadeimages[8]=["images/SSPP12.JPG", "", ""] //plain image syntax
fadeimages[9]=["images/SSPP13.JPG", "", ""] //plain image syntax
fadeimages[10]=["images/SSPP14.JPG", "", ""] //plain image syntax
var fadebgcolor="white"
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="nofollow" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
if(document.getElementById('content'))
document.getElementById('content').style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
I wish i knew more so I could realized how dumb this question was. So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
|
|||||||