this is my first question on Stack Overflow, I'm new to Javascript (have been teaching myself Python to get a feel for coding) and thought I'd try my hand at a simple web app to see how easy it is to translate my knowledge of Python into Javascript.
Basically the app will let you know when your favourite fruit etc is in season. So I have a list of checkboxes on one page 'fruitpicker.html' and corresponding images on another 'seasonalguide.html' (The images are just pictures of a calendar with the fruits season shaded etc).
I have a cookie that persists the checkbox state and a piece of external JS that toggles image visibility depending on the state of its corresponding checkbox.
Most of the cookie someone else was using on the web, so it works great, however the image vis JS is giving me trouble.
I've written what I think it should be but it didn't work and no matter how much I tinker around with it, nothing happens.
I'm sure it's something really dumb but anyway, here's the code...
The broken image vis JS:
function toggleVisibility(checkId, imageId) {
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
if (checkEl.checked) {
imgEl.style.visibility="hidden";
imgEl.style.display="none";
}
else {
imgEl.style.visibility="visible";
imgEl.style.display="inline-block";
}
}
By the way, if the line: var checkEl = document.getElementById(checkId);
is deleted the code works but image state doesn't persist. This is as far as I have gotten.
A few of the checkboxes in fruitpicker.html:
<html>
<head>
<title>Fruit Picker</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body onload="restorePersistedCheckBoxes();">
<label for= "chklogo">Braeburn</label>
<input type= "checkbox"
id= "chkBraeburn"
onChange= "toggleVisibility('braeburnItem');
toggleVisibility('braeburnSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Fuji</label>
<input type= "checkbox"
id= "chkFuji"
onChange= "toggleVisibility('fujiItem');
toggleVisibility('fujiSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Golden Delicious</label>
<input type= "checkbox"
id= "chkgolldenDelicious"
onChange= "toggleVisibility('goldenDeliciousItem');
toggleVisibility('goldenDeliciousSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Granny Smith</label>
<input type= "checkbox"
id= "chkGrannySmith"
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
persistCheckBox(this);"/><br/>
</body>
</html>
And here is the Seasonal Guide page:
<html>
<head>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="imageVisibility.js"></script>
</head>
<body>
<img id="imgGuide"
src="Images/Calendar/calendarHeader.png"
align="left"/>
<img id="braeburnItem"
src="Images/Produce/Fruit/BraeburnApple.png"
style="float:left; display:none;" />
<img id="braeburnSeason"
float="top"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none"/>
<img id="fujiItem"
src="Images/Produce/Fruit/FujiApple.png"
style="float:left; display:none;" />
<img id="fujiSeason"
float="top"
src="Images/InSeason/InSeasonMar.png"
align="left"
style="display:none;"/>
<img id="goldenDeliciousItem"
src="Images/Produce/Fruit/GoldenDeliciousApple.png"
style="float:left; display:none;"/>
<img id="goldenDeliciousSeason"
src="Images/InSeason/InSeasonFeb.png"
align="left"
style="display:none;"/>
<img id="grannySmithItem"
src="Images/Produce/Fruit/GrannySmithApple.png"
style="float:left; display:none;"/>
<img id="grannySmithSeason"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none;"/><br>
<table width="170px" height="70px">
<tr>
<td>
<a href="Main.html" id="back" title="about" class="button">
<img src="Images/Buttons/backButton.png" align="right">
</td>
</tr>
</table>
</body>
</html>
The question was getting long so I didn't include the cookie, but I can if it's useful.
Any help is appreciated, Thanks
I'm noticing two issues here.
First off, you're using two separate pages, but document.getElementById can only access the elements of the page you're on. So, your lines:
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
have to fail, because they are trying to access elements in the two pages. Whichever page you're running the script on, one of those lines will return null. Your question doesn't describe how the two separate HTML files relate to each other, so I can't help you fix this (Does the first load the second whenever a checkbox is clicked, or are the two pages loaded in frames or iframes of a parent page?).
The second issue is that your toggleVisibility function is defined with two parameters, but your code (for example):
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
calls the method (twice) with only one parameter. If we're talking about the same function (you might have a different function definition on each of the two pages), then the function can never identify the correct image, because the imageId is never supplied.
Related
Here is the radio selection:
<ul id="radio-attribute" class="radio-attribute">
<li class="radio-attribute">
<label for="1" class="radio-attribute">
<input type="radio" id="1" name="Choose color" value="36" onClick="change_image(this.id)">
<img src="images/Red.jpg" alt="Red SE1017" title=" Red SE1017 " width="25" height="25" />
</label>
</li>
<li class="radio-attribute">
<label for="2" class="radio-attribute">
<input type="radio" id="2" name="Choose color" value="157" onClick="change_image(this.id)">
<img src="images/Orange.jpg" alt="Orange" title=" Orange " width="25" height="25" />
</label>
</li>
</ul>
This works fine.
I am looking to swap the images displayed based on the radio selection. The radio selection will vary so I was planning to use the id for this.
The display container:
<div id="piGal" style="float: left;">
<a href="http://www.example.com/images/main.jpg">
<img src="images/main.jpg" alt=" Seals" title=" main image " width="250" height="106" />
</a>
</div>
This displays fine on initial load.
I am trying to use an array I build dynamically with php so the javascript looks like this:
function change_image(radioID) {
var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
document.getElementById("piGal").innerHTML = "<img src='images/'+ images[radioID]>";
}
I can get this working using AJAX, but it will not allow me to have a pop up with it, rather will open in a new page. I have been trying to use this so I can use a modal. I am very new to javascript like this though.
First of all, if this form should be sent to php I strongly discourage you to use names with spaces. I once experienced some kind of problems with php and I still don’t know why.
Your problem might be in change_image():
function change_image(radioID) {
var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
document.getElementById("piGal").innerHTML = "<img src=\"images/"+ images[radioID] +"\" />";
}
You haven’t generated the right HTML code for the img. You were making a mess with HTML attribute quotes and JavaScript string quotes. Try it now.
Now if
image[radioID] == "main.jpg"
JavaScript will generate
<img src="images/main.jpg" />
Which is correct HTML. Your code would generate the string as is, which is not correct HTML, and your browser fails silently.
**EDIT: ** to open the popup:
window.open("main.jpg", "imgWindow",
"location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable=no");
The first argument is the URL of the file to open, the second argument is a unique name for the window (if you open another file with the same window name, the same window will be selected), the third argument is a list of parameters separated by commas (I guess the names are intuitive). You can put it in a function callable on the onClick event of the img tag your creating in change_image()
I am extremely new to web programming, so please be patient as I am sure this is a basic question. I studied HTML and CSS, and began Javascript yesterday. I am unable to get this code to run correctly.
The way I was thinking to design it is to have a series of pictures 1.jpg, 2.jpg, 3.jpg etc and it would show one picture at a time. When you click a button it would go to the next picture using an incrementor.
I am looking first of all to make this work with as few changes as possible so I can see what I messed up on (learning and all that) and then I am sure there are shortcuts I could use which I'd love to learn. Please help if you can.
<html>
<head>
</head>
<body>
<script>
var picount=1;
document.write("<center>");
document.write("<img src=" + picount + ".jpg>");
document.write("</center>");
function upCount()
{
picount=picount+1;
}
</script>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>
</body>
</html>
You need to update the .src property on the image so it will load a new image. Here's one way to do that:
<script>
var picount=1;
document.write("<center>");
document.write("<img id='picture' src=" + picount + ".jpg>");
document.write("</center>");
function upCount() {
picount=picount+1;
document.getElementById('picture').src = picount + ".jpg";
}
</script>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>
And, in this code, there's really no reason to use document.write() to write out the initial HTML. It might as well be static HTML in the page like this:
<script>
var picount=1;
function upCount() {
++picount;
document.getElementById('picture').src = picount + ".jpg";
}
</script>
<center>
<img id="picture" src="1.jpg">
</center>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>
I am trying to print a page with window.print but it ain't working in all the browsers.
This is the code that i am using:
<div class="user_buttons">
<!--Test 1-->
<IMG SRC="images/print.png" BORDER="0"
<!--Test 2-->
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
<!--Test 3-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<!--Test 4-->
<img src="images/print.png" onclick="window.print()">
<div><img src="images/overzicht.png" title="Terug naar overzicht"></div>
</div>
As you can see i am trying multiple solutions given by the internet. What is frustrating is that those codes are working on the demo sites but they aren't on my page. I post my code in JSF. The JSF example will not be a working example but it will have the entire code in the javascript area. The link for the entire code is here: http://jsfiddle.net/7bRNu/
I finally got it. It was a very painfull process of searching errors in a huge mess of code. The next time you ask a question on stackoverflow, please make sure that you broke the problem down into smaller pieces and post only the code that you think is probably the cause of your problem.
In the very bottom of your entire code, there is a little script-section in which it says:
var print = document.getElementById("print").value;
You are in the global scope, meaning that every variable you declare will be a property of window. Therefore, by writing print = you actually redefine window.print. Change the name of this variable and you should be good. The following line is only an example. You can choose whatever variable name you like. Just don't use print.
var printValue = document.getElementById("print").value;
Here is one method isolated:
http://jsfiddle.net/5PumN/
<IMG SRC="images/print.png" BORDER="0"
It works just fine here.
MY HTML is something like this:
<div id="paj_container" class="container">
<div class="three_paj_els">
<div id="1" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever.png" />
</div>
<div id="2" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever2.png" />
</div>
<div id="3" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever3.png" />
</div>
</div>
</div>
To spare you flipping through more code, pretend each of the .a_paj_element divs is a separate page in my JQuery pagination.
To decrease page load time my plan is to shove the images on the pagination into those hidden input types' values. When the page is visible, JQuery will grab those values and use the replace with function to replace them with tags so the images load as you flip through the pagination pages instead of all at once. Here's what I've been trying to do to achieve this:
var currentPage = $('.three_paj_els:visible');
currentPage.children('.listed_hidden_img').each(function() {
var the_image_SRC = $(this).val();
$('.listed_hidden_img').replaceWith('<img src="'+the_image_SRC+'" />');
});
Basically I'm trying to get the .listed_hidden_imgs replaced only in the current visible .three_paj_els
I've done this with before with lightboxes/modals to decrease load time on pages with high resolution pictures it works well on that so I figured that this would work in this application too.
Thanks a bunch for reading this far and thanks in advance to anyone who can help correct my code.
-Mike
var the_image_SRC = $(this).attr('src');
hey Guys,
I am trying to write dynamic html bean using java script
but I keep geting the "function is not found" JS error when I press the button ..
here is a sample code
<html>
<html:form action="loginAction.do" >
<head>
<script type="text/javascript">
function test(){
document.getElementById('dd').innerHTML =
"<html:text property='pid'/>";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="button" value="addprod" onclick="test()"/>
</td>
</tr>
<tr>
<td align="center">
<div id="dd"></div>
</td>
</tr>
</table>
</html:form>
</body>
</html>
I don't know about the
<html:form action="loginAction.do" >
where it should be located
I tried to locate it within the <body>
but I got a big exception due to writing <html:text property='pid'/> in JavaScript outside the <html:form>
...
need your help,
Regards,
I think struts is trying to parse the <html:text /> as a tag in your script, rather that just a javascript string. Try moving the <html:form action="loginAction.do" > into the body AND the <script> within the <html:form> similar to this fiddle http://www.jsfiddle.net/pL4Aq/1/
However, it works in the fiddle because it is just straight HTML... I don't think what you are trying to do will work. <html:text > is a custom tag that gets processed on the server, does a bunch of stuff, and then generates HTML for you. You will never actually see <html:text> if you view the source from your browser, even though it is in your jsp.
You might want to try changing the <html:text > to a straight <input type="text"> tag (in which case, you could just move the <html:form> into the body and leave the script where it is).
I am completely agreed with what Mike is saying.
Writing <html:text> inside javascript is useless since javascript is executing on client side while struts is required to translate this tag to html tag.
Better to write <input type="text"> inside javascript and keeps its name as "prop" if you want struts to fill the value of that text inside the form bean property "prop". Keep the <html:form in body tag. This will work for you.
It should work in a <body> tag.