jPicker change color transparent + get object - javascript

I'm using jPicker,I have 2 Questions.
1.How can I change the color to the transparent one? Already tried using
$.jPicker.List[0].color.acive.val('hex','FFFFFF',this)
-> Found this , not sure if the best solution
$.jPicker.List[0].color.acive.val('ahex','00000000',this)
2.Other is how can access without using the "index", like a selector.
For example something like:
$('selector').color.active.val('hex','FFFFFF',this) -> just an idea

this is Chris Tillman, and I kinda (completely) wrote the plugin you're using. To accomplish the first question, just run
$.jPicker.List[0].color.active.val('a', 0, this);
That will set just the alpha value for the active color.
If you want to get to the DOM element without using the List, just set it equal to a variable at instantiation like so.
var MyPicker = $('selector').jPicker()[0];
Just remember the index location at the end as the jPicker ALWAYS returns the result of $('selector').each(). If you are using one selector call for three different pickers, you can forget the index call at the end and get to each on using MyPicker[0], MyPicker[1], MyPicker[2] ... The $.jPicker.List[] is a master collection list for ALL instances of the picker, where this solution will ONLY index the pickers created by that individual call.

This method is a bit more complicated but you can check this answer to get the actuall ID
https://stackoverflow.com/a/27445752/2307326

Related

D3 V4 Tree Search and Highlight

So, I really love this example from Jake Zieve shown here: https://bl.ocks.org/jjzieve/a743242f46321491a950
Basically, on search for a term, the path to that node is highlighted. I would like to accomplish something similar but with the following caveats:
I would like to stay in D3 v4.
I'm concerned about cases where the path doesn't clear out on next node pick OR what happens when there are two nodes of the same
name (I would ideally like to highlight all paths)
I would like to AVOID using JQuery
Given a set search term (assume you're already getting the string from somewhere) I know I need to make use of the following lines specifically (you can see my stream of consciousness in the comments) but I'm just not quite sure where to start.
// Returns array of link objects between nodes.
var links1 = root.descendants().slice(1); //slice to get rid of company.
console.log(links1); //okay, this one is nice because it gives a depth number, this describes the actual link info, including the value, which I am setting link width on.
var links2 = root.links(); // to get objects with source and target properties. From here, I can pull in the parent name from a selected target, then iterate again back up until I get to source. Problem: what if I have TWO of the same named nodes???
console.log(links2);
Thoughts on this? I'll keep trying on my own, but I keep hitting roadblocks. My code can be found here: https://jsfiddle.net/KateJean/7o3suadx/
[UPDATE]
I was able to add a filter to the links2 to call back a specific entry. See
For example:
var searchTerm = "UX Designer"
var match = links2.filter(el => el.target.data.name === searchTerm); //full entry
console.log(match);
This single entry gives me all associated info, including the full list of all points back up to "COMPANY"
So, I can GET the data. I think the best way to accomplish what I want is to somehow add a class to each of these elements and then style on that "active" class.
Thank you!

Identity selectors in jQuery returning arrays

Suppose I have a div tag like this:
<div id="group-dialog" class="modal-dialog">
Now I want to grab it as a jQuery object (in this case so I can run .dialog()).
When I try this:
var gDialog = $('#group-dialog');
I get an array back (!!).
Why am I getting an array? Isn't the point of having an ID attribute that there's only one? I can see getting multiple p's or .my-css-thing back ...
Next question:
I have this array with 1 object in it that I now want to access as a jQuery object.
When I do this:
$(gDialog[0])
And pull it up in F12, I still have an array!! I thought I de-referenced the array already by picking the first element.
This doesn't seem to help either:
var gDialog = $('#group-dialog:first');
This is basic, but I run into this problem a lot. It seems like it used to be a lot simpler!
What is the best way to access this DOM element as a jQuery object?
Answer 1
jQuery selectors always return arrays.
Selection with id attribute is a particular use case and ideally the result should be unique. However, there is nothing preventing you from having duplicated ids in a HTML document (although this is bad practice).
Answer 2
The following code will get you the first element as a DOM object:
var gDialog = $('#group-dialog')[0];
Note: you may want to check the size of the return array first.
As far as I know, there is no way to transform this DOM element back to a jQuery object. The standard use case would be to directly used $('#group-dialog') and asume that it is found and unique.
Try using .get(). Though I'm not sure it will work with dialog()
Retrieve the DOM elements matched by the jQuery object.
var gDialog = $('#group-dialog').get();
If you're trying to grab it to use it on a dialog, you can just put
$(document).ready(function(){
$('#group-dialog').dialog({put options here})
});

Alternative to jQuery's .last

I need to use the 1.3.2 library which unfortunately does not support the last functionality. This causes my function to fail:
$op.last().next().after($op);
"$op.last is not a function"
Demo:
http://jsfiddle.net/uscyH/
I have been unsuccessful at rewriting this functionality in pure js, any suggestions? Note, I will also need the .first(), but I'm assuming I will be able to extrapolate that from the .last alternate code. Many thanks-
You can use the :last selector, which existed since 1.0:
$op.filter(':last')
To get the last element, do this:
$op.slice( -1 )
Live demo: http://jsfiddle.net/uscyH/4/
The jQuery .slice() method is patterned after the JavaScript .slice()
method for arrays. One of the features that it mimics is the ability
for negative numbers to be passed as either the start or end
parameter. If a negative number is provided, this indicates a position
starting from the end of the set, rather than the beginning.
Source: http://api.jquery.com/slice/
To get the first element do this:
$op.eq( 0 )
Live demo: http://jsfiddle.net/uscyH/5/
Assuming $op is the collection of options, get the first DOM element in the collection using:
var first = $op[0];
and the last using:
var last = $op[$op.length-1];
It looks like you could find the last or first item with this method
http://jsfiddle.net/uscyH/3/
alert("Last is: "+$("option:last").html()+" and first is: "+$("option:first").html());​
Update: Looks like you have lots of ideas to choose from now. Feel free to use whatever approach you would like. This approach is probably not the fastest one since it is doing two DOM queries instead of operating on the list you already appear to have stored in an array. It's nice to see how jQuery has been so powerful even back in these versions. Thanks for the ideas everyone!
$($op[$op.length-1]).next().after($op);
You can also choose to extend jquery and create your own last method.

How can I call an element from an array created by "document.getElementBytag()"?

I am trying to make a page work for my website using the mootools framework. I have looked everywhere I can think of for answers as to why this isn't working, but have come up empty.
I want to populate several arrays with different data types from the html, and then, by calling elements from each array by index number, dynamically link and control those elements within functions. I was testing the simple snippet of code below in mootools jsfiddle utility. Trying to call an element from array "region" directly returns "undefined" and trying to return the index number of an element returns the null value of "-1".
I cannot get useful data out of this array. I can think of three possible reasons why, but cannot figure out how to identify what is really happening here:
1. Perhaps this array is not being populated with any data at all.
2. Perhaps it is being populated, but I am misunderstanding what sort of data is gotten by "document.getElementBytag()" and therefore, the data cannot be displayed with the "document.writeln()" statement. (Or am I forced to slavishly create all my arrays?)
3. Perhaps the problem is that an array created in this way is not indexed. (Or is there something I could do to index this array?)
html:
<div>Florida Virginia</div>
<div>California Nevada</div>
<div>Ohio Indiana</div>
<div>New York Massachussetts</div>
<div>Oregon Washington</div>
js:
var region = $$('div');
document.writeln(region[2]);
document.writeln(region.indexOf('Ohio Indiana'));
Thanks for helping a js newbie figure out what is going on in the guts of this array.
$$ will return a list of DOM elements. If you are only interested in the text of those DOM nodes, then extract that bit out first. As #Dimitar pointed out in the comments, calling get on an object of Elements will return an array possibly by iterating over each element in the collection and getting the property in question.
var region = $$('div').get('text');
console.log(region[2]); // Ohio Indiana
console.log(region.indexOf('Ohio Indiana')); // 2
Also use, console.log instead of document.writeln or document.write, reason being that calling this function will clear the entire document and replace it with whatever string was passed in.
See an example.

JQuery Add two selections together

With the power of jquery...
I'm attempting to add two selections together, they both contain the same type of element (<option>).
But the add(..) method doesn't seem to be playing ball.
var matchingRemovedOptions = removedOptions.filter(function() {
return this.text.toLowerCase().match(str.toLowerCase());
});
tempOptions.add(matchingRemovedOptions);
console.log(tempOptions.length);
console.log(matchingRemovedOptions.length);
As you can see im trying to filter out some option elements from the removedOptions selection and add these to the tempOptions selection.
But when using the console.log, the length of tempOptions stays the same as in, does not increase.
.add() returns a set with the elements/selector added, it doesn't actually add them to the set that it's called on. To get the effect you want, you need to update to the set it returns, like this:
tempOptions = tempOptions.add(matchingRemovedOptions);
If you think about all other tree traversal functions, they behave the same way, for example obj.find("...") doesn't change obj to what's found, only the rest of the chain operates on that set, which .find() returns.
You need to do another assignation:
tempOptions = tempOptions.add(matchingRemovedOptions);

Categories