Note also the id values of \u201cpuzzle\u201d and \u201cui\u201d on the div elements, are these are used to apply the appropriate css styling defined in sliding-puzzle.css.<\/ol>\n<\/ul>\nNow let\u2019s look at the .css file. Again, not much of import here, logic-wise. Just basic boilerplate stuff, which you can adjust to your own liking.<\/p>\n
#puzzle { padding:5px; margin:auto; border:1px solid #aaa; border-radius:5px; background-color:#eee; }\r\n#puzzle figure { width:300px; height:240px; border:1px solid #aaa; position:relative; float:left; background-color:#fff; }\r\n#ui { width:200px; padding:10px 0 0 10px; float:left; }\r\n#ui button { margin-bottom:2em; }\r\n#ui p { font-size:1.7em; }\r\n#start { width:204px; height:50px; font-size:1.75em; }<\/pre>\nThe Puzzle Content<\/h2>\n
Now, the real meat and potatoes; the content of sliding-puzzle.js. Start with the following code, which defines a function that gets called when the page loads.<\/p>\n
$(function () {\r\n\/\/code goes here\r\n});<\/pre>\nThis defines a jQuery method that gets called when the page loads. The \u201c$\u201d is a short-cut to calling jQuery code; using \u201cjQuery\u201d instead of \u201c$\u201d would yield the same results. All of the JavaScript\/jQuery code for this project will be implemented within this function. Next, we need to define some variables that will be used throughout the code.<\/p>\n
var aspect = \"3:4\",\r\n\taspect_width = parseInt(aspect.split(\":\")[0]),\r\n\taspect_height = parseInt(aspect.split(\":\")[1]),\r\n\tcontainer = $(\"#puzzle\"),\r\n\timgContainer = container.find(\"figure\"),\r\n\timg = imgContainer.find(\"img\"),\r\n\tpath = img.attr(\"src\"),\r\n\tpiece = $(\"<div\/>\"),\r\n\tpiece_width = Math.floor(img.width() \/ aspect_width),\r\n\tpiece_height = Math.floor(img.height() \/ aspect_height),\r\n\tidCounter = 0,\r\n\tpositions = [],\r\n\tempty = {\r\n\t\ttop: 0,\r\n\t\tleft: 0,\r\n\t\tbottom: piece_height,\r\n\t\tright: piece_width\r\n};<\/pre>\nThe \u201caspect\u201d variable defines the number of rows and columns that the image will be split into, and \u201caspect_width\u201d and \u201caspect_height\u201d assigns each of these values to their own variable for ease of use. It is important to note, that should you decide to use an image of a different size than I am using, you will need to ensure that its dimensions are such that they can be evenly divided by the defined aspect.<\/p>\n
A useful feature of jQuery is being able to easily find elements in the source HTML and assign them to JavaScript variables. This makes it much easier to manipulate these elements through other jQuery functions, or even through JavaScript. Note in the HTML we defined a \u201cdiv\u201d element and assigned it an id attribute of \u201cpuzzle.\u201d We can use jQuery to find this element and assign it to a variable with the following line.<\/p>\n
container = $(\"#puzzle\")<\/pre>\nThe \u201c$\u201d, as stated above, designates that we are calling a jQuery function. The parameter passed to the function, \u201c#puzzle\u201d indicates that jQuery needs to find the first element that has an id attribute with that value and assign it to the \u201ccontainer\u201d variable. Now that we have a variable that references our puzzle element, we can use that reference to define the next two variables, \u201cimgContainer\u201d and \u201cimg\u201d. We call the jQuery method \u201cfind\u201d on the container object, passing in \u201cfigure\u201d to return the HTML \u201cfigure\u201d element that is contained by the puzzle \u201cdiv\u201d element.<\/p>\n
Then, we do the same to find the \u201cimg\u201d element by calling the \u201cfind\u201d method on the imgContainer element. The next line calls another useful jQuery function, the \u201cattr\u201d method, which returns the value of the attribute on the calling element that has the name \u201csrc\u201d. This returns the path to the image. The next line calls yet another jQuery function that creates a new \u201cdiv\u201d element and assigns it to the variable.<\/p>\n
Note that calling this method does net yet assign the new element to the existing HTML. We will do that later, once the attributes of the element are more robustly defined.<\/p>\n
piece = $(\"<div\/>\")<\/pre>\nThe variables \u201cpiece_width\u201d and \u201cpiece_height\u201d define the width and height for each block that the original image will be split into, by dividing the total width and height of the image by the aspect values.<\/p>\n
Next, we want to split the image into the individual squares designated by the aspect value we defined earlier. The loop logic is fairly straightforward. We are iterating over the aspect values we defined earlier and calculating the top and left position values for each piece. Then, we get to use another fun jQuery method.<\/p>\n
For each set of these values we call \u201cclone\u201d on the empty \u201cdiv\u201d element we created earlier. We also get to see the practice of chaining method calls in jQuery.<\/p>\n
Since each method call returns an object (the cloned element), we don\u2019t necessarily need to assign that return value to a variable before calling another method on it.<\/p>\n
In our example, we call clone(), then immediately call attr(), followed by css(), and finally appendTo(). We assign the incrementing counter as the id for each piece by calling the attr() function, then assign the appropriate values to the css style for the piece. Lastly, we call appendTo(), passing in the imgContainer variable, which adds the cloned \u201cdiv\u201d element as a child of the \u201cfigure\u201d element. We also then store the top and left position values of the piece into the \u201cpositions\u201d array for later use.<\/p>\n
or (var x = 0, y = aspect_height; x < y; x++) {\r\n\tfor (var a = 0, b = aspect_width; a < b; a++) {\r\n\t\tvar top = piece_height * x,\r\n\t\t\tleft = piece_width * a;\r\n\t\tpiece.clone().attr(\"id\", idCounter++).css({\r\n\t\t\twidth: piece_width,\r\n\t\t\theight: piece_height,\r\n\t\t\tposition: \"absolute\",\r\n\t\t\ttop: top,\r\n\t\t\tleft: left,\r\n\t\t\tbackgroundImage: [\"url(\", path, \")\"].join(\"\"),\r\n\t\t\tbackgroundPosition: [\"-\", piece_width * a, \"px \", \"-\", piece_height * x, \"px\"].join(\"\")\r\n\t\t}).appendTo(imgContainer);\r\n\t\tpositions.push({ top: top, left: left });\r\n\t}\r\n}<\/pre>\nClean Up<\/h2>\n
Now that we have our image split up correctly, a little clean up is necessary. The original image is still being displayed, so we need to remove it.<\/p>\n
img.remove();<\/pre>\nIn order to allow room for the pieces to be moved around, we need to remove one of the squares. Any piece would probably do, but upper left is probably easiest. Recall that when we split the image up, we assigned the incrementing counter as the id attribute for each of the pieces, so we ask the container to find the piece with the id \u201c0\u201d and call remove on it.<\/p>\n
container.find(\"#0\").remove();<\/pre>\nDo not forget that we also added its top and left values to the positions array, so that needs to be removed as well. We can do this by calling the JavaScript shift method on the array.<\/p>\n
positions.shift();<\/pre>\nThe Shuffle<\/h2>\n
Now, we need to shuffle the pieces whenever the user clicks on the start button. We again call the jQuery method to find the element with the id value of \u201cstart\u201d, which returns our button. We now see\u00a0another handy jQuery function, on(). This assigns a method to the \u201con\u201d event handler for the passed in event. In this case, we are defining a function to be called when the \u201conClick\u201d event handler is called for the start button. The \u201cshuffle\u201d method we define performs a Fisher-Yates shuffle, where, for each item in the array, we generate a random number between zero and the total size of the array.<\/p>\n
Then we switch the current item in the iteration with the one located at the position defined by the random number.<\/p>\n
Even though the elements in the array have been shuffled, they each still have the same top and left position values as before the shuffle, so they would still appear visually unshuffled.<\/p>\n
The next bit of code shows how easily jQuery operates on a collection of elements.<\/p>\n
By calling $.each(\u2026), we are telling jQuery to perform the same action on each element in the defined array. So, in this case, for each \u201cpiece\u201d, we call the code defined in the anonymous function, which uses the positions array we defined earlier to reassign the top and left positions to each element so that now the positions of each piece are \u201cshuffled\u201d as well. We then append this new array to the imgContainer so that the HTML updates and the pieces become visually shuffled. Lastly, we ensure that the empty piece is in the upper left.<\/p>\n
$(\"#start\").on(\"click\", function (e) {\r\n\tvar pieces = imgContainer.children();\r\n\tfunction shuffle(array) {\r\n\t\tvar i = array.length;\r\n\t\tif (i === 0) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\twhile (--i) {\r\n\t\t\tvar j = Math.floor(Math.random() * (i + 1)),\r\n\t\t\t\ttempi = array[i],\r\n\t\t\t\ttempj = array[j];\r\n\t\t\tarray[i] = tempj;\r\n\t\t\tarray[j] = tempi;\r\n\t\t}\r\n\t}\r\n\tshuffle(pieces);\r\n\t$.each(pieces, function (i) {\r\n\t\tpieces.eq(i).css(positions[i]);\r\n\t});\r\n\tpieces.appendTo(imgContainer);\r\n\tempty.top = 0;\r\n\tempty.left = 0;\r\n});<\/pre>\nUntil Next Time..<\/h2>\n
I had hoped to complete this tutorial in the space of a single blog, but this appears to be running long. In my next blog entry I will implement starting the timer, making each piece draggable, and defining the win conditions.<\/p>\n
\n
\n\n\n| Reference: <\/span><\/td>\n | Fun With jQuery: Create A Puzzle<\/a> from our WCG partner<\/a> Keyhole Software at the Keyhole Software<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":" jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Learning a new technology outside of the context of paid work can be challenging after writing code for business …<\/p>\n","protected":false},"author":22,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-9165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\n Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/keyholesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-04T10:11:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Keyhole Software\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@http:\/\/twitter.com\/keyholesoftware\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keyhole Software\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\"},\"author\":{\"name\":\"Keyhole Software\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2\"},\"headline\":\"Fun With jQuery: Create A Puzzle\",\"datePublished\":\"2015-12-04T10:11:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\"},\"wordCount\":1531,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\",\"name\":\"Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-12-04T10:11:51+00:00\",\"description\":\"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Fun With jQuery: Create A Puzzle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2\",\"name\":\"Keyhole Software\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g\",\"caption\":\"Keyhole Software\"},\"description\":\"Keyhole is a midwest-based consulting firm with a tight-knit technical team. We work primarily with Java, JavaScript and .NET technologies, specializing in application development. We love the challenge that comes in consulting and blog often regarding some of the technical situations and technologies we face.\",\"sameAs\":[\"http:\/\/keyholesoftware.com\/\",\"http:\/\/facebook.com\/keyholesoftware\",\"http:\/\/linkedin.com\/company\/keyhole-software\",\"https:\/\/x.com\/http:\/\/twitter.com\/keyholesoftware\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/keyhole-software\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026","description":"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/","og_locale":"en_US","og_type":"article","og_title":"Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026","og_description":"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"http:\/\/facebook.com\/keyholesoftware","article_published_time":"2015-12-04T10:11:51+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Keyhole Software","twitter_card":"summary_large_image","twitter_creator":"@http:\/\/twitter.com\/keyholesoftware","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Keyhole Software","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/"},"author":{"name":"Keyhole Software","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2"},"headline":"Fun With jQuery: Create A Puzzle","datePublished":"2015-12-04T10:11:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/"},"wordCount":1531,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/","name":"Fun With jQuery: Create A Puzzle - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-12-04T10:11:51+00:00","description":"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/fun-jquery-create-puzzle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"Fun With jQuery: Create A Puzzle"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2","name":"Keyhole Software","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g","caption":"Keyhole Software"},"description":"Keyhole is a midwest-based consulting firm with a tight-knit technical team. We work primarily with Java, JavaScript and .NET technologies, specializing in application development. We love the challenge that comes in consulting and blog often regarding some of the technical situations and technologies we face.","sameAs":["http:\/\/keyholesoftware.com\/","http:\/\/facebook.com\/keyholesoftware","http:\/\/linkedin.com\/company\/keyhole-software","https:\/\/x.com\/http:\/\/twitter.com\/keyholesoftware"],"url":"https:\/\/www.webcodegeeks.com\/author\/keyhole-software\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=9165"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=9165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=9165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=9165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} |
![\"_PlasticSlidingPuzzle\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/PlasticSlidingPuzzle.jpg\")
<\/a><\/p>\n