|
JavaScript - Simple Javascript Toggle Problem
I've written this very small and simple javascript toggle to make a div appear and disappear upon click.
Code:
function dropDown(id){
var object = document.getElementById(id).style;
if (object.display == "none") {object.display = "block"}
else {object.display = "none"}
}
And the html: Code: <div id="webBox" class="service">
<ul class="servNav">
<li class="button" onclick="dropDown('webDrop')">View Details</li>
</ul>
</div>
<div class="dropInfo" id="webDrop">
Now this code DOES work, but only after clicking the button twice. I assume there is some argument problem, but I can't seem to pinpoint it. I've got jquery scripts and plugins on the page, but it does the same thing when I take those off. Is there anything I can do to make the toggle immediate rather than after a couple tries of clicking? The URL is http://mattboldt.com/2.0 The "view details" buttons are what I'm having trouble with. As of now it's only on one, the first div. Thanks. Similar TutorialsI'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online. What I want to do is to toggle a number on a webpage when a user clicks a link. So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400). Would someone be kind enough to help me with this? Thanks I have a script that includes a JS delete function, but when I select a record and hit delete it says no record is selected. I'm sure this is a simple fix for someone in the know. Thanks in advance. Site: PHP Code: <?php require_once('auth.php'); ?> <script type="text/javascript" src="script.js"> </script> <?php include("header.php"); ?> <b><div align="right"><a href="admin-index.php">Admin</a> - <a href="adminorders.php">Orders</a> - <a href="adminmain_forum.php">Support</a> - <a href="register-form.php">Add User</a> - <a href="adminlogout.php">Logout</a></div></b><br> <b>Report Upload</b> <br>To upload reports after completion use the form below and update the order with the report URL (/reports/filename). <center><form action="./uploadadmin.php" method="post" enctype="multipart/form-data"> <p> <label for="file">Select a file:</label> <input type="file" name="userfile" id="file"> <br /> <p><button>Upload File</button> <p> </form></center> <p><b>Previous Orders</b> <br>Details of previous orders and trials are displayed below. <br><script> <!-- Hide from old browsers /****************************************** * Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * This notice must stay intact for use ******************************************/ // revised by Alan Koontz -- May 2003 var TRange = null; var dupeRange = null; var TestRange = null; var win = null; // SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT // http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html var nom = navigator.appName.toLowerCase(); var agt = navigator.userAgent.toLowerCase(); var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_ie = (agt.indexOf("msie") != -1); var is_ie4up = (is_ie && (is_major >= 4)); var is_not_moz = (agt.indexOf('netscape')!=-1) var is_nav = (nom.indexOf('netscape')!=-1); var is_nav4 = (is_nav && (is_major == 4)); var is_mac = (agt.indexOf("mac")!=-1); var is_gecko = (agt.indexOf('gecko') != -1); var is_opera = (agt.indexOf("opera") != -1); // GECKO REVISION var is_rev=0 if (is_gecko) { temp = agt.split("rv:") is_rev = parseFloat(temp[1]) } // USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH // (SELF OR CHILD FRAME) // If you want to search another frame, change from "self" to // the name of the target frame: // e.g., var frametosearch = 'main' //var frametosearch = 'main'; var frametosearch = self; function search(whichform, whichframe) { // TEST FOR IE5 FOR MAC (NO DOCUMENTATION) if (is_ie4up && is_mac) return; // TEST FOR NAV 6 (NO DOCUMENTATION) if (is_gecko && (is_rev <1)) return; // TEST FOR Opera (NO DOCUMENTATION) if (is_opera) return; // INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES if(whichform.findthis.value!=null && whichform.findthis.value!='') { str = whichform.findthis.value; win = whichframe; var frameval=false; if(win!=self) { frameval=true; // this will enable Nav7 to search child frame win = parent.frames[whichframe]; } } else return; // i.e., no search string was entered var strFound; // NAVIGATOR 4 SPECIFIC CODE if(is_nav4 && (is_minor < 5)) { strFound=win.find(str); // case insensitive, forward search by default // There are 3 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // strFound=win.find(str, false, false) is the explicit // version of the above // The Mac version of Nav4 has wrapAround, but // cannot be specified in JS } // NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6) if (is_gecko && (is_rev >= 1)) { if(frameval!=false) win.focus(); // force search in specified child frame strFound=win.find(str, false, false, true, false, frameval, false); // The following statement enables reversion of focus // back to the search box after each search event // allowing the user to press the ENTER key instead // of clicking the search button to continue search. // Note: tends to be buggy in Mozilla as of 1.3.1 // (see www.mozilla.org) so is excluded from users // of that browser. if (is_not_moz) whichform.findthis.focus(); // There are 7 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // wrapAround: boolean -- should we wrap the search? // wholeWord: boolean: should we search only for whole words // searchInFrames: boolean -- should we search in frames? // showDialog: boolean -- should we show the Find Dialog? } if (is_ie4up) { // EXPLORER-SPECIFIC CODE revised 5/21/03 if (TRange!=null) { TestRange=win.document.body.createTextRange(); if (dupeRange.inRange(TestRange)) { TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop; TRange.select(); } } else { TRange=win.document.body.createTextRange(); TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (TRange==null || strFound==0) { TRange=win.document.body.createTextRange(); dupeRange = TRange.duplicate(); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (!strFound) alert ("Order '"+str+"' not found!") // string not found } // --> </script> <!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) --> <center><b>Enter order number</b> <form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Search Orders" ACCESSKEY="s"></form></center> <br><br><table width="775" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <form action="" method="post" name="" id=""> <table width="600" border="1" align="center" cellpadding="2" cellspacing="2"> <tr> <td><input name="topcheckbox" type="checkbox" class="check" id="topcheckbox" onClick="selectall();" value="ON"> Select All </td> <td colspan="4" align="center"><a href="form.php?mode=add">Add New Order</a></td> </tr> <tr> <td><strong><a href="javascript:goDel()">Delete</a></strong></td> <td><strong>Order Number</strong></td> <td><strong>Order Status</strong></td> <td><strong>Payment Status</strong></td> <td><strong>Update</strong></td> </tr> <? include("conn.php"); $sql="select sn,branchname,shortname,payment from $branch order by sn"; $result=mysql_query($sql,$connection) or die(mysql_error()); while($row=mysql_fetch_array($result)) { ?> <tr> <td><input name="<? echo $row['sn']; ?>" type="checkbox" class="check"></td> <td><? echo $row['branchname']; ?></td> <td><? echo $row['shortname']; ?></td> <td><? echo $row['payment']; ?></td> <td><a href="<? echo "form.php?sn=".$row['sn']."&mode=update"; ?>">Update</a></td> </tr> <? } ?> <tr> <td><strong><a href="javascript:goDel()">Delete</a></strong></td> <td><strong>Order Number</strong></td> <td><strong>Order Status</strong></td> <td><strong>Payment Status</strong></td> <td><strong>Update</strong></td> </tr> </table> </form></td> </tr> </table> <?php include("footer.php"); ?> JS File Code: function goDel()
{
var recslen = document.forms[0].length;
var checkboxes=""
for(i=1;i<recslen;i++)
{
if(document.forms[0].elements[i].checked==true)
checkboxes+= " " + document.forms[0].elements[i].name
}
if(checkboxes.length>0)
{
var con=confirm("Are you sure you want to delete");
if(con)
{
document.forms[0].action="delete.php?recsno="+checkboxes
document.forms[0].submit()
}
}
else
{
alert("No record is selected.")
}
}
function selectall()
{
// var formname=document.getElementById(formname);
var recslen = document.forms[0].length;
if(document.forms[0].topcheckbox.checked==true)
{
for(i=1;i<recslen;i++) {
document.forms[0].elements[i].checked=true;
}
}
else
{
for(i=1;i<recslen;i++)
document.forms[0].elements[i].checked=false;
}
}
Hi i am trying to combine these two statments Code: searchValue.replace( /\[[^\)]*\]/g,""); searchValue.replace( /\([^\)]*\)/g, ""); is it possible to put these two into one statment? also is there a javascript function which does the same as urlencode? many thanks Luke Following are my script to toggle b/w two different links, <html lang="en-US"> <head> <title>toggle b/w 2 different links</title> <script type="text/javascript"><!-- display=1; function displayvalue() { document.getElementById("sv1").style.display = "block"; document.getElementById("dw1").style.display = "none"; } function ShowHide() { if (display==1) { document.getElementById("sv1").style.display = "none"; document.getElementById("dw1").style.display = "block"; //document.getElementById('javaFun') calling java func from javascript display=2; } else { document.getElementById("sv1").style.display = "block"; document.getElementById("dw1").style.display = "none"; //document.getElementById('javaFun1') calling java func from javascript display=1; } } function Func1Delay() { document.getElementById("sv1").style.display = "none"; document.getElementById("loadimage").innerHTML="<input type='image' src='Loading.gif'>"; setTimeout("LoadImage()", 300); } function LoadImage() { document.getElementById("loadimage").innerHTML=""; ShowHide(); } --></script> </head> <body background="GsNJNwuI-UM.gif"onload="displayvalue()"> <div id="sv1" > <a onclick ="Func1Delay()" href="javascript:;">click me</a> </div> <div id="loadimage"></div> <div id="dw1" > <a onclick ="ShowHide()" href="javascript:;">Download me</a> </div> </body> </html> whenever we call a java method , (consider this line:- document.getElementById('javaFun');)after the completion of java call the page is reloading, how control this reloading after the server completing the request....? I am very new to this, so I appreciate everyone's help and patience I am displaying information on our company intranet. I want the user to be able to choice if they want to see the information sorted by person or by issue. Because of the way that this is setup, the info is not in a table and cannot be sorted. I want users to be able to view content either way, but with only one option being visible. This would require the OR operator combined with the toggle function (I assume), but I am pretty lost... This toggle below allows me to show/hide one on top of the other, but I want one to replace the other: <SCRIPT type=text/javascript> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </SCRIPT> <P><STRONG><FONT color=#00467f size=3>Primary Contacts</FONT></STRONG></P> <P><A onclick="toggle_visibility('issue');" href="#">Toggle Contacts by Issue</A></P> <P> </P> <DIV style="DISPLAY: none" id=issue>%%Pages.Body PageID="596"%%</DIV> <DIV style="DISPLAY: block" id=pers>%%Pages.Body PageID="595"%%</DIV> Again, I really appreciate the help I've designed a snippet of javascript to receive numbers, add them together, and then display the total. What i'd like to do now is display the amount of numbers added together "count", and then average them all together. Problem is, the count just won't display, so i'm uncertain if I have a logic error in my code or just an html issue? I'd really appreciate the help! Code:
<html>
<head>
<script type="text/javascript">
var count = 0;
var total = 0;
var number = 0;
function AverageNumbers(form)
{
number = document.getElementById('num1').value;
count++;
total = parseInt(number) + parseInt(total);
average = parseInt(number) + parseInt(count)
if (number!=null && number!="")
{
document.getElementById('total').innerHTML = total;
document.getElementById('count').innerHTML = count;
}
return count;
return total;
}
</script>
</head>
<body>
<form>
<INPUT TYPE="number" NAME="inputbox" ID="num1">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="AverageNumbers(this.form)">
</form>
<div id="total"><div>
<br> </br>
<div id="count"><div>
</body>
</html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> Code: <SCRIPT type="text/Javascript">
<!--
function submitClick() {
var userid = document.login.userid.value;
var pin = document.login.pin.value;
if (document.login.userid.value=='')
{
window.alert('User ID not entered');
}
else if (document.login.pin.value=='')
{
window.alert('Pin not entered');
}
else
{
window.alert (
"User ID: " + userid +
"\nPIN: " + pin
);
}
}
//-->
</SCRIPT>
</head> <body> <center><img height="120" width="240"> <h3 align="center">Please enter your User ID and PIN:</h3> <center> <table width="50%" id="Table1"> <tbody> <tr> <td width="50%" align="RIGHT">User ID:</td> <td width="50%" align="LEFT"><input type="text" name="userid" size="20"></td> </tr> <tr> <td align="RIGHT">PIN:</td> <td align="LEFT"><input type="text" name="pin" size="20"></td> </tr> <tr> <td></td> Code: <td align="LEFT"><INPUT TYPE="button" NAME="button" VALUE="Submit" onSubmit="return submitClick();"></td> </tr> </tbody> </table> </center> </center> </body> </html> I'm needing the program to use pop up windows when no user id has been entered or no pin has been entered. If both have been entered then i need it to show the user id and pin in a pop up window. Not sure where I've went wrong so any help would be much appreciated. Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> Hello to all. I am a new to the forum and new to Javascript, so please be gentle. I have a web page in which I am using a script to toggle between div tags. I learned how to set it up for only a few divs, but want to use more than 10+ div tags with the corresponding buttons on the side. When I set it up with 11 buttons, the 10th button does not work, but all of the single digit buttons do. (The 11th button is going to be a hyperlink eventually.) Here is the code for anyone who can help: <code> <script language="javascript" type="text/javascript"> function Button(obj) { var cls = obj.className; if(cls!='Btn_Selected') { if(cls=='Btn') { cls = 'Btn_Highlight'; } else { cls = 'Btn'; } } obj.className = cls; } function select(obj) { for (var x = 1; x <= 10; x++) { document.getElementById("Button"+x).className = 'Btn'; document.getElementById("Content"+x).style.display = 'none'; } obj.className='Btn_Selected'; var tmp = obj.id; var num = tmp.substr(tmp.length-1); document.getElementById("Content"+num).style.display = 'block'; } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </code> Hopefully I was clear with what I am looking to achieve. If I need to attach additional code or a link to the web page, let me know. Any help would be greatly appreciated. Thanks All in advance, ScottoNM Is it possible for JavaSscript to toggle a submit button? I will be using it in this code: Code: <SCRIPT type="text/javascript">
if (document.forms["form"]["quantitys"].value > '.$row['quantity'].') {
alert ("The quantity you wanted for product '.$row['id'].' is no longer available and will be changed to the highest available quantity.");
document.forms["form"]["quantity"].value = '.$row['quantity'].';
// JAVASCRIPT TOGGLE SUBMIT
}
</SCRIPT>
The submit button: <INPUT name="submit" type="submit" value="UPDATE QUANTITY"> Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<SCRIPT LANGUAGE = JavaScript>
function estimateHolidays()
{
var service1;
var service2;
var service3;
var txtGrade;
var txtHolidays;
var dblEntitlement;
var strService;
strService = cmbService.value;
if (strService == "Service1")
{
dblEntitlement = 20;
}
else if (strService == "Service2" && Grade--"1")
{
dblEntitlement = 24;
}
else if (strService == "Service2" && Grade--"2")
{
dblEntitlement = 26;
}
else if (strService == "Service2" && Grade--"3")
{
dblEntitlement = 28;
}
else if (strService == "Service3")
{
dblEntitlement = 30;
}
else
{
dblEntitlement = "Error! Please try again.";
}
txtHoliday.value = dblEntitlement;
}
</SCRIPT>
<body>
<p>
<input name="txtGrade" size="25" value="Enter Your Staff Grade">
</p>
<p>
Years of Service: <select name="cmbService" size="1">
<option value="Service1">Less than 5 years service</option>
<option value="Service2">5 to 9 years service</option>
<option value="Service3">10 or more years of service</option>
</select>
</p>
<p>
<input type="button" value="Estimate Holidays" name="cmdEstimateHolidays" onclick="estimateHolidays()">
</p>
<p>
Holiday Entitlement: <input name="txtHolidays" size="25">
</p>
</body>
</html>
Why won't this code work!? Its driving me mad. Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly. I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image. This is what it looks like at the moment... This is when the caption is coming from the top. i would like to implement Code: http://web.enavu.com/demos/caption/ or this Code: http://www.sohtanaka.com/web-design/examples/image-hover/ Doesnt matter which one into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text... Coding: (HTML) Code: <div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#">
<img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(253); ?>">
<img src="http://i51.tinypic.com/.jpg" alt="" />
</a>
<a href="<?php echo get_permalink(256); ?>">
<img src="http://i52.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(258); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(271); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
</div>
<div class="descriptions">
<!--welcome page-->
<div class="desc">
<strong style="font-size:30px;">Welcome to City Water</strong>
<div class="clear"></div><br/>
<div id="sliderdescription">WHATEVER WHATEVER</div>
</div>
<!--Services page-->
<div class="desc">
<?php $post_id = 253; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
<div class="clear"></div><br/>
<div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
</div>
</div>
<div id="hrline"></div>
<div class="paging">
<ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
</ul>
</div>
</div>
CSS Code: /*--Main Container--*/
.main_view {
float : left;
height :488px;
margin-bottom :1px;
margin-top :-40px;
position :relative;
}
/*--Window/Masking Styles--*/
.window img{
height :492px;
width : 974px;
}
.window {
/*--Hides anything outside of the set width/height--*/
border :3px solid #D7D7D5;
color : #B4B4B4;
font-size : 12px;
font-weight : bold;
height :488px;
overflow : hidden;
position : relative;
width : 974px;
}
.image_reel {
left : 0;
position : absolute;
top : 0;
}
.image_reel img {
float : left;
}
.image_reel ul li {
display : inline;
}
#image_reel .caption {
background-color :#000;
bottom :0;
color :#ffffff;
height :100px;
position :absolute;
width :100%;
z-index :600;
}
#image_reel .caption .content {
}
#image_reel .caption .content h3 {
color :#1DCCEF;
margin :0;
padding :0;
}
/*--Paging Styles--*/
.paging {
/*--Assures the paging stays on the top layer--*/
/*--Hidden by default, will be later shown with jQuery--*/
bottom : -25px;
display : none;
line-height : 40px;
position : absolute;
right : -70px;
text-align : center;
z-index : 100;
}
.desc {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 101;
margin-top:275px;
color: white;
font-size: 2em;
padding: 7px;
}
JAVASCRIPT Code: $(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
hideComment();
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
showComment();
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
play = null;
}, function() {
rotateSwitch(); //Resume rotation
});
showComment = function(){
// slide toggle effect set to slow you can set it to fast too.
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
return true;
};
showComment(); // Show Comment initially
hideComment = function(){
$(".desc").stop(true,true).slideUp(500).hide();
};
//hide comment if you click on it
$(".desc").click(function(){
hideComment();
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded. The first toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> The second toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> Here is the referenced page: http://sprintexperts.info/phones/# Thanks in advance! Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work. My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off. I have my checkbox created as well as all the effects working for it. Here is a piece of the main code as well as a link to the ambilight.js file Code: <label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
<div class="track">
<span>OFF</span><span>ON</span>
</div>
</div>
</label>
</div>
</div>
<div id="main" class="clearfix">
<div id="video-edge">
<img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
<div id="video-wrap" class="video-js-box moo-css">
<video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
<source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
<script type="text/javascript">
ambiLight.create(document.getElementById('example'))
</script>
Portfolio Page http://www.eschulist.com/test/js/ambilight.js I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn. Code: <script type="text/javascript">
$(document).ready(function(){
$(this).click(function(){
$('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
});
});
</script>
Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe? Delete.
If the value is negative it should be in red, otherwise it should be in green. It looks like JavaScript completely ignores the css class. Help please. Code: <html>
<head>
<title>Prva</title>
<style type="text/css">
span.Pozitivno
{
color:green;
font-weight:bold;
}
span.Negativno
{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
function vpisi_stevila()
{
var a;
var b;
//Vnos spremenljivk
a=prompt("Vnesi stevilo a:")
b=prompt("Vnesi stevilo b:")
a=a*1 //S tem spremenimo string v int
b=b*1
//Izpis stevil
if(a<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
if(b<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
document.write("Vsota:", a+b, "<br />");
document.write("Razlika:", a-b, "<br />");
document.write("Mnozenje:", a*b, "<br />");
document.write("Deljenje:", a/b, "<br />");
document.write("Ostanek:", a%b, "<br />");
if(a>b) //Ce je A vecje od B
{
document.writeln("A je <b>večje </b> od b")
}
if(a<b) //Ce je B vecje od A
{
document.writeln("A je <b>manjse </b> od b")
}
if(a==b) //Ce sta enaka
{
document.writeln("A je <b>enako </b> b")
}
}
</script>
</head>
<body onload="vpisi_stevila()">
</body>
</html>
Hi all, I'm using a classic toggleLayer function to display content in a div adjacent to one full of links. The code is Code: function toggleLayer( work )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( work );
else if( document.all ) // this is the way old msie versions work
elem = document.all[work];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[work];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
and the links take on the format of: Code: <a href="javascript:toggleLayer('work');...........
My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content. Any ideas? Sorry if i'm phrasing all this very badly, i'm pretty new to it all. I have an idea that AJAX could be the solution but I can barely get my head around a little bit of copied and pasted JS Thanks for any help, Pat I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean i have this simple js example to click Delete Post and then give the user two options. If they click yes then they go that page...but how do i set it to where when they click cancel it goes back to "Delete Post" ??? i suck at javascript Code: <html>
<body>
<p><b>Delete Post</b></p>
<script type="text/javascript">
window.onclick=function(){
document.getElementsByTagName("p")[0].innerHTML="<b><a href='#'>Delete</a> || Cancel</b>"
}
</script>
</body>
</html>
|
|||||||