Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
HTML Spoiler Help
Topic Started: Mar 15 2014, 12:18 PM (329 Views)
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Board using the code on: http://w11.zetaboards.com/Guardians_of_the_Orb/index/

Can anybody explain to me why spoilers are broken on this webpage?
They will display but when I click the button it doesn't do anything.

Code: Without Spoiler
 

<div id='shopinfo' class='meta_box' style='display:none;text-align:center;'></div>
<div class='category'><table class='cat_head'><tr><td><h2>Shop</h2></td></tr></table><table id='shoptable'>
<tr><th style='width:1px;'></th><th>Item</th><th>Description</th><th>Price</th><th style='text-align:center;'>Qty</th><th ></th></tr>
</table></div>


<script type='text/javascript'>
// Advanced Shop By Quozzo
pointsname="Credits"
pointsicon = "¤"
var shopforum = "4034044";
var shoptopic = "10119874";
var shopitem = [
//["img","Name","Description",Price,"additional info"]
["http://z5.ifrm.com/30294/18/0/f5261944/NameChange2.gif","Name Change","You are allowed 1 free name change, after that you must buy one here!",500,"Please tell us what you would like to change your name to!"],
["http://z5.ifrm.com/30294/18/0/f5262029/Gift-Orbs.gif","Gift Orbs","Did somebody help you? Do you want to make somebody's day? Gift them some Orbs here!",0,"Please tell us how many Orbs you would like to gift and who you would like to gift them to!"],
["http://z5.ifrm.com/30294/18/0/f5262087/Custom-Title.gif","Custom Title","Do you want to change your title? Well purchase one here!",125,"Please tell us what you would like your new title to be!"],
["","Thread Color","Do you want your threads stand out? Well add some color to them!",3750,"What color do you want to use? Hex Colors only and make sure to see if that color is in use!"],
["","Dark Theme","Would you like to look at the site from a darker perspective? Well then this is for you! (Preview Below!)",1500,""],
["","Light Theme","Would you like to look at the site from a lighter perspective? Well then this is for you! (Preview Below!)",1250,""],
];
var sendingtext = "<big><strong>Sending Purchase</strong></big>";
var senttext = "<big><strong>Purchase Complete, Have a nice day</strong></big><br />It may take upto 24 hours for your transaction to be processed.";

for(i=0;i<shopitem.length;i++){
if(shopitem[i][0]){shopitem[i][0]="<img src='"+shopitem[i][0]+"'></img>"};
$('#shoptable').append("<tr><td>"+shopitem[i][0]+"</td><td><strong>"+shopitem[i][1]+"</strong></td><td>"+shopitem[i][2]+"</td><td style='width:10%;'><span style='display:none;' class='singlecost'>"+shopitem[i][3]+"</span>"+pointsicon+"<span class='itemcost'>"+shopitem[i][3]+"</span></td><td style='text-align:center;width:10%'><a class='decrease' style='cursor:pointer;float:left;'>[-]</a> <a class='currentqty' style='cursor:pointer;'>1</a> <a class='increase' style='cursor:pointer;float:right;'>[+]</a></td><td style='width:10%;text-align:center;'><button class='purchase'>Purchase</button><span style='display:none'>"+shopitem[i][4]+"</span></td></tr>");
};

senttime=0
$('.purchase').live('click',function(){
$('#extrainfo').remove();
conf=false;
itemqty = $(this).parent().prev().find('.currentqty').text();
itemprice = $(this).parent().prev().prev().find('.singlecost').text();
totalprice = $(this).parent().prev().prev().find('.itemcost').text();
itemdesc = $(this).parent().prev().prev().prev().text();
itemname = $(this).parent().prev().prev().prev().prev().text();
if(!$('#top_info:contains("Guest")').length){
nowtime = Math.ceil((new Date().getTime())/1000);
iteminfoneeded = $(this).next().text();
if(nowtime-30<senttime){
alert("Please wait a few seconds before purchasing something else");
}else if(!iteminfoneeded){
conf=confirm("Purchase "+itemqty+"x "+itemname+" for "+pointsicon+totalprice);
}else{
conf=true;
}
if(conf){
if(!iteminfoneeded){
sendpurchase(itemqty,itemprice,totalprice,itemdesc,itemname);
}else if(!$(this).parent().parent().next().find('textarea').length){
$(this).parent().parent().after("<tr id='extrainfo'><td colspan='5'>"+iteminfoneeded+"<br /><textarea rows='4'></textarea></td><td style='text-align:center;'><button id='confirm'>Confirm</button></td></tr>");
};
};
};
});

function sendpurchase(itemqty,itemprice,totalprice,itemdesc,itemname,iteminfo,iteminfodesc){
if(iteminfo){iteminfo="[hr]"+iteminfoneeded+": "+iteminfo}else{iteminfo=""}
$('#shopinfo').show().html("<span>"+sendingtext+"</span>");
purchased = "Item Name: "+itemname+"[hr]Description: "+itemdesc+"[hr]Price: "+pointsicon+itemprice+"[hr]Qty: "+itemqty+"[hr]Total Price: "+pointsicon+totalprice+iteminfo;
$.get(main_url+"post/?mode=2&type=1&f="+shopforum+"&t="+shoptopic,function(d){
$.post(main_url+"post/",{mode:2,type:1,f:shopforum,t:shoptopic,emo:1,ast:$("input[name=ast]",d).val(),xc:$("input[name=xc]",d).val(),post: purchased,q:0,qhash:$("input[name=qhash]",d).val(),sd:1,fcolor:'',helpbox:'Quote Text',zbpost:0,attach1:'',mod_opts:'',sig:1,post_submit:''});
$('#shopinfo').html("<span>"+senttext+"</span>");
senttime = Math.ceil((new Date().getTime())/1000);
$('#extrainfo').remove();
});
};

$('#confirm').live('click', function(){
itemqty = $(this).parent().prev().find('.currentqty').text();
itemprice = $(this).parent().parent().prev().find('.singlecost').text();
totalprice = $(this).parent().parent().prev().find('.itemcost').text();
itemdesc = $(this).parent().parent().prev().find('td:eq(2)').text();
itemname = $(this).parent().parent().prev().find('td:eq(1)').text();
iteminfo = $(this).parent().prev().find('textarea').val();
iteminfodesc = $(this).parent().prev().text();
sendpurchase(itemqty,itemprice,totalprice,itemdesc,itemname,iteminfo,iteminfodesc)
});

$('.increase').live('click',function(){
thisqty = $(this).parent().find('.currentqty').text();
plusqty = thisqty*1+1;
$(this).parent().find('.currentqty').text(plusqty);
singlecost = $(this).parent().prev().find('.singlecost').text();
totalcost = singlecost*plusqty;
$(this).parent().prev().find('.itemcost').text(totalcost);
});

$('.decrease').live('click',function(){
thisqty = $(this).parent().find('.currentqty').text();
if(thisqty<=1){alert("You cannot select an amount lower than 1");
}else{
minusqty = thisqty*1-1;
$(this).parent().find('.currentqty').text(minusqty);
singlecost = $(this).parent().prev().find('.singlecost').text();
totalcost = singlecost*minusqty;
$(this).parent().prev().find('.itemcost').text(totalcost);
};
});

$('.currentqty').live('click',function(){
currentqty = $(this).html();
$(this).replaceWith("<input class='setqty' size='2'/>");
$('.setqty').focus();
});

$(".setqty").live('focusout', function() {
$(this).replaceWith("<a class='currentqty' style='cursor:pointer;'>"+currentqty+"</a>");
});

$('.setqty').live('keypress', function(e) {
if(e.keyCode==13){
setqty = $('.setqty').val();
if(!setqty){setqty=currentqty};
if(isNaN(setqty)){setqty=currentqty};
if(setqty<1){setqty=currentqty};
singlecost = $(this).parent().prev().find('.singlecost').text();
totalcost = singlecost*setqty;
$(this).parent().prev().find('.itemcost').text(totalcost);
$(this).replaceWith("<a class='currentqty' style='cursor:pointer;'>"+setqty+"</a>");
};
});
</script>
<br>
<a href="http://i.share.pho.to/237ccbe9_o.png"><font size="3"><b>Dark Theme Preview!</b></font></a>
<br>
<br>
<a href="http://i.share.pho.to/6c6410b5_o.png"><font size="3"><b>Light Theme Preview!</b></font></a>




Here is the layout of the spoiler I wanted to use at the bottom of the shop
Code:
 

<div class="category">
<table class="cat_head">
<tr><td><h2>View Requirements</h2></td></tr></table>
<div class="spoiler">
<button type="button" onclick="showSpoiler(this);" value="Submit">Show/Hide Rules</button>
<div class="inner" style="display:none;">
<table><font face="Verdana, Verdana" size="2" color="#717171">
<tr><td><p> • <font color="#ff0000"><b>Some text here</b></font></p></td></tr>
</table>
</div></div></div>
Edited by Kankuro, Mar 15 2014, 12:20 PM.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Are you saying you want to recreate a
Spoiler: click to toggle
on a webpage with HTML?
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Enjoy forums? Start your own community for free.
Learn More · Sign-up Now
« Previous Topic · ZetaBoards Support · Next Topic »
Add Reply