onClick: Load image in a random order of 10px blocks - jquery-ui

jQuery
I was wondering is any has seen any code that can load up an image in 10px blocks or any size pixel blocks.
Think of it like a grid.
+----+----+----+----+
| | | | |
| | | | |
+----+----+----+----+
| | | | |
| | | | |
+----+----+----+----+
| | | | |
| | | | |
+----+----+----+----+
I want the image to fade in, fading each block in. Hopefully super fast except in some random order.
Do this on onClick or onHover. Then fade it out off hover or onClick again.

Here's a quick mock up for you:
http://jsfiddle.net/adaz/qeNtt/
Obviously it needs some polishing but it's a good start, I guess :)
Let me know if that helps!

Related

Formula to randomly assign names in a given group with Google Sheets

I would like to create a formula in the below column Assigned so that a random name matching the same group as the current name is automatically inserted.
Names in the Assigned column must match the group of the current name and must not repeat throughout the list. I can't assign the current name with it's own name either. Any suggestions on how to do this?
I guess it is worth posting this. Although it might not be practical for large groups, it is a formula solution that works in Excel and Google sheets:
=INDEX($A$2:$A$8,SMALL(IF(($B$2:$B$8=B2)*($A$2:$A$8<>A2)*(COUNTIF(C$1:C1,$A$2:$A$8)=0),ROW($A$2:$A$8)-1),
RANDBETWEEN(1,SUM(($B$2:$B$8=B2)*($A$2:$A$8<>A2)*(COUNTIF(C$1:C1,$A$2:$A$8)=0)))))
entered as an array formula using CtrlShiftEnter
Here is an example of a successful match:
and an unsuccessful one:
As you can see, Mike, Jack and Fred have paired up together leaving Dave on his own, likewise with Lucy and Harry.
In Excel you may have to press F9 a few times to get a successful result - in Google sheets you just have to keep changing something, or set it to update every minute while you make a cup of tea.
It was my first time to work on something related to unique values, it took time but I learned lot from this question.
Answer of #Tom-Sharpe gave me an inspiration that it can be done, thanks to Tom for that. I tried and here it is.
I have checked it on some random data
+------------+-------+-------------+------------+
| Name | Group | RAND | Assigned |
| Malynda | 1 | 0.644382728 | Boonie |
| Boonie | 1 | 0.167369621 | Venus |
| Venus | 1 | 0.547165865 | Malynda |
| Jamal | 2 | 0.193081046 | Cora |
| Cora | 2 | 0.399459181 | Jamal |
| Alaster | 2 | 0.910498559 | Enrika |
| Enrika | 2 | 0.45819549 | Melisandra |
| Melisandra | 2 | 0.612592303 | Alaster |
| Petunia | 3 | 0.957104883 | Lawton |
| Mariam | 3 | 0.602293619 | Grenville |
| Caterina | 3 | 0.695342797 | Mariam |
| Stace | 3 | 0.942926886 | Caterina |
| Perle1 | 3 | 0.787227158 | Stace |
| Lawton | 3 | 0.315403693 | Perle1 |
| Grenville | 3 | 0.515276361 | Petunia |
| Elia | 4 | 0.655404975 | Catarina |
| Agosto | 4 | 0.322045058 | Fidela |
| Fidela | 4 | 0.490635045 | Agosto |
| Catarina | 4 | 0.121053081 | Elia |
| Elliot | 5 | 0.994137138 | Eddie |
| Mae | 5 | 0.349103119 | Wadsworth |
| Farleigh | 5 | 0.645375865 | Mae |
| Trudey | 5 | 0.473849475 | Farleigh |
| Gwenneth | 5 | 0.678186154 | Trudey |
| Wadsworth | 5 | 0.254168853 | Gwenneth |
| Eddie | 5 | 0.02103249 | Elliot |
| Denyse | 6 | 0.294801945 | Fayina |
| Tracie | 6 | 0.113670327 | Denyse |
| Aili | 6 | 0.901562575 | Tracie |
| Fayina | 6 | 0.029515522 | Alain |
| Mort | 6 | 0.938536467 | Perle |
| Alain | 6 | 0.389741125 | Aili |
| Perle | 6 | 0.513800791 | Mort |
| Mathew | 6 | 0.972656521 | #N/A |
| Benton | 7 | 0.423710316 | Bret |
| Bret | 7 | 0.127478128 | Benton |
| Mayne | 7 | 0.701027869 | Kirbee |
| Derry | 7 | 0.564710572 | Marje |
| Kirbee | 7 | 0.510258205 | Derry |
| Marje | 7 | 0.600908601 | Mayne |
| Devin | 7 | 0.718740939 | #N/A |
| Wilbert | 8 | 0.763761013 | Griswold |
| Brandice | 8 | 0.482092682 | Marty |
| Griswold | 8 | 0.111418464 | Brandice |
| Brandais | 8 | 0.594020577 | Fair |
| Kim | 8 | 0.727863883 | Brandais |
| Cam | 8 | 0.858246187 | Kim |
| Fair | 8 | 0.640979168 | Wilbert |
| Ardath | 8 | 0.883008322 | Cam |
| Marty | 8 | 0.339506717 | Ardath |
+------------+-------+-------------+------------+
D2 contains the below formula
=INDEX(
$A$2:$A$51,
MATCH(
MIN(IF(
(COUNTIF($D$1:D1,$A$2:$A$51)=0)*
($B$2:$B$51=B2)*
($A$2:$A$51<>A2),
$C$2:$C$51)
),
$C$2:$C$51,0)
)
C2 contains just the RAND() function but it is pasted as values so that it doesn't update on every calculation, but if you want you can keep it as a function
There are some #N/A values returned by the formula, it arrives when there is no other person left that can be assigned.
Check it on your data and let me know if it working correctly.
Note that the formula is assuming that names are unique and are sorted based on the groups.
If you're fluent with javascript you could attempt to use Google Apps Script to handle this by going to the toolbar Tools > Script Editor. Another way would be to record a macro via Tools > Macros > Record Macro. The script I generated via this method is below, however I couldn't figure out how to prevent assigning the current name with it's own name. My workaround for that is to select the range of assigned names in the same group and applying Data > Randomize Range until the assignment is satisfactory.
function AppendRandomNameByGroup() {
//Sort based on integer in group column
var spreadsheet = SpreadsheetApp.getActive();
var sheet = spreadsheet.getActiveSheet();
sheet.getRange(1, 1, sheet.getMaxRows(), sheet.getMaxColumns()).activate();
spreadsheet.getActiveRange().offset(1, 0, spreadsheet.getActiveRange().getNumRows() - 1).sort({column: spreadsheet.getActiveRange().getColumn() + 1, ascending: true});
spreadsheet.getRange('C2').activate();
//Duplicate names to assigned names column
spreadsheet.getRange('A2:A1000').copyTo(spreadsheet.getActiveRange(), SpreadsheetApp.CopyPasteType.PASTE_NORMAL, false);
var sheet = spreadsheet.getActiveSheet();
sheet.getRange(1, 1, sheet.getMaxRows(), sheet.getMaxColumns()).activate();
//Filter for each group and randomize items in 'assigned' column
sheet = spreadsheet.getActiveSheet();
sheet.getRange(1, 1, sheet.getMaxRows(), sheet.getMaxColumns()).createFilter();
spreadsheet.getRange('B1').activate();
var criteria = SpreadsheetApp.newFilterCriteria()
.setHiddenValues(['', '2', '3'])
.build();
spreadsheet.getActiveSheet().getFilter().setColumnFilterCriteria(2, criteria);
spreadsheet.getRange('C2:C1000').activate();
spreadsheet.setCurrentCell(spreadsheet.getRange('C4'));
spreadsheet.getActiveRange().randomize();
spreadsheet.getRange('B1').activate();
criteria = SpreadsheetApp.newFilterCriteria()
.setHiddenValues(['1', '', '3'])
.build();
spreadsheet.getActiveSheet().getFilter().setColumnFilterCriteria(2, criteria);
spreadsheet.getRange('C2:C1000').activate()
.randomize();
spreadsheet.getRange('B1').activate();
criteria = SpreadsheetApp.newFilterCriteria()
.setHiddenValues(['2', '', '1'])
.build();
spreadsheet.getActiveSheet().getFilter().setColumnFilterCriteria(2, criteria);
spreadsheet.getRange('C2:C1000').activate();
spreadsheet.setCurrentCell(spreadsheet.getRange('C8'));
spreadsheet.getActiveRange().randomize();
spreadsheet.getActiveSheet().getFilter().remove();
};
If you're trying to set-up a secret santa of some kind, another possible alternative to using scripts would be this Google Sheets Add-On that does something similar including the group functionality that you desire. However instead of assigning a recipient name in-sheet, it requires you to input corresponding e-mail addresses for each name and proceeds to email each participant with their assigned name.
Secret Santa
Sorry that this doesn't fit all your criteria.

Rails Many to many relationships with connecting or cloning two table with references?

I'm a new with Rails and I'm having trouble with some types of associations that seem a bit more complex than the ones I've been exposed to so far.
Zombie_users Body_parts_status Body_parts
| id | name | | id | user_id | body_part_id | recovery | | id | name |
|-----------| --> |----------------------------------------| --> |---------------|
| 1 | Joe | | 1 | 1 | 2 | 10% | | 1 | left leg |
| 2 | Max | | 2 | 1 | 3 | 43% | | 2 | brain |
| 3 | hair |
| 4 | blue eye |
Zobmie_users Recovery_tools Body_parts_impacts
| id | name | | id |user_id| name | | id|recovery_tool_id| body_part_id | impact |
|-----------|-->|-------------------|-->|--------------------------------------------|
| 1 | Joe | | 1 | 1 |hammer| | 1 | 1 | 2 | 10% |
| 2 | Max | | 2 | 1 |magic | | 2 | 2 | 3 | 43% |
graphic illustration of the needed functionality
We have users and a list of body parts.
I need that the users will be able to create recovery tools with which they can through Body Parts impact recover their body parts status :)
and be able to check what part of the body still need to be fixed(compared to the list) and what body parts they have already corrected.
My problem is that I do not know how to implement such connections.
because I need to have some kind of clone of the body parts to body parts status for each user.
But how I reference it so it also works with Body Parts impacts
I do not have even a concept of where to start :)
body parts table is just a long listing of all the parts of the human body
and each user should have their own "copy" of all these parts.

Keeping JavaScript state in an ePub's spine

Is it possible to keep code state across pages in an ePub? More specifically do readers like iBooks allow this type of state?
spine.js
+---------+----------+
| | |
+--------+ +--------+ +--------+
| Page 1 | | Page 2 | | Page |
| Quiz1 | | Quiz2 | | (n) |
| | | | | Result |
| | | | | |
+--------+ +--------+ +--------+
In this example, the last page could contain a score but state is required. WebSQL is out of the question since it's not supported by webkit ereaders and websockets demand a connection. Any thoughts?
No. Each HTML file is independent. To share information, you'll need to use some kind of local storage such as window.localStorage, but it's very hard to find out what device supports what level of HTML5.
UPDATE: This thread says localStorage is in fact supported.

Can I have a cucumber example with several values in a single column x row position

Hi here is what I what I have:
Scenario Outline: Seatching for stuff
Given that the following simple things exists:
| id | title | description | temp |
| 1 | First title | First description | low |
| 2 | Second title | Second description with öl | Medium |
| 3 | Third title | Third description | High |
| 11 | A title with number 2 | can searching numbers find this 2 | Exreme |
When I search for <criteria>
Then I should get <result>
And I should not get <excluded>
Examples
|criteria|results | excluded |
| 1 | 1 | 2,3,11 |
| 11 | 11 | 1,2,3 |
| title | 1,2,3 | 11 |
| öl | 2 | 1,3,11 |
| Fir* | 1 | 2,3,11 |
| third | 3 | 1,2,11 |
| High | 3 | 1,2,11 |
As you can see I'm trying to test a search field for a web-application using cucumber and the scenario outline structure in order to test several search criteria.
I'm not sure how to handle the input I would get as result and excluded in my steps.
Maybe this doesn't work at all?
Is there a workaround?
There's nothing wrong with what you're doing. Cucumber will just take that as a single string. The fact that it's actually comma-separated values means nothing to Cucumber.
Your step definition would still look like this:
Then /^I should not get ([^"]*)$/ do |excluded|
# excluded will be a string, "2,3,11"
values = excluded.split(",")
# Do whatever you want with the values
end

Is it possible to link to a bookmark within a PDF using URL parameters?

When providing a link to a PDF file on a website, is it possible to include information in the URL (request parameters) which will make the PDF browser plugin (if used) jump to a particular bookmark instead of just opening at the beginning?
Something like: http://www.somehost.com/user-guide.pdf?bookmark=chapter3 ?
If not a bookmark, would it be possible to go to a particular page?
I'm assuming that if there is an answer it may be specific to Adobe's PDF reader plugin or something, and may have version limitations, but I'm mostly interested in whether the technique exists at all.
Yes, you can link to specific pages by number or named locations and that will always work if the user's browser uses Adobe Reader as plugin for viewing PDF files.
For a specific page by number:
Link text
For a named location (destination):
Link text
To create destinations within a PDF with Acrobat:
Manually navigate through the PDF for the desired location
Go to View > Navigation Tabs > Destinations
Under Options, choose Scan Document
Once this is completed, select New Destination from the Options menu and enter an appropriate name
RFC 3778 section 3 specifies "Fragment Identifiers" that can be used with PDF files, which include nameddest and page.
There are multiple query parameters that can be handled.
Full list below:
Source
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| Syntax | Description | Example |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| nameddest=destination | Specifies a named destination in the PDF document | http://example.org/doc.pdf#Chapter6 |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| page=pagenum | Specifies a numbered page in the document, using an integer | http://example.org/doc.pdf#page=3 |
| | value. The document’s first page has a pagenum value of 1. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| comment=commentID | Specifies a comment on a given page in the PDF document. Use | #page=1&comment=452fde0e-fd22-457c-84aa- |
| | the page command before this command. | 2cf5bed5a349 |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| collab=setting | Sets the comment repository to be used to supply and store | #collab=DAVFDF#http://review_server/Collab |
| | comments for the document. This overrides the default comment | /user1 |
| | server for the review or the default preference. The setting is of the | |
| | form store_type#location, where valid values for store_type are: | |
| | ● DAVFDF (WebDAV) | |
| | ● FSFDF (Network folder) | |
| | ● DB (ADBC) | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| zoom=scale | Sets the zoom and scroll factors, using float or integer values. For | http://example.org/doc.pdf#page=3&zoom=200,250,100 |
| zoom=scale,left,top | example, a scale value of 100 indicates a zoom value of 100%. | |
| | Scroll values left and top are in a coordinate system where 0,0 | |
| | represents the top left corner of the visible page, regardless of | |
| | document rotation | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| view=Fit | Set the view of the displayed page, using the keyword values | http://example.org/doc.pdf#page=72&view=fitH,100 |
| view=FitH | defined in the PDF language specification. For more information, | |
| view=FitH,top | see the PDF Reference. | |
| view=FitV | Scroll values left and top are floats or integers in a coordinate | |
| view=FitV,left | system where 0,0 represents the top left corner of the visible | |
| view=FitB | page, regardless of document rotation. | |
| view=FitBH | Use the page command before this command. | |
| view=FitBH,top | | |
| view=FitBV | | |
| view=FitBV,left | | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| viewrect=left,top,wd,ht | Sets the view rectangle using float or integer values in a | |
| | coordinate system where 0,0 represents the top left corner of the | |
| | visible page, regardless of document rotation. | |
| | Use the page command before this command. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| pagemode=bookmarks | Displays bookmarks or thumbnails. | http://example.org/doc.pdf#pagemode=bookmarks&page=2 |
| pagemode=thumbs | | |
| pagemode=none | | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| scrollbar=1|0 | Turns scrollbars on or off | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| search=wordList | Opens the Search panel and performs a search for any of thewords in the specified word list. | #search="word1 word2" |
| | The first matching word ishighlighted in the document. | |
| | The words must be enclosed in quotation marks and separated byspaces. | |
| | You can search only for single words. You cannot search for a string of words. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| toolbar=1|0 | Turns the toolbar on or off. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| statusbar=1|0 | Turns the status bar on or off. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| messages=1|0 | Turns the document message bar on or off. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| navpanes=1|0 | Turns the navigation panes and tabs on or off. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| highlight=lt,rt,top,btm | Highlights a specified rectangle on the displayed page. Use the | |
| | page command before this command. | |
| | The rectangle values are integers in a coordinate system where | |
| | 0,0 represents the top left corner of the visible page, regardless of | |
| | document rotation | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
| fdf=URL | Specifies an FDF file to populate form fields in the PDF file beingopened. | #fdf=http://example.org/doc.fdf |
| | Note: The fdf parameter should be specified last in a URL. | |
+-------------------------+----------------------------------------------------------------------------------------------+------------------------------------------------------+
It's worth adding that Wayne's solution also works in:
Chrome (since v. 14 from 2011, see this issue for details) (tested on v. 87 and v. 44),
Firefox (tested on v. 84.0.1 and v. 40),
Opera (tested on v. 73 and v. 31),
Safari (tested on v. 14.0.2, it didn't work on v. 8),
(Updated with the current versions as of January 2021.)
PDF Open Parameters documents the available URL fragments you can use.

Resources