|
JavaScript - Javascript Difficulty Compared To Css
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? Similar TutorialsHi, 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>
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";
}
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 I can't seem to figure out how to accomplish this. In my website, I would like the user to input text into a single or multiple textbox(es) and then have the contents of the textbox(es) stored to either a variable or an array. Then I would like to have that variable/array compared to other arrays. Basically, the user is searching for items in a database. The user can search for as many or as little items as they want. Then the item(s) will be compared to multiple arrays to find out if what the user wants is in the database. So for example, let's say the user is searching for recipes that have all or part of these ingredients: chicken, broccoli, lemon, honey. So, there would have been a total of 4 textboxes...one for each ingredient. These ingredients are stored to an array..lets call it ingredient(). In the database of recipes, each recipe has its own array which includes the ingredients needed to make the recipe, we'll call them tag1(), tag2(), and tag3(). Now, I want the array, ingredient(), to be compared to each of the "tag" arrays to see if any of the "tag" arrays include exactly match the ingredient() tag in part or in whole. Is this possible? 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 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'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)
{
}
}
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 Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. 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... Hey, I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it, Here is my form with the two textboxes and submit button: <form> x: <input type="text" name="x" /><br /> y: <input type="text" name:"y" /><br /> <input type="submit" value="Submit"/><br /> </form> And i need it so that they change the values of these: //this shows where my sprite will start on the canvas var block_x; var block_y; searched the internet for hours and cant really find anything i understand or works. any help is much appreciated I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['warning']) {
$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.warning').fadeIn('slow');
}
for (i in json['error']) {
$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart_total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please |
|||||||