Develop Reference

error click recording system but how can i have it so that the check boxes wont count as errors when clicked?

I'm trying to create a recording system that monitors the amount of clicks a user makes and counts them as errors, the only problem is I have 10 check boxes on the page also (check1 - check10) .. and each time these are clicked it counts as an error.
How can I get it so that these check boxes are excused from click counts? Also, what is the best way of getting them to remain in a 'fixed state' position on the page as I have code that shifts the page down when 2 or more are clicked but the check boxes don't move with it?
getResults();
var errors = 0;
var loadDate;
$(document).ready(function() {
loadDate = new Date();
$("*").click(function(e) {
e.stopPropagation();
var intDate = new Date();
if ($(this).data("islink") != undefined) {
var iTime = intDate.getTime() - loadDate.getTime() - benchmarkDate();
callNextPage("feedbackPage.html", "exp1-errors:" + errors, "exp1-iTime:" + iTime);
} else {
errors++;
}
$("#check1, #check2, #check3, #check4, #check5, #check6, #check7, #check8, #check9, #check10").click(function() {
$("#compare").show();
});
});
});

Permanent change to 1 div out of many of the same

I have stumbled on to a problem which I cannot find the solution to, for some time now, and it is kind of a drag, but hey, I will try to be as precice as possible, there is no stupid question so here goes.
This is a DIV table for appointments and a page, these green circles are divs also and there are 209 divs total, divs are clickable and once clicked they open up a new page in a new tab which asks the user to to enter his info Name, Last Name etc. and make an appointment.
When the user enters what is asked of him he clicks a button makes an appointment and the div that has been clicked in the previous "table" page permanently changes color to red, so when someone else visits the "table" page sees that the time for the appointment is unavailable.
I have come up with this.
TABLE PAGE CODE:
<script type="text/javascript">
window.onload = function () {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
var d = document.getElementsByClassName("circleBase type1");
for(var i = 0; i < d.length; i++) {
d[i].onclick = function() {
window.open("EnterInformation.html");
}
}
}
window.addEventListener('storage', function (event) {
if (event.storageArea === localStorage) {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
}
}, false);
APPOINTMENT PAGE CODE:
function SaveInfo() {
localStorage.Yritys = $('#Yritys').val();
localStorage.Henkilönimi = $('#Henkilönimi').val();
localStorage.Asema_yrityksessa = $('#Asema_yrityksessa').val();
localStorage.Puhelin_Nr = $("#Puhelin_Nr").val();
localStorage.e_Mail = $('#e_Mail').val();
localStorage.Keskustelun_aihe = $('#Keskustelun_aihe').val();
alert("You have successfully made an appointment");
}
function closeSelf() {
window.close(this);
}
function changeColor() {
myCustomColor = 'red';
localStorage.setItem('myDataStorage', myCustomColor);
}
With this code It works but only for 1 div the first one.
My question is do I have to add Id to all of the 209 divs I have and then copy this code 209 times for each and every one of the divs and create a specific storage for each of them? or is there an easier way to do this?
Ajax is like an acquaintance to me.
Any advice would be helpful if it helps me achieve this goal, because I can't sleep and keep thinking about the ways to end the agony!

Display & Hide Divs Sequentially on click

Basics:
I have a webpage which loads several content divs to a page, then shows them sequentially when the user clicks on the "load more" link.
Example here: JSFiddle Example
$("#load-more").click(function(e) {
var t = $(this);
if (t.data('disabled')){
return;
}
var hiddenGroups = $('.group:not(:visible)');
if (hiddenGroups.length > 0){
hiddenGroups.first().show();
} else{
t.data('disabled', true);
}
});
I have two questions based on this example:
1) The "load more" link should hide its self when the final div is showing, but is not functioning correctly in my example.
however, I'd really like it to:
2) Hide the "load more" div, and instead show/change the functionality to "Hide Items" and hide the content divs in reverse order upon click.

This is how I would do it:
JSFIDDLE
The idea:
Set a variable instructing if you are toggling more or less
var load = 'more';
check if we are loading more or less
and a function to switch the direction and the button text, to stop copy/pasting the same javascript.
Although there are only two things happening in the function, i'm working on the assumption this might grow as your application grows - if this was not to grow then it may be worth getting rid of the function andjust adding the code with the rest
The full snippet:
var load = 'more';
$("#load-more").on('click',function (e) {
// show the next hidden div.group, then disable load more once all divs have been displayed
// if we are loading more
if (load == 'more') {
// get the amount of hidden groups
var groups = $('.group:not(:visible)');
// if there are some available
if (groups.length > 0) {
// show the first
groups.first().show();
// if that was the last group then set to load less
if (groups.length == 1) {
switchLoadTo('less');
}
}
// we are loading less
} else {
// get the groups which are currently visible
var groups = $('.group:visible');
// if there is more than 1 (as we dont want to hide the initial group)
if (groups.length > 1) {
// hide the last avaiable
groups.last().hide();
// if that was the only group available, set to load more
if (groups.length == 2) {
switchLoadTo('more');
}
}
}
});
function switchLoadTo(dir) {
load = dir;
$("#load-more").html('Load ' + dir);
}

http://jsfiddle.net/8Re3t/20/
See snippet below. Probably not the most optimized code, but you get the idea and can optimize it on implementation.
var load = true;
$("#load-more").click(function(e) {
// show the next hidden div.group, then disable load more once all divs have been displayed
var t = $(this);
if (t.data('disabled')){
return;
}
var hiddenGroups = $('.group:not(:visible)');
if(load) {
hiddenGroups.first().show();
} else {
$('.group:visible').last().hide();
}
if (hiddenGroups.length > 1){
jQuery("#load-more").html("Load");
load = true;
} else {
jQuery("#load-more").html("Hide");
load = false;
}
});

How to toggle Firefox responsive design view resolution through code

I am switching on the firefox responsive design view from my xul based addon with the following code.
var mytmp = {};
Cu.import("resource://gre/modules/Services.jsm");
Services.prefs.setCharPref("devtools.responsiveUI.presets", JSON.stringify([{name:'tmp1', key: "234x899", width:300,height:300}]));
Cu.import("resource:///modules/devtools/responsivedesign.jsm", mytmp);
var win = window.bridge.myWindow;
mytmp.ResponsiveUIManager.toggle(win, win.gBrowser.tabContainer.childNodes[0]);
Following is the code which toggles the resolution
this.menulist.addEventListener("select", this.bound_presetSelected, true);
/**
* When a preset is selected, apply it.
*/
presetSelected: function RUI_presetSelected() {
if (this.menulist.selectedItem.getAttribute("ispreset") === "true") {
this.selectedItem = this.menulist.selectedItem;
this.rotateValue = false;
let selectedPreset = this.menuitems.get(this.selectedItem);
this.loadPreset(selectedPreset);
this.currentPresetKey = selectedPreset.key;
this.saveCurrentPreset();
// Update the buttons hidden status according to the new selected preset
if (selectedPreset == this.customPreset) {
this.addbutton.hidden = false;
this.removebutton.hidden = true;
} else {
this.addbutton.hidden = true;
this.removebutton.hidden = false;
}
}
},
I tried to access the menulist and do a event trigger myself but couldn't access it. How do I select the dropdown?

paa's answer does work but it creates a new custom entry in the screen presets but doesnt select an existing one. You can do so by triggering a click event on the preset select ui.
Like this
var win = window.bridge.myWindow;
var i = 3 // index of the preset to be selected
var responsiveUI= win.gBrowser.selectedTab.__responsiveUI;
$(responsiveUI.menulist.children[0].children[i]).trigger('click');

Assuming the responsive UI is turned on
gBrowser.selectedTab.__responsiveUI.setSize(320,480);
update:
I took as granted that you want to set an arbitrary size, but you actually ask about the presets. Is this still a valid answer?

Using a bookmarklet to track a package

I'm trying to write a bookmarklet that tracks a package in the mail. First it checks to see if the tracking page is open, if not it opens it in a new tab, and then sets the value of the form to the tracking number. Finally, it submits the form. What I'm so far unable to do is set the value of the form in the case where the bookmarklet opens up a new tab.
Here's what I have:
javascript: (function(){
var trackingNumber = "/*tracking number*/";
var a = document.forms.trackingForm;
if ('http://fedex.com/Tracking' == document.location) {
trackingForm.trackNbrs.value = trackingNumber;
document.forms.trackingForm.submit();
}
else {
window.open('http://fedex.com/Tracking');
this.window.onload = function(){ //This seems to be the problem
trackingForm.trackNbrs.value = trackingNumber;
onload(document.forms.trackingForm.submit());
}
}
})();
Any ideas?

window.open opens a new window, so if this is going to work at all (I have little experience with bookmarklets), you would have to address the new window directly. Something like this:
else {
new_window = window.open('http://fedex.com/Tracking');
new_window.onload = function(){
new_window.document.trackingForm.trackNbrs.value = trackingNumber;
new_window.document.forms.trackingForm.submit();
// I didn't get at all what the onload() was for, re-add if necessary
}