I am using the Spotify web api to grab an array of albums from an artist. Each album has a name, image, release date, url and ID. I created container for each album and I want to add a button which allows the user to save the album by ID. Problem is, if I add an event listener inside the loop, it will run multiple times. And I also can't access the button outside of that loop since that's where it was created.
const saved = []
albums.forEach((album)=> {
const listItem = document.createElement('div');
listItem.classList.add('listitem');
listItem.innerHTML = `
<img src=${album.images[0].url}>
<h1>${album.name}</h1>
<h3>${album.release_date}</h3>
<h4><a href=${album.external_urls.spotify}>Spotify Link</a></h4>
<button class=${album.id}>+</button>`
list.appendChild(listItem);
})
};
Related
I know it's possible to display a Google Sheet as HTML using the spreadsheet ID and GID, i.e.:
https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/gviz/tq?tqx=out:html&tq&gid=GID
But in order to view that, you have to know the URL of the sheet. What I'm wondering is whether it's possible to display this HTML version of the sheet but without revealing the URL of the sheet?
Manually
To retrieve a Spreadsheet in HTML format you can export it accordingly by clicking on File -> Download -> Web Page. That will get you a zip file with the HTML of your Spreadsheet that you can rename as you like without revealing the Spreadsheet ID.
With Apps Script
You can also automate this process creating an Apps Script function that for instance gets triggered every time you click on an inserted button (to do this you can simply click on the menu bar Insert -> Drawing and the on the three dots of the top right of this button click on assign script and set it to the name of your function).
The following function will display a modal dialog on the Spreadsheet when run that if the user clicks on Download it will automatically download the zip file with the Spreadsheet in HMTL format. This function has self explanatory comments :
function downloadHTML() {
// Get ID of the Spreadsheet
var id = SpreadsheetApp.getActive().getId();
// Get the download URL of this Spreadshet in format HTML on the background
var url = "https://docs.google.com/a/mydomain.org/spreadsheets/d/" + id + "/export?exportFormat=zip&access_token=" + ScriptApp.getOAuthToken();
// Download when clicked on the button of the opened dialog
var html = '<input type="button" value="Download" onClick="location.href=\'' + url + '\'" >';
// create an HTML output from the given string
var dialog = HtmlService.createHtmlOutput(html);
// Show a modal dialog on the Spreadsheet UI when the function is run with the Title download
SpreadsheetApp.getUi().showModalDialog(dialog, "Download");
}
Reference
createHTMLOutput
showModalDialog
Need to find way to add hyperlinks to components of an assembly in the a360 viewer such that, when clicked or touched with mobile device, will navigate to a web page for more information. Realize it requires Forge API but can't find any specific examples of such a solution. I think this can be done from a properties table but I want direct navigation from touching/clicking the object.
You could just subscribe to the object selection event and react to it by e.g. opening a given URL:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
function (event) {
// Get id of first selected item
var dbId = event.dbIdArray[0];
if (dbId) {
// Maybe get the properties of the selected object
viewer.getProperties(dbId, function (props) {
// Depending on the properties you could open a website
// Just printing to the console the external id of
// the selected component as an example
console.log(props.externalId);
});
}
}
);
If you search for "Autodesk.Viewing.SELECTION_CHANGED_EVENT" you can find some articles and samples also using this event, e.g. https://forge.autodesk.com/blog/selection-override
Is it possible to pack analytics code within an image and have that code fire when the image is loaded on a webpage?
The image would be inserted onto a page through a file upload form field such as if I were to add an image to this question where I have no direct access to add HTML or JS to the page.
Goal being to track page views on pages which I have no access to any code, only the ability to upload an image.
Almost kind of like a 'Trojan horse' approach but without any malicious intent.
Tracking pixels requires specific structure and specific server.
So I cannot imagine anything like Trojan horse, but you can track image load as an event.
Try something like this:
Single purpose client side
<img src="" alt="Facebook is new god" id="fblogo"/>
<script type="text/javascript">
window.onload = function () {
var logo = document.getElementById('fblogo');
logo.onload = function () {
ga('send', 'event', 'FB', 'Loaded');
};
logo.src = 'https://facebook.com/fb/logo.png';
};
</script>
Measurement protocol way - server side
https://www.google-analytics.com/collect
?v=1 // Protokol version
&tid=UA-XXXX-Y // Property ID
&cid=55568765456 // Client ID stored in database or random number
&dh=forum.eu // referrer
&dp=image78974.png // filename
&t=event // send instruction
&ni=1 // non inteaction flag
&ec=Image // Event Category
&ea=Load // Event Action
&el=image78974.png // Event Label
I have a page that contains multiple topics in accordion.
How can I post a link (on social media or other places) so when the user clicks it can view the topic I want without making him choose the desired one to view it?
The website is built in Joomla 2.5 using its native (mootools) accordions.
A temporary solution came to my mind is to make single pages containing only the content I want, but it won't help them view the other topics contained in the same page, unless the user clicks the same category.
MooAccordion has a display option. You could use like:
window.addEvent('domready', function () {
var index = window.location.search; // get query string
index = index.replace("?", ''); // remove the ?
index = index.length ? index : 0; // in case there in no query, display first
var myAccordion = new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content', {
display: index // the actual behavior you are looking for
});
});
Read more at Mootools docs
So you could try these links as demo:
http://jsfiddle.net/brM2v/show/?0
http://jsfiddle.net/brM2v/show/?1
http://jsfiddle.net/brM2v/show/?2
I am trying to create lists using FieldManagers (Horizontal and Vertical). In this list I have multiple clickable items like buttons, so I am not using ListField or ObjectListField.
I have successfully created the UI, but I am unable to attach a particular item id coming from the server. Also, on clicking a particular button in any list row, I want to get the item id and want to perform an action against that ID.
So, please let me know the idea how I can attach the id to a particular row while I am using FieldManager and then how I can generate event against that ID on clicking a button?
When you create a row, you are probably creating a (subclass of) Manager for each row.
At least, it seems like you are creating a ButtonField on each row.
What you can do is to attach a cookie to each row, or to each button, when you create it. A cookie is just an extra piece of information that's attached to an object. Then, when that row or button is clicked, you ask the row/button for the cookie, and use that to identify the row ID.
Every BlackBerry Field can have a cookie attached to it. Since the cookie is of type Object, you can make it anything you want.
For example, when creating the buttons for your rows:
for (int i = 0; i < numRows; i++) {
BitmapButtonField button = new BitmapButtonField(onImage, offImage, ButtonField.CONSUME_CLICK);
// use the row index as the cookie
button.setCookie(new Integer(i));
button.setChangeListener(this);
Manager row = new MyRowManager();
row.add(button);
add(row);
}
and then when the button is clicked:
void fieldChanged(Field field, int context) {
Object cookie = field.getCookie();
if (cookie instanceof Integer) {
Integer rowId = (Integer)cookie;
System.out.println("Row Id = " + rowId);
}
}
Note: I'm using the BlackBerry Advanced UI BitmapButtonField for this, but the cookie technique will work with any Field, or Manager class. See another example here.