|
JavaScript - Tiny Jquery Fadein Problem..
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')
});
});
Similar Tutorialshi, i am trying to have the homepage of my website fade in, kind of like an intro to the site. I only want this fade in to happen on the home page when the website is initially visited, not every time the user clicks home. I am new to jquery but have had much success using plugins for effects. If anyone can help me figure out the code to create a fade in intro i would be very thankful! Richard Ok super new to Jquery here. I finally got talked into trying it. Ok so... I have Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.style.filter = "alpha(opacity=" + (0*100) + ")";
action1.style.opacity = 0;
var si = setInterval(function() {
io+=0.05;
action1.style.filter = "alpha(opacity=" + (io*100) + ")";
action1.style.opacity = io;
}, 100);
io = 0;
if(io==1) {
window.clearInterval(si);
}
clearMenu();
}
I would love to know how to replace that with the fadein() function. I'm looking for something like this Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
//THE FADE IN GOES HERE but how?
clearMenu();
}
ok last question. Do I need to hide my elements somehow differently in CSS before I can use this? update: ok so far trying this and its not working Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.fadeIn('slow');
clearMenu();
}
finally made it work with Code: function windowOpen() {
windowSize()
action1.innerHTML = '';
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[ Code: var windowState = false;
action1 = document.getElementById("action1");
function requestWindow(url) {
if(windowState==false) {
windowOpen();
}
else if(windowState==true) {
windowClose();
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('action1').innerHTML=xmlhttp.responseText;
}
function windowOpen() {
windowState = true;
windowSize()
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
function windowClose() {
windowState = false;
action1.style.display = "inline";
$("#action1").fadeOut(1300);
clearMenu();
windowOpen();
}
Hi guys, Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item. The code I am using is the following Code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function mainmenu(){
$("#neon li.root").hover(function(){
$(this).fadeOut('500');
},function(){
$(this).fadeIn('500');
});
}
$(document).ready(function () {
mainmenu();
});
</script>
<style type="text/css">
/* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}
/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}
/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}
/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}
/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}
.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}
</style>
<ul id="neon" class="neon">
<li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
<li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
</ul>
Any help would be appreciated! Thanks! Greetings everyone; Jesse here. Long time reader, first time poster. I have a personal website, currently in development, located at: http://www.jesselang.ca If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar. This functionality is "OK" at best. What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows. The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal. Code: <script type="text/javascript">
lastone='empty';
function showIt(lyr)
{if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';}
</script>
The respective html looks something like this: Code: <a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>
The coresponding html for the container to display looks like this. This code also shows the "hide container" button: Code: <div id="interestcontainer" style='display:none;'>
<h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>
And the CSS looks like this: Code: a.arrow{
display:block;
float:right;
background:url(../images/ico-arrow.gif) top no-repeat;
text-decoration:none;
overflow:hidden;
width:13px;
height:11px;
margin-left:3px;}
------------------ Would it be asking to much to have someone help me achieve the following functionality? -load page with all side containers hidden -display only 1 side container at a time -fadein and fadeout effects -same button displays and hides -button swaps images for displat/hide commands Again, my code can be seen at: http://www.jesselang.ca http://jesselang.ca/files/style.css I'd very much appreciate the help. Thank you in advance. *j Hi all, I have set my sprite on this page http://www.kylehouston.com/portfolio.html to fade in, my problem is when the page loads the images appear and then they fade in, how can i set them to fade in without showing them first of all? Thanks in advance Kyle http://dannycremers.com/menus.html i've been experimenting with random images floating in the background that i now want to turn into links to other images, the code i have right now is the following: Code: <div id="div2"><a href="#sub_target" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/img/2.png" alt="" /></a>
<div><a href="#" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/inprogress/img/koekoek.jpg" alt="" /></a></div></div>
image 2.png is the image with the black border, onclick of that image i want the orange picture to become visible in the center of the page which sort of works.. but for some reason when the page loads an extra version of the orange image shows up as well, any idea how i can get rid of this while also maintaining the orange image showing up onclick?? another issue i've been having is with the fadein code, it always used to work but after adding the onclick/toggle script it stopped working, does anybody have any idea why that is and how i can work around that? tnxxx! Hi, I am looking for a script which could do picture animation like in this page But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds. 5 sek. to become colored, 5 sek. to become grey when you put away your mouse. If you need more info, ask.. Thanks a lot. I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it do anyone know, how can i write fadein and fadeout functions? is anyone know its source code? Best Morteza 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. 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
}
Please take a look at oceangamer.com Press the login/Sign up in the header of the page. It slides down fine in IE but in mine it refuses to slide up if i click close. Every other browser, it works??? Whats the problem? I am aware that there are common problems with this and that the fix is probably this: Code: $(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
However I can't figure out how to make my menu get in front of my jquery banner in ie6 and 7!! Ive been literally trying all day. Then I found that site explaining that that code would fix it. however I cannot get it to work with my site! Here is the link to my page: http://bit.ly/5fwhPP I'm not sure if just plopping that javascript before my other scripts will do it but it sounded like it from the page I found the code on. I could really use some help here I am completely jammed up and cant focus on anything else until i fix this stupid issue! Any help is therefore greatly appreciated! Hi, could someone please take a look at my page with a jQuery gallery that refuses to work, however, it works perfectly on my local computer. View Page What is the problem, and how do I fix it? Hi, JPlayer supports playlists, but it keeps the playlist in the javascript: Code: var myPlayList = [
{name:"Tempered Song",mp3:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3"},
{name:"Hidden",mp3:"http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3"},
{name:"Lentement",mp3:"http://www.miaowmusic.com/mp3/Miaow-03-Lentement.mp3"},
{name:"Lismore",mp3:"http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-04-Lismore.ogg"},
{name:"The Separation",mp3:"http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-05-The-separation.ogg"},
{name:"Beside Me",mp3:"http://www.miaowmusic.com/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-06-Beside-me.ogg"},
{name:"Bubble",mp3:"http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg"},
{name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/mp3/Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-08-Stirring-of-a-fool.ogg"},
{name:"Partir",mp3:"http://www.miaowmusic.com/mp3/Miaow-09-Partir.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-09-Partir.ogg"},
{name:"Thin Ice",mp3:"http://www.miaowmusic.com/mp3/Miaow-10-Thin-ice.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-10-Thin-ice.ogg"}
];
I'm trying to read in an xml file into this "myPlayList" array so that I can have an easy way of updating it, but I'm having trouble understanding this array structure. In the JPlayer code they use "myPlayList[i].name" and "myPlayList[i].mp3" in a for loop to cycle through the playlist and display the links in a list. My idea was to get rid of the "myPlayList" var declaration and dynamically populate the array variable from my xml file: Code: var xmlDoc;
var myPlayList = []
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET","playlist.xml",false);
xmlDoc.send("");
xmlDoc=xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject("Microsoft.XMLDOM"))
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("playlist.xml");
}
x=xmlDoc.getElementsByTagName("track");
for (i=0;i<x.length;i++)
{
myPlayList[i].name = x[i].childNodes[0].nodeName;
myPlayList[i].mp3 = x[i].childNodes[1].nodeName;
}
It didn't display any songs I'm not sure what I'm doing wrong. Please help. Also, I'm guessing this has been done before (although I did a google search and couldn't find anything), so If you could point me to some resources I'd appreciate it. If there is another simpler option (over xml) I'd like to know. Thanks. Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you I am trying to make a lightbox type plugin and I am running into a problem. I hope it is something simple that I am overlooking. Here is my code: jQuery.fn.overlay = function() { $(this).click(function() { $('body').append('<div id="over"></div>'); $('#over').fadeIn(); }); }; It (almost) does what it should. It draws the #over div to the screen just fine. The problem is when I try to access it. I try something like this and get no response: $(function() { $('#over').click(function() { alert('moo'); }); }); Its like the element is not getting the ID assigned to it. Does anyone have any ideas? Thanks in advance. Hi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk Hi, First of all, please excuse my ignorance of JQuery(and coding in general) - Although I hastily grab plugins and try to use them, I really do appreciate them, and also the help you may provide me with my problem! My problem is this - I was looking for a simple and effective slideshow to use in a website I was making. SimpleSli.de(http://www.simplesli.de/) was exactly what I was looking for. It works great when it works but sometimes when I load the page it kind of doesn't work. I don't know what is going on but only approximately 50 pixels of the slideshow is visible. This happens sporadically when you refresh the page multiple times, and seems to not work more often on Google Chrome. I've eliminated every possible wrong doing in my code and tried installing firebug to help me identify the problem but for now this is beyond my understanding. JS Lint also purged errors in the code but still the same intermittent problem. I tried to contact David Drew - the creator of SimpleSli.de but he has not responded to me. On top of this I was trying to Auto Play the slideshow on load but could not get this to work. The code for it is available on the SimpleSli.de website but I tried to implement it in every possible way but it did not work. This problem is secondary and not really a proper problem so no worries if you can't help me on this one. The website in question is http://www.argsecurityscotland.co.uk/ Thank you in advance for your time and expertise, I really appreciate it. |
|||||||