|
JavaScript - Couple Of Bugs I'm Not Sure How To Fix - Javascript Spoiler
I've put together a spoiler bb code, and I've noticed 2 bugs with it - I'm thinking that it's to do with the javascript end of the code.
when the code is used, the page has to be refreshed for the spoiler to open and work correctly, also if there is 2 spoilers on the same page, if i click the second one, it opens the first one and not itself. I didn't type the javascript code I only did the html and css end, so I'm not sure what's going on. If any of you can help me I'd be really grateful. Here is the code: Code: <html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.show
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:25%px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
.hide
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
min-width:25px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
document.getElementById(id).style.display = '';
}
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<div class="spoiler"><img src="http://i.imgur.com/s5tS1.png" align="left"><img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div id="show"><input type="button" class="show" onclick="hide('show'); show('hide'); showSpoiler(this);" value="Show" />
</div>
<div id="hide" class="inner" style="display:none;">
<input type="button" class="hide" onclick="hide('hide'); show('show'); showSpoiler(this);" value="Hide" />
<br /><br />{param}<br /></br>
</div>
</div>
</body>
</html>
Similar TutorialsHey all, I'm trying to fully understand javascript and have a couple of questions I was hoping you could answer for me. I'm working through a book and in the book I'm creating a Bingo card that generates a random number. I'm pasting the full script below just in case it's needed. Code: function initAll () {
for(var i=0; i<24; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare= "square" + thisSquare;
var colPlace= new Array (0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis=colPlace[thisSquare] *15;
var newNum=colBasis +getNewNum()+1;
document.getElementById(currSquare).innerHTML=newNum;
}
function getNewNum() {
return Math.floor(Math.random() *15);
}
//-->
</script>
1. What does the [thisSquare] mean in this line of code that is bolded? I mean, I know thisSquare is whatever i is, but am I multiplying it by colPlace or what? 2. Lastly I'm confused by this part of the above code Code: var newNum=colBasis +getNewNum()+1; Why add the +1? I mean, i think getNewNum is set to pull a random number between 1 and 14. If you want to pull a number between 1 and 15, why not multiple Math.random() *16 instead of 15. Am i missing something? Sorry, I'm just not understanding why use the +1 I've been trying to make a spoiler code and it doesn't work. What did I do wrong here? PS I am a Javascript idiot and I don't know much so here goes . . . Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{background:#fff;color:#333;padding:0;margin:0;font:10px century gothic;}
.spoiler{margin:5px;}
.postlinksbar{background:#abcdef url(http://stereowired.exofire.net/jargon.png) repeat-x top left;border:1px solid #9abcde;padding:3px 24px;font-size:10px;font-weight:bold;color:#334498}
.toggle{background:#e7e7e7;border:1px solid #d7d7d7;margin-top:1px;padding:3px;}
</style>
</head>
<body>
<div class="spoiler">
<div class="postlinksbar" onClick="if(this.parentNode.childNode.getElementsByTagName('div')[1].style.display='none'){this.parentNode.childNode.getElementsByTagname('div')[1].style.display='block'} else{this.parentNode.childNode.getElementsByTagname('div')[1].style.display='none'}">Spoiler (Click to Toggle)</div>
<div class="toggle">asdasdasdasdasdasdasd</div>
</div>
</body>
</html>
the .postlinksbar if clicked is going to hide and show .toggle. That's how I planned to do it. not sure anything wrong with my IE8 browser or 'createTextNode' method. here comes the bug: if you directly do this document.body.appendChild(document.createTextNode(" "+"a")), then there won't be any spaces before 'a' however, if the argument of that method is changed to "a"+" "+"a", this time it will be ok. why it cannot create the leading spaces before any non-whitespace string? thx in advance. Hi We have a js heavy web-ui. In the production environment it runs minimized, composed from 10 or so js files. When we have a js-error of some sort (we have about 100 users and growing) we write the window.onerror information to a database. Only, it is not very helpful since linenumbers mean nothing in the intelligeble code. Is there a minifier that tags the result that would allow translation of linenumbers? Is there some other method people use to solve this problem? I did search the forum before and found nothing on this topic. Thanx for any advice /klas I'm doing an assignment and I'm trying to get these codes to work but nothing works. Can anyone help please? Code: <script type = "text/javaScript">
var animal = prompt("Please enter the name of an animal (elephant would be good!)","");
animal = animal.toUppercase();
if (animal="ELEPHANT")
{
alert ("Elephants are very large and also gentle.");
alert ("Have you ever seen an elephant in the circus?");
}
else
{
alert("You have entered an unknown animal which is called a " + animal);
alert("This program will self-destruct in 10 seconds");
alert(" 10 - 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 ...");
}
</script>
Code: <script type = "text/javaScript">
var rating = prompt("Enter a movie rating (G, PG, R...)","");
rating = rating.toLowercase()
switch (rating)
{
case "g":
alert("G means this movie is rated for General Audiences");
break;
case "pg":
alert("PG means this movie is rated for General Audiences with Parents attending");
break;
case "r":
alert("R means this movie is rated for Restricted Audiences. May contain violence.");
break;
default: alert ("This program is rated G. We are not allowed to comment on the movie rating " + rating);
}
</script>
I have an ajax member search form that I'm just about done with but I have a couple of really irritating firefox issues. The first one is the lack of support of the click() method. I added the following but it still doesn't want to work: Code: <script>
if(typeof HTMLElement != 'undefined' && !HTMLElement.prototype.click) {
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}
</script>
The second issue I'm having is with dependent dropdown selects not hiding in firefox. This seems to be due to the other functions that need to trigger onload and is dependent on what order it's loaded. Here's how I'm handling the onload functions: Code: <script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
ajaxFunction(document.getElementById('country').value);
handleOnChange(country);
setupDependencies('cbcheckedadminForm', 'adminForm', 'locationsearch');
handleOnChange2(cb_state);
});
</script>
I don't have an issue with either of these in chrome. IE is a WHOLE other story, it's all kinds of wonky there. I still need to go through and do some debugging for that. Any quick ideas off hand on these two issues? I'll try and post the full php file in a reply. Hey guys, as of now these lines of code... Code: function lettergrade(grade) {
if (grade >= 9){
document.write("A")
}
else if (grade >= 8){
document.write("B")
}
else if (grade >= 7){
document.write("C")
}
else{
document.write("F | Warning, your letter grade is very low.")
}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald))
}
...are supposed to display the "____'s letter grade on the test is: A" or the respective letter, but instead it is displaying this... ABF | Warning, your letter grade is very low.Sam's letter grade on the test is: undefined, Sally's letter grade on the test is: undefined, Donald's letter grade on the test is: undefined Any ideas as to why this is happening? I am a novice javascript user so if there are any good alternatives that are pretty basic i'm open to ideas. Thanks guys. Hi there, I've been a web designer for a while and have always used basic javascript in my pages, but decided recently that I would get right into the nitty gritty, however I'm having a problem with some really basic code. Secondly, the book which I'm using is from 2005 and is extolling the virtues of event listeners and so on, is this still the accepted means of handling events? And thirdly, are there still chasms between the browsers in compatability in this area? I'm aware IE has become more and more compliant recently, is it still necessary to write code to cover different browsers or does it all pretty much work nowadays (besides older browsers)? So, to the code! Basically, the browser doesn't get into the function to display the alert(), and i'm not sure why. (Told you it was basic ) Code: <html>
<head>
<title>Javascript Testing</title>
<script type="text/javascript">
<!--
function aKeyWasPressed(e){
alert('Sausages!');
}
var textarea = document.getElementById('myta');
textarea.addEventListener('keyup', aKeyWasPressed, false);
-->
</script>
</head>
<body>
<textarea id="myta"></textarea>
</body>
</html>
Thanks! hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers! i have a box: <img id="imgSearch" src="" alt="Websites" /> <input type="button" value="Toggle Search" id="btnSearch" /> ^being the button to toggle between websites. basically i'd like this button to toggle between different websites when clicked. secondly: changing span tag colors html code: Traffic Light: <span id="trafficLight"></span> <input type="button" value="Prevent Accident" id="btnTraffic" /> i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green and last: changing the font in a bold tag bold by pressing a button html code: (note, the font weight in normal in css for bold) <b>i want this bold when you hit the button!</b> <input type="button" value="Set Bold" id="btnBold" /> Hello there guys! Thanks for taking time to view this thread. It's appriciated! I found a really nice menu (Javascript, JQuery) im not so high tech on this myself, and not the best coder either but whenever I use this menu it gives the login box on the website an error, it doesn't let people login.. I've tried to localize the error myself, but I just dont know how to fix it, I think the issue is that the site system i use doesn't support these type of scripts which gives the login errors! I'm currently using a free website system, which allows you to customize anything you want called "uCoz" The menu i used was: http://www.dynamicdrive.com/dynamici...enu-glossy.htm And I think it's the jquery that gives the login box errors.. I'm thankfull for answers if anyone knows 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 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. 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... 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 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? 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 All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero |
|||||||