New Topic/Question
Reply
I'm practicing CSS and Javascript and I have amended a game I found online with the help of fellow members.
now I wanted to allow a user to change the background of the webpage, so I found a simple Jquery script online to allow me to do this.
first off I wanted to float the div to the right, but the div overflowed the main div, so I gave it a margin and made it float outside the divs below for the meantime.
here is a picture to explain:
Uploaded with ImageShack.us
why hasn't it just shifted accross? why is it overflowing?
then I wanted to change the font colour but css wouldn't allow me, unless I used an internal stylesheet (I guess this is to do with inheritance?)
I tried to create a class, the jquery script said if making a class use this:
$("csschanger.link").attr("href",$(this).attr('rel'));
but then my javascript didn't work, and the inheritance was still there. I would really like to know why this was and how to counteract it (is it .csschanger a, I read that somewhere).
here is the code in full:
<style type="text/css">
.acard {
font-size: 50px;
}
#csschanger {
float: right;
text-decoration:none;
margin-top: 50px;
height: 90px;
width:150px;
padding: 5px;
}
#csschanger h1 {
color:#FFFFFF;
font-size: 10pt;
}
#csschanger a {
text-decoration:none;
}
</style>
<script>
chosencards = [];
kings = 0;
function pickCard(){
numbers = [
["A", "Waterfall"],
["2", "Choose! (Pick someone to drink!)"],
["3", "Me! (You have to drink!)"],
["4", "W***e! (All Girls Drink)"],
["5", "Thumbmaster"],
["6", "D***s! All Guys Drink"],
["7", "Toilet Card"],
["8", "Mate"],
["9", "Rhyme"],
["10", "Categories"],
["J", "Make a rule!"],
["Q", "Questionmaster"],
["K", "Add some drink to the middle pint!"]
];
suits = [
["♥", "#FF0000"],
["♦", "#FF0000"],
["♣", "#000"],
["♠", "#000"]
];
var number = Math.floor(Math.random()*numbers.length);
var suit = Math.floor(Math.random()*suits.length);
if(chosen(number + "" + suit)){
pickCard();
}else{
$('#selection').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");
$('#chosen').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span> " + $('#chosen').html());
$('#meaning').html(numbers[number][1]);
chosencards.push(number + "" + suit);
if(numbers[number][0] == 'J'){
$('#rules').html($('#rules').html() + "+ " + prompt("Please enter a rule") + "<br />");
}
if(numbers[number][0] == '5'){
alert('THUMBMASTER');
}
}
if(chosencards.length == numbers.length*suits.length){
$('#newcard').replaceWith($("<div>").html("You have ran out of cards!"));
}
}
function chosen(x){
var a = false;
for(i = 0; i < chosencards.length; i++){
if(x == chosencards[i]){
a = true;
break;
}
}
return a
}
$(document).keypress(function(e){
if(e.which == '13' || e.which == '32'){
pickCard();
}
});
$(document).ready(function(){
$('#newcard').click(function(){
pickCard();
});
});
</script>
<script>
$(document).ready(function() {
$("#csschanger a").click(function() {
$("link").attr("href",$(this).attr('rel'));
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>You have just picked up:</p>
<div id='selection'></div>
<br />
<p>You have already picked:</p>
<div id='chosen'></div>
<br />
<p>This card means:</p>
<div id='meaning'></div>
<br /><br />
<p>Current Rules:</p>
<div id='rules'></div>
<br /><br />
<a href='#' id='newcard'>Pick a Card</a><br/><br/>
<a href='Ringoffire.mp3' target='blank'>Play the song!</a><br/><br/>
<a href='rules.html' target='blank'>See the Rules</a><br/>
<div id="csschanger">
<h1>Choose Background:</h1>
<a href="" rel="ringoffire.css"> <img src="images/greenicon.jpg" width="24" height="24"</a>
<a href="" rel="ringoffire2.css"> <img src="images/redicon.jpg"width="24" height="24"</a>
<a href="" rel="ringoffire3.css"> <img src="images/blueicon.jpg"width="24" height="24"</a>
<a href="" rel="ringoffire4.css"> <img src="images/blackicon.jpg"width="24" height="24"</a>
<a href="" rel="ringoffire5.css"> <img src="images/pinkicon.jpg"width="24" height="24"</a>
</div>
<div id="news">
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>
thanks in advance.
This post has been edited by Addio569: 12 February 2013 - 05:25 AM
MultiQuote
| 