|
JavaScript - Onload Difficulty (i Think)
Hi there,
I'm trying to port a pretty old javascript to a brand new Joomla website. I didn't create the original site that the javascript comes from, and haven't been able to locate it in my Google searches either. I'm assuming it's quite old. That being said, it seems to *want* to load up correctly. Since this is in an individual Joomla article, I didn't want to set the template to always try and load this script from <body>, so I'd found what I thought might be a workaround by calling it from another javascript within the article. It *looks* like it starts to want to call the required images, but then they disappear. I am not a javascript programmer in any way. I really don't do more than copy & paste various scripts of that nature. So I'm a little flummoxed here. Any help you can afford will be appreciated. Here is the development page: Mixes Thanks in advance. ~Laura 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 Hey everyone! I am pretty new to JS and I am having a problem figuring this loops structure out - any help would be appreciated. I am trying to add a password to an html page via an external JS file. (I know this isn't an ideal solution for securing a page - I am just trying to use this for trying to understand loops.) What I am trying to do is prompt the user to enter a password before the html page loads. If the password is correct they can enter the page. If they guess wrong the user is looped back to a prompt box to try again. If they fail 3 times they should be told via an alert box and sent off somewhere else. I have tried using a for & do while loop and was unsuccessful. I think this is the best way to go. This is what I have so far: Code: var password = prompt('All women a ',' ');
var pass1 = "Psycho";
var counter = 0;
if (counter < 3) {
if (password = pass1) {
alert('Password Correct! Click OK to enter!');
counter++
}
else {
alert("Password Incorrect!!!");
window.location="Lab5Part2.html";
}
}
else {
alert("You have failed 3 times!");
window.location="http://www.google.com";
}
I've recently picked up HTML and CSS, and am getting to grips really quickly. The principles are really straight forward, you just need to understand a few key principles and then with practice you can remember most tags/elements/attributes etc, although I would rather have the understanding rather then not have the understanding and remember all the tags (I can remember most tags I need anyway. So PHP and Javascript are obviously the next ports of call once I feel I am proficient with HTML and CSS. How hard is it to understand the principles of Javascript and become effective in it? Hello again; I am testing in Firefox( two versions ), Chrome, Opera (two versions), Safari on Mac OSX and am seeing a peculiarity. Code: <div id="dialog" style="position:absolute;top:50px;left:600px;"> <div id="head"><p id="panelTitle">Item Info:</p></div> <p>Drag this panel to move </p> <pre id="target1"><img id="srcImg" src="windows/img/front_window.jpg" alt="test" /></pre> <pre id="target2"> </pre> <div id="closer"><p class="dialog"><a id="dClose" href="javascript:">Close</a></p></div> event listener assigned to a separate anchor tag makes this markup visible and drag-able. The mousemove event listener for dragging is assigned to the parent div, id='dialog' In Firefox and Google's Chrome browser, if I mousedown on the image and try to drag, the system tries to move and copy the image. When I release the mouse, the whole panel sticks to the pointer and moves with the pointer until I click on it. The Question: What event would I do preventDefault, cancelbubble, or return false to get around this? (perhaps for a separate post, how would I prevent the client form copying content?) Safari will do the same accept that it will not stick to the mouse pointer position on mouseup. In Opera, it works fine (accept the earlier verison, v9x leaves a trail of ghost lines where the panel was moved from) I have a pc with I.E. and have not yet tested this specific issue. Thank you for your time and attention JK I'm making a form for my rural neighbors' electricity calculations. My main problem is getting the Previous and Current reading to subtract each other and post in the "kwh Used" column. My plan is to continue doing the calculations after I find that value. Here is the code thus far: Code: <head>
<title>Untitled Document</title>
<script language="javascript">
function calc()
{
preR= Number(document.Bill_cal.PrRe.value);
curR= Number(document.Bill_cal.CuRe.value);
diff=preR-curR;
document.getElementByID("kwhu").innerHTML=diff;
}
</script>
</head>
<body><center>
<form name="Bill_cal" method="post" />
<input type="checkbox" value="Residential Account" name="Residential_Account" />Residential Account
<input type="checkbox" value="GSS/Business Account" name="GSS_Business Account" />GSS/Business Account
<br />
<br/>
<input type="checkbox" value="Winter_Rate" name="Winter_Rate" onchange="" />Winter Rate
<input type="checkbox" value="Summer_Rate" name="Summer_Rate" onchange="" />Summer Rate
<br />
<br/>
<input type="checkbox" value="Butler" name="Butler" onchange="" />Butler
<input type="checkbox" value="Chautauqua" name="Chautauqua" onchange="" />Chautauqua
<input type="checkbox" value="Cowley" name="Cowley" onchange="" />Cowley
<input type="checkbox" value="Elk" name="Elk" onchange="" />Elk
<input type="checkbox" value="Montgomery" name="Montgomery" onchange="" />Montgomery
<br/>
<br/>
<input type="checkbox" value="Security Light" name="Security" />
Security Light
(Check if Yes)
<br/>
<br/>
</center>
<center>
<table width="600" border="1"><center>
<tr>
<th width="254" scope="col"> </th>
<th width="168" scope="col"> </th>
<th width="156" scope="col"> </th>
</tr>
<tr>
<th scope="row">Previous Reading</th>
<td><input type="text" name="PrRe" value="" /></td>
<td> </td>
</tr>
<tr>
<th scope="row">Current Reading</th>
<td><input type="text" name="CuRe" value="" /></td>
<td> </td>
</tr>
<tr>
<th scope="row">kwh Used</th>
<td>
<p id="kwhu"></p>
</td>
<td> </td>
</tr>
<tr>
<th scope="row">kwh Charge</th>
<td></td>
<td> </td>
</tr>
<tr>
<th scope="row">Subtotal</th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th scope="row">Tax</th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th scope="row">PCA Charge from card:</th>
<td><input type="text" name="PCA" value="" /></td>
<td> </td>
</tr>
<tr>
<th scope="row">Any Additional amount from card:</th>
<td><input type="text" name="PCA" value="" /></td>
<td> </td>
</tr>
<tr>
<th scope="row">Total:</th>
<td>$</td>
<td> </td>
</tr>
</center></table>
<input type="submit" value="Click here" onclick="calc()">
</form>
</center></body>
</html>
One other issue I will probably run into and while I am on here posting. Can I preform a if statement within a if statement? Example: Code:
if (Business is checked)
{
if (Winter is Checked)
{
}
else if (Summer is Checked)
{
}
}
Originally I had the following code. What it does is for a user to type the folder name of their choice and then after clicking submit a window will pop open and they will be taken to "C:\folder" (assuming the user typed "folder" and such a folder existed). Here is the code in case I wasn't clear. Code: <html>
<head>
<script type="text/javascript">
function goTo()
{
var drive = document.forms[0].drive.value;
var folder = document.forms[0].folder.value;
window.location = drive+folder;
return false;
}
</script>
</head>
<body>
<center>
<b><u>Folder Search</u></b>
<form action="" method="get" onsubmit="return goTo()">
Choose drive:
<input type="hidden" name="drive" id="drive" value="C:\">
<br>
Enter folder name:
<input type="text" name="folder" id="folder">
<p>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
However, what I want to do now is change it so that the user can click on radio buttons to choose the drive they want. I realize I could use the code above and have the user type in the drive they want but I would rather have radio buttons for them to choose. Here is what I have so far. Code: <html>
<head>
<script type="text/javascript">
function goTo()
{
var drive = document.forms[0].drive[i].value;
var file = document.forms[0].file.value;
window.location = drive+folder;
return false;
}
</script>
</head>
<body>
<form method="get" action="" onsubmit="return goTo()">
Choose Drive:
<input type="radio" name="drive" id="C Drive" value="C:\">C Drive
<input type="radio" name="drive" id="D Drive" value="D:\">D Drive
<input type="radio" name="drive" id="F Drive" value="F:\">F Drive
<br>
Enter Folder Name:
<input type="text" name="folder" id="folder">
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Now after the user clicks submit nothing really happens. I'm a real n00b at this. I could use some help. Thanks in advance. i have been tryin for a long time to get both of the javascripts(for the thumbnail to main img swap and the navigational arrow swap) to work in synch http://***.com/nn.html it needs to be so that after clicking on a thumbnail then on an arrow, the correct image in the correct order appears. as of now they are running separately and one has no influence on the other. forgive me if im not being clear. i keep trying to replace the id that one script is looking for with the same id from the other but this will not work..why? please help me...believe me ive tried to help myself by reading all i can understand on the web about this but im in the dark thanks I'm an online web design student and i'm currently taking a javascript class Ive used java in the past but that was ten years ago so ive been spending time refamiliarizing myself with it I've ran into a problem with the popup coding I was given to use I have to take this image gallery and make the image thumbnails pop up into the larger view of the image using just the java pop up window, but somehow for some reason my coding is opening up the image in both windows, the window that the thumbnails are on and the separate window, its frustrating me to death! i have to keep hitting the back button on the main page whenever i click on an image link because it opens it in both windows simultaenously. i have to submit the project because it's due but i want to work on getting this problem resolved for the future. I've attached a plain text notepad document to my post so you can see the coding Hi, I am using following code-- Code: <td>
<centre>
<select id=\"extenddays\" size=\"1\" name=\"extenddays\">
<option value\=\"2\"> 2 </option>
<option value\=\"4\"> 4 </option>
<option value\=\"7\"> 7 </option>
</select>
<a href=?ext_days=\"extendform.extenddays.value\" & ?extfid=" . $data->{'fid'} ." \" >
<INPUT TYPE=\"SUBMIT\" NAME=\"extend\" VALUE=\"extend\" />
</a>
</centre>
</td>
Here, I want that when I click on 'extend' button, it should redirect to the url given in the href.. But while forming url run time , it is not retrieving the value of "extenddays" ( which is selected option value).. Please help. Cheers, Shashikant Shinde Hi, I am a JavaScript novice, and appreciate any help you can give. For design reasons, we did not like the appearance of a still video on our web page. So I write a short little script to replace a picture that we selected, with the code for a flash player, once the image was clicked. The code works exactly as designed on IE and Chrome. It works *almost* as designed on Firefox and Safari -- but on those browsers the "fullscreen" button in the plugin doesn't work. It is *not* a problem with the FlowPlayer code. If I simply put the FlowPlayer code into a web page, it works fine. I think that somehow some browsers do not want to let the FlowPlayer expend outside of the JavaScript object box I created -- though that is just an hypthesis. If you have any insight or suggestions, I would appreciate it. The page is at http://sudval.org/test.html The code: Code:
<div style="line-height: 12px;letter-spacing: 0px;">
<script type="text/javascript">
function changeText(){
var strOut;
strOut = " <object id=\"videoplayer\" width=\"334\" height=\"204\" type=\"application/x-shockwave-flash\" data=\"http://app.provdn.com/flash/flowplayer.swf\">";
strOut = strOut + " <param name=\"movie\" value=\"http://app.provdn.com/flash/flowplayer.swf\" />";
strOut = strOut + " <param name=\"allowFullScreen\" value=\"true\" />";
strOut = strOut + " <param name=\"allowscriptaccess\" value=\"always\" />";
strOut = strOut + " <param name=\"flashvars\" value=\"config={\'playlist\':[{\'url\':\'http://cdn.provdn.com/4931/thumbnail/frame_0000.png\',\'scaling\':\'fit\'},{\'url\':\'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\',\'autoPlay\':true,\'scaling\':\'fit\'}],\'plugins\':{\'controls\':{\'url\':\'http://app.provdn.com/flash/flowplayer.controls.swf\',\'playlist\':false,\'backgroundColor\':\'#000000\',\'tooltips\':{\'buttons\':true,\'fullscreen\':\'Enter Fullscreen mode\'}},\'bwcheck\': { \'url\': \'http://app.provdn.com/flash/flowplayer.bwcheck-3.1.3.swf\', \'netConnectionUrl\': \'http://cdn.provdn.com/bitrate/test.mp3\', \'bitrates\': { \'http://app.provdn.com/output_videos/542539e49d4056ce6d3968958313be3dee94614b\':200, \'http://app.provdn.com/output_videos/d31b9a3562c35244cb2c2a28bb4a9aaa1edd1995\':600, \'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\':1000 }, \'urlPattern\': \'{1}\', \'urlExtension\': \'swf\' }}}\" />";
strOut = strOut + " <param name=\"bgcolor\" value=\"#000000\" />";
strOut = strOut + " <param name=\"wmode\" value=\"opaque\" />";
strOut = strOut + " <!--[if gt IE 6]><!-->";
strOut = strOut + " <object width=\"334\" height=\"204\" type=\"video/quicktime\">";
strOut = strOut + " <param name=\"src\" value=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" />";
strOut = strOut + " <param name=\"href\" value=\"http://app.provdn.com/output_videos/54339bc0f4a7c39dd0d746f52139d3a6b6c46375\" />";
strOut = strOut + " <param name=\"target\" value=\"myself\" />";
strOut = strOut + " <img src=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" width=\"334\" height=\"204\" alt=\"No Video\" title=\"No video playback capabilities.\" />";
strOut = strOut + " </object>";
strOut = strOut + " <!--<![endif]-->";
strOut = strOut + " </object>";
document.getElementById('boldStuff').innerHTML = strOut ;
}
</script>
<b id='boldStuff' onclick='changeText()'><img src="images/videoimg.png" alt="no video" title="Introductory Video" width="334" height="204"></b>
<p><A HREF="/08_cont_03.html"><img src="images/OH012211.jpg" alt="button" width="161" height="181" title="Open House!" BORDER="0" ALIGN="right" style="margin-left: 10px;"> </A></p>
<font size="2" style="font-family:arial; font-size:80%; line-height:1.3;">
<p id='boldStuff' onclick='changeText()' align="left">
This video is a glimpse into the life of our school. Enter a world of young people who are exuberant about their lives, and are fully in control of their education. We hope you will enjoy their spirit, their focus, and above all their intensity in pursuing their passions.
<br><img src="images/playvid.png" alt="Play Video" title="Play Video" width="100" height="25" style="margin-top:10px;">
</p>
</font>
</div>
Hi, I'm looking to create a box that shows to IE6 users or lower, to tell them that my site does not render properly in the IE6 browser and that they should therefore upgrade to a newer version or alternative browser. Basically I would put whatever the code to show the box into these tags: Code: <!--[if lte IE 6]> INSERT HERE <![endif]--> to enable it to only appear to IE6 or below users. Preferably when this box appeared, it would be nice if it could fade the page behind it. Does anyone have a script for this or know of a tutorial I could use? The box would also need buttons at the bottom that said "Ok, upgrade me" (this would load another window with links to alternative browsers) or "No thanks" (or "Close") Thanks in advance. I have this code: Code: <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c7b22470e521876"></script> I want this JavaScript code above to be executed when all My page finished loading (maybe by using JavaScript onload) So how can I do that? Am I saying the onload event wrong or something? PHP Code: <input type="button" value="Mouse" onload="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" /> Other events like onmouseover and onClick work Hi all I would like the img src to be populated after page load I'm not sure this is doing what I would like it to do. I have done this. (tag shortened for post) Code: <img src="" id="testImg2" onload="(this.src='images/USA.jpg')"/> Is this populating the img src after page load or when the img tag is loaded? LT while decomplicating things I putted into single jsp code like that: Code: <script language="javascript" src="../js/A.js" type="text/javascript">
</script>
<script language="javascript" src="../js/B.js" type="text/javascript">
</script>
The prob here is that both A and B contains window.onload, and only the one from A gets executed. All things that come to my mind is back to complications, loosing track of things. Any advice ? Hi Guys, I want to call the below when the page opens as opposed to clicking a link How do I alter it and do i need a function? THANKS <a href="#" onclick="new Lightbox.base('box3', { closeOnOverlayClick : true })">LINK Hi all, I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load: Code: function toggleDiv (divid) {
if (document.getElementById (divid).style.display == 'none') {
document.getElementById (divid).style.display = 'block';
} else {
document.getElementById (divid).style.display = 'none';
}
}
Code: <a href="javascript:;" class="showmorelink" onmousedown="toggleDiv('checks');">Safeguarding</a>
Can anyone advise? Many thanks, Greens85 All, I have a function that loads with the onload command. Is there a subsitute for this? I have an AJAX call so sometimes content gets loaded on the page without the onload event being triggered but I need it to go to this function when the AJAX displays the new content. Any ideas? If it makes a difference, the AJAX is calling a PHP page. Thanks in advance. 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 |
|||||||