Creating a Puzzle where pieces are dragged into place

JavaScript
61

Sorry Ralph your not going Mad i didnt send it lol, but ill hold fire as Pullo is on to it for me mate

Thanks Ralph
Kelvin:x

62

Hi Pullo
Well i have been trying for 2 days and dammed if i can sort it mate lol:mad:

Regards
Kelvin

63

Hi Kelvin,

Sorry for the late reply, but I had to do all of those annoying things like eat, sleep and go to work :slight_smile:

Anyway, your problem is relatively easy to solve, you need to add a class to the div element that you want to target, like so:

<div class="dropzone hidden">
  <div data-box="one"></div>
  <div data-box="two"></div>
  <div data-box="three"></div>
  <div data-box="four"></div>
  <div data-box="five" class="box-5"></div>
</div>

Then in your CSS, simply do:

.dropzone div.box-5{ margin-left: 195px; }

and that will move box five to underneath box two.

Hope that helps.

64

LOL, I am only too happy for your help mate so i dont mind if you Eat,sleep and work lol
No but seriously mate i wernt having a dig, i tried like mad to sort it but had to contact the expert (You)

Ill give it a go and let you know how it goes

Many many Thanks
Kelvin :slight_smile:

65

Pullo
Many many Thanks it works all i have to do now is move my arrow (Easy) and im away

Cant thank you enough yet again mate

Many Thanks
Best regards
Woo Ooo i can carry on now lol

Kelvin

66

Hi Pullo
Many thanks again mate i am Cooking with Gas now, getting on really well after following you advice mate

Many many thanks on behalf of the Club mate i could nt have done it without yours and Ralphs Help mate

Thank you

PS
Take a look at my latest…

Kelvin

The order is
1 Mixer 2 IF Amp 3 Demodulator 4 AF Amp 5 Local Oscillator
and 6 BFO top left 1-4
bottom 2 are 5 on the left and 6 on the right

67

Dude, like … wow!
It’s really nice to see that you were able to expand on what I did originally and to adapt it to your needs.
Well done!

68

Well as i say “Its all down to you both i could never have done it on my own”
any thanks and sure ill be back on here again with more problems soon lol

Regards
Kelvin
:wink:

69

Hello Again lol
Just a question is there any way i can add Letters Like A and B into this article but so i can position them where i want them.

Also i would like to add a image (Say a jpg) and tell it where i want it too.

Is this possible mate

Thanks again for your help
Kelvin

70

Hey Kelvin,

You can add anything you want to the <div> elements (a jpeg for example).
I’m not sure what you mean by letters though.
Could you elaborate, or, even better make an image showing what you want (like last time)?

71

Hi Again Pillo and Thank you for the Info yet again mate

Re Letters something like this mate

Cheers mate
Kelvin;)

72

Heres my latest one mate just for interest http://www.g3lrs.co.uk/index.php/training-aids/1785-advanced-level-superhet-rx

Thanks to you yet again mate

Kelvin:)

73

Hi Kilvin :slight_smile:

What you need to look at is the fillText method.

c.font="30px Arial";
c.fillText("Hello World",10,50);

Hopefully that is quite self-explanatory.
Have a go at using that to do what you want and let me know if you get stuck.

I also tried to look at your latest puzzle, but I ma told I need to log in.

74

Hi Pullo
Many thanks i will try that and let you know how it goes.

Re the link, o yes i forgot that you need to be registered so hes a link to my own website with it on, ignore the fact that the gray area overlaps the right hand side of the page as i have not finished the styling for that site yet lol

http://g4ztd.info/index.php/training-aid-s/202-advanced-level-superhet-rx

Best Regards
Kelvin :wink:

75

Hi Kelvin,
I just had a look at that.
These things are getting more and more complicated :slight_smile:
Great job!

76

Hi again Pullo
Could i ask if im doing something wrong, i need to have 14 boxes but when i add the eleventh box the title shades out in dreamweaver and no box appears in the canvas.

I assume the code is some how set to have maximun 10 boxes but im only guessing mate.

Many Thanks
Kelvin
Ignore the fact there are boxes with the same name they wont have when its done lol

77

Hi Kelvin,

My initial idea would be that you have simply gone outside of the canvas.

The height and width are set like this:

var h = $(".dropzone").height(),
    canvas = document.getElementById("canvas"),
    c = canvas.getContext("2d");
	
canvas.width  = 900;
canvas.height = h + 100;

Try increasing the dimensions and see is that works.

78

:mad:Hi Pullo
Well im dafter than i thought, i had a go at making the canvas bigger but did not work, then i looked again at my code and guess what…Can you see my mistake?

  div data-box="eleven" class="box-11"&gt;&lt;/div&gt;

Yep i forgot the 1st less than symbol on my Div, put that in an hay presto it worked, i could kick myself, lol

Any way thanks for your help mate

Regards
Kelvin :x

79

Hiya Mate
Done it, here it is if you want to have a buchers lol

http://g4ztd.info/index.php/training-aid-s/205-advanced-level-ssb-superhet-transceiver

Thanks for all your help again mate

You are the best and i am really glad i joined these Forums

A credit to you and the rest of the guys

Best regards
kelvin

80

Oops!
That’s one of those DOH! moments alright. :slight_smile:

I had a look at your latest puzzle, too.
.-… — — -.- … / .-. . .- .-… .-… -.-- / --. — — -…