|
JavaScript - Custom Drop-down Styles For A Tiny Wyswyg Editor
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
}
Similar TutorialsHi guys, it's a bit of a large question but I've been messing around with code for a while, and nothing seems to work... Basically, I need to make, a 'dynamic theme changer'. Basically what I need to do is have several drop down boxes, each one with some colours available as options. When you select one, it automatically (without refreshing the page) updates a certain element's style. For example, if you selected green as one colour and red as another, the element linked to the first drop-down would turn green, and the element linked to the second drop-down would turn red, and so on so forth. It then needs to have a 'save' button, which saves the settings, and adds a cookie with the style details so that when they visit the page again it's still personalized. There also needs to be a cancel button which discards all changes. I know it's a large question but I'm ripping my hair out over this one! =P Your help is much appreciated. 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";
}
}
Can 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>
hi, I am trying to use Tiny MCE on my website, I have uploaded the correct JS files etc but my page doesn't show the WYSIWYG editor?! Here is what I am trying to use: http://tinymce.moxiecode.com/examples/full.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CMS Edit Pages</title>
<meta name="description" content="fibreglass" />
<meta name="keywords" content="fibreglass specialists" />
<meta name="Content-Language" content="en-gb" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta name="revisit-after" content="7 days" />
<meta name="copyright" content="arcangelsuk.com" />
<meta name="author" content="www.mutedesigns.co.uk - Copyright © 2000-2008 Professional web site design in the south uk, worthing, brighton" />
<meta name="distribution" content="Global" />
<meta name="resource-type" content="document" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--#include file="includes/functionlib.asp"-->
<%logincheck()%>
<%opendb()
Session.Timeout = 240
UserID = session("UserID")
dim rs
Set rs = objconn.Execute ("SELECT * FROM members WHERE UserID ="& Session("UserID"))
dim ShowStyle : If request("style")="n" then ShowStyle = False Else ShowStyle = True
dim UserID : UserID = cint(session("UserID"))
set rs1 = objconn.execute("SELECT * FROM Pages WHERE UserID = " & UserID )
%>
<link href="admin.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "tinymce/jscripts/tiny_mce/js/template_list.js",
external_link_list_url : "tinymce/jscripts/tiny_mce/js/link_list.js",
external_image_list_url : "tinymce/jscripts/tiny_mce/js/image_list.js",
media_external_list_url : "tinymce/jscripts/tiny_mce/js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "xxx",
staffid : "xxx"
}
});
</script>
<body>
<h2>Administration:- Edit Pages </h2>
<table border="0" cellspacing="0" cellpadding="0" class="copy">
<tr>
<td colspan="4"><%= request.QueryString("msg")%></td>
</tr>
<tr>
<td><form name="form1" method="post" action="update_pages.asp">
<table border="0" class="copy">
<tr><td>Title</td></tr>
<tr>
<td><input name="Title" type="text" class="Form_Fields_big" value="<%= rs1("Title")%>" >
</td>
</tr>
<tr><td>Main Area </td></tr>
<tr>
<td><textarea id="textarea1" name="content" style="width:100%" rows="12" class="Form_Fields_big"><%= rs1("Body")%></textarea></td>
</tr>
<tr>
<td><textarea name="content" style="width:100%"></textarea></td>
</tr>
<tr>
<td><input name="Submit" type="submit" class="form_buttons" value="Publish page"></td>
</tr>
</table>
</form>
<% opendb()
set rs = objconn.execute("SELECT COUNT(PageID) AS PageCount FROM Pages WHERE UserID = " & UserID & " AND Pages = 1 ")%>
<%IF rs("PageCount") < 6 THEN%>
<form action="add_page_script.asp">
<input type="hidden" name="pages" Value="1">
<table border="0" class="copy">
<tr>
<td align="center"><input type="submit" name="submit" value="Add Page" class="form_buttons"></td>
</tr>
</table>
</form>
<%Else%>
<%Response.Write("You can only have up to 6 pages")%>
<%End if%>
<% set rs = objconn.execute("SELECT * FROM Pages WHERE UserID = " & UserID & " AND Pages = 1")
if not rs.eof then %>
<table border="0" class="copy">
<tr>
<td colspan="4"><hr></td>
</tr>
<% end if
while not rs.eof
i = i + 1%><%If i > 1 Then%>
<form action="edit_page_script.asp" method="post">
<input type="hidden" name="Pages" Value="1">
<input type="hidden" name="PageID" Value="<% = rs("PageID") %>">
<input type="hidden" name="PageNo" value="<% = i %>">
<tr>
<td>Page <% = i %></td>
</tr>
<tr><td>Title</td></tr>
<tr>
<td><input name="Title" type="text" class="Form_Fields_big" value="<%= rs("Title")%>" ></td>
</tr>
<tr><td valign="top">Body<input type="hidden" class="FormFields" name="bnum" value="<% = i %>"></td></tr>
<tr>
<td><textarea name="content" style="width:100%" id="textarea<% = i %>" rows="12" class="Form_Fields_big"><%= rs("Body")%></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Publish page <% = i %>" class="form_buttons">
<a href="delete_page_script.asp?PageID=<% = EncodeID(cint(rs("PageID"))) %>&pages=1" onClick="return confirm('are you sure you want to delete this page?')"><img src="images/delete.gif" width="19" height="21" border="0"></a></td>
</tr>
</form>
<tr>
<td colspan="4"><hr></td>
</tr>
<script language="javascript1.2">
generate_wysiwyg('textarea<% = i %>');
</script>
<%end if%>
<% rs.movenext
wend
closedb()
set rs = nothing %>
</br>
</br>
</table>
</table>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4786969-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
I have a small need of a thing to be done. I'm willing to pay $4 via PayPal to anyone who's willing to help. I need this specific module developed;; ---(with all the pages and the form)-- User goes to PAGE1 -- a html page with a form shows up -- the form has 2 radio buttons, A and B (2 choices, either 1 to be made) and a submit button -- when any choice from A or B has been made, and submit button has been clicked, a java-script on the back-end does this;; - read value=V from value.txt --- if V=0 and radiobutton=A, re-write V=A in value.txt, proceed to page-A --- or --- if V=0 and radiobutton=B, re-write V=B in value.txt, proceed to page-B --- or --- if V=A or V=B, do not leave PAGE1 and go no-where This is the plan what comes up in my mind. But to discuss further, what I want is a user to get 2 options, and two pages linked to both the options. And once the user has made the choice, he can't go back to PAGE1 and make the other choice and go to the other page.. Once the choice has been made, the PAGE1 is useless. Also, this has to work on a web-server, i.e. not locally. All the files PAGE1.html, page-A.html, page-B.html and value.txt are be stored online. It's functional and works, it just doesnt "fade in". Anyone know why it's not fading in? Code: function addPerson() {
//current keeps track of how many people we have.
var strToAdd = '<div id="input" class="ideaInput"><label class="idea">Another Name</label><input name="idea[]" class="idea" type="text"/>'
strToAdd += '<label class="description">Description (optional)</label><textarea name="description[]" class="description"></textarea></div>'
$('#all-inputs').append(strToAdd);
};
$(document).ready(function() {
$('#btnAdd').click(function () {
$(addPerson).fadeIn('slow')
});
});
I am trying to use the HTML created by openWYSIWYG editor on my site. I am wanting to manipulate the created HTML that is generated...but I don't seem to be able to access it. When I pass the value through to a PHP script, it functions in much the similar way that any other textarea does. What I want to do works fine with a standard textbox and acquiring the value using: Code: textareaid.value But this doesn't seem to work when the openWYSIWYG editor is attached. Does anyone know how I can do this?? Cheers The Moose I am looking to create a web script that allows you to create custom strategy maps for various game like battlefield. What I want is the users to select a map (probably an image map with some default icons on it) and then they can lay on custom icons (directional arrows, attack / defend icons, ect, ect) to show a battle plan and then save it as an image. I would assume an image map would be best for this, but I am not sure how users can input, remove, rotate and resize the icons if needed. Is there some sort of script like this I can build on? I only know the basics of javascript and php, but perhaps someone can point me to a guide of some sort? Here is an example of what I want the user to be able to create which I made in photoshop, though it can easily be made in a simple program like paint too. I'm starting out in JS and I'm looking for a good editor. Preferably cheap or free Anyone suggest something pls Nigel I currently use MSE but it keeps moving things around and changing the formatting of the code. Can anyone recommend an editor that leaves things as I type them? Cheers Daniel. I use http://www.openwebware.com/ wysiwyg editor. It is necessary to change something in it, but I do not know how? When the inserted image in the editor, and then changes the image size, stretches the image in an editor, I want to record a change image size, without editor in <input type='text'> field. Is there any idea how to bring? Thanks! Any recommendations for a freeware html/javascript editor??. I am presently using HAPedit. Should it suffice ??
hi!! i wanna create a simple javascript editor.. the main thing here is i want something like Tinymce but with some features i want to add.. something simple i can tweak with.. please help guys I assumed this is a javascript based text editor because when I turn off javascript it doesn't work. I was wondering how something like this is created. maybe not this exact one, but how would I create something like it. Maybe just a simple editor that changes text size and color.
Hi, well i saw this editor http://www.w3schools.com/svg/tryit.a...=trysvg_circle at w3schools and i was wondering if there is something like this available for use in one's site. I mean if there is a service that provides you with the editor for your site or if there is a way out to make something like this if there is already a script available. My knowledge is till html&css so this is what i don't know Uhm, hi. So, sorry if this is the wrong place, but I hope someone can help. I'm 13 years old, and I'm slowly learning how to code. I made this website for my teacher from scratch using basic HTML tables, with a few PHP include lines I copied from somewhere. Not bad, right? Well, here's the tricky part. When she was using her previous website, she kept messing up her various widgets when she added site content (because Wikispaces sucks ) So, my hope was to create an inline editor (AJAX??) for her to only be able to edit a certain part of the page. A) ONLY SHE SHOULD BE ABLE TO EDIT IT, so I need some kind of a login system. I have access to phpMyAdmin to run MySQL queries and such. B) I was hoping for a top corner login button like Twitter, or the example shown here. C) I know I can give her access to my FTP and make a separate file, and use an include script, but she wouldn't know how to use an FTP. D) I'd prefer if the editor DID NOT use HTML. Reason being, I wouldn't want to have to make her use <br> every time she wants a line break. E) It should be like this. If her username is detected as logged in, a button should be displayed above the editable area that says "Edit". Then, when she clicks that, a text box shows up, she edits her text, and clicks "Submit". I'm sure this would be mighty difficult to do, but I'd much appreciate the help. I know I used phrases such as "MySQL queries" and "PHP include script", but please talk to me as if I were 4 years old. I have extremely limited coding knowledge. Also, please don't get annoyed if I ask a lot of stupid questions. Be sure to let me know if you need any more information! THANK YOU SO MUCH! ~Kyle$calise hi everyone, fairly new to this forum, does anybody know where i can find a good, free color coded editor ? WYSIWYG editor for PHPBB3. As far as I'm aware only unofficial MODS exist, and one has the impression they are fraught with bugs. I need a polished free opensource solution. I was really hopeful there was an official WYSIWYG, but I haven't found it yet if there is one. Can anyone confirm? Because of my rather second-rate vision; I would like to get an editor for my Javascript that will check my syntax for me. Missing or extra brackets, semicolons etc are the bane of my life. Any suggestions welcomed. Frank |
|||||||