I have been working on a Spotify app which displays a track listing using code like this:
var tpl = new models.Playlist();
var tempList = new views.List(tpl);
body.document.appendChild(tempList.node);
tpl.add(track1);
tpl.add(track2);
...
tpl.add(trackn);
However, this only displays the contents of the columns and doesn't display the headers (Track, Artist, Album, etc.).
Ideally I want to include these, as the ui guidelines say "For best clarification please add a header of column descriptions to your tracklist".
Is there a standard way to include these headers, or does this require something custom (in which case I would think it might be tricky to line them up exactly with the columns)?
You should be able to restrict to a specific size. Use the inspector to figure out all of the class names and then set each field to be a certain width, then you should be able to put a div above the list with the same class names and the header text there.
For instance:
.sp-track-field-name { width: 150px; }
Then
<div class="list-header">
<span class="sp-track-field-name">Title</span>
</div>
<div id="playlist" />
Where playlist is the node you attach the List view to.
Otherwise, use javascript to get the actual width of the columns and set it programmatically
Related
Hi I have this HTML code from a website: I want to be able to extract multiple images, I have cases where there is 3-4 images. How would I go about doing that?
<div style="float: right;"><u>Chakra required:</u>
<img src="https://naruto-arena.net/images/energy/energy_2.gif">
<img src="https://naruto-arena.net/images/energy/energy_4.gif">
</div>
My code:
chakras1 = soup.find_all("div")[42].img['src']
print(chakras1)
Result:
https://naruto-arena.net/images/energy/energy_2.gif
I only get the FIRST image but now the second one.
To extract multiple images from within a tag, I personally stick to using for loops. So what I mean is once you find the div tag that you want to look within and say you call that chakras1, I would write the following:
for img in chakras1.find_all("img"):
print(img)
For me the steps kind of go as follows:
find the specific tags you are looking for (img src)
see what tag those tags are within (
navigate through the HTML to that tag (using beautiful soup's .find or .find_all functions depending on what you want to use)
once you have navigated to the tag search within that tag for the tags you're really looking for.
One quick note, with this method, if you are looking through multiple div tags, you're also going to need to loop through those as well.
I hope this makes sense!
So I have googled it and i didn't find any solution there so I am posting my question in here.
So when you write in etherpad, it creates markup which looks like this:
<div id="magicdomid17" class="ace-line">
<span class="author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z">
Author1.
</span>
<span class="author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9">
Author2.
</span>
</div>
Now It will output this:
Author1.Author2.
Having different background colors for Author1. and Author2. texts depending upon what writers chose when they started using etherpad.
My question is how etherpad process the data to put background color on specific text.
I know it has something to do with classes given to span as:
author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z for first author
and
author-a-1z74zz83zuz82z2z67zz81zsz89zz750zz65z8z659zz87z9for second author.
Can anyone explain how the background-color is being put for these texts depending upon these classes name? and which file is responsible for that?
Thanks in advance
So as most of the etherpad questions, no one answered this question either. I got the solution if anyone got same problem for deciding text color depending upon class name.
All you need is define a object variable in your front end js file where you are using the etherpad. In this var we will take author class name as key and its respective color as value.
var window.authClassColorObj = {};
Now go into ace2_inner.js file and find function setAuthorStyle() , add these lines in that function after var authorSelector = getAuthorColorClassSelector(getAuthorClassName(author)); line:
parent.parent.parent.window.authorClassColorObj[getAuthorClassName(author)] = info.bgcolor;
Now i am accessing my front end object var by three layer in, so i am using parent.parent.parent. , it can be different for you depending upon you file structure.
Idea is that this is the place where you can populate your object with proper values.
and then you can access your object from front end, for example for my case, it will out put this:
console.log(window.authClassColorObj);
Output:
object{
author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z:"#f50966"
author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9:"#20a251"
}
This info can be used further for any changes you want to make in pad html code.
I'm fairly new to Orchard and I'm wondering about the "best" way of building a basic list of documents with a download link?
Say the scenario is this, I want to make a list of newsletters, the news letter are in PDF format and the users should be able to download then straight from the list view.
An admin, should easily be able to add a new newsletter and it should turn up in the list.
My current train of thought is to, all through the dashboard,
create a content type "Newsletter" with a title field and a Media picker field, using the media picker field to upload the PDF file.
Then create a query, with the filter on Content type "Newsletter"
Create a projection pointing to the query
However, this only gives me a list of content items, showing their title as links back to the actual content item.
I've tried adding a layout to the query and set it to display properties instead of content. By doing that I can get a list where I can control the "output" a bit more. And I've gotten it to list the title and by doing a Rewrite and putting in the MediaPicker.Url, it also displays the URL in the list. This is all good but here I get stuck..
As the MediaPicker.URL outputs the url in the format like ~/media/default/xyz/filename.pdf, I cant just put it into a a href, it doesn't give a correct download link to the file.
Soo, question is, am I thinking and doing this totally the wrong way or am I missing something obvious? All ideas and suggestions and more then welcome.
Use or adapt the following template override in your theme:
#{
var url = Model.ContentField.Url;
}
#if(Model.ContentField.Url != null) {
if (url.StartsWith("~/")) {
url = Href(url);
}
<div class="media-picker-field attachment-pdf">
<span>download</span>
</div>
}
Modify the text as needed. This template was a Fields.MediaPicker-PDF.cshtml that was used for a media picker field named PDF.
This question regards website programming. My primary languages are c++/c# and I don't know much about web development, except that say I understand html and css. That's why I'm looking for a relatively simple solution, preferably something out of the box. I don't have any experience with JavaScript, but for the sake of this project I'm willing to learn it if necessary.
Let's say I have a database, where each entry is about a book. It contains the fields: title, author(s) and publication date.
I would like to create a simple website with a search box that has this dynamic result feature, so that you get suggestions after you type in a few letters. All those suggestions, as well as search results, need to be based purely on the database.
This could be a static website or based on any Content Management System, I'm familiar with Joomla, but was unable to find an out-of-the box component that would do just that. All those search modules search the entire website and I only need to search the database.
Probably I can help you with how to implement this feature. We used to call this feature as autocomplete menu.
First you decide minimum characters to populate autocomplete menu. For example 2
By using javascript you write keyup event. Once the characters count reaches to the minimum character count. You send AJAX request to the server.
The server should process this request and do the database search and form a json or xml response or plain text to the client.
The client parses that response into javascript object and construct a dynamic html for autocomplete menu with the data and render it into the DOM hence display's just below the search text box.
Now if you want to display the first result inside the textbox as you type. Here is the method I can suggest as similar as google search box
Place one label or span just below the input text box. By using css make its position exactly match with the position of the text box. Make sure the starting of text of both input text and label matches. Make the text color of the label less brighter than the font color of text. The font size and font family of the label should match the input text field's style. Now by using Javascript display the first or most matched text inside the label. Please find the sample code below
<!DOCTYPE html>
<head>
<style>
label {
position:relative;
}
body, input {
font-family: 'verdana';
font-size: 12px;
}
</style>
</head>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="Matched Text" /><br>
<label> Matched Text</label><br>
</form>
</body>
</html>
I am running an experiment in which we are trying to train people to be synaesthetes (they have additional experience of colour associated with numbers or letters).
I wondered if anyone has some advise about the easiest way to modify a web browser, such as firefox, so that just 10 letters A-J would always be displayed in a specific colour on any page they visited on the web?
Much appreciated
There are many ways to do this (cross-browser):
For example you could define a -element in a stylesheet to have a different color.
When loading the document, you check via JavaScript/jQuery the whole document (but only the contents of tags like ) for your specified letters and add the -tag f.e. around them.
Not the best solution, but a way.
Take a look at Greasemonkey, a FireFox plug-in designed to do this kind of thing. There are lots of pre-made scripts available at http://userscripts.org/, and several of them look like they'd help you figure out how to write your own to re-color single letters.
Here is just an abstract rough draft of a blueprinted preliminary form of a beta version of a potential solution: using the javascript: prefix of links in a bookmark as follow.
Create a new entry in your bookmarks toolbar
In the URL input, copy/paste the following line: javascript:var html = document.body.innerHTML; html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');} document.body.innerHTML = html;
Give your bookmark a name (e.g. "A-J to red") and save
You can now visit any website and click on that bookmark, which will put all letters between a and j in red
In a more digest way:
// get the content of the body
var html = document.body.innerHTML;
// surround any letter between a and j by a <span></span>
html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>');
// but it also replaces a-j letters within html tags
while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {
// so if there are html tags within other html tags, delete the created <span></span>
html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');
}
// and replace the innerHTML of the body
document.body.innerHTML = html;
That's really not a final solution, but yeah, maybe you could work on it to improve the results.
PS: don't try with IE...