|
JavaScript - Tiny Mce - Not Working?!
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>
Similar TutorialsI 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 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
}
Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help hi jus want to ask why is the else not working in the showmore and showless function i have two div which shld conduct the same way of working which is to show the rest of the text with the show more and min the text with the show less function anyone know what my mistake is? Code: function showmore() {
if (document.getElementById("mydiv1") ){
document.getElementById("mydiv1").innerHTML = "";
document.getElementById("mydiv1").innerHTML = txt1 + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt1;
}
else {
document.getElementById("mydiv").innerHTML = "";
document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt;
}
}
function showless() {
if (document.getElementById("mydiv1")){
document.getElementById("mydiv1").innerHTML = shorttxt1 + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
else {
document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
}
thanks Reply asap!!! In my website, I have a script that I need help to get working. This is my script. Code: <script language="Javascript">
<!--
if (screen.width>=1024)
{
document.write('<td width="20%"><table border="0" cellpadding="0" cellspacing="0" width="162">
<tr><td height="29" style="background:url("/Custom/Top2.png");color:#116111;" align="center"><b>Newest Tutorial</b></td></tr>
<tr><td height="160" style="background:url("/Custom/Middle2.png") #000000;padding:5px 5px 0 5px;">$MYINF_8$</td></tr>
<tr><td><img src="/Custom/Bottom2.png" border="0"></td></tr>
</table>
</td>');
}
//-->
</script>
It is supposed to detect if someone has a widescreen monitor, and then add the extra box if it is widescreen. For some unknown reason, its not working. No extra box appears. Does anyone know where I went wrong? Edit: $MYINF_8$ is what goes inside the box. Script::. Code: <script language="javascript">
function temp(form)
{
oops = "";
var sum = 0;
var fld = (form.level.value);
var val = fld.value.replace(/\s/g, "" );
if ( val != "")
{
var deg = parseFloat(fld.value);
if ( isNaN(deg) || deg < 0)
{
fld.value = "0";
oops += "\nInvalid Level";
} else if ( deg != 0 ) {
sum += Math.pow( deg, 3 );}
}
if ( oops != "" )
{
alert("You must correct these errors:\n" + oops);
return false;
}
form.totalexp.value = sum ;
}
</script>
Html::. Code: <form style="text-align:center"> <p>Level</p> <p><input size=30 maxlength=30 value=0 name="level" onfocus="this.value=''"/></p> <input type=button onclick=temp(this.form) value=Calculate /> <input type=reset name=clear id=clear value=Clear /></p> <blockquote><p>Total Exp <input name="totalexp" size=40 maxlength=40 readonly=""/></p></blockquote></form> Can someone help me. Whats wrong with my js code and i am noob to J.S. Your help is most appreciated. I think that if there is more space between the columns that it would be easier to read, but whatever I try is not working. Just putting tabs between them is my latest idea, however, the space is not all that big. Is it possible that I have entered it wrong? Thank you, the code is below: <html> <head> <title>Exercise</title> <script type = "text/javascript"> <!-- var row = 0; var cols = 0; var sum = (row + 1); if (row ==0) { document.write("sum   square   cube"); document.write("<br>"); row++; } while((row >= 0) && (row <= 11)) { document.write(row + "\t" + (row * row) + "\t" + (row * row * row)); document.write("<br>"); row++; } // --> </script> </head> <body> <p>what? seriously, this is working?</p> </body> </html> Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Here is the HTML: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link">
<li class="print"> <a href="#" onclick="window.print();return false;">Print</a> </li>
<li class="rss"> <a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
<li class="emailtofriend">
<span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span>
<span id="tellafrnd_success_msg_span"></span>
<div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide">
<iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe>
</div>
</li>
<li class="share"> <div class="a2a_kit addtoany_list"> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/> </a> </div>
<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";
a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
</li>
</ul>
Here is the Javascript: Code: <script type="text/javascript"> var closebutton='<?php bloginfo('template_directory'); ?>/library/js/closebox.png'; </script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/fancyzoom.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
$('#medium_box_link').fancyZoom({width:400, height:300});
$('#large_box_link').fancyZoom();
$('#flash_box_link').fancyZoom();
});
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$('.hide').hide();
$('body').append('<div id="infoBacking"></div><div id="infoHolder" class="large"></div>');
$('#infoBacking').css({position:'absolute', left:0, top:0, display:'none', textAlign:'center', background:'', zIndex:'600'});
$('#infoHolder').css({left:0, top:0, display:'none', textAlign:'center', zIndex:'600', position:'fixed'});
if($.browser.msie){$('#infoHolder').css({position:'absolute'});}
$('.more').mouseover(function() {$(this).css({textDecoration:'none'});} );
$('.more').mouseout(function() {$(this).css({textDecoration:'none'});} );
$('.more').click(function(){
if ($('.' + $(this).attr("title")).length > 0) {
browserWindow()
getScrollXY()
if (height<totalY) { height=totalY; }
$('#infoBacking').css({width: totalX + 'px', height: height + 'px', top:'0px', left:scrOfX + 'px', opacity:0.85});
$('#infoHolder').css({width: width + 'px', top:scrOfY + 25 + 'px', left:scrOfX + 'px'});
source = $(this).attr("title");
$('#infoHolder').html('<div id="info">' + $('.' + source).html() + '<p class="clear"><span class="close"><?php _e('Close X');?></span></p></div>');
$('#infoBacking').css({display:'block'});
$('#infoHolder').show();
$('#info').fadeIn('slow');
}
$('.close').click(function(){
$('#infoBacking').hide();
$('#infoHolder').fadeOut('fast');
});
});
/* find browser window size */
function browserWindow () {
width = 0
height = 0;
if (document.documentElement) {
width = document.documentElement.offsetWidth;
height = document.documentElement.offsetHeight;
} else if (window.innerWidth && window.innerHeight) {
width = window.innerWidth;
height = window.innerHeight;
}
return [width, height];
}
/* find total page height */
function getScrollXY() {
scrOfX = 0;
scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
totalY = (window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null);
totalX = (window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null);
return [ scrOfX, scrOfY, totalY, totalX ];
}
return false;
});
/* ]]> */
</script>
Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, please let me know... Thanks! Won't validate help...pasor error? Wtf i suck at this. Code: <?xml version="1.0" encoding="UTF-8"?> <!--Prolog Above--> <!--dataset is the name of the Root Element--> <!--Artist, Album, and, Publisher are the names of the namespaces, Ar, Al, and, Pu are the prefixes--> <dataset xmlns:Al="Album" xmlns:Ar="Artist" xmlns:Pu="Publisher" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <!--Elements, blank text is data--> <dataset> <Al:Album> <Al:Album ID =""> <Al:Genre =""></Al:Genre> <Al:AmountSold =""></Al:AmountSold> <Al:PublishDate =""></Al:PublishDate> <Al:Artist =""></Al:Artist> </Al:Album> </Al:Album> <Ar:Artist> <Ar:Artist ID =""> <Ar:Awards =""></Ar:Awards> <Ar:Location =""></Ar:Location> <Ar:Region =""></Ar:Region> <Ar:LabelID =""></Ar:LabelID> </Ar:Artist> </Ar:Artist> <Pu:Publisher> <Pu:Publisher ID =""> <Pu:AmountSold =""></Pu:AmountSold> <Pu:Artist = ""></Pu:Artist> <Pu:PublishDate =""></Pu:PublishDate> <Pu:Manager = ""></Pu:Manager> </Pu:Publisher> </Pu:Publisher> </dataset> HI, i know this must be old js because 'language' is deprecated but, I would like to know where this script gets the word 'Name:' from for the output after I entered dat to the textbox. Code: <HTML>
<HEAD>
<script language="javascript">
<!--
function send_onclick(frmName) {
var bolSubmit;
bolSubmit = true;
if (frmName.email.value == "") {
alert("You must enter an email address");
bolSubmit = false;
}
if (bolSubmit == true) {
frmName.submit(frmName);
}
}
//-->
</script>
</HEAD>
<BODY>
<form name="frmName" method="post" action="validate.asp">
Enter your name in the text box. If nothing is entered, a warning
message will be displayed. <br>Only when you enter something into the
text box will the page be submitted. <br><br>
Please enter your name : <INPUT TYPE="TEXT" name="email" size="20"><br>
<INPUT TYPE="button" name="butSent" value="Do it" language="javascript" onclick="return send_onclick(frmName)">
</form>
Name : d
</BODY>
</HTML>
I guess its from the 'name' of name='email' but how does it do it. Is this next part grabbing everything that was submitted as if a key/value pair? Code: if (bolSubmit == true) {
frmName.submit(frmName);
}
bazz Can you please take a look at this and tell me why it is not getting all the way thru the function and why this is not working totally. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function cabFair(start, end, time){ var base = 0; if (start = 1){ if (end = 1){ base = 5; }if (end = 2) { base = 7; }base = 8; }if (start = 2){ if (end = 1){ base = 7; }if (end = 2) { base = 5; }base = 9; }if (end = 1){ base = 8; }if (end = 2) { base = 9; }base = 5; //return(base); if (time > 20){ time1 = (time - 20); time2 = (time1 * (.3)); finalTime = (time2 + 10); }if (time > 10 && time <= 20){ time1 = (time - 10); time2 = (time1 * (.4)); finalTime = (time2 + 6); }if (time >4 && time <= 10){ time1 = (time - 4); time2 = (time1 * (.5)); finalTime = (time2 + 3); }finalTime = (time * .75); var fare = finalTime + base; return fare } </script> </head> <body> <script type="text/javascript"> //Ask user for input var start = parseInt(prompt("Enter the Starting Point", "1")); var end = parseInt(prompt("Enter the Ending Point", "2")); var time = parseInt(prompt("Enter the Total Time", "4")); //output for information document.writeln(cabFair(start, end, time) + " Is the Total Fare."); </script> </body> </html> I am trying to use "&&" like in PHP, but JavaScript doesn't like it: Code: if (document.forms["form"]["30"].value == "" && document.forms["form"]["32"].value == "") {foobar;}
So, if both these conditions are true, then foobar. Does anyone know why it doesn't work? This is not working, any idea ? Code: function respuestas1() {
var radios=document.getElementsByTagName("input");
var values;
for (var i=0; i<radios.length; i++) {
if (radios[i].type==="radio" && radios[i].checked) {
values=radios[i].value;
sum = 0;
for (var i=0; i<values.length; i++) {
sum = sum + Number(values[i]);
alert(sum);
}
}
}
}
check out this page http://qa-www.inmarkit.net/cu.php (you might see an ERROR like "Notice: Undefined index: SCRIPT_URI ... on line 23" THAT'S FINE - that page sets a cookie to allow you to see the header with login on homepage) then go to the homepage: http://qa-www.inmarkit.net/ and try to click on "Log In" in top right corner a overlay with iFrame opens IE7 but not in IE8 can anyone point me in the right direction... what's the right way to handle something like this? approach? steps? techniques? tools? Thank you... PS Looking for general advise - but perhaps you are up to the challenge and see the exact cause? |
|||||||