Beginner in html, css, and javascript: "Tips for saving jsfiddle demos?"

Recently, I developed an interest in JavaScript and CSS and came across some impressive examples on jsfiddle.

I was wondering if there is a way to "export" these examples to my computer. Simply copying and pasting doesn't seem to work. How can I modify this specific example: http://jsfiddle.net/MvFx9/

test.html

<html>
    <head>
    <link href='grid-overlay.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="grid-source"><img src="http://www.google.com/images/logos/ps_logo2.png"></div>     
        <script src="grid-overlay.js"></script>
    </body> 
</html>

grid-overlay.css:

#grid-source {
  position: absolute;
}

#grid-overlay {
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.unselected {
  background-color: rgba(0, 0, 0, 0.5);
}

.selected {
  background-color: none;
}

grid-overlay.js

var $src = $('#grid-source');
var $wrap = $('<div id="grid-overlay"></div>');
var $gsize = 10;

var $cols = Math.ceil($src.find('img').innerWidth() / $gsize);
var $rows = Math.ceil($src.find('img').innerHeight() / $gsize);

// create overlay
var $tbl = $('<table></table>');
for (var y = 1; y <= $rows; y++) {
  var $tr = $('<tr></tr>');
  for (var x = 1; x <= $cols; x++) {
    var $td = $('<td></td>');
    $td.css('width', $gsize + 'px').css('height', $gsize + 'px');
    $td.addClass('unselected');
    $tr.append($td);
  }
  $tbl.append($tr);
}
$src.css('width', $cols * $gsize + 'px').css('height', $rows * $gsize + 'px')

// attach overlay
$wrap.append($tbl);
$src.after($wrap);

$('#grid-overlay td').hover(function() {
  $(this).toggleClass('hover');
});

$('#grid-overlay td').click(function() {
  $(this).toggleClass('selected').toggleClass('unselected');
});

The script doesn't seem to respond beyond displaying the Google logo.

Answer №1

Don't forget to include the jQuery link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Make sure to place it in the head section of your HTML document

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting a matter of spacing in HTML5 body

I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

How to add Bootstrap and Font Awesome to your Angular project

After attempting to add Bootstrap and Font Awesome to my Angular application, I am encountering issues. I utilized the command npm install --save bootstrap font-awesome and included both libraries in the angular.json file as follows: "styles": ...

Tips for automatically disabling cloudzoom based on image width

I'm currently utilizing cloudzoom with the given markup: <div id="container"> <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoom ...

What is the best way to utilize mysql for storing user state in order to restrict them from taking a particular action more than once per day?

< button type="button" id="daily-reward-button">Claim</button> 1) When a user clicks this button, it should be disabled which will result in the user being banned in the MYSQL database and unable to click the button again. 2) The button shoul ...

Guide to implementing a random number generator within a Jquery conditional statement

I am experimenting with if statements, but I'm encountering some difficulties. My goal is to assign random numbers to a variable and then trigger different actions based on a click event. Here's what I've tried so far, but it seems to be fa ...

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

After skimming through various textbooks and blog posts, I've noticed that many explanations on event handlers in React are quite vague... For example, when instructed to write, onChange = {() => setValue(someValue)} onChange = {() => this.pro ...

Reduce the amount of time it takes for a Google AdWords Script to generate a

According to Google Script best practices, it is recommended to store operations in an array and then call the methods once all the operations have been constructed. This helps minimize response time each time a service is called. For example, let's ...

What is the difference between achieving a mirror effect and a steel effect using Three.js?

When using three.js, I find myself a little confused about the concepts of metalness and roughness. Can someone explain the differences between metalness and roughness when applied to materials like mirrors and metals/steel? And furthermore, how can these ...

Ways to close jQuery Tools Overlay with a click, regardless of its location

I have integrated the Overlay effect from jQuery Tools to my website, with the "Minimum Setup" option. However, I noticed that in order to close it, the user has to specifically target a small circle in the upper right corner which can affect usability. It ...

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

Using PHP and AJAX, populate a table based on the selection made from a dropdown

Hello, thank you for taking the time to review my issue. Let me outline the objective. I have successfully implemented two drop-down menus that are populated dynamically from a database. The query retrieves names and phone numbers (with plans to fetch mor ...

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

Reload a jquery pop up upon closing a pop up window

I have a modal pop up that appears after clicking an ASP button : <div class="form-group"> <asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" /> </div> Code Behind : protected ...

Angular directive ng-if on a certain path

Is it possible to display a specific div based on the route being viewed? I have a universal header and footer, but I want to hide something in the header when on the / route. <body> <header> <section ng-if=""></section&g ...

Why am I seeing numbers in the output when I log the data from the res.write(data) function in Node.js?

While working with Node.js on my Raspberry Pi, I encountered an issue where reading a local file 'test.html' resulted in hex output instead of the expected HTML format. Can someone explain why this might be happening? Additionally, I am aware tha ...

Using the Github API in javascript, store an image as an image by saving its base64 Data URL

I have a base64 encoded Data URL of a webp image that looks like this: data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs= My goal is to push this image to GitHub using their API in the form of a webp image. To clarify, I want to achi ...

Transitioning from traditional Three.js written in vanilla JavaScript to React Three Fiber involves a shift in

I am currently faced with the task of converting a vanilla JS Three.js script to React Three Fiber. import * as THREE from 'three'; let scene, camera, renderer; //Canvas const canvas = document.querySelector('canvas') //Number of lin ...

Exploring an array in Angular 2 using TypeScript

Just starting out with typescript and angular2 and working through some issues. I have a form that needs to display results from an array of changing items, so I don't know the exact index of each result. Here is my scenario: In my form.html file: ...

Using jQuery or JavaScript to clear multiple selections in a multiselect dropdown when a button is clicked

Is there a way to clear the dropdown selections once my function saves data to local storage? You can refer to this fiddle for more details: http://jsfiddle.net/3u7Xj/139/ I already have code in place to handle other form elements: var $form = $("#formI ...