SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 81
  1. #26
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    No problem

    You will need to ensure that all of the files are included in the page where you want the drag and drop puzzle to go.
    You can copy the necessary code from index.html, just make sure that the paths are correct.

    If you need any help with this just let me know.

  2. #27
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Again Pullo
    Thanks again for your continued help

    I am however having trouble, i am using firefox 21 and i know get the 4 boxes appear at the top of the page with the words in them and immediately below that is the message Your Browser Does Not Support HTML5 canvas! and below that nothing seems like its telling me it does not support it but according to the Firefox people it does?

    I have tried IE too and get the same

    Am i doing something wrong mate??

    Many thanks
    Kelvin

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kelvinwright View Post
    I am however having trouble, i am using firefox 21 and i know get the 4 boxes appear at the top of the page with the words in them and immediately below that is the message Your Browser Does Not Support HTML5 canvas! and below that nothing seems like its telling me it does not support it but according to the Firefox people it does?
    Oh dear, sorry about that.
    I altered the way that the script checks for canvas support.
    My demo should work in Firefox now.

    Quote Originally Posted by kelvinwright View Post
    I have tried IE too and get the same
    Which version of IE?
    The canvas element isn't supported in IE8 or below.
    For me the script works as expected in IE9 and IE10

    Let me know if my demo now works for you and I'll update the zip archive accordingly.

  4. #29
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by Pullo View Post
    Oh dear, sorry about that.
    I altered the way that the script checks for canvas support.
    My demo should work in Firefox now.



    Which version of IE?
    The canvas element isn't supported in IE8 or below.
    For me the script works as expected in IE9 and IE10

    Let me know if my demo now works for you and I'll update the zip archive accordingly.
    Hi Pullo
    Its IE 10 and your original Demo worked fine mate its the zip one im having problems with

    Once again
    Many Thanks
    Kelvin

  5. #30
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    I updated the zip file, too.
    I tested them in both FF and IE10 on my PC, so hopefully they should work for you, too.
    Download files.

  6. #31
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Quote Originally Posted by Pullo View Post
    Hi,

    I updated the zip file, too.
    I tested them in both FF and IE10 on my PC, so hopefully they should work for you, too.
    Download files.

    Well Pullo
    I cant keep pestering you mate you have been an Angel with all the help, but i cant get it to show at all know lol
    Im using Joomla 2.5 and using a module called Anycode to put the code in, otherwise joomla strips the code out for security reasons.

    Heres what i have done
    I made a directory called javascript in my htp client
    I have then put your files inside that.

    Where you have put things like "<link href="./css/styles.css" rel="stylesheet" type="text/css">
    <link href="./css/jquery.toastmessage.css" rel="stylesheet" type="text/css">

    I altered them to <link href="./javascript/css/styles.css" rel="stylesheet" type="text/css">
    <link href="./javascript/css/jquery.toastmessage.css" rel="stylesheet" type="text/css">
    etc but cant get it to work, i will keep trying but thank you you for all your help mate

    PS
    Your demo works fine

    Regards
    kelvin

  7. #32
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Do you need to have this embedded in your website? As an alternative, you could probably create a new folder in the root folder of your hosting account and call it whatever you like, but let's say "puzzle". So, in that /puzzle/ folder just dump all of Pullo's files. Then got to

    yoursite.com/puzzle/

    and the page will be available.

  8. #33
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph
    I would like to embed it but ill give your idea a go

    Cheers Mate
    Kelvin

  9. #34
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kelvinwright View Post
    I would like to embed it
    It will effectively be embedded by dong what I suggested, but if by that you mean you want the page to be styled like your other pages, that could easily be done, too.

  10. #35
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works great like you suggested Ralph but yes i wanted it to appear on the page that its mentioned on really but hay its cool as it is im gonna put some words of thanks on the link for all Pullos help and others too, this is a fantastic helpful place and cant thank you all enough for all your help

    Cheers to you all
    Kelvin

  11. #36
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It will effectively be embedded by dong what I suggested, but if by that you mean you want the page to be styled like your other pages, that could easily be done, too.
    Thanks mate heres the link let me know what you think please

    http://juniors.g3lrs.co.uk/index.php...ministrator/tx

    Kelvin

  12. #37
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question, where does the code get the background image from, the one that has the empty boxes on it?

    I ask because i was going to try and edit the code for the receiver block diagram that is the only other block diagram the kids need to master for there license

    Did not want to ask for any more help and thought i would have a go at altering it myself you see.

    Regards
    kelvin

  13. #38
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Kelvin,

    The site looks great.
    Nice one!

    Quote Originally Posted by kelvinwright View Post
    Question, where does the code get the background image from, the one that has the empty boxes on it?
    This is drawn using the HTML5 canvas element.
    If you look in the file main.js you will see the code.
    I commented everything so that it was easy to see what is going on.
    https://www.google.com/search?q=canvas+draw+shape

    One thought:
    Thanks for the accreditation. However, instead of linking to my SP profile, maybe you could link to my blog (get the address from my signature).

    If you run into any problems, let us know.

  14. #39
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hay guys, I can not thank you enough for your help, i have altered the code for the Receiver Block diagram (Took me all night lol) but im well pleased with it.
    Have a look and see what you think!

    I have learnt a lot thanks to your help guys...

    http://www.juniors.g3lrs.co.uk/index...-block-diagram

    Once again Thanks Guys
    Regards
    kelvin

  15. #40
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Kelvin,

    The site looks great.
    Nice one!

    Can you give me your blog address mate ill add it for you
    Cheers
    kelvin

    This is drawn using the HTML5 canvas element.
    If you look in the file main.js you will see the code.
    I commented everything so that it was easy to see what is going on.
    https://www.google.com/search?q=canvas+draw+shape

    One thought:
    Thanks for the accreditation. However, instead of linking to my SP profile, maybe you could link to my blog (get the address from my signature).

    If you run into any problems, let us know.

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kelvinwright View Post
    Hay guys, I can not thank you enough for your help, i have altered the code for the Receiver Block diagram (Took me all night lol) but im well pleased with it.
    Have a look and see what you think!
    It looks great.
    Dude, you rock!


    BTW, when you get the order of the pieces wrong, you don't have to reload the page, rather you can just drag the pieces back up to the grey area and leave them there.

  17. #42
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    It looks great.
    Dude, you rock!


    BTW, when you get the order of the pieces wrong, you don't have to reload the page, rather you can just drag the pieces back up to the grey area and leave them there.
    Hi Pullo
    I have added your blog address to your name mate.

    I have also managed to embed the code now into my articles too.

    Many Thanks Again

    Kelvin

  18. #43
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Doing Well

    Quote Originally Posted by kelvinwright View Post
    Hi Pullo
    I have added your blog address to your name mate.

    I have also managed to embed the code now into my articles too.

    Many Thanks Again

    Kelvin
    Im doing ok at editing this code, have done loads more block diagrams that work ok but guess what im stuck now, i am trying to add up to 3 more boxes, i have added them but dont know where to add the code so they display "That's Correct" or "Oops" when i put the boxes in place, they do work otherwise but not much use if it dont tell them if they are correct or not lol

    Im having a good go at it thou and studying on the net

    Thanks again
    Kelvin

  19. #44
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    It looks great.
    Dude, you rock!


    BTW, when you get the order of the pieces wrong, you don't have to reload the page, rather you can just drag the pieces back up to the grey area and leave them there.
    Hiya Pullo
    Im stuck on this, it has extra boxes to what you did for me but no matter what order i put these boxes it says im wrong, any chance of pointing me in the right direction mate
    Attached Files Attached Files

  20. #45
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Kelvin,

    The way that the script checks to see if the pieces have been dragged into the correct position is as follows.

    Every draggable div has a data-piece attribute.

    HTML Code:
    <div class="draggable" data-piece="one"><span>Audio Stage</span></div>
    And every box onto which a piece can be dropped has a data-box attribute, indicating which piece it expects to be dropped onto it.

    HTML Code:
    <div data-box="one"></div>
    Then, in the file main.js, every time a draggable div is dropped onto a box, the following occurs:

    The box is disabled, so that no further draggable divs can be dropped onto it:

    Code JavaScript:
    $(this).droppable({ disabled: true });

    Then, the draggable div is assigned a data-over attribute, in which a reference is stored to the box with which it is currently docked.

    Code JavaScript:
    ui.draggable.data("over", $(this));

    After that a function called checkIfChoiceCorrect is called, which checks if the draggable piece has bee dropped onto the correct box.
    It does this by checking if the data-piece attribute of the draggable div, matches the data-box attribute of the element it has been dragged on to. If these two match it assigns a class of correct to the draggable div:

    Code JavaScript:
    if(drag.data("piece") === drop.data("box")){
      drag.addClass("correct");
    }

    After that has happened, a function called checkWinners is called, which checks if all four boxes have been disabled:

    Code JavaScript:
    if($(".ui-state-disabled").length === 4){...}

    If they have, the script knows that it has to make a decision about whether the draggable pieces are in the correct order.
    It does this by checking if there are four elements with the class of "correct" on the page.
    If there are, it displays a success message and removes the drag functionality from the draggable divs.
    If there aren't, it displays an error message.

    Code JavaScript:
    function checkWinners(){
      if($(".ui-state-disabled").length === 4){
        if ($(".correct").length === 4){
          showSuccessMessage();
          $(".draggable").draggable({ disabled: true }).css("cursor", "auto");
        } else {
          showErrorMessage();
        }
      }
    }

    I hope that helps you.

  21. #46
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Kelvin,

    The way that the script checks to see if the pieces have been dragged into the correct position is as follows.

    Every draggable div has a data-piece attribute.

    HTML Code:
    <div class="draggable" data-piece="one"><span>Audio Stage</span></div>
    And every box onto which a piece can be dropped has a data-box attribute, indicating which piece it expects to be dropped onto it.

    HTML Code:
    <div data-box="one"></div>
    Then, in the file main.js, every time a draggable div is dropped onto a box, the following occurs:

    The box is disabled, so that no further draggable divs can be dropped onto it:

    Code JavaScript:
    $(this).droppable({ disabled: true });

    Then, the draggable div is assigned a data-over attribute, in which a reference is stored to the box with which it is currently docked.

    Code JavaScript:
    ui.draggable.data("over", $(this));

    After that a function called checkIfChoiceCorrect is called, which checks if the draggable piece has bee dropped onto the correct box.
    It does this by checking if the data-piece attribute of the draggable div, matches the data-box attribute of the element it has been dragged on to. If these two match it assigns a class of correct to the draggable div:

    Code JavaScript:
    if(drag.data("piece") === drop.data("box")){
      drag.addClass("correct");
    }

    After that has happened, a function called checkWinners is called, which checks if all four boxes have been disabled:

    Code JavaScript:
    if($(".ui-state-disabled").length === 4){...}

    If they have, the script knows that it has to make a decision about whether the draggable pieces are in the correct order.
    It does this by checking if there are four elements with the class of "correct" on the page.
    If there are, it displays a success message and removes the drag functionality from the draggable divs.
    If there aren't, it displays an error message.

    Code JavaScript:
    function checkWinners(){
      if($(".ui-state-disabled").length === 4){
        if ($(".correct").length === 4){
          showSuccessMessage();
          $(".draggable").draggable({ disabled: true }).css("cursor", "auto");
        } else {
          showErrorMessage();
        }
      }
    }

    I hope that helps you.
    Hay Pullo
    Many Thanks Again, sorted it mate, that was a big help it all works fine now

    Cheers mate
    Wow what a forum this is you guys are great

    Kelvin

  22. #47
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another question Pullo if you don't mind
    I have 4 blocks across the top and one block underneath
    I want to move the block underneath from below box 1 at the top, to below the second top box
    Would you mind explaining how i would do it please

    I am sorry that i keep asking but i am learning as i go and quite pleased with it so far mate

    Best regards
    Kelvin

  23. #48
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Kelvin,

    Quote Originally Posted by kelvinwright View Post
    I have 4 blocks across the top and one block underneath
    I want to move the block underneath from below box 1 at the top, to below the second top box
    Would you mind explaining how i would do it please
    This sounds like a CSS issue, rather than a JS one.
    You could try positioning the box using position:absolute and the appropriate coordinates, but I don't know how that will play with various screen sizes.
    If that doesn't work, then it's probably better to try the CSS forum

  24. #49
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Kelvin,



    This sounds like a CSS issue, rather than a JS one.
    You could try positioning the box using position:absolute and the appropriate coordinates, but I don't know how that will play with various screen sizes.
    If that doesn't work, then it's probably better to try the CSS forum
    Many thanks mate ill try the CSS forum but just wandered if Ralph (I think that was his name) would know as he did the CSS i think
    But thanks anyway mate

    Kelvin

  25. #50
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    No problem.
    You could try mentioning him, see if he turns up.
    You do this by writing an @ symbol, followed by his user name, followed by a space and then a semi-colon.
    Like this: @ralph.m ;

    Now he will see that he has been mentioned in his notifications and will be aware of this thread again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •