|
JavaScript - Approach To Online Javascript Editing?
I'm almost positive this question will make you groan "neewwwbie!"....
I have a simple javascript that decides which 'div' to make visible, based on another element within the html. What i want now is to create a page where someone can view all the possible divs in that javascript that might appear and edit them (including href's, ital, bold and image tags.) Much like a CMS system, but the information is within a javascript, not a database. I would assume it's possible. What's a good way to approach this? It sounds like Javascript cannot edit .txt files. Is there a way to have the user access and edit an .xml file and just pull that into the div tag, instead of text? Similar TutorialsI'm learning JavaScript, but want to make an accounting program(site) for my brother. It will be backed by php and mysql. I've found that javascript doesn't "really" have multidimensional arrays. The ways I figure to collect name, address, phone, etc could be any of these: 1. Create a customer object (customer.name, customer.address) 2. Use the mutidimensional array that JavaScript does offer. (var customers [ [], [] ]) 3. Create bunches of variables (var customerName, var customerAddress) or any other method I have found (will find). The information will for a customer will be filled out via HTML forms, processed by JavaScript then sent up to the PHP/MySQL database. OR should I just use PHP to deal with these directly? My impression is to use client side technology as much as possible or is this wrong? -Matt Hello everyone! Recently I found a nice pop up javascript code and I had no problem editing the HTML part,but I have no knowledge in javascript. So what I would like to do is to make the pop up show every 24 hours when a visitor votes.I read somewhere that this will involve cookies but as I said I couldnt get it working. Code: <script language="JavaScript1.2">
var ns4 = document.layers;
var ie4 = document.all;
var ns6 = document.getElementById && !document.all;
//drag drop function for NS 4////
var dragswitch = 0;
var nsx;
var nsy;
var nstemp;
function drag_dropns( name )
{
if( !ns4 )
return;
temp = eval( name );
temp.captureEvents( Event.MOUSEDOWN | Event.MOUSEUP );
temp.onmousedown = gons;
temp.onmousemove = dragns;
temp.onmouseup = stopns;
}
function gons( e )
{
temp.captureEvents( Event.MOUSEMOVE );
nsx = e.x;
nsy = e.y;
}
function dragns( e )
{
if( dragswitch == 1 )
{
temp.moveBy( e.x-nsx, e.y-nsy );
return false;
}
}
function stopns()
{
temp.releaseEvents( Event.MOUSEMOVE );
}
//drag drop function for ie4+ and NS6////
function drag_drop( e )
{
if( ie4 && dragapproved )
{
crossobj.style.left = tempx + event.clientX - offsetx;
crossobj.style.top = tempy + event.clientY - offsety;
return false;
}
else if( ns6 && dragapproved )
{
crossobj.style.left = tempx + e.clientX - offsetx;
crossobj.style.top = tempy + e.clientY - offsety;
return false;
}
}
function initializedrag( e )
{
crossobj = ( ( ns6 ) ? document.getElementById( "showimage" ) : document.all.showimage );
var firedobj = ( ( ns6 ) ? e.target : event.srcElement );
var topelement = ( ( ns6 ) ? "HTML" : "BODY" );
while( ( firedobj.tagName != topelement ) && ( firedobj.id != "dragbar" ) )
{
firedobj=ns6? firedobj.parentNode : firedobj.parentElement;
}
if( firedobj.id == "dragbar" )
{
offsetx = ( ( ie4 ) ? event.clientX : e.clientX );
offsety = ( ( ie4 ) ? event.clientY : e.clientY );
tempx = parseInt( crossobj.style.left );
tempy = parseInt( crossobj.style.top );
dragapproved = true;
document.onmousemove = drag_drop;
}
}
document.onmousedown = initializedrag
document.onmouseup = new Function( "dragapproved=false" );
////drag drop functions end here//////
function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.dnwtop_100_showimage.visibility="hide"
}
</script>
<style type="text/css">
#showimage
{
position:absolute;
width:300px;
padding:2px;
}
#showimage #dragbar
{
font-family:Trebuchet MS;
font-size:10pt;
text-align:left;
font-weight:bold;
width:280px;
}
#showimage #closebutton
{
font-family:Tahoma;
font-weight:bold;
height:12px;
width:12px;
font-size:8pt;
border:2px solid;
border-top-color:#EEE;
border-right-color:#AAA;
border-bottom-color:#AAA;
border-left-color:#EEE;
padding:0 3px 0 4px;
color:#000;
text-decoration:none;
}
#showimage #message
{
font-family:Trebuchet MS;
color:#FFFFFF;
font-size:10pt;
font-weight:bold;
padding:4px;
background-color:#000000;
}
</style>
<div id="showimage" style="left:500px;top:100px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="message" width="100%" colspan="2" align="center">
<img src="http://img822.imageshack.us/img822/79/38866885.jpg" border="0" alt="">
<br><br>
<a href="http://bgtop.net/in.php/1293974162" target="_blank" onClick="hidebox(true)"><img src="http://img221.imageshack.us/img221/2269/yesw.png" border="0"></a>
<a href="#" onClick="hidebox();return false"><img src="http://img195.imageshack.us/img195/6383/72081945.png" border="0"></a>
</td>
</tr>
</table>
</div>
Hello all, I am new to javascript and I have run into a problem. I cant seem to be able to write to a text file called users.txt Here is my code: Code: <html>
<head>
<script language="javascript">
function rf()
{
var fs,file;
fs = new ActiveXObject('Scripting.FileSystemObject');
file = fs.OpenTextFile('C:/Users/Imran/Documents/Imran IT/Web/Test/user.txt',2);
file.Write('The text to write to file');
file.Close();
}
</script>
</head>
<body onLoad="rf();">
</body>
</html>
What I do is I put the code in notepad, I then save it as a .html file and try run it in IE 7, google chrome and firefox, Each time users.txt is unchanged. Any help appreciated. All I want is for the client to send a variable to the server and for that variable to be saved in a .txt file. If there is another way to do that, please share I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to. How would I remove the last active div function or get it to close again when toggling other animated divs.. Thanks so much if you can help Here is the site: www.gjoob.terryarchonship.com here is where the last active div java is Code: showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
}
here is the entire javascript: Code: var animatedcollapse={
divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},
showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
},
slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
var animateSetting={height: action}
if ($divref.attr('fade'))
animateSetting.opacity=action
$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
if ($togglerimage){
$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
if (animatedcollapse.ontoggle){
try{
animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
}
catch(e){
alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
}
}
})
return false
}
},
generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
map[arguments[i][0]]=arguments[i][1]
}
}
return map
},
init:function(){
var ac=this
jQuery(document).ready(function($){
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
this.$divref=$('#'+this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
}
else{
var cssdisplay=this.getAttr('hide')? 'none' : null
}
if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
cssdisplay='block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overriding any other setting
}
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
}
}
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function(){ //assign click behavior to each control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){
animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
return false
}
}) //end control.click
})// end control.each
$(window).bind('unload', function(){
ac.uninit()
})
}) //end doc.ready()
},
uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
if (this.$divref.css('display')!='none'){
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value+"; path=/"
},
urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},
preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=arguments[i]
}
}
}
}
Hi... Im in between a project in which I have to make and Online Radio for various languages Im using Javascript and HTML/CSS and confused on how and where n which way to get a Radio Player on my the web page!! Also whn if I get a Player on page...How would I go about to Make it to Play a Particular Online Radio!! Im using Javascript and HTML(and im not tooo keen on using FLASH as im not aware of it!!!) Pls sumbody help me on this ASAP !! Thanks !! I come from an academic background, so when I finish something I'm proud of, I naturally want to have it certified and advertised by others. I'm thinking of a site that reviews scripts and classifies those that are accepted as to who may find them worthwhile. But I don't know of any modern analogue to the traditional refereed technical journals. By "analogue" I mean different in these key respects: Submitted "articles" are interactive web pages rather than printable papers; and "publishing" need not involve hosting the actual page, but more importantly, letting the world know of its existence and importance. I am aware of sites that review for a price, thereby suggesting the ability to be compromised. In some cases, the price is that the author forfeits his copyright. Personally, I'd be especially interested in a journal that accepts scripts published under a variety of open-source public copyrights (my personal favorite is the Creative Commons share-alike license). If you know of such a forum or online journal, I'd love to hear about it. And if not, might you be in the mood to start such a forum/journal? I have to take more javascript programming classes and I'm really not good at it. I desperately need help. I own Visual Basic, but it's a little difficult to use. What is the best book, online resource, and software for programming in javascript?
Hi and hope you can help, I'm doing some course work and the current lesson I'm doing is about substituting images depending on onclick functions. I've attached the HTML / JavaScript as a txt file, this is their sample file and it is rather bulky and repetetive. I was wondering whether it would be possible to simplify the code as there is a lot of repetition, there are 8 question functions and 8 answer functions, I'm wondering if this could be simplified into 1 question and 1 answer function. Thanks for your interest, R Hey guys, here's my code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
#box {
background: red;
width: 300px;
height: 300px;
display: none;
}
#box2 {
background: green;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a.about').click(function() {
$('#box').stop().slideToggle(2000);
});
});
$(function() {
$('a.contact').click(function() {
$('#box2').stop().slideToggle(2000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<a href="#" class="about" />about</a>
<a href="#" class="contact" />contact</a>
</body>
</html>
Basically I want to make it so that if you click about, and about is open, once you click contact it closes about before opening contact? I'm not sure how to approach this though whether I should use if statements or something? I'm pretty new to jquery I have the need to utilize a pop-up calendar about three times on one of my pages. I created the calendar in a separate html file, complete with jquery functions for pulling the date once a user clicks their desired day. What is the best approach to have that calendar pop up in small window that hovers on the page so that I can take the users clicked day and utilize it on the main page? Should I use the jquery load () function to load the calendar into a div on the main page? Or should I include the calendar file in my header? I'm just asking for some ideas and guidance. Hi All, I am working on a page with a webform and a subform. I have two related tables where my main form will populate the one side of the relationship and the subform will be for the many side. I am thinking about using an HTML table to hold my subform fields with javascript to dynamically add rows for additional records. I am having trouble with the design of the form processing script, however as since the index on the parent record does not exist at the time of processing I can't think of a way to populate the link field for the child records. The only thing I can think of is to have my page's onload event create a "blank" record (generating the index and storing it in a hidden field) and then essentially make the proceesing script be an update rather than a create. This of course would involve creating some sort of delete function if the user leaves the page without submiting the form. I am not sure this is the best approach but it is all I can come up with. I am open to any ideas or guidance from the community on either my subform idea or processing script idea and I thank you in advance. Kind regards, Ken I have many radio buttons associated with questions on a page with Yes/No options. Depending on if Yes or No is selected (varies with question), I need to prevent the user from going off of the page and somehow "mark" the questions that are answered "incorrectly/not preferred". I could probably put validation on each individual radio button and display a message when going off the page, but I'm looking to make this more dynamic. One idea I had was to put a function on each radio button's onChange event and build an array using .push() to construct the array with all the radio button IDs that are answered incorrectly. I ran into problems when deleting from the array when the radio button was changed back to a correct response though. What may be best is to somehow indicate which radio buttons need looked at when leaving the page and then run a function or case statement over all the radio buttons to build an object? I'm not sure what approach to take. Any thoughts are appreciated. Thanks. I have a calendar that gets pulled up via javascript. It allows someone to pick a date in a form with this little calendar icon that pops up. However, I am trying to make certain days of the week not available. If I wanted to make Tuesdays and Thursdays not available, where would I edit it? Here is the lengthy code http://www.happydogwebproductions.com/CFcalendar.js It was too long to post here. Thanks for any help I have an events form with date fields filled out manually, and wish to convert to pop up calendars. i have a pop calander script but it is updating all the fileld with the same date! as the call to the script is the same. i am open to new ideas on this so i can have say 5 calendar icons for dates to be set in the date-text field when a date is selected in the popup. and then have the option to click more dates to open up more fields. my fields a event title description date start time end time has anyone do something like that can help me out? edited: sorry forgot to say that when the form is submitted it then reads all info and adds to the MySQL database with the same field names and in the form. HI to all I am new be and not able to resolve the issue when i tries to edit text area everything works fine for crome and ie but does not work for firefox in fire fox when i try to edit intially everythings works fine but if i click other feild in form and after that try to edit text area backspace key stuck up and does not work please help me ?? code which i am using is menitoned below function stopPropagation(e) { e = e||event; /* get IE event ( not passed ) */ e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; } function checkShortcut(e) { stopPropagation(e); if({8:1,13:1}[e.keycode||e.which]) { if( x ) return true; return false; } } I need help editing a script used for ease of play on an online game. I received the original script from a friend who no longer plays and who doesn't know how to fix it with the game design having changed. The script string that needs edited is as follows: function unocc_list(arr) { var html= ""; var user_coords = []; user_coords = xy_from_id(_current_planet.substr(0,6)); var data = new Array(); var i =0; while (arr[i]) { var c = arr[i]; var z = c.id; var y = c.system; var link = ""; link += "http://speed.imperion.org/fleetBase/mission/1/planetId/"; link += z; link += "/m/301/ships/,0,25,0,0,0,0,0,0,0,0,0,0"; // XEN, Mylons // link += "/m/301/ships/,0,0,1,0,0,0,0,0,0,0,0,0"; // TITAN, Large Transports // link += "/m/301/ships/,0,4,0,0,0,0,0,0,0,0,0,0"; // TERRAN, Small Transports var this_planet_coords = xy_from_id(c.system); var d = distance_between (user_coords, this_planet_coords); var raw_time = c.lastAttackTime; var tt = raw_time.split("."); var dx = tt[0]+ "."+tt[1]+".20"+tt[2]; var t1 = Date.parse(dx); var now = new Date(); var time_delta = (now - t1) /(60 *60* 1000); time_delta = Math.floor(time_delta); var a =""; switch (true) { case (time_delta < 10): a = "<span style='background: hsl(0,00%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>"; break; case (time_delta >= 10 && time_delta < 100 ): a = "<span style='background: hsl("+time_delta+",70%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>"; break; case (time_delta > 99): a = "<span style='background: hsl(100,70%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>"; break; } var q = c.quality.toFixed(2)+"\t"; if (c.quality > 1) { if (c.quality > 1.15) { q = "<b>"+q+"</b>"; } q = "<span title='"+c.typeName+"'>"+q+"</span>"; } else { q = "<span style='opacity: 0.4;'>"+q+"</span>"; } data[i] = {}; data[i].dist = d; data[i].code = "\n"+q+a+"\t<a href='"+link+"'>"+ z +"</a>\t("+this_planet_coords["x"] + "|" + this_planet_coords["y"]+") \tDistance: "+d; i++; } data.sort(cmp_d); var j = 0; while (data[j]){ html += data[j].code; j++; } open_pop_up (html, "boo", "[*] UnAnnexed/UnOcc Planets"); The code is supposed to pull up a list of all 'planets' in the game(for a certain distance) that are noT currently occupied or annexed by any other players. It however won't even recognize that there are any. I have the full script available if anyone wishes to look at it. As well as source code from the game itself. I'm not sure how much of the source code is even relevant so Instead of posting the four page blah blah blah Anyone who wants to help I can send a saved copy of it to them. Here are a series of screen shots I took to give you an idea of whats going on. Frame 1 Frame 2 Frame 3 right now I almost have this script working the way I want it to, here it is: Code: var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});
$('.workimg a').click(function(){
var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp('slow',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').slideDown('slow',hideLoader);
}
function hideLoader() {
$('#load').slideUp('slow');
}
return false;
});
How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are 1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect? 2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next? I have a need to display, edit and save the contents of a text area to a text file or what ever is best suited, directly to the website root or folder within the root of the site. Is there anyway this can be done with out database software? As I dont have the option to install mysql or any other software to the webserver. Any help would be greatly appreciated. Thx Just a little backround: The webserver is acually an open source linux firewall which i was able to edit the apache config file to host a second site. I just want the ability to store edit and display some network information within a very small site I made without the use of a database. Is this even possible? Hi, I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly. I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links. The code that does this is as follows: HTML CODE: Code: <span id="userName" class="editText">John Doe</span> JAVASCRIPT - controls when text is clicked for input to appear: Code: //edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
width = widthEl(actual.id) + 20;
height =heightEl(actual.id) + 2;
if(height < 40){
if(width < 100) width = 150;
actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
}else{
if(width < 70) width = 90;
if(height < 50) height = 50;
actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
}
changing = true;
}
actual.firstChild.focus();
}
JAVASCRIPT - Initiated the update of the field. Code: function fieldBlur(campo,idfld) {
if (campo.value!="") {
elem = document.getElementById( idfld );
remotos = new datosServidor;
nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
elem.innerHTML = nt;
changing = false;
return false;
}
}
I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie. Code: onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');" But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box? If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/ Thanks in advance |
|||||||