I am not a javascript guru so please be patient with me.
I was looking for a good rating with js and I ran to the his blog:
http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html
The author has a demo and has provided the code to download.
it looks really nice except the fact that it doesn't have the example for saving the colors. Therefore the colors are back to black (default color) once user moves the mouse away.
any idea how to have the colors fixed?
In addition to the code TimDog has added:
adding
_rated = false;
to
$(".fav_rating li label").hover(function() {
resets the colors every time user hovers over the ratings. Then when they click _rated is set to true and therefore prevents the color change
in addition, i used a hidden input in my form that will contain the value of the rating. To do this my .click looks like following:
$(".fav_rating li label").click(function(e) {
e.preventDefault();
_rated = true;
$("#item_fav_rating").val($(this).parent().index() + 1)
});
Here's one way -- I took a closer look at the script.js in the example code:
Add this global variable under animationTime
var _rated = false;
The colors are reset here -- see how I've used the _rated variable?
// Restore all the rating to their original colours
if (_rated) $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
Then in your click handler:
//Prevent the click event and show the rating
$("#rating li a").click(function (e) {
e.preventDefault();
_rated = true;
//alert("You voted on item number " + ($(this).parent().index() + 1));
});
This will keep the colors highlighted. It will be reset when you refresh the page or rerun the reset animation line above.
Hope this helps.
I havent seen the code of the blog you mentioned, but it seems when user clicks on any button it is showing alert ie, onclick() is used. so you can have one global variable which will save the number and there itself you can add code to keep the color.
Related
I have a section in my HTML.If I click on it, I would like using javascript to count the number of clicks on the section in the first 2 seconds after I only clicked once, and at each click to add 2 seconds until my section will come back at it's initial background color.
My "color" variable takes the initial value of the background, in my case: red, but when I change my background color to purple, it also changes, I think it's because it is a reference, I tried 3 ways to avoid this problem but without success.
window.onload=function(){
StopProp();
Schimbare();
}
var color,clickuit=0,myvar;
function Schimbare(){
var x=document.getElementsByTagName('section')[0];
x.onclick=function(){
color=this.style.background;
this.style.background="purple";
alert(color);
clickuit++;
if(clickuit==1){
setTimeout(Numar,2000);
}
}
}
function Numar(){
if(clickuit==1) Back();
else{
alert(clickuit);
clickuit--;
setTimeout(Numar,2000);
}
}
function Back(){
var x=document.getElementsByTagName('section')[0];
alert(color);
}
You set color variable each time you click the section. You must change line
color=this.style.background;
to
if(!color) color=this.style.background;
P.S.
Please do not use "alert". use console.log()
I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle
I have a page with a lot of elements (~1,500) of the same class on it, and when I execute
$(".pickrow").addClass("vis");
it takes a second or two for the page to reflect the changes. So that users aren't thinking the page was stuck, I'd like to pop-up a small message using:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();
But the msgDiv never shows. If I remove the $("#msgDiv").hide(); the msgDiv appears simultaneously with the application of the added class (after the 1 or 2 seconds it took to add the class).
It seems like the jQuery functions get pooled and run together without any screen updates until they have all completed.
How can I get the msgDiv to appear while the $(".pickrow").addClass("vis"); is processing?
Here's a Demo
You probably want to delay the hide by a few seconds.
$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);
Or using jQuery's animations queue for timing:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue
You can go with this approach also
Working DEMO
$(document).on("click",".btn",function(){
$(".msg").show("fast",function(){
$(".pickrow").addClass("vis");
var interval = setInterval(function(){
var picLength = $(".pickrow").length;
var visLength = $(".vis").length;
if(picLength == visLength){
clearInterval(interval);
$(".msg").hide();
}
},500);
});
});
I think if you simplify the code, you would find that it is much more responsive and probably not require the loading message. In your code, you check every single element in an if statement. Rather than do that, you can check one value, then update all of them accordingly.
Here's a demo: http://jsfiddle.net/jme11/3A4qU/
I made a single change to your HTML to set the initial value of the input button to "Show Details". Then in the following code, you can just check whether the value is Show Details and remove the class that hides the .pickrow and update the value of the button to be "Hide Details" (which is better feedback for the user anyway). Likewise, you can add the .hid class to the pickrow if the button value is not "Show Details". This will also normalize all of the classes regardless if some were individually hidden or shown.
$('#showhide').on('click', function(){
if ($(this).val() === 'Show Details') {
$('.pickrow').removeClass('hid');
$(this).val('Hide Details');
} else {
$('.pickrow').addClass('hid');
$(this).val('Show Details');
}
});
When I double click the card the dialog pops up, and it is then possible to create checkBoxes. So far so good. Then I want to if I create one checkBox in the dialog and save the data via button, the value of created checkBoxes appears on the card. Then if all checkBoxes who are created is checked, a green background appears on the card. To indicate that the task got finish. like in the image below:
When I do create two cards, and one of them indicate the task got finish, like in the image above. In the second one you just create eg. two checkBoxes. Then the issue is, that the green background disperses from the first card. like in the Image below:
The code in JQuery:
function CheckBoxesChecked() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numChecked == numAll) {
$('.checkBoxCard').css("background-image", "none").addClass('jo');
}
else {
$('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
}
}
I tried to fix it by the code below:
function CheckBoxesChecked() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numChecked == numAll) {
$currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');
}
else {
$currentTarget.$('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
}
}
Where I use $currentTarget to indicate that each card is unique. But it seems not working. Any idea how to fix the issue?
DEMO
Change
$currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');
to
$currentTarget.find('.checkBoxCard').css("background-image", "none").addClass('jo');
See the updated fiddle.
use e.delegateTarget instead of target. see https://api.jquery.com/event.delegateTarget/
I want to add a toolbar button before the firefox search container in my addon. But it is completely clearing my navigation bar.
I suspect the offending code is due to an empty array or something but i cant be certain.
//insert before search container
if(navBar && navBar.currentSet.indexOf("mybutton-id")== -1 )//navBar exist and our button doesnt
{
var arrayCurrentSet= navBar.currentSet.split(',');
var arrayFinalSet= [];//empty at first
if(arrayCurrentSet.indexOf("search-container") != -1)//if search-container exists in current set
{
// check item by item in current set
var i= null;
while(i=arrayCurrentSet.shift() != undefined)
{
if(i == "search-container")//"search-container" found !!
{
/*insert our button after it but only if our button does not already exist*/
if(arrayFinalSet.indexOf("mybutton-id") == -1) arrayFinalSet.push("mybutton-id");
}
arrayFinalSet.push(i);
dump("arrayFinalSet "+ i);
}
}
else //damn search-container doesnt exist
{
arrayFinalSet= arrayCurrentSet;
arrayFinalSet.push("mybutton-id");//add our button to the end of whatever is available in nav bar
}
//set new navBar
navBar.currentSet= arrayFinalSet.join(',');
}
The full code is available
https://builder.addons.mozilla.org/addon/1052494/latest/
http://jsfiddle.net/CQ4wA/
I'm not too sure why the navigation bar has been removed, but I think it would be better to approach this from a different angle. Rather than messing around with an array of strings, try using DOM methods instead.
e.g.
var sC=navBar.querySelector("#search-container");
navBar.insertBefore(btn, sC);
The code you have here seems to work - but the toolbar needs to find your button somehow. Your current code doesn't even insert the button into the document, meaning that the toolbar has no chance to find it by its ID. It should be in the toolbar palette palette however, the palette also determines which buttons the user can choose from when customizing the toolbar. So you probably want to do something like this first:
var toolbox = navBar.toolbox;
toolbox.palette.appendChild(btn);
You might also want to simplify your code:
var arrayCurrentSet = navBar.currentSet.split(',');
var insertionPoint = arrayCurrentSet.indexOf("search-container");
if (insertionPoint >= 0)
arrayCurrentSet.splice(insertionPoint, 0, "mybutton-id");
else
arrayCurrentSet.push("mybutton-id");
navBar.currentSet = arrayCurrentSet.join(',');
And finally, you probably want to make the browser remember the current button set, it doesn't happen automatically:
document.persist(navBar.id, "currentset");
Note that the button that will be inserted into the toolbar is not the same as the button you added to the palette - the toolbar code clones the button, with one copy being left in the palette. So event listeners added via addEventListener will sadly be lost. It is better to use a command attribute and insert a <command> element into the document that you will attach your listener to.
Note: in XUL you usually want the command and not the click event - unless you are really interested in mouse clicks only and want to ignore the button being triggered by keyboard or other means.