|
JavaScript - Custom Drop Down
I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that?
Code: function toggle() {
var ele = document.getElementById("dropdown-items");
var text = document.getElementById("dropdown-menu");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
Similar TutorialsCan anyone spot how to make this drop-in popup do so at slightly higher horizontal level than currently? I've played around with it quite a bit, but no luck. Code: <html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript1.2">
// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=initbox
</script>
</head>
<body>
<div id="dropin" style="position: absolute; visibility: hidden; left: 200px; top: 100px; width: 500px; height: 300px; background-color: #F5F5F5">
<div align="right">
<a href="#" onClick="dismissbox();return false">[Close Box] </a>
</div>
<p>SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>
</body>
</html>
I have a neat js wyswyg editor that works great. However I can only use existing controls. I would like to add a drop-down style menu where I can define a unique css style for each option. Any suggestions? JS Code: Code: TINY={};
function T$(i){return document.getElementById(i)}
function T$$$(){return document.all?1:0}
TINY.editor=function(){
var c=[], offset=-30;
c['cut']=[1,'Cut','a','cut',1];
c['copy']=[2,'Copy','a','copy',1];
c['paste']=[3,'Paste','a','paste',1];
c['bold']=[4,'Bold','a','bold'];
c['italic']=[5,'Italic','a','italic'];
c['underline']=[6,'Underline','a','underline'];
c['strikethrough']=[7,'Strikethrough','a','strikethrough'];
c['subscript']=[8,'Subscript','a','subscript'];
c['superscript']=[9,'Superscript','a','superscript'];
c['orderedlist']=[10,'Insert Ordered List','a','insertorderedlist'];
c['unorderedlist']=[11,'Insert Unordered List','a','insertunorderedlist'];
c['outdent']=[12,'Outdent','a','outdent'];
c['indent']=[13,'Indent','a','indent'];
c['leftalign']=[14,'Left Align','a','justifyleft'];
c['centeralign']=[15,'Center Align','a','justifycenter'];
c['rightalign']=[16,'Right Align','a','justifyright'];
c['blockjustify']=[17,'Block Justify','a','justifyfull'];
c['undo']=[18,'Undo','a','undo'];
c['redo']=[19,'Redo','a','redo'];
c['image']=[20,'Insert Image','i','insertimage','Enter Image URL:','http://'];
c['hr']=[21,'Insert Horizontal Rule','a','inserthorizontalrule'];
c['link']=[22,'Insert Hyperlink','i','createlink','Enter URL:','http://'];
c['unlink']=[23,'Remove Hyperlink','a','unlink'];
c['unformat']=[24,'Remove Formatting','a','removeformat'];
c['print']=[25,'Print','a','print'];
function edit(n,obj){
this.n=n; window[n]=this; this.t=T$(obj.id); this.obj=obj; this.xhtml=obj.xhtml;
var p=document.createElement('div'), w=document.createElement('div'), h=document.createElement('div'),
l=obj.controls.length, i=0;
this.i=document.createElement('iframe'); this.i.frameBorder=0;
this.i.width=obj.width||'500'; this.i.height=obj.height||'250'; this.ie=T$$$();
h.className=obj.rowclass||'teheader'; p.className=obj.cssclass||'te'; p.style.width=this.i.width+'px'; p.appendChild(h);
for(i;i<l;i++){
var id=obj.controls[i];
if(id=='n'){
h=document.createElement('div'); h.className=obj.rowclass||'teheader'; p.appendChild(h)
}else if(id=='|'){
var d=document.createElement('div'); d.className=obj.dividerclass||'tedivider'; h.appendChild(d)
}else if(id=='font'){
var sel=document.createElement('select'), fonts=obj.fonts||['Verdana','Arial','Georgia'], fl=fonts.length, x=0;
sel.className='tefont'; sel.onchange=new Function(this.n+'.ddaction(this,"fontname")');
sel.options[0]=new Option('Font','');
for(x;x<fl;x++){
var font=fonts[x];
sel.options[x+1]=new Option(font,font)
}
h.appendChild(sel)
}else if(id=='size'){
var sel=document.createElement('select'), sizes=obj.sizes||[1,2,3,4,5,6,7], sl=sizes.length, x=0;
sel.className='tesize';
sel.onchange=new Function(this.n+'.ddaction(this,"fontsize")');
for(x;x<sl;x++){
var size=sizes[x];
sel.options[x]=new Option(size,size)
}
h.appendChild(sel)
}else if(id=='colorb'){
var sel=document.createElement('select'),
colors=obj.colors||[['Black','black'],['Green','green','0.9em'],['Blue','blue','0.7em']],
cl=colors.length, x=0;
sel.className='tecustom';
sel.onchange=new Function(this.n+'.ddaction(this,"forecolor")');
for(x;x<cl;x++){
var colord=colors[x];
sel.options[x]=new Option(colord[0],colord[1])
}
h.appendChild(sel)
} else if(id=='style'){
var sel=document.createElement('select'),
styles=obj.styles||[['Style',''],['Bordo','<u>'],['Header 1','<h1>'],['Header 2','<h2>'],['Header 3','<h3>'],['Header 4','<h4>'],['Header 5','<h5>'],['Header 6','<h6>']],
sl=styles.length, x=0;
sel.className='testyle'; sel.onchange=new Function(this.n+'.ddaction(this,"formatblock")');
for(x;x<sl;x++){
var style=styles[x];
sel.options[x]=new Option(style[0],style[1])
}
h.appendChild(sel)
}else if(c[id]){
var div=document.createElement('div'), x=c[id], func=x[2], ex, pos=x[0]*offset;
div.className=obj.controlclass;
div.style.backgroundPosition='0px '+pos+'px';
div.title=x[1];
ex=func=='a'?'.action("'+x[3]+'",0,'+(x[4]||0)+')':'.insert("'+x[4]+'","'+x[5]+'","'+x[3]+'")';
div.onclick=new Function(this.n+(id=='print'?'.print()':ex));
div.onmouseover=new Function(this.n+'.hover(this,'+pos+',1)');
div.onmouseout=new Function(this.n+'.hover(this,'+pos+',0)');
h.appendChild(div);
if(this.ie){div.unselectable='on'}
}
}
this.t.parentNode.insertBefore(p,this.t); this.t.style.width=this.i.width+'px';
w.appendChild(this.t); w.appendChild(this.i); p.appendChild(w); this.t.style.display='none';
if(obj.footer){
var f=document.createElement('div'); f.className=obj.footerclass||'tefooter';
if(obj.toggle){
var to=obj.toggle, ts=document.createElement('div');
ts.className=to.cssclass||'toggle'; ts.innerHTML=obj.toggletext||'source';
ts.onclick=new Function(this.n+'.toggle(0,this);return false');
f.appendChild(ts)
}
if(obj.resize){
var ro=obj.resize, rs=document.createElement('div'); rs.className=ro.cssclass||'resize';
rs.onmousedown=new Function('event',this.n+'.resize(event);return false');
rs.onselectstart=function(){return false};
f.appendChild(rs)
}
p.appendChild(f)
}
this.e=this.i.contentWindow.document; this.e.open();
var m='<html><head>', bodyid=obj.bodyid?" id=\""+obj.bodyid+"\"":"";
if(obj.cssfile){m+='<link rel="stylesheet" href="'+obj.cssfile+'" />'}
if(obj.css){m+='<style type="text/css">'+obj.css+'</style>'}
m+='</head><body'+bodyid+'>'+(obj.content||this.t.value);
m+='</body></html>';
this.e.write(m);
this.e.close(); this.e.designMode='on'; this.d=1;
if(this.xhtml){
try{this.e.execCommand("styleWithCSS",0,0)}
catch(e){try{this.e.execCommand("useCSS",0,1)}catch(e){}}
}
};
edit.prototype.print=function(){
this.i.contentWindow.print()
},
edit.prototype.hover=function(div,pos,dir){
div.style.backgroundPosition=(dir?'34px ':'0px ')+(pos)+'px'
},
edit.prototype.ddaction=function(dd,a){
var i=dd.selectedIndex, v=dd.options[i].value;
this.action(a,v)
},
edit.prototype.action=function(cmd,val,ie){
if(ie&&!this.ie){
alert('Your browser does not support this function.')
}else{
this.e.execCommand(cmd,0,val||null)
}
},
edit.prototype.insert=function(pro,msg,cmd){
var val=prompt(pro,msg);
if(val!=null&&val!=''){this.e.execCommand(cmd,0,val)}
},
edit.prototype.setfont=function(){
execCommand('formatblock',0,hType)
},
edit.prototype.resize=function(e){
if(this.mv){this.freeze()}
this.i.bcs=TINY.cursor.top(e);
this.mv=new Function('event',this.n+'.move(event)');
this.sr=new Function(this.n+'.freeze()');
if(this.ie){
document.attachEvent('onmousemove',this.mv); document.attachEvent('onmouseup',this.sr)
}else{
document.addEventListener('mousemove',this.mv,1); document.addEventListener('mouseup',this.sr,1)
}
},
edit.prototype.move=function(e){
var pos=TINY.cursor.top(e);
this.i.height=parseInt(this.i.height)+pos-this.i.bcs;
this.i.bcs=pos
},
edit.prototype.freeze=function(){
if(this.ie){
document.detachEvent('onmousemove',this.mv); document.detachEvent('onmouseup',this.sr)
}else{
document.removeEventListener('mousemove',this.mv,1); document.removeEventListener('mouseup',this.sr,1)
}
},
edit.prototype.toggle=function(post,div){
if(!this.d){
var v=this.t.value;
if(div){div.innerHTML=this.obj.toggletext||'source'}
if(this.xhtml&&!this.ie){
v=v.replace(/<strong>(.*)<\/strong>/gi,'<span style="font-weight: bold;">$1</span>');
v=v.replace(/<em>(.*)<\/em>/gi,'<span style="font-weight: italic;">$1</span>')
}
this.e.body.innerHTML=v;
this.t.style.display='none'; this.i.style.display='block'; this.d=1
}else{
var v=this.e.body.innerHTML;
if(this.xhtml){
v=v.replace(/<span class="apple-style-span">(.*)<\/span>/gi,'$1');
v=v.replace(/ class="apple-style-span"/gi,'');
v=v.replace(/<span style="">/gi,'');
v=v.replace(/<br>/gi,'<br />');
v=v.replace(/<br ?\/?>$/gi,'');
v=v.replace(/^<br ?\/?>/gi,'');
v=v.replace(/(<img [^>]+[^\/])>/gi,'$1 />');
v=v.replace(/<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>');
v=v.replace(/<i\b[^>]*>(.*?)<\/i[^>]*>/gi,'<em>$1</em>');
v=v.replace(/<u\b[^>]*>(.*?)<\/u[^>]*>/gi,'<span style="text-decoration:underline">$1</span>');
v=v.replace(/<(b|strong|em|i|u) style="font-weight: normal;?">(.*)<\/(b|strong|em|i|u)>/gi,'$2');
v=v.replace(/<(b|strong|em|i|u) style="(.*)">(.*)<\/(b|strong|em|i|u)>/gi,'<span style="$2"><$4>$3</$4></span>');
v=v.replace(/<span style="font-weight: normal;?">(.*)<\/span>/gi,'$1');
v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>/gi,'<strong>$1</strong>');
v=v.replace(/<span style="font-style: italic;?">(.*)<\/span>/gi,'<em>$1</em>');
v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>|<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>')
}
if(div){div.innerHTML=this.obj.toggletext||'wysiwyg'}
this.t.value=v;
if(!post){
this.t.style.height=this.i.height+'px';
this.i.style.display='none'; this.t.style.display='block'; this.d=0
}
}
},
edit.prototype.post=function(){
if(this.d){this.toggle(1)}
};
return{edit:edit}
}();
TINY.cursor=function(){
return{
top:function(e){
return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
}
}
}();
Html code: Code: <script type="text/javascript" src="tinyeditor.js"></script>
<body>
<textarea id="input" style="width:400px; height:200px"></textarea>
<script type="text/javascript">
new TINY.editor.edit('editor',{
id:'input',
width:584,
height:175,
cssclass:'te',
controlclass:'tecontrol',
rowclass:'teheader',
dividerclass:'tedivider',
controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
footer:true,
fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
xhtml:true,
cssfile:'style.css',
bodyid:'editor',
footerclass:'tefooter',
toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
resize:{cssclass:'resize'}
});
</script>
</body>
Css code: Code: body {
margin: 0;
font: 12px Verdana,Arial;
background-color: #FFFFFF;
}
#input {border:none; margin:0; padding:0; font:14px 'Courier New',Verdana; border:0}
.te {
border: 1px solid #bbb;
padding: 0 1px 1px;
font: 12px Verdana,Arial;
margin: 0px;
background-color: #FFFFFF;
}
.te iframe {border:none}
.teheader {height:31px; border-bottom:1px solid #bbb; background:url(images/header-bg.gif) repeat-x; padding-top:1px}
.teheader select {float:left; margin-top:5px}
.tefont {margin-left:12px}
.tesize {margin:0 3px}
.testyle {margin-right:12px}
.tedivider {float:left; width:1px; height:30px; background:#ccc}
.tecontrol {
float: left;
width: 34px;
height: 30px;
cursor: pointer;
background-image: url(images/icons.png);
}
.tecontrol:hover {background-color:#fff; background-position:30px 0}
.tefooter {height:32px; border-top:1px solid #bbb; background:#f5f5f5}
.toggle {float:left; background:url(images/icons.png) -34px 2px no-repeat; padding:9px 13px 0 31px; height:23px; border-right:1px solid #ccc; cursor:pointer; color:#666}
.toggle:hover {background-color:#fff}
.resize {float:right; height:32px; width:32px; background:url(images/resize.gif) 15px 15px no-repeat; cursor:s-resize}
.tecustom {
margin: 0 3px;
}
editor {
cursor: text;
margin: 5px
}
I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript">
function translate() {
if (document.form1.elements[0].checked == true) {
EtoA()
} else if (document.form1.elements[1].checked == true) {
AtoE()
} else {
}
}
function EtoA() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "a") {
tempb = "9"
} else if(tempa == "b") {
tempb = "a"
} else if(tempa == "c") {
tempb = "0"
} else if(tempa == "d") {
tempb = "c"
} else if(tempa == "e") {
tempb = "3"
} else if(tempa == "f") {
tempb = "b"
} else if(tempa == "g") {
tempb = "4"
} else if(tempa == "h") {
tempb = "?"
} else if(tempa == "i") {
tempb = "5"
} else if(tempa == "j") {
tempb = "6"
} else if(tempa == "k") {
tempb = "e"
} else if(tempa == "l") {
tempb = "+"
} else if(tempa == "m") {
tempb = "x"
} else if(tempa == "n") {
tempb = "7"
} else if(tempa == "o") {
tempb = "v"
} else if(tempa == "p") {
tempb = "1"
} else if(tempa == "q") {
tempb = "t"
} else if(tempa == "r") {
tempb = "q"
} else if(tempa == "s") {
tempb = "g"
} else if(tempa == "t") {
tempb = "n"
} else if(tempa == "u") {
tempb = "<"
} else if(tempa == "v") {
tempb = ">"
} else if(tempa == "w") {
tempb = "^"
} else if(tempa == "x") {
tempb = "!"
} else if(tempa == "y") {
tempb = "@"
} else if(tempa == "z") {
tempb = "#"
} else if(tempa == "A") {
tempb = "9"
} else if(tempa == "B") {
tempb = "a"
} else if(tempa == "C") {
tempb = "0"
} else if(tempa == "D") {
tempb = "c"
} else if(tempa == "E") {
tempb = "3"
} else if(tempa == "F") {
tempb = "b"
} else if(tempa == "G") {
tempb = "4"
} else if(tempa == "H") {
tempb = "h"
} else if(tempa == "I") {
tempb = "5"
} else if(tempa == "J") {
tempb = "6"
} else if(tempa == "K") {
tempb = "e"
} else if(tempa == "L") {
tempb = "f"
} else if(tempa == "M") {
tempb = "x"
} else if(tempa == "N") {
tempb = "7"
} else if(tempa == "O") {
tempb = "v"
} else if(tempa == "P") {
tempb = "1"
} else if(tempa == "Q") {
tempb = "t"
} else if(tempa == "R") {
tempb = "q"
} else if(tempa == "S") {
tempb = "g"
} else if(tempa == "T") {
tempb = "n"
} else if(tempa == "U") {
tempb = "<"
} else if(tempa == "V") {
tempb = ">"
} else if(tempa == "W") {
tempb = "^"
} else if(tempa == "X") {
tempb = "!"
} else if(tempa == "Y") {
tempb = "@"
} else if(tempa == "Z") {
tempb = "#"
} else if(tempa == "1") {
tempb = "}"
} else if(tempa == "2") {
tempb = "{"
} else if(tempa == "3") {
tempb = "("
} else if(tempa == "4") {
tempb = "'"
} else if(tempa == "5") {
tempb = "|"
} else if(tempa == "6") {
tempb = "`"
} else if(tempa == "7") {
tempb = ":"
} else if(tempa == "8") {
tempb = ";"
} else if(tempa == "9") {
tempb = "="
} else if(tempa == "0") {
tempb = ")"
} else if(tempa == "~") {
tempb = "R"
} else if(tempa == "!") {
tempb = "T"
} else if(tempa == "@") {
tempb = "F"
} else if(tempa == "#") {
tempb = "Y"
} else if(tempa == "$") {
tempb = "K"
} else if(tempa == "%") {
tempb = "J"
} else if(tempa == "^") {
tempb = "H"
} else if(tempa == "&") {
tempb = "G"
} else if(tempa == "*") {
tempb = "X"
} else if(tempa == "_") {
tempb = "V"
} else if(tempa == "-") {
tempb = "B"
} else if(tempa == "+") {
tempb = "M"
} else if(tempa == "=") {
} else if(tempa == "<") {
tempb = "N"
} else if(tempa == ">") {
tempb = "U"
} else if(tempa == ".") {
tempb = "S"
} else if(tempa == ",") {
tempb = "W"
} else if(tempa == "?") {
tempb = "."
} else if(tempa == ":") {
tempb = ","
} else if(tempa == ";") {
tempb = "$"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
function AtoE() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "9") {
tempb = "a"
} else if(tempa == "a") {
tempb = "b"
} else if(tempa == "0") {
tempb = "c"
} else if(tempa == "c") {
tempb = "d"
} else if(tempa == "3") {
tempb = "e"
} else if(tempa == "b") {
tempb = "f"
} else if(tempa == "4") {
tempb = "g"
} else if(tempa == "?") {
tempb = "h"
} else if(tempa == "5") {
tempb = "i"
} else if(tempa == "6") {
tempb = "j"
} else if(tempa == "e") {
tempb = "k"
} else if(tempa == "+") {
tempb = "l"
} else if(tempa == "x") {
tempb = "m"
} else if(tempa == "7") {
tempb = "n"
} else if(tempa == "v") {
tempb = "o"
} else if(tempa == "1") {
tempb = "p"
} else if(tempa == "t") {
tempb = "q"
} else if(tempa == "q") {
tempb = "r"
} else if(tempa == "g") {
tempb = "s"
} else if(tempa == "n") {
tempb = "t"
} else if(tempa == "<") {
tempb = "u"
} else if(tempa == ">") {
tempb = "v"
} else if(tempa == "^") {
tempb = "w"
} else if(tempa == "!") {
tempb = "x"
} else if(tempa == "@") {
tempb = "y"
} else if(tempa == "#") {
tempb = "z"
} else if(tempa == "9") {
tempb = "A"
} else if(tempa == "a") {
tempb = "B"
} else if(tempa == "0") {
tempb = "C"
} else if(tempa == "c") {
tempb = "D"
} else if(tempa == "3") {
tempb = "E"
} else if(tempa == "b") {
tempb = "F"
} else if(tempa == "4") {
tempb = "G"
} else if(tempa == "?") {
tempb = "H"
} else if(tempa == "5") {
tempb = "I"
} else if(tempa == "6") {
tempb = "J"
} else if(tempa == "e") {
tempb = "K"
} else if(tempa == "+") {
tempb = "L"
} else if(tempa == "x") {
tempb = "M"
} else if(tempa == "7") {
tempb = "N"
} else if(tempa == "v") {
tempb = "O"
} else if(tempa == "1") {
tempb = "P"
} else if(tempa == "t") {
tempb = "Q"
} else if(tempa == "q") {
tempb = "R"
} else if(tempa == "g") {
tempb = "S"
} else if(tempa == "n") {
tempb = "T"
} else if(tempa == "<") {
tempb = "U"
} else if(tempa == ">") {
tempb = "V"
} else if(tempa == "^") {
tempb = "W"
} else if(tempa == "!") {
tempb = "X"
} else if(tempa == "@") {
tempb = "Y"
} else if(tempa == "#") {
tempb = "Z"
} else if(tempa == "}") {
tempb = "1"
} else if(tempa == "{") {
tempb = "2"
} else if(tempa == "(") {
tempb = "3"
} else if(tempa == "'") {
tempb = "4"
} else if(tempa == "|") {
tempb = "5"
} else if(tempa == "`") {
tempb = "6"
} else if(tempa == ":") {
tempb = "7"
} else if(tempa == ";") {
tempb = "8"
} else if(tempa == "=") {
tempb = "9"
} else if(tempa == ")") {
tempb = "0"
} else if(tempa == "R") {
tempb = "~"
} else if(tempa == "T") {
tempb = "!"
} else if(tempa == "F") {
tempb = "@"
} else if(tempa == "Y") {
tempb = "#"
} else if(tempa == "K") {
tempb = "$"
} else if(tempa == "J") {
tempb = "%"
} else if(tempa == "H") {
tempb = "^"
} else if(tempa == "G") {
tempb = "&"
} else if(tempa == "X") {
tempb = "*"
} else if(tempa == "V") {
tempb = "_"
} else if(tempa == "B") {
tempb = "-"
} else if(tempa == "M") {
tempb = "+"
} else if(tempa == "N") {
tempb = "<"
} else if(tempa == "U") {
tempb = ">"
} else if(tempa == "S") {
tempb = "."
} else if(tempa == "W") {
tempb = ","
} else if(tempa == ".") {
tempb = "?"
} else if(tempa == ",") {
tempb = ":"
} else if(tempa == "$") {
tempb = ";"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. Ok, I have what I think is a javascript question (correct me if Im wrong). I designed a custom form in DreamWeaver but can't get it to work. Im thinking I need to add some javascript to work. Heres my form code at the moment: Code: <form id="search-form" action="" method="post" enctype="multipart/form-data">
<fieldset>
<div class="search-form">
<input type="text" name="search" value="Type Keyword Here" onBlur="if(this.value=='') this.value='Type Keyword Here'" onFocus="if(this.value =='Type Keyword Here' ) this.value=''" />
<a href="#" onClick="document.getElementById('search-form').submit()">Search</a>
</div>
</fieldset>
</form>
What I want to do is have the user type in something, click on search, and then show up the results on another page named results. What do I need to do? http://becompleteamerica.com/index.p...tact&Itemid=80 It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox. Any ideas why IE doesn't play nice? Thx hey there, I have a problem when trying to set a different color for each button on my 4 blocks, matching the proper color. Here is my page http://holidays.area-italia.com I ve copy/paste the default art-button in the template.css file adding a " -red" suffix. I also made a new image with the red colors to match the active/hovered/pressed. Here is the code: Code: /* begin Button-red */
.art-button-wrapper-red a.art-button-red,
.art-button-wrapper-red a.art-button-red:link,
.art-button-wrapper-red input.art-button-red,
.art-button-wrapper-red button.art-button-red
{
text-decoration: none;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
position:relative;
top:0;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #FFFFFF !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 37px;
height: 37px;
margin: 0 !important;
padding: 0 26px !important;
overflow: visible;
cursor: pointer;
}
.art-button-red img, .art-button-wrapper-red img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper-red
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 37px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2-red .art-button-wrapper-red
{
display: block;
float: left;
}
input, select, textarea
{
vertical-align: middle;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
}
.art-block-red select
{
width:96%;
}
.art-button-wrapper-red.hover .art-button-red, .art-button-wrapper-red.hover a.art-button-red:link, .art-button-red:hover
{
color: #FFFFFF !important;
text-decoration: none !important;
}
.art-button-wrapper-red.active .art-button-red, .art-button-wrapper-red.active a.art-button-red:link
{
color: #FCFCFD !important;
}
.art-button-wrapper-red .art-button-l-red, .art-button-wrapper-red .art-button-r-red
{
display: block;
position: absolute;
height: 121px;
margin: 0;
padding: 0;
background-image: url('images/buttonr.png'); (I made a new image with the red colors)
}
.art-button-wrapper-red .art-button-l-red
{
left: 0;
right: 14px;
}
.art-button-wrapper-red .art-button-r-red
{
width: 417px;
right: 0;
clip: rect(auto, auto, auto, 403px);
}
.art-button-wrapper-red.hover .art-button-l-red, .art-button-wrapper-red.hover .art-button-r-red
{
top: -42px;
}
.art-button-wrapper-red.active .art-button-l-red, .art-button-wrapper-red.active .art-button-r-red
{
top: -84px;
}
.art-button-wrapper-red input
{
float: none !important;
}
/* end Button-red */
Then I copy/paste the default code button in the index.php adding the "-red" suffix, into my red block: Code: <center>
<span class="art-button-wrapper-red">
<span class="art-button-l-red"> </span>
<span class="art-button-r-red"> </span>
<a class="readon art-button-red" href="javascript:void(0)">More</a>
</span>
</center>
Doing all the mentioned above doesnt work, it always shows the default button. I know there is a javascript which rules it but i dont know how to edit/add the function. Here is my part of the script.js related to the button: Code: /* begin Button */
function artButtonSetup(className) {
jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function(i, val) {
var b = jQuery(val);
if (!b.parent().hasClass('art-button-wrapper')) {
if (!b.hasClass('art-button')) b.addClass('art-button');
jQuery("<span class='art-button-wrapper'><span class='art-button-l'> </span><span class='art-button-r'> </span></span>").insertBefore(b).append(b);
if (b.hasClass('active')) b.parent().addClass('active');
}
b.mouseover(function() { jQuery(this).parent().addClass("hover"); });
b.mouseout(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
b.mousedown(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
b.mouseup(function() { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
});
}
jQuery(function() { artButtonSetup("art-button"); });
/* end Button */
Anyone who can help out please? Many thanks. Hi all. I'm developing After Effects scripts using their Extendscript language - essentially just Javascript with various extensions. I've defined a class, called ScriptSetting, which handles reading and writing of user settings to a prefs file. For example I create a ScriptSetting variable as follows: Code: var mySetting = new ScriptSetting("myScript", "thisSettingKey", 200);
This calls the ScriptSetting constructor function: Code: function ScriptSetting(sectionName, keyName, defaultValue) {
this.sectionName = sectionName;
// Store the type of this setting for conversion later
this.defaultType = defaultValue.constructor;
// Convert any type to a string value for storing
defaultValue = defaultValue.toString();
this.keyName = keyName;
if(!app.settings.haveSetting(this.sectionName, this.keyName)) {
this.value = defaultValue;
this.saveSetting();
} else
this.value = this.getSetting();
}
This calls some of Extendscript's built-in functions, like app.settings.haveSetting() This all works fine - I can then later access mySetting's value with, for example alert(mySetting.value) since I've defined value as part of the class constructor function. However what I'd ideally like to do, if at all possible is to lose the .value part and just be able to access the setting value directly from the setting variable, so in this case alert(mySetting). At the moment, this will just return object Object. Naturally this is because mySetting is an instance of the ScriptSetting object. But I wondered if you can spoof this with a different type (i.e. Array or Number) when accessing it as part of a statement e.g. if(mySetting == 200) { // do something } but still retain all its prototyped methods, e.g. Code: mySetting = 300; mySetting.saveSetting(); Is this possible in Javascript? It's not a deal-breaker - I just want to make my code a bit more readable. Many thanks in advance, Christian Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me. Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function. Here's what information I do have so far: In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work. Hello, I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc... I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu Code: <ul class="select">
<li class="selected">
cheese
<ul class="drop">
<li>milk</li>
<li>bread</li>
<li class="selected">cheese</li>
<li>pickles</li>
<li>salsa</li>
</ul>
</li>
</ul>
I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much! Also, heres something I'd like to achieve: The box I'd like to create is at the top, while the default one is at the bottom. Hi all, The question is hopefully relatively simple. if I have an object say Code: [
var SampleObject = function(id){
SampleObject.id = id;
SampleObject.age= 22;
}
Is there a way to create an event that triggers every time the age member value changes? Thanks Ollie. I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".
For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>
Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.
If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.
Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/
//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
var c;
for(c in array) {
document.getElementById(array[c]).style.display = "none";
}
click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
click.style.display = "inline";
}}
Hi I have been looking to create custom buttons in an alert box I would like them to say Go and Cancel instead of OK and cancel Code: onClick="if(confirm('Would you like to continue?'))
I have a script that almost does what I need: a simple counter that counts inmigrants remmittences to their home countries. Counting starts at 150,000,000,000 and it increments by 35,000 every one minute. The following scripts does the job done but it does not record in a continious manner, it resets each time the page is visited: Here is the code: ( I hope I get some help to make it: no reseting in each page visit) -------------------------------------------------- <html> <head> <script language="javascript" type="text/javascript"> <!-- var startCount = 150000000000; var addPerMin = 35000; function ProcessCounter() { document.getElementById('cnt').innerHTML = addCommas(String(cnt++)); setTimeout('ProcessCounter()', SetTimeOutPeriod); } function PutSpan() { document.write('<span id="cnt"></span>'); } function addCommas(nStr) { var rgx = /(\d+)(\d{3})/; while (rgx.test(nStr)) { nStr = nStr.replace(rgx, '$1' + ',' + '$2'); } return nStr; } var cnt = startCount; var SetTimeOutPeriod = Math.floor((1000 * 60) / addPerMin); function displayCounter() { PutSpan(); ProcessCounter(); } //--> </script> </head> <body <font size="30"> <script language="javascript" type="text/javascript">javascript:displayCounter();</script> </font> </body> |
|||||||