Created
July 1, 2015 18:28
-
-
Save mayfer/1734e0a18912abb3748c to your computer and use it in GitHub Desktop.
Javascript, jQuery, Ajax examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- demonstrating event bubbling --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 0; } | |
| #bubble { background: #ffa; width: 200px; height: 200px; } | |
| #inner { background: #faa; width: 50px; height: 50px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bubble"> | |
| <div id="inner"> | |
| </div> | |
| </div> | |
| <script> | |
| var outer_box = $('#bubble'); | |
| var inner_box = $('#inner'); | |
| outer_box.on('click', function() { | |
| console.log("outer clicked"); | |
| }); | |
| inner_box.on('click', function(evt) { | |
| console.log("inner clicked"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Using a form to grab user's input, and make a DuckDuckGo search query with it. EXCEPT CATS --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 20px; } | |
| #bubble { background: #ffa; width: 200px; height: 200px; } | |
| #inner { background: #faa; width: 50px; height: 50px; } | |
| a { display: block; } | |
| .error { color: #a00; font-size: 12px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="search"> | |
| <form> | |
| <input type="text" name="query" placeholder="Anything but cats"/> | |
| <input type="submit" id="submit" value="Search" /> | |
| </form> | |
| </div> | |
| <div id="results"> | |
| </div> | |
| <script> | |
| var search = function(query) { | |
| var url = "http://api.duckduckgo.com/?q=" + query + "&format=json&pretty=1"; | |
| $("#results").html(""); | |
| $.ajax({ | |
| url: url, | |
| dataType: "jsonp", | |
| success: function(response) { | |
| for(var i = 0; i < response.RelatedTopics.length; i++) { | |
| var result = response.RelatedTopics[i]; | |
| if("FirstURL" in result) { | |
| console.log(result.FirstURL); | |
| $("<a>") | |
| .text(result.FirstURL) | |
| .attr("href", result.FirstURL) | |
| .appendTo("#results"); | |
| } | |
| } | |
| }, | |
| }); | |
| } | |
| $("form").on("submit", function(evt) { | |
| evt.preventDefault(); | |
| var query = $('input[name="query"]').val(); | |
| if(query.indexOf("cat") != -1) { | |
| var error = $('<div>') | |
| .addClass("error") | |
| .text("sneaky sneaky"); | |
| error.insertAfter($('form')); | |
| } else { | |
| $('.error').remove(); | |
| search(query); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- jQuery version of the previous example, with fadeout added --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 0; } | |
| #main { background: #ffa; width: 200px; height: 200px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function getRandomColor() { | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| var box = $('body'); | |
| box.on("click", function(evt) { | |
| var x = evt.pageX; | |
| var y = evt.pageY; | |
| var newBox = $("<div>"); | |
| newBox.css('background', getRandomColor()); | |
| newBox.css('width', '100px'); | |
| newBox.css('height', '100px'); | |
| newBox.css('position', "absolute"); | |
| newBox.css('top', y + "px"); | |
| newBox.css('left', x + "px"); | |
| box.append(newBox); | |
| setTimeout(function() { | |
| newBox.fadeOut(1000, function() { | |
| newBox.remove(); | |
| }); | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Raw javascript implementation of creating randomly colored boxes where you click --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <style> | |
| body { margin: 0; } | |
| #main { background: #ffa; width: 200px; height: 200px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function getRandomColor() { | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| var box = document.body; | |
| box.addEventListener("click", function(evt) { | |
| var x = evt.pageX; | |
| var y = evt.pageY; | |
| var newBox = document.createElement("div"); | |
| newBox.style.background = getRandomColor(); | |
| newBox.style.width = "10px"; | |
| newBox.style.height = "10px"; | |
| newBox.style.position = "absolute"; | |
| newBox.style.top = y + "px"; | |
| newBox.style.left = x + "px"; | |
| document.body.appendChild(newBox); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment