Develop Reference

Polymer, evaluate element based off object

I am using the tile example from polymers neon elements - and I am trying to make each expanded tile unique. My first try on how to do this was to pass a string in with the grid items like
{
value: 1,
color: 'blue',
template: 'slide-1'
}
And have that element be evaluated when rendered in a new element something like this. (this is the card template itself)
<template>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]">
<[[item.template]]></[[item.template]]>
</div>
This does not work - however I am wondering if there is some way to do this so I can load custom elements for the content of each card. For reference -https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages , it is the grid example and I am trying to replace the content of each card once it is clicked on ( the fullsize-page-with-card.html, here is all the html for it - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid ). Is this the wrong way of approaching this? Or maybe I have some syntax wrong here. Thanks!
Edit : OK, So I can send it through if i add it to the click to open the card like so
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$['fullsize-card'].template = event.detail.data.template;
this.$.pages.selected = 1;
};
and in the card's properties like so
template: {
type: String
},
So I can then evaluate it as [[template]] , however - the question still remains how to call a custom element (dynamically) using this string. I could pass a couple of properties and fill in a card or form so they are unique, but i think I would have much more creative freedom if I could call custom elements inside each card.

I have an element that allows referenced templates. There are a couple of others other there, but this one also allows data bindings to work: https://github.com/Trakkasure/dom-bindref

Extract div data from HTML raw DIV text via JS

I'm trying to extract data from a JS function that only renders an element's HTML - and I need the element's ID or class.
Example:
JS Element Value:
x = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
I need to do get the element's id or class (in this case the id would be myId).
Is there any way to do this? Strip the tags or extract the text via strstr?
Thank you

The easiest thing to do would be to grab the jQuery object of the string you have:
$(x);
Now you have access to all the jQuery extensions on it to allow you to get/set what you need:
$(x).attr('id'); // == 'myId'
NOTE: This is obviously based on the assumption you have jQuery to use. If you don't, then the second part of my answer is - get jQuery, it's designed to make operations like these very easy and tackle compatibility issues where it can too

You may want to take a look at this:
var div = document.createElement('div');
div.innerHTML = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
console.log(div.firstChild.className);
console.log(div.firstChild.id);

retrieve list of all labels in blogger

Is there a way to use gdata api to retrieve the list of all labels in a blogger?
I need to create a menu based on that list, but cannot simply list all posts and get it, because it is a busy blog and has more than 2000 posts.

Here is the most easy way to get a list of labels by using json call:
<script>
function cat(json){ //get categories of blog & sort them
var label = json.feed.category;
var lst=[];
for (i=0; i<label.length; i++){
lst[i] = label[i].term ;
}
alert(lst.sort()); //use any sort if you need that
}
</script>
<script src="http://yourblog.blogspot.com/feeds/posts/summary?alt=json&max-results=0&callback=cat"></script>
Just use your blog url.

Very simple, I give you two ways
With Javascript API
First, you must use:
<script type="text/javascript" src="http://www.google.com/jsapi"></ script>
<script type='text/javascript'>
google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
Second, you can use the code below to retrieve the labels
postRoot.entry.getCategories()[i].getTerm()
For more tutorials, you can read from http://www.threelas.com/2012/05/how-to-retrieve-posts-using-blogger.html and http://www.threelas.com/2012/04/basic-blogger-javascript-api.html
With JSON
with json, if you want to learn how to retrieve the list of labels, use this object
json.feed.entry[i].category[j].term
for more detail tutorials, read from http://www.threelas.com/2012/02/basic-blogger-json-feed-api.html and http://www.threelas.com/2012/09/blogger-json-feed-with-jquery-ajax.html

The way I found was using the Blogger's own gadget called Labels. It prints the list of labels and their usage count within some unordered lists(ul) and links(a). You can pull the labels from that after they are loaded using javascript as follows:
$(".list-label-widget-content a").each(function (i, el) {
var labelText = $(el).text();
// do what you want with the labels
});
in the end, remove the Labels div element (<div class='widget Label' id='Label1'>)

Widget to server the same purpose is provided by bloggers itself.
Widget provides various options like -
You can either show all Labels or choose from your existing List
You can sort the Labels alphabetically or by number of times that label is used (frequency).
You can choose to display these as a List or as a cloud (jumbled).
You can see the same in my blog - Link

I don't see a method to get the list of labels in a blog, but you can retrieve all posts (https://developers.google.com/blogger/docs/2.0/json/reference/posts/list) and check the labels field for each of them: https://developers.google.com/blogger/docs/2.0/json/reference/posts#resource

First add the JQuery through the following code in console.
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();
Once you are done with this we can take advantage of the JQuery and get the list of labels
Now what I am doing will work for the Blogger Theme Notable and newly added Theme for blogger.
Normally in these themes you will see Labels in the rights side toogle menu of the page.
So What you need it Click on the Label and Click on Show more.
Now Open Browser Debugging console and declare and variable.
var str = "";
Now run the two codes below
1. $('.first-items .label-name').each(function(){str = str + ", "+($(this).text())})
2. $('.remaining-items .label-name').each(function(){str = str + ", "+($(this).text())})
3. str
all the labels you will be get in comma(;) separated format.

How can I use Object Oriented Javascript to interact with HTML Objects

I am very new to object orientated javascript, with experience writing gui's in python and java. I am trying to create html tables that I can place in locations throughout a webpage. Each html table would have two css layouts that control if it is selected or not. I can write all of the interaction if I only have one table. It gets confusing when I have multiple tables. I am wondering how to place these tables throughout a blank webpage and then access the tables individually. I think I am having trouble understanding how inheritance and hierarchy works in javascript/html.
NOTE: I am not asking how to make a table. I am trying to dynamically create multiple tables and place them throughout a webpage. Then access their css independently and change it (move them to different locations or change the way the look, independently of the other tables).

Assuming you want to make changes in real-time and you're willing to use a library like jQuery, simply append the table(s) to the document and give each one a unique CSS id. Wherever your table generation code is taking place, just keep a counter and set the id to something like "mytable+counter_val".
From there you can reference each table and use jQuery methods to adjust the CSS to your liking.
A brief example:
var container_id = "#the_parent";
for (var i = 0; i < 10; ++i) {
var table_id = "mytable_" + i;
var table_code = "<table id=" + table_id + "></table>";
$(container_id).append(table_code);
}
// set border on table 7 (indexing at 0)
$("#mytable_6").css("border", "5px solid red");
// move table 5 (indexing at 0)
$("#mytable_4").css("top", "300px");
// animate table 2 (indexing at 0)
$("#mytable_1").animate({left : 300, top: 125}, 2000);
If you have the difference between selected and unselected separated into a single class, you can just add/remove that class:
// table 2 is now displayed as being selected
$("#mytable_1").addClass("selected");
// table 2 is now displayed as being unselected
$("#mytable_1").removeClass("selected");
See the jQuery docs for more information: http://docs.jquery.com/Main_Page

i don't understand the need of oop principles in your problem. why do you need inheritance and hierarchy for generating couple of elements and then alter some of their props?
if i understood corectly, you would want to keep track of each table you create so you can later change it's css props.
if you want to use js as an object oriented language, i would write a class definition for a table object :
var Table = function(innerHTML,container){
this.innerHTML = innerHTML;
this.container = container;
}
//static member
Table.TABLES = [];//global reference to all the tables created
Table.prototype = {
init : function(){
this.dom = document.createElement('table');
this.dom.innerHTML = this.innerHTML;
this.container.append(this.dom);
Table.TABLES.add(this);
},
setCssProp : function(name,value){
this.dom.style.setProperty(name,value);
}
}
and then all you have to do is create a new table and initiate it :
(new Table(table_content_here)).init();,
and later on you can reference it by accesing the TABLES in Table class :
for (var i in Table.TABLES)
Table.TABLES[i].setCssProp(cssName,cssValue);
i know that you know how to create tables, i was just suggesting that you keep a global reference to the ones you create to have acces to them later.

Tree Menu? In JS?

I need a tree menu. But instead of a listview where you expand/collapse i need a dropdown box with the list and when you click on a element i need the box to update (with the first entry being 'Back') so the menu stays in a neat little dialog.
Does this menu have a name? Does anyone know where i can get code to do this?

I can think of several jQuery plugins which would soot your purposes. However, I would recommend jQuery iPod Style Drilldown Menu (Newer Version), which is exactly what it sounds like. The dropdown box updates in place, uses a cool sideways slide animation, and includes a "Back" button (as you desired). Finally, if you don't want any animation, you can try tweaking the plugin's many options. Setting crossSpeed to 0 may work, for example.

Adam is right, jQuery offers an assortment of menu's which you could use. Really though, this is a somewhat trivial problem, the code to write it would take up about 1/10th the space that jQuery's code will. So if possible I would say write it without jQuery.
The most effective method would be to do it JS OOP (Javascript Object-Oriented), but understandably this is a confusing topic.
Basically you just want something like:
function drillDown(){
//Any code that multiple drilldowns
// might need on the same page goes here
//Every instance of a drillDown will
// instantiate a new set of all functions/variables
// which are contained here
//A reference to the parent node the dropdown is placed in
this.parent;
//A reference to the div the dropdown is incased in
this.object;
//Returns a reference to this object so it can be
// stored/referenced from a variable in it's
// superclass
return this;
}
//Prototype Functions
//prototypes are shared by all
// instances so as to not double up code
//this function will build the dropdown
drillDown.prototype.build = function(parent){
//Too lazy to write all this, but build a div and your select box
// Add the select box to the div,
// Add the div to the parent (which is in your document somewhere)
var divEle = document.createElement('div');
var inputBox = document.createElement('input');
//code code code
divEle.appendChild(inputBox);
parent.appendChild(divEle);
}
//this function loads the newest dataset of
drillDown.prototype.loadNewDataSet = function(data){
//first clear out the old list
// remember we have a reference to both the
// 'object' and 'parent' by using
// this.object and this.parent
//load the data, we are going to use the text from
// the select boxes to load each new dataset, woo eval();
// If you didn't know, eval() turns a string into JS code,
// in this case referencing an array somewhere
var dataSet = eval(data);
//then loop through your list adding each new item
for(item in dataSet){
//add item to the list
//change the .onClick() of each one to load the next data set
// a la ->
selectItem.onClick = function(){this.loadNewDataSet(item);};
//if you name your datasets intelligently,
// say a bunch of arrays named for their respective selectors,
// this is mad easy
}
}
//Then you can just build it
var drillDownBox = new drillDown();
drillDownBox.build(document.getElementsByTagName('body')[0]);
drillDownBox.loadNewDataSet("start");
//assuming your first dataset array is named "start",
// it should just go
And by the way, Adam also said it, but wasn't explicit, this is refered to as a drill-down.