|
JavaScript - Replace Content Of Welcome Box With Generated Text..
Im working on a 2nd case and I could use some help
I need to replace the content of the welcome box Code: <div id="welcome"> Today is<br /> Tuesday, May 29, 2007 <br /><br /> Born today<br /> Ian Fleming (1908) - Author </div> with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses. Similar TutorialsHi All I'm going to keep this simple. I'm using a hashchange plugin for my page navigation I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange Here is a link to my current project: http://www.bluecoast.co.uk/test/temptation Here is the script that handles the hashchange: Code: $(function() {
var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
I'm loading the scripts in the header of the main index.php page like so: Code: <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript" src="js/jquery.anythingslider.min.js"></script> <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script> <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]--> <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script> <script type='text/javascript' src='js/dynamicpage.js'></script> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> <script type="text/javascript" src="js/custom.js"></script> Would somebody be kind enough to help me with this? Thanks in advance Craig Hello All, I have a code which works fine for what is does but I want to add in dynamically a new list to the Array...... from an input field. The relevent part of the code reads as this for example........ var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3") but I need a way to dynamically replace the existing.... "ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3" seen above with a new list from an input field which holds the following say....... ca2sb2en2pg1itm1","ca2sb2en2pg1itm2","ca2sb2en2pg1itm3 I have tried various ideas but none seem to be able to inject the new values in the space between the brackets. Any thoughts. Martin. For those just wondering what the code is and want to try it, it is a one piece code which can fire many different functions without requiring lots of individual bits of code to do same. The action usually happens in micro-seconds but I slowed it to a one second count between changes so you can see what is actually happening. Below is a revised code if you want to see it working and also to give an idea about the Array part in which I want to add a different number set. Copy the code and save in notepad as test.html It can be opened as a web page. Remember to change the code tags to the correct script tags Code: var i_x_list=0
function fireFunctionList_x_list()
{
if (document.getElementById("locate_load_x_list").value == "end" || document.getElementById("locate_load_x_list").value == "undefined"){i_x_list=0;document.getElementById("locate_load_x_list").value=""}else{fireFunctionList_x_list_do()}
}
function fireFunctionList_x_list_do()
{
document.getElementById("addto").value="place_";
var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3","ca1sb2en1pg1itm4","ca1sb2en1pg1itm5","ca1sb2en1pg1itm6","ca1sb2en1pg1itm7",
"ca1sb2en1pg1itm8","ca1sb2en1pg1itm9","ca1sb2en1pg1itm10","ca1sb2en1pg1itm11","ca1sb2en1pg1itm12","ca1sb2en1pg1itm13","ca1sb2en1pg1itm14","end")
document.getElementById('locate_load_x_list').value=step_x_list[i_x_list]
i_x_list=i_x_list+1
document.getElementById("addto").value+=document.getElementById("locate_load_x_list").value;
document.getElementById("final_locate_load_x_list").value=document.getElementById("addto").value;
document.getElementById("final_locate_load_x_list").value+=document.getElementById("addto2").value;
var x_list = document.getElementById("final_locate_load_x_list").value;
setTimeout("fireFunctionList_x_list()",1000)
var f_x_list = new Function(x_list); f_x_list();
}
<BR><BR> <button onclick="fireFunctionList_x_list()">run the function list rotation</button> <BR><BR> <input id="addto" type="text" size=25 value="place_"><BR> <input id="addto2" type="text" size=4 value="()"><BR> <input id="locate_load_x_list" type="text" size=20 value=""><BR> the code fires this function if there<input id="final_locate_load_x_list" type="text" size=25 value=""><BR> Code: function place_ca1sb2en1pg1itm4(){alert("ca1 number4 function dummy run as alert");}
Code: function place_ca1sb2en1pg1itm9(){alert("ca1 number9 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm6(){alert("ca2 number6 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm12(){alert("ca2 number12 function dummy run as alert");}
Can anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in? Here's the code I need to change. <script type="text/javascript"> $(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script> drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one. If I need to post more info to get some help with this please let me know. Thanks in advance. Hi, My current html file contains as below. <html> <head> ... </head> <body> ... </body> </html> When i receive a reply from WEB server, is there any way using javascript to replace all the contents shown above with the reply (another html). I have seen window.location.replace, but this will make another request to server before replacing the contents. But i just want to take whatever reply i receive from server with the display content. Can any one please give me some pointers on how to proceed with this. Thanks in advance. I am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. Hello, how do I replace text throughout a page? I would like to replace: Code: <IMG SRC="../template/wysiwyg/uploads/image1.jpg"> with: Code: <IMG SRC="template/wysiwyg/uploads/image1.jpg"> removing the: Code: ../ throughout the whole page. Thank you! So I have a site, It has a few paragraphs. When a customer presses a href, or a navigation link, I want that block of text to change to a different set of paragraphs. For instance Ive got a Div set for the main block of text with general information. When they click a link at the top, I want this text to change to something else, without having to reload the entire page or create a completely new HTML file. I have read on innerhtml and setting particular elements but I cant find any good online resources for using a simple link rather than a button to change a block of text In essence Set block of text to be element "old text" Set block of new text to be element "new text" ( all the while not showing this text on the page until the link is pressed) Classify href as trigger to replace old text with new text. BAM, victory! Any help would be greatly appreciated. Hello, I want to replace the text headings with images. I have tried adding an 'img scr' tag but then the menu won't expand. I got the code from here The JavaScript Source: Navigation : Expanding Menu I would appreciate any help. How to get this to work? Code: <html> <body> <script type="text/javascript" src="01.js"> <h1>Welcome</h1> <a href="#" onclick="write(); return false;">Click here</a> <div id="info_here"> </div> </body> </html> 01.js Code: function write() {
var a=document.getElementById("info_here");
a.innerHTML=document.write("Hello <br />" + "Thanks for clicking");
}
Hello I have this snippet for controlling the number of characters entered in a textarea. It works. But, if I replace in this code the name "my_form" by "contact-form" and "my_text" by "message", it doesnt ! It looks like the keyword is " my_form ". You change that , and the script will not work! It turns out that I have to change those names because the form as it was already had those names my_form and message before I added this counter And I dont want to replace the names of the form in order to adapt them to this code snippet below. The question is why would the script not work if I have just replaced two words, which dont seem to be keywords of JS programming (my_form and my_text) <html><head> <title>(Type a title for your page here)</title> <script language=JavaScript> <!-- function check_length(my_form) { maxLen = 50; // max number of characters allowed if (my_form.my_text.value.length >= maxLen) { // Alert message if maximum limit is reached. // If required Alert can be removed. var msg = "You have reached your maximum limit of characters allowed"; alert(msg); // Reached the Maximum length so trim the textarea my_form.my_text.value = my_form.my_text.value.substring(0, maxLen); } else{ // Maximum length not reached so update the value of my_text counter my_form.text_num.value = maxLen - my_form.my_text.value.length;} } //--> </script> </head> <body> <form name=my_form method=post> <textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea> <br> <input size=1 value=50 name=text_num> Characters Left </form> </body> </html> Hi guys, Been some time since I've been here. Some health problems have precluded continuing activity, until now. I have an index file that contains absolute barebone html statements and a Flash application. The application is set internally to occupy 100% of the screen. Test site is Flipsauto.info I need to have a content area offset with a DIV statement but can't remember the syntax. In other words, the content area will contain text for search engine spiders to analyze but not be viewable by the user. Thanks for any help. Bob P. I'm using the script below in a custom HTML to generate a random line of text (not with the text shown here). This works fine BUT; I want it to go randomly through the WHOLE list without repeating lines that already have been printed. As it is now, a line of text might be printed several times in a row, which is a little annoying. I'm using a refresh button for generating a new line of text. Alternatively, How can I just make it display in the order shown and just re-arrange the content so it seems random to the user? Random would the best though... Any ideas?? : ) Code: <script language="JavaScript"> <!-- var r_text = new Array (); r_text[0] = "All the leaves are brown"; r_text[1] = "And the sky is grey"; r_text[2] = "I've been for a walk"; r_text[3] = "On a winter's day"; r_text[4] = "I'd be safe and warm"; r_text[5] = "If I was in L.A."; r_text[6] = "California dreaming, On such a winter's day"; var i = Math.floor(7*Math.random()) document.write(r_text[i]); //--> </script> Hi world I have this code in my page PHP Code: <iframe name="ff1" src="http://playerplus.co.nu/ipp.php" ></iframe> how i copy the result in this iframe to text or to some variable but from iframe not direct from the URL "http://playerplus.co.nu/ipp.php" Hey there everybody, Seems I need help again. Still trying to learn the ways of the javascript. So here is my dilemma: I have a text field and some buttons below it. When I click on the button it insert the text for it into the text field. However, in order for that text to display in the text field a second time in a row I have to click on the text field and then click on the button again. What I would like to be able to do is to click on the button several times in a row so that it inserts the text again and again without having to click on the text field to reselect it. What's wrong with this script that is causing it to work that way? What can I do to fix it? By the way, I will be coupling this code with a popup code. The popup code, which works perfectly fine, has buttons in it as well and insert that text into the main window text area repeatedly. I just need some buttons on my main window that do the same thing. I hope the explanation makes sense. With all of this playing around, I know I'll get the hang of it eventually. I hope. . . Any help is greatly appreciated. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<input type="button" value="Hi" onclick="insert(window.lstText,'Hi')">
<input type="button" value="Bye" onclick="insert(window.lstText,'Bye')">
<br />
</form>
</body>
</html>
i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code. Code: var initec = function(){
var rg = {
}
;
rg.matc = false;
rg.i = 0;
rg.change = function(equ){
if (typeof(equ) != "string"){
alert('Equation must be a string');
return;
}
alert("starting equation: "+ equ);
rg.i = 0;
do{
rg.matc = equ.match(/\|/);
if(rg.i === 0){
equ.replace(/\|/, " Math.abs(");
rg.i = 1;
alert("1 "+equ);
}
else {
equ.replace(/\|/, " ) ");
rg.i = 0;
alert("0 "+equ);
}
}while(rg.matc)
alert("finished equation: " + equ);
}
return rg;
}
rg=initec();
rg.change("|8/x+7|-2");
the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work. Hello, I believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though). What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code: The HTML: Code: <td class='dandt' id='iquotenum' colspan='2'></td> The Javascript: Code: function loaded()
{
var d = new Date();
var vqtnum = document.getElementById("quotenumber");
var iqtnum2 = document.getElementById("iquotenum");
var vqtdat = document.getElementById("quotedate");
vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds();
iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>";
vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
}
The PHP: Code: <?php $iqtnum = $_GET['iqtnum']; echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>"; ?> I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier. *Except that the value in this case is typed into the box, rather than generated by js. Thanks in advance. edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()". |
|||||||