|
JavaScript - Can <body Onload> Be Modified?
What I mean is that my <body> tag currently is like this:
Code: <body class="page-course"> I would like to insert a pop-up contact form which requires the body tag to be like this: Code: <body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">
Not quite sure how to merge these - indeed can I merge them? Perhaps better to make the body class (top example) execute elsewhere? THANKS!! Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone hi guys, how can i get this code to load on body onload? without fading in and out? Code: <html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
Thanks Hi, Is there any alternative to the ' body onload="" ' function? I have on the page several scripts running and one is blocking the others because of the body onload function. It is working if I change that to body onfocus but it is loading the content all over when the user gets back to the page. Any ideas how can I avoid this? I can't apply onload to some element, onfocus is not working and this code also does not suite me: Code: <script type="text/javascript> function(); </script> Thanks in any case! Batric I found a little chat script online and I wanted to check it out. When I integrated it into a page I created, for some reason this will not work correctly <body onload="setInterval('chat.update()', 1000)"> I tested it with two different browswers open Lets say on two different browser windows you have user1 and user2 if user1 types 'Hello' it will not show up on user2 window but if user2 types 'Hi' then on user2 window it will say user1 says Hello user2 says Hi so basically for user1 to see what user2 has wrote, user1 has to type something first and send it to see what user2 said. hope you understand, if you would like I could post up the code. i cannot understand, am i making the same mistake each time but my <body onload="startChecking()"> does not want to load again?? here my full code: Code: <head>
<script language="JavaScript" type="text/javascript">
var sendReq;
var receiveReq;
var lastmessage = 0;
var mTimer;
function startChecking()
{
receiveReq = new XMLHttpRequest();
console.log("1234");
getNewMessage();
}
function getNewMessage()
{
if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
{
console.log(receiveReq.readyState);
}
mTimer = setTimeout('getNewMessage();',30000);
}
</script>
</head>
<body onload="startChecking()">
//more code here
</body>
i just want the console.logs to execute then i will continue with the rest of my code... please help? thank you I am a novice with Javascript and need help. The homepage of the website I am developing includes a simple javascript slideshow. The code for the script came from a different site that allowed code sharing. It functions wonderfully once loaded. However, in Internet Explorer, I must control-click to allow for the script to run. This wouldn't be a huge problem, but it is an inconvenience to visitors of the site. Since the website is for a public high school, the district computers have a high security setting. Therefore, anyone trying to access the site from a school computer (the main clientele) will have to control-click and allow access everytime they wish to visit the site. Not ideal. I know my problem is that I am using <body onload="runSlideShow">. I have tried including the defer attribute, but that did not work. Is there any other way I can write the code to not cause viewers to control-click everytime the page is loaded? Thanks tons! EDIT---- When opened in IE 7, there is a bar that warns againsts scripts and activex. I understand that I can lower my personal security setting, but I don't have the authority to do so for district PCs. Once a user clicks to allow the script the slideshow begins automatically. So, how can I write the code so that the warning bar does not show up? ---- Here's the bit of code that is applicable. Code:
<script language="JavaScript">
var slideShowSpeed = 4000;
var crossFadeDuration = 4;
var Pic = new Array();
Pic[0] = 'field.jpg'
Pic[1] = 'mural3.jpg'
Pic[2] = 'cheer1.jpg'
Pic[3] = 'Nuncrackers.jpg'
Pic[4] = 'soccer4.jpg'
Pic[5] = 'radio4.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<body onload="runSlideShow()">
<img src="field.jpg" name='SlideShow' width="814" height="300" />
Hi guys. I have a quick question. What's the code for having a link with the id "autoid" clicked when the body of my html code loads? Thanks, Alex Hey guys I am having trouble loading a drop down menu list script that I got from Dynamic Drive. Here's the original test page. (Works Fine) <html> <head> <script language="javascript" src="http://www.modbargains.com/images/Javascript/ChainSel/chainedmenu.js"> </script> <script language="javascript" src="http://www.modbargains.com/images/Javascript/ChainSel/MBVehicleChainSelect.js"></script> </head> <body onLoad="initListGroup('Vehicles', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')"> <form name="listmenu0"> <table align="center"> <tr> <td><select name="firstlevel" style="width:160px;"></select></td> </tr> <tr> <td><select name="secondlevel" style="width:160px;"></select></td> </tr> <tr> <td><select name="thirdlevel" style="width:160px;"></select></td> </tr> <tr> <td><input type="button" value="Go" onClick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)"> <input type="button" value="Reset" onClick="resetListGroup('Vehicles')"> </tr> </table> </form> </body> </html> HOWEVER! The site I am working on (which is on a different server) does not allow me to alternate the body tag. Is there an alternative way of doing a body onLoad without actually alternating the body tag? I read that you could do a function onload using javascript, so I tried using this: <script language="javascript" > window.onload = initListGroup('Vehicles', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate'); </script> I am not sure if the function is correct but it does not work. Any ideas how I can make this work???? hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>
and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: 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">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. Hi, I am building a navbar using suckerfish. The company that I am using to host the site places onload="page_init()" in the <body> tag automatically. This kills the suckerfish js. Is there a way to remove this onload="page_init()" using a js, or will it just kill that js also? Hello...I need to display the last modified date of each file on my webpage. There are a variety of files including, .doc, .pdf, .ppt, .zip, etc. I am able to get the last modified date to work, however I would like to know if it is possible to format the output of the date/time? I have the following code in the head of my html file: Code: <script type="text/javascript">
function getlastmod(what)
{
var http=new XMLHttpRequest()
http.open('HEAD',what,false)
http.send(null)
if (http.status!=200) return undefined
return http.getResponseHeader('Last-modified')
}
</script>
In the body section, I have the following: Code: <ul>
<li><a href="documents/OMB_Memo_Conferences_Sep_2011.pdf" target="_blank"> OMB Memo Conferences</a> <script type="text/javascript">document.write(getlastmod('documents/OMB_Memo_Conferences_Sep_2011.pdf'))</script> <br /></li>
<li><a href="documents/NavOceano_Crb.doc" target="_blank">Nav Oceano CRB</a> <script type="text/javascript">document.write(getlastmod('documents/NavOceano_Crb.doc'))</script><br />
</ul>
The output is: OMB Memo Conferences Fri, 11 May 2012 13:00:49 GMT Nav Oceano CRB Fri, 11 May 2012 13:00:38 GMT Is there any way to format the last modified date/time to display just the following: OMB Memo Conferences May 11, 2012 Nav Oceano CRB May 11, 2012 Any help would be appreciated. Thanks, Andy I feel a little stupid to ask this question but it has always been on my mind. <html> <head> <script type="text/javascript"> { var lastMod = new Date (document.lastModified); document.write ("<p>Document last modified "); document.write ((lastMod.getMonth() +1) + "-" + lastMod.getDate() + "-" + lastMod.getFullYear()); document.write ("<p>"); } </script> </head> </html> when i open in ie or ff it renders 2/25/11 (supposed to be 2/26/11) but when i use it in chrome or an html test is renders correctly. why? Hi, I have main html page called "ana.html" which seldomly updated and another page "yeniler.html" that showing latest added articles and often updated. What I want is, whenever "yeniler.html" modified the javascript in "ana.html" shows "Latest Update Date: xx.xx.xxxx". As you can see I don't want to show file modified date of "ana" in "ana" like so many scripts offer on the web , but in page "ana" modified date of "yeniler" I also want the date format like 8.18.2008 (without hour, minute, and name of the month) I have a personal academic website in which I made a small last modified JS. I used the last.modified string for windows of the following format: MM/DD/YYYY HH:MM:SS , the time being two hour indices, two minute indices and two second indices. I took substrings of the last.modified string and used an array of "month words" for the month substring, to make the display of it more aesthetically pleasing. When I checked my website on my Google phone, I realized that the last.modified string has a different format as follows: (Day, first three letters), DD (Month, first three letters) YYYY HH:MM:SS GMT , so all the relevant indices were offset, which messed up the script. Is there any way to gear this script to work for both windows computers and Google phones, creating two different cases one for phone and one for computer? Maybe even Macs and all smartphones in general? Or is there maybe an easier way to do this server-side? Thanks in advance! Hi, I am having some problems with this modified version of Lightbox. I had a programmer implement this into the site and then one day it just stopped working. I'm trying to fix it myself, with no success. To view the problem go to: http://www.uscgq.com/question/deck/2 and click the red flag icon. The lightbox opens, but only shows the "Loading" message. I have isolated the problem to somewhere in the Lightbox.js just don't know where or what it is. Any help is greatly appreciated! Code: /*
Created By: Chris Campbell
Website: http://particletree.com
Date: 2/1/2006
Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
*/
/*-------------------------------GLOBAL VARIABLES------------------------------------*/
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
/*-----------------------------------------------------------------------------------------------*/
//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
/*-----------------------------------------------------------------------------------------------*/
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},
// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},
// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Display Ajax response
processInfo: function(response){
console.log('calling process info');
if($('lbHeader'))
Element.remove($('lbHeader'));
info = "<div id=\"lbHeader\"><a href=\"javascript: closeLightboxes();\">close</a> or hit ESC</div><div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
},
// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));
var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
if($('lbHeader'))
Element.remove($('lbHeader'));
Element.remove($('lbContent'));
if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}
this.displayLightbox("none");
}
}
/*-----------------------------------------------------------------------------------------------*/
// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.className = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}
// Send AJAX Call
function sendForm(url)
{
new Ajax.Updater('lbContent', url, { method: 'post', parameters: Form.serialize($('content_form'),true) });
}
// Function to destroy lightbox elements
function closeLightboxes()
{
if(lightbox.prototype)
lightbox.prototype.displayLightbox('none');
if($('lbHeader'))
Element.remove($('lbHeader'));
if($('lbContent'))
Element.remove($('lbContent'));
}
// Close the lightbox if ESC is pressed
document.onkeypress=function(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if(KeyID == 27)
{
closeLightboxes();
}
}
I have an xml file: http://greenandtheblue.com/weather/parks.xml I'd like to display on an html page the time this xml document was last modified. I've done this successfully with php, but I'm wondering if I can do this with Javascript? The file will be in the same directory as the website/html page. I've googled for a while now with no success. Thanks for any help, S Hi this is an assignment, ive been on it all night. I have done the bubble sort function and have to modify it. I work out that if i could stop the amount of times it loops it would make it more efficient. To do this is would need to stop the loop when no swaps have been made on the full array.lenght-1. i have tried using booleans, false and true on the amount of swaps using a while loop instead of my first for loop, however it only loops nine times...ie only covering the array once,hence does not swap the full array. so i tried leaving in the for loop that instructs it to loop for the full array. length. I have also tried using if... else at different positions within my function please i need some guidance, im going to pull my hair out i can see what need in my head just cant get it. Plus i am very very new to this My simple objective is.... to set a flag to stop the loop when there have not been any swaps for the duration of the array. length-1, hence the array is now organised and to display the amount of loops taken. Heres the part that ive been changing and my latest attempt which is using if, however it still loops for 90 loops. Code:
var temp; ;// varible to hold temporay value,
var numberOfLoops = 0
swap = true
if (swap = true)
{
for (var count = 0; count < returnArray.length; count = count +1)// sets any array lenght to be used and the number of passes as lenght of array
for (var i = 0; i < returnArray.length-1; i = i + 1)// starting postion and what elements should be covered minus one pass less than the arrray
{
if ((returnArray[i]) > (returnArray[i+1]))
{
temp = returnArray[i+1]; //hold second value in temp var
returnArray[i+1] = returnArray[i];// replace value second value with first value
returnArray[i] = temp;//replace first value with value held in temp var
swap = true
}
else
{
swap = false
}
numberOfLoops = numberOfLoops + 1
}
}
window.alert('number of loops taken is ' + numberOfLoops)
return returnArray
My bubble sort function als0 worked fine showing 90 loops each time...until changed it Hello, have a website that contains many excel files (.xls and .zip). I need to display the last modified date of these files. They currently reside on a webserver. I found this script in this forum, BUT, it only seems to work for .htm or really anything else except .xls or .zip files. <html> <head> <title>Last Modified</title> <script type="text/javascript"> function getLastMod(){ var myFrm = document.getElementById('myIframe'); var lastModif = new Date(myFrm.contentWindow.document.lastModified); document.getElementById('LastModified').innerHTML = "Last Update: " + lastModif.toLocaleString(); } </script> </head> <body> <span id="LastModified"></span> <iframe id="myIframe" onload="getLastMod()" src="DFC_new_page.htm" style="display:none;" width="352" height="137"> </iframe> </body> </html> Also, when I place an .xls file inside the src= field it ends up opening the file. HELP!!!! I am new to writing scripts and unfortunately only have Frontpage to use for this. Thank you!!!!! |
|||||||