I've made a simple jQuery script which stores values "voted1", "voted2", "voted3" in localStorage. The problem is that on click it stores all values at the same time, and I need it per click as it should be later called (e.g. if "value3" exists begin jQuery logic...)
I can't figure this out, after weeks of testing..
HTML:
[gallery link="none" size="medium" ids="102,13,27,25,23,15" orderby="rand"]
<div class="exists" style="display: none;">Thank you for voting!</div>
CSS:
.gallery-item a {
background-color: black;
border: 1px solid orange;
border-radius: 6px;
color: orange;
display: inline-table;
font-size: 14px;
font-weight: bold;
max-width: 100%;
width: 32%;
}
.exists {
background-color: black;
border-radius: 18px;
box-shadow: 1px 3px 20px -3px grey inset;
display: block;
height: 32%;
left: 24%;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
max-width: 100%;
padding-left: 12%;
padding-top: 6%;
position: fixed;
top: 23%;
width: 36%;
z-index: 999999;
color: olivedrab;
font-weight: bold;
cursor: context-menu;
}
.voted {
background-color: green !important;
}
jQuery:
$(document).ready(function() {
var voteLink = $('.gallery-item a');
var votedYes = $('.exists');
voteLink.one('click', function() {
// localStorage.setItem('voted1', 'yes1');
$(this).text('Thank you!');
$(this).addClass('voted');
})
voteLink.one('click', function() {
// localStorage.setItem('voted2', 'yes2');
$(this).text('Thank you!');
$(this).addClass('voted');
})
voteLink.one('click', function() {
localStorage.setItem('voted3', 'yes3');
$(this).text('Thank you!');
$(this).addClass('voted');
if($('.voted').length === 3){
voteLink.fadeOut('slow');
$('.exists').fadeIn(1800);
}
if (localStorage.getItem("voted3")) {
voteLink.remove();
votedYes.fadeIn(1800);
}
});
As I said, on first click it places all values in localStorage and I need this separated.
Thanks guys.
$(document).ready(function() {
var voteLink = $(".gallery-item a");
var votedYes = $(".exists");
if (localStorage.getItem("count") === null) {
localStorage.setItem("count", 1)
}
if (!(localStorage.getItem("voted3") === "yes3")) {
var i = Number(localStorage.getItem("count")),
fn = function(e) {
if (i < 3) {
localStorage.setItem("voted" + i, "yes" + i);
$(this).text("Thank you! for vote " + i)
.addClass("voted" + i);
localStorage.setItem("count", 1 + i);
i = Number(localStorage.getItem("count"));
} else {
localStorage.setItem("voted" + i, "yes" + i);
$(this).text("Thank you! for vote " + i)
.addClass("voted" + i)
.fadeOut("slow");
if (localStorage.getItem("voted3") === "yes3") {
voteLink.remove();
votedYes.fadeIn(1800);
}
}
};
voteLink.on("click", fn);
} else {
// if `localStorage` has property `"voted3"` and value equals `"yes3"`,
// do stuff
}
})
Caveat: This answer may be completely off, since your question comes without all the details of your use case. However ...
The following code assumes that ...
up to 3 votes shall be recorded in localStorage
in order to cast the vote n+1, vote n must have been recorded before.
Either register the handlers contingent on the content in localStorage:
if (
localStorage.getItem("voted1")
&& !localStorage.getItem("voted2")
) {
voteLink.one('click', function() {
localStorage.setItem('voted2', 'yes2');
//...
});
}
... or test the localStorage contents inside your event handler:
fn_vote2 = function() {
if (
localStorage.getItem("voted1")
&& !localStorage.getItem("voted2")
) {
localStorage.setItem('voted2', 'yes2');
//...
voteLink.off('click', fn_vote2);
}
};
voteLink.on('click', fn_vote2);
The generalization for vote1, vote3 should come easy. Note that the latter solution implies that you register the handler not just for a single event. Instead you deregister it upon success.
The advantage of the method is the option for cascaded voting without reloading the page.
Btw, since localStorage persists over sessions, it is advisable not to use generic keys like vote<n>.
Related
I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.
Relevant code:
Select chunk of form:
<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>
Manipulating selects (arrays defined earlier):
function rankFeatures(create) {
var $optionList = $("#optionList");
var $ranks = $("#ranks");
if(create == true) {
for(i=0; i<5; i++){
$optionList.append(features[i]);
};
}
else {
var index = $optionList.val();
$('#optionList option:selected').remove();
$ranks.append(features[index]);
};
}
This all works. It all falls apart when I try to deal with hovering over options:
$(document).ready(
function (event) {
$('select').hover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up.
I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?
You can use the mouseenter event.
And you do not have to use all this code to check if the element is an option.
Just use the .on() syntax to delegate to the select element.
$(document).ready(function(event) {
$('select').on('mouseenter','option',function(e) {
alert('yeah');
// this refers to the option so you can do this.value if you need..
});
});
Demo at http://jsfiddle.net/AjfE8/
try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).
function (event) {
$('select').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.
$('option').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
console.log('yeah!');
};
})
Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/
That you want is to detect hover event on option element, not on select:
$(document).ready(
function (event) {
$('#optionList option').hover(function(e) {
console.log(e.target);
});
})
I have the same issue, but none of the solutions are working.
$("select").on('mouseenter','option',function(e) {
$("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
$("#show-me").hide();
});
$("option").mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
});
Here my jsfiddle https://jsfiddle.net/ajg99wsm/
I would recommend to go for a customized variant if you like to ease
capture hover events
change hover color
same behavior for "drop down" and "all items" view
plus you can have
resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items
Just have a look to the sample attached.
$(document).ready(function() {
$('.custopt').addClass('liunsel');
$(".custopt, .custcont").on("mouseover", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "block")
} else {
$(this).addClass("lihover");
}
})
$(".custopt, .custcont").on("mouseout", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "none")
} else {
$(this).removeClass("lihover");
}
})
$(".custopt").on("click", function(e) {
$(".custopt").removeClass("lihover");
if ($("#btsm").val() == "ssm") {
//single select mode
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
$(this).removeClass("liunsel");
$(this).addClass("lisel");
} else if ($("#btsm").val() == "msm") {
//multiple select mode
if ($(this).is(".lisel")) {
$(this).addClass("liunsel");
$(this).removeClass("lisel");
} else {
$(this).addClass("lisel");
$(this).removeClass("liunsel");
}
}
updCustHead();
});
$(".custbtn").on("click", function() {
if ($(this).val() == "ssm") {
$(this).val("msm");
$(this).text("switch to single-select mode")
} else {
$(this).val("ssm");
$(this).text("switch to multi-select mode")
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
}
updCustHead();
});
function updCustHead() {
if ($("#btsm").val() == "ssm") {
if ($(".lisel").length <= 0) {
$("#hrnk").text("current selected option");
} else {
$("#hrnk").text($(".lisel").text());
}
} else {
var numopt = +$(".lisel").length,
allopt = $(".custopt").length;
$("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
}
}
});
body {
text-align: center;
}
.lisel {
background-color: yellow;
}
.liunsel {
background-color: lightgray;
}
.lihover {
background-color: coral;
}
.custopt {
margin: .2em 0 .2em 0;
padding: .1em .3em .1em .3em;
text-align: left;
font-size: .7em;
border-radius: .4em;
}
.custlist,
.custhead {
width: 100%;
text-align: left;
padding: .1em;
border: LightSeaGreen solid .2em;
border-radius: .4em;
height: 4em;
overflow-y: auto;
resize: vertical;
user-select: none;
}
.custlist {
display: none;
cursor: pointer;
}
.custhead {
resize: none;
height: 2.2em;
font-size: .7em;
padding: .1em .4em .1em .4em;
margin-bottom: -.2em;
width: 95%;
}
.custcont {
width: 7em;
padding: .5em 1em .6em .5em;
/* border: blue solid .2em; */
margin: 1em auto 1em auto;
}
.custbtn {
font-size: .7em;
width: 105%;
}
h3 {
margin: 1em 0 .5em .3em;
font-weight: bold;
font-size: 1em;
}
ul {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
<div>
<button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
</div>
<div id="hrnk" class="custhead">
current selected option
</div>
<ul id="ranks" class="custlist">
<li class="custopt">option one</li>
<li class="custopt">option two</li>
<li class="custopt">another third long option</li>
<li class="custopt">another fourth long option</li>
</ul>
</div>
I am trying to create an array that holds all pending error messages that shows up on the DOM (Using jquery for that) and then loop through the array to see if there is any error messages to call, and if so remove them after executing them.
My problem is that I can't figure out how to push a function into an array and then execute it. This is what I have so far:
var dialogQueue = []
dialogQueue.push(errorCall("test", "test", "test", "test"));
for (var queueNum = 1, 1 < dialogQueue.length, 1++) {
alert(dialogQueue[1])
}
And if it helps, my code for showing the error messages:
function dialogShow() {
$(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
$(".body-wrapper").addClass("errorFilter");
$(".dialog-anim").animate({
opacity: 1,
marginTop: "-=20px"
})
setTimeout(function () {
$(".errorFilter").addClass("blur");
}, 100);
}
function dialogHide() {
$(".dialog-con").css("background", "rgba(0,0,0,.0")
$(".body-wrapper").removeClass("blur");
$(".dialog-anim").animate({
opacity: 0,
marginTop: "-=25px"
}, 300)
setTimeout(function () {
$(".dialog-con").css("display", "none");
$(".body-wrapper").removeClass("errorFilter");
// Code for removing the function from the array after pushing OK on the dialog
}, 1000);
}
function errorCall(title, sub, text, code) {
$(".dialog .title").text(title);
$(".dialog .subtitle").text(sub);
$(".dialog .text").html(text);
$(".dialog .error-code").html(code);
dialogShow();
}
I'll give you a fiddle with the full errorCall() function in action:
function dialogShow() {
$(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
$(".body-wrapper").addClass("errorFilter");
$(".dialog-anim").animate({
opacity: 1,
marginTop: "-=20px"
})
setTimeout(function () {
$(".errorFilter").addClass("blur");
}, 100);
}
function dialogHide() {
$(".dialog-con").css("background", "rgba(0,0,0,.0")
$(".body-wrapper").removeClass("blur");
$(".dialog-anim").animate({
opacity: 0,
marginTop: "-=25px"
}, 300)
setTimeout(function () {
$(".dialog-con").css("display", "none");
$(".body-wrapper").removeClass("errorFilter");
}, 1000);
}
function errorCall(title, sub, text, code) {
$(".dialog .title").text(title);
$(".dialog .subtitle").text(sub);
$(".dialog .text").html(text);
$(".dialog .error-code").html(code);
dialogShow();
}
errorCall("Hello stackoverflow!","This is how my error message dialog looks!","Blah blah blah blah","Code code code");
.dialog-con {
height: 100%;
display: none;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, .0);
z-index: 50;
transition: ease 300ms;
}
.dialog-anim {
width: 100%;
height: 100%;
display: none;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
margin-top: -20px;
}
.dialog {
margin: auto;
padding: 12px 27px;
background: white;
border-radius: 3px;
width: 520px;
transform: translateY(30px)
}
.dialog .title-con {
margin-bottom: 25px;
}
.dialog .title {
font-size: 35px;
padding-bottom: 7px;
}
.dialog .error-code {
margin-top: 15px;
color: rgba(0, 0, 0, .6);
font-family: "Courier New", Courier, monospace
}
.dialog .subtitle {
font-size: 17px;
color: rgba(0, 0, 0, 0.4);
}
.dialog .text {}
.dialog .button-con {
margin-top: 25px;
}
.dialog button {
margin: auto;
float: right;
color: white;
border: none;
padding: 9px 37px;
background: #10b5ff;
text-transform: uppercase;
font-weight: bold;
border-radius: 3px;
}
.dialog button:hover {
background: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dialog-con">
<div class="dialog-anim">
<div class="dialog">
<div class="title-con">
<div class="title">Error Message Title</div>
<div class="subtitle"></div>
</div>
<div class="text-con">
<div class="text">Error Message</div>
<div class="error-code"></div>
</div>
<div class="button-con" onclick="dialogHide()">
<button>Ok</button>
</div>
</div>
</div>
</div>
(The ok button displacement is a result of the tiny viewport, ignore it.)
So the reason I want to do this is that in the event that something triggers multiple errors, they get pushed to the array and shown one after one (Pressing OK shows the next one etc).
You need to create a function wrapper to store them in the array. As it stands you're invoking errorCall as you push it to the array. Try this code instead:
var dialogQueue = []
dialogQueue.push(
function () {
errorCall("test", "test", "test", "test")
}
);
for (var queueNum = 0, 1 < dialogQueue.length, queueNum++) {
alert( dialogQueue[queueNum]() );
}
You also wanted to remove after execution, so could do it like this instead:
while(dialogQueue.length > 0) {
alert( dialogueQueue[0]() );
dialogueQueue.shift();
}
Here's a simplified example:
var funcArr = [];
funcArr.push( console.log("Cat") );
// This immediately calls console.log, logging "cat". After console.log is
// evaluated we push its return value `undefined`
// Instead, we wrap the console.log in an anonymous function. This gives us
// a function which will execute what we desire when it is called.
funcArr.push( function() { console.log("cat"); } );
// there is nothing to invoke now, because we are creating a new function.
// now if we:
console.log( funcArr );
// we get: [function anonymous()]
// So if we say:
funcArr[0];
// this will evaluate to:
function() {
console.log("cat");
};
// Therefore invoking funcArr[0] calls an anonymous function, which runs
// the function we actually wanted to run.
funArr[0]();
An alternative to ChadF's approach would be to instantiate a function and call a method on it when you want to show the message.
// Your base function
function error(a, b, c, d) {
this.show = function() {
alert(a + " " + b + " " + c + " " + d);
};
}
var dialogQueue = [];
// Creating an instance of "error"
dialogQueue.push(new error("test", "test2", "test3", "test4"));
dialogQueue.push(new error("testing again", "test2", "test3", "test4"));
alert("Data finished pushing");
for (var i = 0; i < dialogQueue.length; i++) {
// Calling the "show" method from "error"
dialogQueue[i].show();
}
you can push the args onto the array, and use that to execute the function. you can use apply to call a given function with a set of arguments.
like this:
dialogQueue=[];
//fill the queue with arguments
dialogQueue.push([1,2,3,4]);
dialogQueue.push(["test","test","test","test"]);
dialogQueue.push(["bla","bla","bla","bla"]);
//fire off everything in the queue
var len=dialogQueue.length;
for (i=0;i<len;i++) {
//pop off the args, and use apply to call them
var args=dialogQueue.pop();
errorCall.apply(this, args);
}
I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.
Relevant code:
Select chunk of form:
<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>
Manipulating selects (arrays defined earlier):
function rankFeatures(create) {
var $optionList = $("#optionList");
var $ranks = $("#ranks");
if(create == true) {
for(i=0; i<5; i++){
$optionList.append(features[i]);
};
}
else {
var index = $optionList.val();
$('#optionList option:selected').remove();
$ranks.append(features[index]);
};
}
This all works. It all falls apart when I try to deal with hovering over options:
$(document).ready(
function (event) {
$('select').hover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up.
I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?
You can use the mouseenter event.
And you do not have to use all this code to check if the element is an option.
Just use the .on() syntax to delegate to the select element.
$(document).ready(function(event) {
$('select').on('mouseenter','option',function(e) {
alert('yeah');
// this refers to the option so you can do this.value if you need..
});
});
Demo at http://jsfiddle.net/AjfE8/
try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).
function (event) {
$('select').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.
$('option').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
console.log('yeah!');
};
})
Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/
That you want is to detect hover event on option element, not on select:
$(document).ready(
function (event) {
$('#optionList option').hover(function(e) {
console.log(e.target);
});
})
I have the same issue, but none of the solutions are working.
$("select").on('mouseenter','option',function(e) {
$("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
$("#show-me").hide();
});
$("option").mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
});
Here my jsfiddle https://jsfiddle.net/ajg99wsm/
I would recommend to go for a customized variant if you like to ease
capture hover events
change hover color
same behavior for "drop down" and "all items" view
plus you can have
resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items
Just have a look to the sample attached.
$(document).ready(function() {
$('.custopt').addClass('liunsel');
$(".custopt, .custcont").on("mouseover", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "block")
} else {
$(this).addClass("lihover");
}
})
$(".custopt, .custcont").on("mouseout", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "none")
} else {
$(this).removeClass("lihover");
}
})
$(".custopt").on("click", function(e) {
$(".custopt").removeClass("lihover");
if ($("#btsm").val() == "ssm") {
//single select mode
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
$(this).removeClass("liunsel");
$(this).addClass("lisel");
} else if ($("#btsm").val() == "msm") {
//multiple select mode
if ($(this).is(".lisel")) {
$(this).addClass("liunsel");
$(this).removeClass("lisel");
} else {
$(this).addClass("lisel");
$(this).removeClass("liunsel");
}
}
updCustHead();
});
$(".custbtn").on("click", function() {
if ($(this).val() == "ssm") {
$(this).val("msm");
$(this).text("switch to single-select mode")
} else {
$(this).val("ssm");
$(this).text("switch to multi-select mode")
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
}
updCustHead();
});
function updCustHead() {
if ($("#btsm").val() == "ssm") {
if ($(".lisel").length <= 0) {
$("#hrnk").text("current selected option");
} else {
$("#hrnk").text($(".lisel").text());
}
} else {
var numopt = +$(".lisel").length,
allopt = $(".custopt").length;
$("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
}
}
});
body {
text-align: center;
}
.lisel {
background-color: yellow;
}
.liunsel {
background-color: lightgray;
}
.lihover {
background-color: coral;
}
.custopt {
margin: .2em 0 .2em 0;
padding: .1em .3em .1em .3em;
text-align: left;
font-size: .7em;
border-radius: .4em;
}
.custlist,
.custhead {
width: 100%;
text-align: left;
padding: .1em;
border: LightSeaGreen solid .2em;
border-radius: .4em;
height: 4em;
overflow-y: auto;
resize: vertical;
user-select: none;
}
.custlist {
display: none;
cursor: pointer;
}
.custhead {
resize: none;
height: 2.2em;
font-size: .7em;
padding: .1em .4em .1em .4em;
margin-bottom: -.2em;
width: 95%;
}
.custcont {
width: 7em;
padding: .5em 1em .6em .5em;
/* border: blue solid .2em; */
margin: 1em auto 1em auto;
}
.custbtn {
font-size: .7em;
width: 105%;
}
h3 {
margin: 1em 0 .5em .3em;
font-weight: bold;
font-size: 1em;
}
ul {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
<div>
<button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
</div>
<div id="hrnk" class="custhead">
current selected option
</div>
<ul id="ranks" class="custlist">
<li class="custopt">option one</li>
<li class="custopt">option two</li>
<li class="custopt">another third long option</li>
<li class="custopt">another fourth long option</li>
</ul>
</div>
The following code displays as intended in FireFox, but isn't displaying at all in Internet Explorer (v8).
// getLimits init
Frog.API.get('users.getInfo',
{
'params': {'id': UWA.Environment.user.id, 'details':'groups' },
'onSuccess': AssignPoints.getLimit,
'onError': function(err) { alert(err); }
});
...
// work out the user's limit, and how many points they've spent this week
// use LEAP library if necessary
AssignPoints.getLimit = function(data) {
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
if (AssignPoints.Limit == 0) {
AssignPoints.Specialist = true;
}
UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent);
}
AssignPoints.getPointsSpent = function(data) {
AssignPoints.SpentWeekly = data.SpentWeekly;
AssignPoints.SpentTotal = data.SpentTotal;
AssignPoints.displayLimitAndTotals();
}
// display data from getLimitAndTotals
AssignPoints.displayLimitAndTotals = function() {
var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
if (AssignPoints.Specialist == false) {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
} else {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
}
LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' +
'<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';
$('div#limits').html(LimitsAndTotalsHTML);
}
EDIT: CSS & HTML
I don't think it's a CSS/HTML issue, as I have the previous version of this script (which I decided to rewrite because it was hideous code and some odd mash-up of procedural and just pure bodging) which displays correctly in IE using exactly the same HTML&CSS.
#total_container
{ overflow: hidden; width: 870px; }
#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }
span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }
#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }
#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }
The HTML is just <div id="limits"></div> and the JS updates it.
// EDIT
SECOND EDIT: ALERTS
I've tried putting random alerts into the code. In IE, in the for (var i in data[0].groups) loop, the alerts work. If I place an alert at any point after that for loop, the alert doesn't appear at all, regardless of whether I use a variable name or a random string such as "test".
In FF, the alerts work regardless of placement within either function.
** // SECOND EDIT **
FireFox, working as intended
Internet Explorer, b0rked
Does anyone know what might be breaking IE?
Thanks in advance.
OK! I've found the problem.
IE didn't like this segment of code:
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
When I've changed that to this format:
for (var i = 0; i < data[0].groups.length; i++) {
if (data[0].groups[i].name.substr(0,4) == "LEAP") {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
It works as intended in FF and IE.
I have been writing my own Lightbox script (to learn more about jQuery).
My code for the captions are as follows (the problem is that the captions are the same on every image):
close.click(function(c) {
c.preventDefault();
if (hideScrollbars == "1") {
$('body').css({'overflow' : 'auto'});
}
overlay.add(container).fadeOut('normal');
$('#caption').animate({
opacity: 0.0
}, "5000", function() {
$('div').remove('#caption');
});
});
$(prev.add(next)).click(function(c) {
c.preventDefault();
$('div').remove('#caption')
areThereAlts = "";
var current = parseInt(links.filter('.selected').attr('lb-position'),10);
var to = $(this).is('.prev') ? links.eq(current - 1) : links.eq(current + 1);
if(!to.size()) {
to = $(this).is('.prev') ? links.eq(links.size() - 1) : links.eq(0);
}
if(to.size()) {
to.click();
}
});
So, I found out what was wrong (Cheers Deng!), further down the code I had the following function (I had to add "link" into the remove caption code):
links.each(function(index) {
var link = $(this);
link.click(function(c) {
c.preventDefault();
if (hideScrollbars == "1") {
$('body').css({'overflow' : 'hidden'});
}
open(link.attr('href'));
links.filter('.selected').removeClass('selected');
link.addClass('selected');
var areThereAlts = $(".thumb", link).attr("alt"); //"link" needed to be added here
//alert(areThereAlts);
if (areThereAlts !== "") {
container.append('<div id="caption" style="display: block; font-family: Verdana; background-color: white; padding: 4px 5px 10px 5px; top -10px; width: 100%; height: 25px; vertical-align: middle; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; color: #3f3f3f;"><font color="#3f3f3f">'+areThereAlts+'</font></div>') //caption
}
});
link.attr({'lb-position': index});
});