Jump to content
Can't remember your login details? Read more... ×
17

Please help me propose / get this darn form to work

Recommended Posts

Hey everyone, I need massive help :O

 

This Friday I plan to propose to my girlfriend, and as part of the overall arrangement I thought I'd create a little site. Basically, the idea is to have a little quiz/form with answers only she would know. When she completes the quiz it gives her directions to walk to the balcony where she'll see a message in some flaming wicks and wax.

 

The problem is that I'm at my wits end trying to get the form for the quiz to work. You can see what I've gotten so far here (I'm using an installation of WordPress):

 

http://iloveesther.roncya.com/quiz1/

 

There are going to be more questions/pages and everything is placeholder for testing- but for now I thought it would be wise to see if I could even do one question. What I'm trying to do is to replace the radio buttons with images the way it has been done here:

 

http://jsfiddle.net/HVk7d/18/

 

I've spent days trying to get it to work but still can't get it to work. However, after a lot of testing I was able to conclude that the problem is Javascript and jQuery based. I'm not too great at jQuery so I don't know what this means, but it seems like I might be able to get it to work if I can "wrap the code so it will run in onLoad window event". If that means something to you, please enlighten me! I've been loading the Javascript/jQuery code either in the head or the body and that seems to do Bob all.

 

The second thing I'm failing at is getting the images/buttons to line up inline/in a row/horizontally/side by side. No luck so far either. Any suggestions?

 

Thanks in advance and trust me- I really appreciate it :)

 

HTML:

 

<div type="radio" id="quiz">

	<input type="radio" name="quiz1" id="quiz1A" value="A" />
	<label for="quiz1A" class="Here1"></label>

	<input type="radio" name="quiz1" id="quiz1B" value="B" />
	<label for="quiz1B" class="Here2"></label>

	<input type="radio" name="quiz1" id="quiz1C" value="C" />
	<label for="quiz1C" class="Here3"></label>
	
</div>

<div id="submitButton">
<input type="submit" value="Submit" />
</div>

</form>

 

CSS:

 

#quiz .input_hidden {
	position: absolute;
	left: -9999px;
}

#quiz label {
	display: inline-block;
	cursor: pointer;
}

#quiz .Here1 { 
	background:url(http://iloveesther.roncya.com/wp-content/uploads/2012/07/truePlaceholder.png) no-repeat 0px 0px;
	display:block;
	width:210px;
	height:165px;
}

#quiz .Here2 { 
	background:url(http://iloveesther.roncya.com/wp-content/uploads/2012/07/truePlaceholder.png) no-repeat -215px 0px;
	display:block;
	width:210px;
	height:165px;
}

#quiz .Here3 { 
	background:url(http://iloveesther.roncya.com/wp-content/uploads/2012/07/truePlaceholder.png) no-repeat -430px 0px;
	display:block;
	width:210px;
	height:165px;
}

#quiz .Here1:hover { 
	background-position: 0px -165px;
}

#quiz .Here2:hover { 
	background-position: -215px -165px;
}

#quiz .Here3:hover { 
	background-position: -430px -165px;
}

#quiz .Here1selected { 
	background-position: 0px -330px;
}

#quiz .Here2selected { 
	background-position: -215px -330px;
}

#quiz .Here3selected { 
	background-position: -430px -330px;
}

#submitButton {
text-align: center;
}

 

java script:

 

<script>
$('#quiz input:radio').addClass('input_hidden');
$('#quiz .Here1').click(function() {
	$('.Here1').addClass('Here1selected').siblings().removeClass('Here2selected Here3selected');
});
$('#quiz .Here2').click(function() {
	$('.Here2').addClass('Here2selected').siblings().removeClass('Here1selected Here3selected');
});
$('#quiz .Here3').click(function() {
	$('.Here3').addClass('Here3selected').siblings().removeClass('Here1selected Here2selected');
});
</script>

P.S. Found this lorem ipsum generator a while ago- it's great: http://www.boganipsum.com/

Edited by 17

Share this post


Link to post
Share on other sites

Ok, here's what I think is going on... Your code looks okay, and in theory should work, BUT, you placement seems to be wrong. Looking at your website you have your script above some of your HTML which it will be operating on. So, when the interpreter reaches the script it doesn't know about the following HTML (yet).

 

I copied your code (from your post), rearranged it, and it works fine.

 

Two solutions, either put your script after your HTML code (but of course still in the body tags etc), or you can add some more JavaScript/jQuery to set the script to only run once the page has finished loading (and therefore knows about the following HTML). e.g.:

 

<script language="javascript" type="text/javascript">
$(document).ready(function() {
	$('#quiz input:radio').addClass('input_hidden');
	$('#quiz .Here1').click(function() {
		$('.Here1').addClass('Here1selected').siblings().removeClass('Here2selected Here3selected');
	});
	$('#quiz .Here2').click(function() {
		$('.Here2').addClass('Here2selected').siblings().removeClass('Here1selected Here3selected');
	});
	$('#quiz .Here3').click(function() {
		$('.Here3').addClass('Here3selected').siblings().removeClass('Here1selected Here2selected');
	});
});
</script>

oh, and you should define your script (see above example) as Javascript etc.

 

EDIT: Good luck mate! PS. Don't a StarWars wedding!

Edited by Hubbo

Share this post


Link to post
Share on other sites

Hubbo just nailed my first comment :o)

 

regarding you wanting the images/button lined up side by side, try adding this to your css: input {float: left;} - and you'll probably want to play with the input's margins a bit, too.

 

 

 

edit - love the idea, by the way. don't listen to Hubbo, either, i think he's a closet trekkie...

Edited by GTAV6

Share this post


Link to post
Share on other sites

Hubbo just nailed my first comment :o)

 

regarding you wanting the images/button lined up side by side, try adding this to your css: input {float: left;} - and you'll probably want to play with the input's margins a bit, too.

 

 

 

edit - love the idea, by the way. don't listen to Hubbo, either, i think he's a closet trekkie...

Actually you need to float the labels:

 

#quiz label {float:left;}

Share this post


Link to post
Share on other sites

aha, of course. my bad... (serves me right for being a smart-alec)

Share this post


Link to post
Share on other sites

aha, of course. my bad... (serves me right for being a smart-alec)

;-)

 

Posted Image

Edited by Hubbo

Share this post


Link to post
Share on other sites

Wow thank you two so much- that's exactly what I needed! I've only just woken up (went to bed at 9am trying to get this to work) so I haven't set these in place yet but that's what I'ma do now. I'll definitely keep you both posted :)

 

No- no StarWars or any particularly themed wedding for me haha. I just always like to have place holders to work with, and having fun with it is always better than seeing "Title", "Header" and "Lorem ipsum" all the time. Having said that, have you seen this?

 

http://www.fitsnews.com/2010/07/12/the-adm...ackbar-wedding/

 

http://www.neatorama.com/2008/08/04/best-s...amari-and-wife/

 

I thought it was hilarious and very daring.

 

Edit: You guys are saviours- I'm nearly done now. http://iloveesther.roncya.com/quiz1/ The only thing left is to fix this strange 'stepping' problem with the image/button alignments. I can probably brute force it with something like "top-margin: -15px" but I'm going to try and find what's causing it first.

 

Strangely, the jQuery code that was working in the JS Fiddle for removing selections didn't work for me. I had to change it to this:

 

$(document).ready(function() {
	$('#quiz input:radio').addClass('input_hidden');
	$('#quiz .Here1').click(function() {
		$('.Here1').addClass('Here1selected');
		$('.Here2').removeClass('Here2selected');
		$('.Here3').removeClass('Here3selected');
	});
	$('#quiz .Here2').click(function() {
		$('.Here2').addClass('Here2selected');
		$('.Here1').removeClass('Here1selected');
		$('.Here3').removeClass('Here3selected');
	});
	$('#quiz .Here3').click(function() {
		$('.Here3').addClass('Here3selected');
		$('.Here1').removeClass('Here1selected');
		$('.Here2').removeClass('Here2selected');
	});
});

Edit2: Turns out WordPress was adding <br /> line breaks in between inputs and labels. Just had to remove all line breaks/white space from that section so it wouldn't be interpreted as a new line. Must be a setting somewhere that automatically adds paragraphs/line breaks. But- it is working now!! Thanks to you two! Thank you seeew much. I just have to now prevent the image from changing on hover if it's already selected. I'll let you know how I get around that.

Edited by 17

Share this post


Link to post
Share on other sites

This should help you out.

 

Change this

#quiz .Here1selected { 
	background-position: 0px -330px;
}

#quiz .Here2selected { 
	background-position: -215px -330px;
}

#quiz .Here3selected { 
	background-position: -430px -330px;
}

to this:

#quiz .Here1selected, #quiz .Here1selected:hover { 
	background-position: 0px -330px;
}

#quiz .Here2selected, #quiz .Here2selected:hover { 
	background-position: -215px -330px;
}

#quiz .Here3selected, #quiz .Here3selected:hover { 
	background-position: -430px -330px;
}

PS. If you are running into any more troubles add a new post rather than making an edit to a post - don't worry about double post, as when you add a new post we will get an email notification but not for post edits. So we can help you sooner (we know you are on a deadline!).

Share this post


Link to post
Share on other sites

OHH... wow. Sometimes the easiest things are the hardest to see/think of. I kind of put that aside for a bit before I decided to shift some of it to CSS. Before I had all the padding, hover effect, selection effect actually part of the image- it was a bit of a mess. It worked somewhat cleverly but not entirely efficiently.

 

This is the first page: http://iloveesther.roncya.com/quiz-one/

 

Overall the quiz is going to consisted of three pages each with 3 questions. The first one is going to use text as a radio buttons, then the other two will use images like what I've been working on so far.

 

Thanks, yeah I was just worried about double-posting but when you put it that way I suppose it's not a big deal in this situation :) Thanks again for all the help! I'm going to work on getting the text radio buttons working now- at the moment they seem 'clickable' but when you do click on them they don't get registered as input. I'll try a few things in an hour (after lunch) then report back.

 

Edit: Going well so far- got the input recognition working. Most of the work I've had to do just then was working around WordPress' auto formatting. Pain in the poop chute I tell you. Tweaking layout and stuff now.

Edited by 17

Share this post


Link to post
Share on other sites

Now I'm having trouble providing some kind of 'selected' feedback for the text version. I've been looking through my code and it seems like it should work, but nothing changes when you click the labels. In terms of the form the input does at least get registered. There's just no visual effect. You can see it in action here: http://iloveesther.roncya.com/quiz-one/ The answers are "The Gold Coast", "Kiss" and "King".

 

Here's the HTML for the first answer "Nobby's Beach":

 

<label for="quizOne1A_" class="quizOne1A">
<input type="radio" name="quizOne1" id="quizOne1A_" value="A" />
 Nobby's Beach
</label>

This is the relevant CSS:

 

.quizText .quizTextSelected {
margin-left: 300px;
font-size: 22pt;
color: #FFFFFF;
border: 20px solid green;
}

This is the relevant JavaScript/jQuery:

 

$('.quizText input:radio').addClass('input_hidden');

$('.quizText .quizOne1A').click(function() {
	$('.quizOne1A').addClass('.quizOne1ASelected').siblings().removeClass('quizOne1BSelected quizOne1CSelected');
});

According to this code, shouldn't the label have all the CSS properties applied when I click on it? I thought the process would be:

 

HTML: Label has class "quizOne1A"

jQuery: When class "quizOne1A" is clicked, add class "quizOne1ASelected" to it

CSS: Class "quizOne1ASelected" has these properties.

 

Do any of you have ideas as to what I'm missing? Thanks in advance.

Share this post


Link to post
Share on other sites

This was the all-encompassing (padding, default image, hover image, selection image) template I was going to use to create the last two pages of the quiz:

 

Posted Image

 

The dark grey is just the Photoshop canvass.

Edited by 17

Share this post


Link to post
Share on other sites

Maybe I'm not understanding your problem, or you have already fixed it on the test site...

 

Working? or still having troubles?

Share this post


Link to post
Share on other sites

Pretty much good now :)

 

I stopped testing on http://iloveesther.roncya.com/quiz1/ and started work on:

 

http://iloveesther.roncya.com/quiz-one/

 

The problem I was having (and technically still do) was have a "selected" visual effect on the text labels on http://iloveesther.roncya.com/quiz-one/

I couldn't get around it so I just had to bring the radio buttons back in. At this stage I'm still interested in finding out how to do it, but probably don't have time to implement that fix before the 'deadline'.

 

That's the first page of the quiz (of three) and you can see the image version you were helping me out with in action here: http://iloveesther.roncya.com/quiz-two/

 

I just have to replace all the place holder stuff now and I'm set :D Thanks again Hubbo and GTAV6!

Share this post


Link to post
Share on other sites

Pretty much good now :)

 

I stopped testing on http://iloveesther.roncya.com/quiz1/ and started work on:

 

http://iloveesther.roncya.com/quiz-one/

 

The problem I was having (and technically still do) was have a "selected" visual effect on the text labels on http://iloveesther.roncya.com/quiz-one/

I couldn't get around it so I just had to bring the radio buttons back in. At this stage I'm still interested in finding out how to do it, but probably don't have time to implement that fix before the 'deadline'.

 

That's the first page of the quiz (of three) and you can see the image version you were helping me out with in action here: http://iloveesther.roncya.com/quiz-two/

 

I just have to replace all the place holder stuff now and I'm set :D Thanks again Hubbo and GTAV6!

Holy moly... just looking through your code.... ummm....

 

ok, ok, seeing we aren't aiming for pretty code I think the easiest/quickest way (and without changing your code too much) would be to add some 'id' tags to your labels, then add something alongs the lines of:

 

CSS:

.labelSelected {
	color:#090;
	background:#39F;
	font-weight: bold;
	border: 1px solid #000;
}

HTML:

...
<label for="quizOne1A_" id="label1"> .... </label>
<label for="quizOne1B_" id="label2"> .... </label>
<label for="quizOne1C_" id="label3"> .... </label>
...

JQuery:

...
$(document).ready(function() {
	
	...

	$('#label1').click(function() {
		$('#label1').addClass('labelSelected').siblings().removeClass('labelSelected');
	});
	
	$('#label2').click(function() {
		$('#label2').addClass('labelSelected').siblings().removeClass('labelSelected');
	});

	$('#label3').click(function() {
		$('#label3').addClass('labelSelected').siblings().removeClass('labelSelected');
	});

	...
});
...

Share this post


Link to post
Share on other sites

Oh tell me about it... I just realised that at 4AM in the morning with an impending deadline- standards could be left at the door.

 

And that's the thing- I tried what you suggested (I think) and there was no effect. When I get back I'll take a closer look and try your method anyway- maybe it's slightly different in some crucial manner.

 

*hangs CSS head in shame*

Share this post


Link to post
Share on other sites

So, she said yes :D :D :D

 

Thanks a megaton with the help on the site, Hubbo. You really saved me hours of head scratching and gave a lot of insight.

 

P.S. Try the $89 Lamb shoulder for 2 at Four in Hand if you want to splash on a special occasion. Best meal in a long time.

Share this post


Link to post
Share on other sites

So, she said yes :D :D :D

 

Thanks a megaton with the help on the site, Hubbo. You really saved me hours of head scratching and gave a lot of insight.

 

P.S. Try the $89 Lamb shoulder for 2 at Four in Hand if you want to splash on a special occasion. Best meal in a long time.

 

Massive Congrats to you both!

I must say i am very impressed by the atomicians who could and did help, esp Hubbo.

Alls well that ends well!

Share this post


Link to post
Share on other sites

So, she said yes :D :D :D

awesome! i was far more interested in that answer than the ones provided in here :o)

Share this post


Link to post
Share on other sites

Woo..

 

I saw this thread when there were about 2 replies. Then it back-burnered. Then I saw the "Honourable mention" in POTM.

 

However.. I think you got a better prize than a set of headphones. :P

 

Mega congrats. Mention Hubbo in your thanks speech at the wedding. :P

 

AD

Share this post


Link to post
Share on other sites

Wow, thanks everyone (yes, most definitely Hubbo) for your grats and support! As you might imagine, the past week has been a bit chock a block on the social side of things so I haven't had a chance to get back here, but it's awesome to see the Atomican community at its best :) I'm sure that years and years of Atomic exposure helped influence my subconsciousness to have the idea. Thank you all again :) My (now) fiance and I are in the thick of a lot of things, but I'll still be poking around the code just for education's sake. For now, if you wanted to see what the rest of the site looked like you can cheat your way to my heart and copy these answers :P I think you all deserve to at least see it for all your support.

 

Answers

Quiz One: The Gold Coast, Kiss, King

Quiz Two: Left, Middle, Right

Quiz Three: Right, Left, Middle

When you see me on one knee: Yes

 

Fun fact- it took 63 candles to spell out "Will you marry me". (86 before I 'optimised' the 'font'). This proposal brought to you by: A hundred candles for $4

 

We've been reading through the posts here and have had a good laugh and smile too!

 

Congrats man! I couldn't help one little bit but was following this thread closely. A very atomic proposal if ever I saw one.

"If you're good at something, never do it for free." ?? Hahaha

 

Grats man, I passed your quiz, does that mean we're engaged too? although I don't have a balcony.

This made us laugh. I can't afford another ring, so I think we're even :)

 

Woo..

 

I saw this thread when there were about 2 replies. Then it back-burnered. Then I saw the "Honourable mention" in POTM.

 

However.. I think you got a better prize than a set of headphones. :P

 

Mega congrats. Mention Hubbo in your thanks speech at the wedding. :P

 

AD

Awesome! I usually find out about the POTM in the mag so I had no idea. Thanks David, I feel very honoured indeed :)

Share this post


Link to post
Share on other sites

So, she said yes :D :D :D

 

Thanks a megaton with the help on the site, Hubbo. You really saved me hours of head scratching and gave a lot of insight.

 

P.S. Try the $89 Lamb shoulder for 2 at Four in Hand if you want to splash on a special occasion. Best meal in a long time.

Congratulations..........restores my belief in romance:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×