I have this fiddle, it's pretty cool, my first attempt at creating a jquery control. It is simple, just a star ratings control.
I want to be able to turn this into a control, so that, I can call:
$('#someDiv').starRating();
And it turns that div into a star rating.
I would like to be able to then setup some properties:
Empty Star Source
Hover Star Source
Star Rating (leave blank if new rating)
So it would look something like this:
$('#someDiv').starRating({
emptyStarSource : 'http://www.imageland.com/image.png',
hoverStarSource : 'http://www.imageland.com/image.png',
initialRating : 3
});
Similar to the Datepicker in how to change options etc.
If anyone could point me in the right direction that would be awesome!
EDIT
So I have had a go with the help of the answer I got. The img click events aren't working, I'm guessing that somehow I have to attach the click handlers after I append them to the page. how? After that, I just need to do the settings!
ratings control
To write a plugin in jQuery use the following syntax
$.fn.setRed = function(){
return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
var _obj = $(this);
//work on the object here
_obj.css("background-color", "red");
});
}
You can then use
$(".ratings").setRed();
Related
I'm developing a simple plugin for Etherpad to edit formulae using MathQuill. When the toolbar is opened, I'd like the cursor to get into the edit field. The field is mathquillified like this:
var MQ = MathQuill.getInterface(2);
var mathQuillEditor = MQ.MathField(mathQuillField, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
latexEditor.value = mathQuillEditor.latex(); // update LaTeX field
jQuery(latexEditor).change(); // fire updating of CodeCogs
}
}
});
To get cursor in the edit field, I've tried:
mathQuillEditor.moveToRightEnd();
which visually puts the cursor there, but the blue margin (that points that the editor is active) does not appear and typing doesn't make any effect; and
mathQuillEditor.el().focus();
which doesn't make any visual difference. I've also tried to combine those, but still no success. Any ideas how to do this?
Ok, this wasn't documented, the answer is simply
mathQuillEditor.focus();
After I've rised an issue, this was explained and docs now contain this method.
I have a while loop in my php page which sets a different id for every button and form through a counter variable. Every button has to open a different form (they each have different default information preselected, this is for a prescription renewal ability). I can get this to work by having in my javascript a click function for every id which calls a show on the right form. But, obviously this is not scalable, and so it cannot adapt to the amount of prescriptions I have. Looking through the web, I saw people using classes and the id starts with solutions to this problem. However, when I use this solution, the buttons open all the forms... not the desired behavior. Currently my javascript function is the following:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
Like mentioned above, the function does get called by all different IDs button. That code however opens all the forms every time one of the buttons get click. IDs are actually of the form add-renew-form0, add-renew-form1, add-renew-form2... (same pattern for add-renew-link). Forms and links with the same number at the end are meant to be linked. Does anybody know how I can achieve this? Thanks a lot!!
You can't have multiple DOM elements with the same ID. What you can do here is to assign classes for the elements:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
And then use .each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
You can check out the JSFiddle here.
You're close. The $('[id^="add-renew-form"]').show(); is going to match ALL ELEMENTS that start w/ "add-renew-form" as the id, so that's why you're experiencing all forms being shown when clicking any link/button.
You can use a regex to pull the number from the end of the id to find a match on the associated form as below:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/\d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
This jsbin has a full working example.
http://jsbin.com/xicuwi/1/edit
Try, using the .each() method:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});
First, please forgive me, as I know very little about JavaScript, and am trying to make something work without knowing proper terms and syntax. I am working within the CMS called "ViArt." A lot of what is going on is handled by php, and I only have access in ViArt to add JavaScript to an onChange event for a listbox.
Here is what I'm trying to accomplish:
The product is sunglasses. Different frame colors in a listbox 1 are designated by a numerical prefix. There are 30 different lens color options for each frame color, and these lens colors are chosen in listbox 2.
Using my current code, for each frame, I have to go in the JavaScript for each frame and manually enter the numerical prefix designated to that frame.
This is my current, working code in an onChange event:
=================================
var FrameNo = '01';//ENTER FRAME NUMBER
var ImagePath = 'images/GlassesBrand/Rx/GlassesTest/';//ENTER PATH TO IMAGES
var ImageNamePrefix = 'GlassesTest-XL';//ENTER NAMING CONVENTION
// This changes the IMAGE hyperlink to larger image to match user's selection
document.getElementById('blackImg').href=ImagePath + 'Large/' + ImageNamePrefix + '-Frame' + FrameNo + '-Lens' +
this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].text.substrin g(0,2) + '.jpg';
=================================
The change I want to make, is that I don't want to have to hard-code "FrameNo." I want to call that dynamically within the onChange event, by looking up the selectedIndex of listbox 1.
=============================
In an onChange event for list box 2, named "{property_id}," I am trying to get the selectedIndex of a listbox 1, named "{property_parent_id6385_6773}"
{form_id} value is 6385
{property_id} is listbox 2, and in this example, the value is 6773
{property_parent_id6385_6773} value is 6765, and in this example, this refers to listbox 1
{property_parent_id6385_6773} is named dynamically by a php script or something. For example, on the next form, it may be called {property_parent_id6400_6800}. So I am trying to program the JavaScript to dynamically refer to the property_parent_id####_####, based on whatever form and list box I'm working with.
When I hard-code or semi-hard code it for testing, the following methods work:
this.form.property6385_6765.selectedIndex;
and
this.form.property{form_id}_6765.selectedIndex;
I don't know the syntax, so I thought declaring some things in variables might help me get what I needed.
From my notes:
var FrameBox = [this.form.property_parent_id6385_6773.value]; //WHICH EQUALS "6765"
var FrameNo = 'this.form.property' + {form_id} + '_' + FrameBox + '.selectedIndex';
RESULTS IN:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Framethis.form.property6385_6765.selectedIndex-Lens02.jpg
Whereas, an example of the result I am seeking is:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Frame1-Lens02.jpg
==============================
In summary, I know what I need, but I don't understand enough of the syntax.
I know this could be better phrased, but this is all new to me. On the bright side, I am now inspired to take a class in JavaScript.
Any help would be greatly appreciated.
This is more of a calculated guess but could be worth a try.
this.form.property_parent_id{form_id}_{property_id}.options[this.form.property_parent_id{form_id}_{property_id}.selectedIndex].text
Ok I made a site a while back and always had issues with the menu system is needed. Basically you click a location on a map, then it displays the list of sub locations in the dropdown menu to the right. These are always their they just chance to display based on the options class.
I have put the site at shiftera.co.uk so you can see it their.
The issue first.
1) IE - The list never filters out, it displays all results all the time regardless of class.
2) Chrome - The dropdown is sometimes squashed showing 1 result and hiding the others you need to use up/down arrows to change, sometimes it shows 3, sometimes 4.
3) Firefox - The list displays in 1 long row, not like a usual dropdown.
I think the issue is more of a css problem or multitude of css problems.
An example of the map link is
Scotland
The dropdown list although not seperated is generated from the database and appears as below
<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>
As you can see, some have the space before some don't. The dropdown has the id of apick and Im using css below to hide it on load.
#apick { display: none; }
Here is the javascript to display the correct items based on map click.
//<![CDATA[
$(document).ready(function(){
$('.areaselect').on('click', function(event){
$('#apick').css('display','inline');
var id = $(this).attr('id')
$('#apick option').not('.'+id).css('display','none');
$('.'+id).css('display','inline').first().attr('selected','selected');
event.preventDefault();
});
}); //]]>
This has been driving me mad for a long time now, it seem's if i fix 1 issue another 2-3 get created. So I figured i'd try here and see if any brightspark can narrow down my issue.
Updated removing windows load as per change to main website.
The simple answer is that you are setting the style to inline. An <option> tag should not be inline, or have any style like that. The inline style i causing the problems.
Instead add the <option> tags when you need them. Store all the values in a object to add/remove them.
By the way. Remove that window load thing.
Here is the javascript fix:
$(document).ready(function()
{
var options = $('#apick option');
var values = $.map(options, function(option)
{
return option;
});
$('.areaselect')
.on('click', function()
{
var apick = $('#apick').empty();
var id = $(this).attr('id');
var newValues = $.grep(values, function(n, i)
{
return $(n).hasClass(id);
});
apick.append(newValues).show().find('option:first').attr('selected','selected');
return false;
});
});
I have been struggling with Backbone the last few days in trying how to best approach dealing with some dynamic elements added by a user and sync those successfully with the database. I have one model and one view.
The model created is fairly straightforward, it represents a product(t-shirt) in a database and has the attributes: id, price, size, brand, colors.
The problem I am faced with is the colors attribute. The colors cannot be pre-populated by design (unfortunate as it may be) to allow for the user to enter any custom color and name it as freely as they want. In addition to the name, the user has to specify if the color is available. Clicking the Add Text button/link will have an input field and dropdown appended to the div below.
My question: What is the best way to add these multiple color properties as ONE attribute of the model?
I need to have all the colors/availability values as one property when it attempts to insert or update itself with the API as the colors property and goes into one row in the db (mysql). I believe the backend programmer has this row configured as a type of TEXT.
e.g.
{"colors": [{"blue":true},{"orange":false},{"white":false}]}
My thinking is that I need to obviously have some sort of nested JSON within the model but I can't figure out how to write this properly. Any help or something to point me in the right direction would be much appreciated.
Ok, this solution involves jQuery maybe a bit too much, but should work fine. Basically, listen to both changes of your color textboxes and select:
events: {
'change .colorText': 'setColor',
'change .colorSelect': 'setColor'
},
setColor: function() {
// here make your `color` attribute's array
var colors = [];
this.$('.colorText').each(function() {
var val, color;
// adapt the next to navigate to the corresponding select...
(val = $(this).val()) && (((color = {})[val] = $(this).next().val()) || 1) && colors.push(color);
});
this.model.set('colors', colors);
}