|
JavaScript - Having Trouble With My Script.
I am not great at using JavaScript but I am working on it. I really need help with my script. I can't seem to find out why my images won't load correctly.
I am trying to get a 2 part radio button selection to show different pictures for every combination of colors you can choose. So if I was to pick black and black a black_black.jpg picture will pop up and black_white.jpg will pop up for a black and white selection. Please if anybody can help I could really use it right now. Thanks! Code: <html>
<body>
<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg">
<br><br>
Barrels: -------- Inserts:<br>
Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();"> Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br>
White <input type = "radio" name = "col1" value = "white" onclick = "showImage();"> White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br>
Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br>
Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();"> Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br>
</form>
<br>
<br>
<script type = "text/javascript">
function showImage() {
var A = 0;
var B = 0;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
}
}
for (var u=0; u <document.myform.col2.length; u++) {
if (document.myform.col2[u].checked) {
B = document.myform.col2[u].value;
}
}
var x = A + "_" + B;
if (x>0) {
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;
}
}
</script>
</body>
</html>
Similar Tutorialshi. i'm using this script to replace text on a page loaded into another frame, called 'booker'. the script works when i use it on the same page, but i can't seem to get it to reference the other frame for some reason. it executed with 'body OnLoad' any ideas for what i'm doing wrong? thanks. Code: function myscript() {
input = 'Membership';
output='Service Fee';
top.booker.document.body.innerHTML = top.booker.document.body.innerHTML.replace(input,output);
Hello.. I'm in a Web Development basics class at my College. We are about two weeks in as we've blew through HTML and CSS. Anyway.. to the question. So for this class I need to make a website with terms and their definitions. The definitions have to be in Javascript and make them show up with an alert. The problem is, I can't figure out how to have unique functions that I can somewhat link with the button. Quote: <html> <head> <script type="text/javascript"> function show_alert() { alert('term definition ONE ') } </script> </head> <body> <input type="button" value="term definition ONE " onclick="show_alert()" /> <input type="button" value="term definition TWO " onclick="show_alert()" /> </body> </html> Making a new button would just link to the script that's in the <head> giving the same definition. It's almost like I need to give each function a variable that matches up with each button, since I have multiple terms.. I hope you get what I'm trying to say. I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance does any expert know how to pass parameters in the <script ..> tag? for instance; Code: <script type="text/javascript" src="script.js ?param1=val1¶m2=val2&etc "> in the javascript script.js, how would we read the params after the question mark? for example, google this; google shopping cart /v2_2/cart.js I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>
And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani I have a form that does not validate when in a modal. Here is the page: http://www.varsitytrainers.com/purchase1.html It works well. It does not work when viewed on this page: http://www.varsitytrainers.com/bosto...ltrainers.html - Then click "Apply Now" and then click "Featured Membership" then click "Submit" You will see that the validation does not take place. I have been banging my head against the desk for days now. Please help. OK i really hope someone can help me because this has put a complete halt to what I'm doing right now. i have various images in a 12x12 grid with names such as x1y1, x2y2, ect I need to check what x1y1's image SRC is. I have been trying stuff like this: var xpos = 1 var ypos = 1 var IMAGENAME = "x" + xpos + "y" + ypos blah = ('document.' + IMAGENAME + '.src') if (blah == "something.gif") { do what i want } Just doesn't work, nor has the 80 other things I've tried lol. Can anyone help me out? I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm The width of the original file was 845 px, I needed to change it to 235 px though. As I have knocked the size down of everything, I noticed the arrows are now not working correctly. The arrow only goes to the right once and to the left once, I need to it to go to the right and left multiple times. Here is the javascript file that I have been working with: Code: // gameday scroller
function scrollGameday(dir) {
var cssDir= (dir<0) ? 'right':'left';
var scrollWidth = 235;
var scrollSpeed = 235;
var scrollWrapLeft = parseInt($("#gameScroller").css("left"));
if(okScroll == false) {
return;
}
if(cssDir == "left") {
if($("#arrowRight").hasClass("disable"))
$("#arrowRight").removeClass('disable');
if(currentPane <= 1) {
return;
} else {
scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth));
okScroll = false;
$("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() {
okScroll = true;
});
currentPane = currentPane-dir;
if(currentPane <= 1) {
if(!$("#arrowLeft").hasClass("disable"))
$("#arrowLeft").addClass('disable');
}
}
}
if(cssDir == "right") {
if($("#arrowLeft").hasClass("disable"))
$("#arrowLeft").removeClass('disable');
if(currentPane >= paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
return;
} else {
scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth));
okScroll = false;
$("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() {
okScroll = true;
});
currentPane = currentPane-dir;
if(currentPane >= paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
}
}
}
checkCurrentPane(currentPane);
}
function checkCurrentPane(currentPane) {
alert('check');
if(currentPane == 1) {
if(!$("#arrowLeft").hasClass("disable"))
$("#arrowLeft").addClass('disable');
} else if(currentPane == paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
}
}
$("#gameScroller").each(function (i) {
var scrollWidth = 235;
var newLeftPos = (i * scrollWidth)+"px";
$("#gameScroller:eq("+i+")").css("left", newLeftPos);
var items = $('.game');
$('#gameScroller').css('width', items.length * items[0].offsetWidth + 'px');
$("#arrowLeft").click(function() {
scrollGameday(3);
return false;
});
$("#arrowRight").click(function() {
scrollGameday(-2);
return false;
});
});
if("#gameScroller") {
var okScroll = true;
var currentPane = 1;
var paneCount = Math.ceil(($(".game").length) / 10);
if(paneCount <= 1) {
$(".arrow").className = $(".arrow").className + ' disable';
} else if (paneCount > 1) {
$("#arrowLeft").addClass('disable');
}
preScroll();
}
function preScroll() {
var games = $('.game');
for(n=0; n<games.length; n++) {
if(games[n].className.match('active')) {
var currFrame = Math.floor(n/10);
scrollGameday(-currFrame);
}
}
}
This is the CSS file: http://www.msnsportsnet.com/content/ravens.css Thank you very much and any help is much appreciated. Can anyone look at the link below, and tell me why the infoWindow displays the same xml marker node for each marker Thanks Lee http://www.hotels.seotra.com/ I am getting an error: "document.getElementById("gender") is null" Any ideas how I can get this to work? Code: <head>
<script type="text/javascript">
var selected = document.getElementById("gender").selectedIndex;
var lname = document.getElementById("lastname");
var boyarray=new Array();
boyarray[0]="Joseph James";
boyarray[1]="Robert Michael";
boyarray[2]="Brian Shawn";
boyarray[3]="Joseph Duke";
var boymax=(boyarray.length - 1);
var boychoose = Math.round(Math.random() * boymax);
var girlarray=new Array();
girlarray[0]="Christine Louise";
girlarray[1]="Cheyenne Lynn";
girlarray[2]="Kelly Anne";
girlarray[3]="Julia Marie";
var girlmax=(girlarray.length - 1);
var girlchoose = Math.round(Math.random() * girlmax);
function randomname()
{
if (selected = "2") {
alert((girlarray[girlchoose]) + lname);
}
else if (selected="1") {
alert((boyarray[boychoose]) + lname);
}
else {
alert("Please select a gender.");
}
}
</script>
</head>
<body>
<form onsubmit="randomname(this);">
Last Name:<input type="text" name="lastname" id="lastname"/>
<br/>
Gender:
<select id="gender">
<option value="0">Please select a gender</option>
<option value="1">Boy</option>
<option value="2">Girl</option>
</select>
<br/>
<input type="submit" id="submit" name="submit" value="Submit"/>
</form>
</body>
Hi all, I have created the following page http://kylehouston.com/new/index_new.html I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work. I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen. Anyone got any advice? Thanks in advance! Kyle All, I have the following code: Code: var http_request = false;
function makePOSTRequest(url, parameters) {
alert(parameters);
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function getjob(obj) {
var poststr = "job_id=" + encodeURI( obj );
makePOSTRequest('getnextjob.php', poststr);
}
I call the getjob but doing the following: echo "<li><a href=\"#\" onclick=\"javascript:getjob($resultsetjob[job_id]); return false;\">$resultsetjob[name]</a></li>"; It's weird, only sometimes does it pass the variable and other times it doesn't. Is there a better way to do this?? Thanks in advance. I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm However, the width of that is 845 px and I wanted it to drop down to 650 px and make the arrows have the same effect as they did with the 845 px. First I moved the 845 to 650 in the css file, then changed the 845 to 650 in the JS files, I have been unable to figure this out though. If someone could please help that would be great! This is the JS file that I tried to edit: http://www.baltimoreravens.com/includes/jsbin/ravens.js This is the css file: http://www.msnsportsnet.com/content/ravens.css Someone tell me where I'm going wrong. I'm trying to print out the month/year ? Code: <html><head>
<SCRIPT language=JavaScript>
var dateNow = new Date();
var monthNow = dateNow.getMonth();
var yearNow = dateNow.getYear();
function MakeArray(n) {
this.length = n
return this
}
monthNames = new MakeArray(12)
monthNames[1] = "Janurary"
monthNames[2] = "February"
monthNames[3] = "March"
monthNames[4] = "April"
monthNames[5] = "May"
monthNames[6] = "June"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "Sept."
monthNames[10] = "Oct."
monthNames[11] = "Nov."
monthNames[12] = "Dec."
function customDate(oneDate) {
var theMonth = monthNames[oneDate.getMonth() +1]
}
</SCRIPT>
</head><body><script type="text/javascript">
document.write(theMonth + "/" + yearNow);
</script>
</body></html>
Hey, I'm trying to make some information from a database convert to JS Code: <?php
include ("Scripts/connection.php");
$qry1 = "SELECT * FROM news";
$result1 = mysql_query($qry1);
?>
<script type="text/javascript">
var pausecontent=new Array()
<?php
while($news = mysql_fetch_array($result1))
{
echo 'pausecontent[0]="<a href=\"news.php#'.$news['id'].'\">'.$news['news'].'</a><br />'.$news['news'].'!";';
}
?></script>
however I just see undefined... any ideas? Hello, I am researching an issue in a rather big app which displays pdf files in IE window. The issue is that inside javascript code we call 'window.setTimeout( win.focus() ...)' (for the child window), but it doesn't come into focus every time, seems a bit random when it does and does not come into focus. At present I wrote a much smaller app + javascript to reproduce the issue, but it does not manifest in same way. Specifically this is the confusing part: window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); the 'win' does move, but never comes into focus. Any ideas about why the focus function does not accomplish what I'm trying to do? Here's the code of my simplified app + html + javascript: JAVASCRIPT: Code: var win;
function f(s) {
website="http://machine/apache/jsfnu/mytest" + s + ".txt";
if (!win)
win = window.open( website , "thetest" , "toolbar=yes,resizable=yes");
else
{
win.url = website;
}
win.navigate(website);
win.focus();
window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" );
}
function emitApplet() {
document.write("<APPLET CODE=\"mytest.class\" archive=\"mytest.jar,netscape.jar\" NAME=\"myApplet\" MAYSCRIPT HEIGHT=1000 WIDTH=1000> </APPLET>");
}
function window_onUnload()
{
}
JAVA code: Code: import netscape.javascript.*;
import java.awt.*;
import java.awt.event.*;
public class mytest
extends java.applet.Applet implements ActionListener
{
Button nextButton;
Button prevButton;
int _page=1;
public void init() {
System.err.println("init started");
setLayout(new FlowLayout());
System.err.println("setLayout done");
nextButton = new Button("Next!");
System.err.println("next button created");
prevButton = new Button("Prev!");
System.err.println("prev button created");
add(prevButton);
System.err.println("prev button added");
add(nextButton);
System.err.println("next button added");
nextButton.addActionListener(this);
System.err.println("next button action");
prevButton.addActionListener(this);
System.err.println("prev button created");
}
public void actionPerformed(ActionEvent evt)
{
if (evt.getSource() == nextButton)
{
doButton(++_page);
}
else if (evt.getSource() == prevButton)
{
doButton(--_page);
}
}
public void doButton(int page)
{
JSObject win = JSObject.getWindow(this);
JSObject doc = (JSObject) win.getMember("document");
JSObject loc = (JSObject) doc.getMember("location");
String s = (String) loc.getMember("href");
String []args = new String[1];
args[0] = (new Integer(page)).toString();
win.call("f", args);
}
public void paint (java.awt.Graphics g)
{
g.drawString("Hello, World9!",50,25);
}
}
HTML: Code: <script type="text/javascript" src="StartTest.js"> </script>
<html>
<head>
<title>try</title>
</head>
<body bgcolor="#fdf8ed" text="black" language="Javascript" onload="window_onUnload()">
<center>
<script type="text/javascript">
emitApplet();
</script>
</center>
</body>
</html>
http://icant.co.uk/sandbox/countdown.html Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown? Hi This part of the script should ask the user which type of shape they'd like to calculate the area of, then convert whatever they enter to uppercase so that the test condition can be eventually falsified when the user enters 'c, C, s, S, r or R'. I've consulted the w3 school, and as far as I can tell I'm formatting it correctly. I think the problem may be in the syntax of the test condition. Code: while (shapeType != 'C' || shapeType != 'S' || shapeType != 'R')
{
shapeType = prompt("Which type of Shape would you like to find the area of?" + '\n' + "For a circle, enter C" + '\n' + "For a square, enter S" + '\n' + " For a rectangle, enter R");
shapeType = shapeType.toUpperCase();
}
However, firebug reports that 'shapeType is null'. How can this be? I've declared shapeType in the head as a global variable. Any ideas? Jenny |
|||||||