Add string to html element for javascript parsing? - html

I have a menu that is created dynamically with javascript.
First it looks for for section elements with a certain attribute eg:
<section something="add"></section>
And adds them to the menu. It also needs to get the title that will appear on each menu item from each element, eg:
<section something="add" something2="Services"></section>
I don't need any help with the js I just want to know how to add the data to the elements and what names give to the attributes. How should I do it?

it would be easy if we set an ID to section
<section id="sectionUniqueID" data-example="add"></section>
Then manipulate with setAttribute and getAttribute .
// 'Getting' data-attributes using getAttribute
var section = document.getElementById('sectionUniqueID');
var example = section.getAttribute('data-example');
alert(example);
// 'Setting' data-attributes using setAttribute
section.setAttribute('data-example2', 'substract');
var example2 = section.getAttribute('data-example2');
alert(example2);
Working Demo
Reference: http://html5doctor.com/html5-custom-data-attributes/

Here's what I am doing for my dynamic menu items (note: i have no idea what language you're using server side. I use node.js server side and jade for my client side templating).
Note that because you have not asked a precise enough question, I am not exactly sure what you need. You say you want to add data, give us an example of the data you are working with.
Server side:
var user_id = req.session.user.user_id;
// mysql statement to retrieve menu items
mysql.query('select * from menu where user_id = ?',[user_id], function(e, r) {
var menu;
// r would be array of objects:
// [{menu_name: "one", link: "http://foobar.com"},{menu_name:"two",
// link:"http:otherlink.com"}];
if (r.length > 0) menu = r;
else menu = [];
res.render('menu', {menu: menu});
});
Client side:
html
body
section#submenu.navbar
ul#menu
- if (menu.length > 0)
- for (var i = 0; i < menu.length; i++)
li
a(href=#{menu[i].link})= menu[i].menu_name

Related

Microsoft edge multi element copy

Does anyone know a fast way to copy multiple elements from an inspect page?
What I mean by that is I have a number of elements with same qualities i.e. same class and I want to copy all of them to my clipboard. Is there a way within inspect tool to do such a "trick" ? :)
Thank you in advance!
There's no specific simple way to do this, you can only using code to extract the elements you want.
For example if you want to get elements with the same class name, you can use the following code:
var outputText = "";
var targets = document.getElementsByClassName('classname');
for( var i = 0; i < targets.length; i++ ) {
outputText += targets[i].outerHTML;
}
console.log(outputText);
Then you can copy the output in the console.

Equal height layout of 3 module content, best method?

In looking at this image you can see in an ideal world each box would have the same height of content in each box. However in the real world we can't control how many characters the client uses for a heading. Wondering thoughts on how to deal with a situation like this? Is it ok to just let it be as is?
This will create an array of heights of an element by class, then find the tallest, and then make them all that height.
<script>
var headerHeights = [];
var mclength = document.getElementsByClassName("myClass").length;
for (i = 0; i < mclength; i++) {
headerHeights[i] = document.getElementsByClassName("myClass")[i].getBoundingClientRect().height;
}
var headerMaxHeight = Math.max(...headerHeights);
for (i = 0; i < mclength; i++) {
document.getElementsByClassName("myClass")[i].style.height = headerMaxHeight+"px";
}
</script>
You will likely want to make this a function which replaces "myClass" with a function parameter so that you can call it for each class you add. You will also want to add a listener for when a person resizes their window to rerun the function.

Changing bullet to dash ( -) in Google Document

We have a function to set a glyphType to DocumentApp.GlyphType.BULLET.
listItem.setGlyphType(DocumentApp.GlyphType.BULLET)
However, is there any way to set the glyphType to dash (-)?
For example, our list is below.
- Item 1
- Item 2
- Item 3
Ref: https://developers.google.com/apps-script/reference/document/list-item#setGlyphType(GlyphType)
The dash is not listed as a glyph type. But here is a work around. You could make you own pre-filled list with place holder items in a master document, copy the list and replace the items into the target document. Perhaps this is a lot of effort for styling bullets, but it could work.
Yes #Jason Allshorn is correct. I was able to set a custom bullet using apps script. I have a template doc that I copy to make a new doc. In this template I created a list item, text "list item", with my custom bullet glyph. Google, what is up with those giant dots? Ugly! I find that list item in the doc, copy it, and remove it. Code below:
function getListItem(ss, doc) {
var body = doc.getBody();
for (var i = 0; i < body.getNumChildren(); i++) {
var child = body.getChild(i);
var childType = child.getType();
if (childType == DocumentApp.ElementType.LIST_ITEM && child.getText() == 'list item') {
var customBulletListItem = child.copy();
body.removeChild(child);
break;
}
}
return customBulletListItem;
}
... then when I add a list item (li), I do the following:
body.insertListItem(i, li.copy());
body.getChild(i).replaceText("list item", "My new list item text");
body.getChild(i).setIndentFirstLine(0).setIndentStart(15);
body.getChild(i).editAsText().setBold(true);
This gets me my custom bullet glyph. The last two lines fix the huge indent on list items and bold the line. Google, what is up with the huge indents? Ugly!

Sort HTML emlements by child contents

I have these elements in a list. I want to sort the list alphabetically but how do i do that if the text that i want to sort it by is in a child element?
<div class="entry">
<button class="title btn btn-primary">Tale of Memories</button>
</div>
Without seeing your code, it is difficult to know exactly how things will work. Here is a generic solution:
Select all the elements in the list (eg: using querySelectorAll).
Transform the result of step 1 into an array (eg: with this solution from andrewmu)
Use the native sort() method to sort the array (providing your own function to compare values based on whatever you want).
Rewrite the content of the list with the content of the array.
Here is a demo. In it, we sort the list not based on the text directly in each item, but on the text from the span within each of them (for that reason the FA item goes first instead of last). In your case, you will want to change the compare function to get whichever element you want the items to be compared by:
// step 1: select the list items
var items = document.querySelectorAll("#mylist li");
// step 2: convert the node list into an array
var itemsarray = Array.prototype.slice.call(items, 0)
// step 3: sort the array using your own compare function
itemsarray.sort(function(a,b) {
return a.querySelector("span").innerHTML > b.querySelector("span").innerHTML;
});
// step 4: empty the list, and insert the sorted items
var ml = document.getElementById("mylist");
ml.innerHTML = "";
for (var x = 0; x < itemsarray.length; x++) {
ml.appendChild(itemsarray[x]);
}
<ul id="mylist">
<li><span>E</span></li>
<li><span>D</span></li>
<li><span>B</span></li>
<li>F<span>A</span></li>
<li><span>C</span></li>
</ul>

Add in a where clause

I have this foreach function, but I need to add a where clause.
I have added a checkboxlist in Umbraco called "show"
Values if this is
"EN"
"SP"
"US"
...
Let us say I have checked EN and SP.
I only want a slide to be visible if the slide is Visible as now, and if the field show are "EN" is checked and true. How can i add this in my code?
#foreach (var Slider in Umbraco.ContentSingleAtXPath("//HomePage/SliderArea").Children.Where("Visible").OrderBy("CreateDate
desc").Take(4))
The code you have is using Dynamics and therefore you're restricted to using the pseudo-Linq extensions like .Where("Visible"). You'll find it much easier to manipulate the list of items if you use the Typed objects instead.
Change this:
// Returns IPublishedContent as dynamic
Umbraco.ContentSingleAtXPath("//HomePage/SliderArea")
to this:
// Returns fully typed IPublishedContent
Umbraco.TypedContentSingleAtXPath("//HomePage/SliderArea")
Then you'll be able to use the full power of Linq to do this:
var area = Umbraco.TypedContentSingleAtXPath("//HomePage/SliderArea");
// returns a filtered IEnumerable<IPublishedContent>
var sliders = area.Children.Where(c => c.IsVisible() && c.GetPropertyValue<string>("show") == "EN");
#foreach (IPublishedContent slider in sliders.OrderByDescending(c => c.CreateDate).Take(4))
{
// You can get the dynamic equivalent of the IPublishedContent like this if you wish:
dynamic dSlider = slider.AsDynamic();
// ...
}