I am no javascript whiz, not a programmer at all.
I want to change the stacking order of elements that make up the Soundcloud custom player in the HTML. I know that these can be positioned using CSS, but my preference for what I am doing would be to reorder the divs that the player generates, so that I can use default document flow to efficiently layout my player.
The divs come out in this order - not sure how this is generated from the soundcloud link, but I would like to figure this out:
<div class="sc-player">
<ol class="sc-artwork-list">
</ol>
<div class="sc-info"></div>
<div class="sc-controls"></div>
<ol class="sc-trackslist"></ol>
<div class="sc-scrubber">
<div class="sc-volume-slider"></div>
<div class="sc-time-span">
<div class="sc-waveform-container"></div>
<div class="sc-buffer"></div>
<div class="sc-played"></div>
</div>
<div class="sc-time-indicators"></div>
</div>
</div>
Does the Soundcloud custom player generate the HTML divs from the javascript? Where is this in the javascript file, so I can hack it, or perhaps taret this with a function on my HTML page to change the order?
Or is the HTML somehow downloaded from Soundcloud when the embedded track is (and therefore editing the HTML stacking order is no possible?) I couldn't see where this mights happen in the javascript.
Slightly wierd question but I'm trying to learn better how this plugin works, thank you. I won't paste the javascript here, but the files are located here https://github.com/soundcloud/soundcloud-custom-player
You can see the source here: https://github.com/soundcloud/soundcloud-custom-player/blob/master/js/sc-player.js
Search for “Generate custom skinnable HTML/CSS” – this is where HTML is being generated, you could modify it, if you like.
Related
This is a little hard to explain. I'm creating a webpage that shows how other webpages will render in the browser. Here's a simplified version of the problem I'm having...
<div id="test">This is an example of page 1</div>
<div id="test">This is an example of page 2</div>
As you can see, both divs have the same ID. I can't change the ID in my situation and it's causing problems. I'm having various other CSS and javascript problems also. Each section of code is conflicting with the other. So, I was looking for a way to have a section render independently of everything else. One way to do it would be to create an iframe for each section of code. But that would require me to create a separate webpage for each section, right? Or, is there a way for an iframe to work just by entering code into it, rather than a URL.
You can only have one id per element in an HTML document. So each div must have a different id, otherwise you will run into problems. If multiple elements need to have the same name, you can use classes <div class="test" id="unique-id"></div> and then <div class="test" id="another-id"></div>.
To answer your question with regards to iframes, yes, you need a separate page for each iframe. It is not possible to write code within the iframe tags to execute separately. See the iframe spec.
Edit: After reading the iframe spec myself, it appears you can use the srcdoc attribute to overwrite what is in the src attribute, but it looks like this isn't entirely accepted across browsers. MDN has more information about the attribute.
I am looking into using a HTML WYSIWYG editor such as CKEditor but I am curious about what is to stop a user from submitting some HTML code that will change the layout of the page when I try to output their HTML.
Here is an example of two posts:
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
and
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
As you can see, the first post is nice and simple, I can display that and it wont look crazy. But the second post could alter my page layout completely (have not tested but you get the idea.
<html>
<head>...</head>
<body>
<div class='content'>
<div class='post'>
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
</div>
<div class='post'>
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
</div>
</div>
</body>
</html>
I know I can use htmlentities but this would then display the first post without the bold and I do not want that.
The stackoverflow website must have something like this built in, and I am wondering if there is a simple way to stop users being able to submit layout-changing HTML via a WYSIWYG editor?
CKEditor has a feature called Advanced Content Filter that in its default, automatic mode filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins).
It is highly configurable, too, so it lets you fully control what your users can and cannot submit to your website.
Have a look at the following resources to figure it out:
Content Filtering
Advanced Content Filter
Allowed Content Rules
Advanced Content Filter – Automatic Mode sample
Advanced Content Filter – Custom Mode sample
Suppose on one page, I have want to show a template in two version depending on the user's device.
For example, I implemented the following code.
<div class="desktop">
<body>
Hi Desktop user
</body>
</div>
<div class="mobile">
<body>
Hi mobile
</body>
</div>
This works okay with media queries but with javascript, I realized that $('body') actually returns both objects. Although the user doesn't see the element because .desktop is set to display:none on mobile deviecs, it seems that the html elements are rendered. In this case, is it still an okay practice or should I avoid doing something like this?
As for me, this is not very good practice. Because you have 2 elements on page, which browser will render. And for him ( browser ) it doesn't meter, visible this element or not.
Your media query from css can do all the same things on one element. And it will be faster. Or use server side to understand what kind of template you should show - mobile or desktop.
I have html snippets and i was wondering where I should keep them... For example:
Currently I have the following in my HTML page
<div id="Mailbox" class="ui-corner-all">
<div id="Messages">
<ul class="messageList">
<li class="noMessage">You have no messages</li>
</ul>
</div>
<div class="trashIcon ui-corner-bottom">
Delete Selected Message(s)
</div>
</div>
Then, when the page loads, jquery and javascript turns this into a full functioning mailbox system.
What I am wondering is - Should I bother with the HTML snippet, or just build the entire thing through JS?
Having the markup in your page potentially degrades much better for users with no script. Plus, it's usually easier to work with existing markup than build it completely from scratch with JavaScript.
Sometimes templating can be an appropriate solution. This will not degrade for users without script, but if you have a script-heavy page that needs to create a lot of markup dynamically, templates can make this simpler.
If you find that you are duplicating blocks of markup from page to page, this should probably be addressed server-side by storing the common content in a single location.
Depends if you're writing an application or a website. Does SEO matter? Does accessibility matter? Do you need to support a wide range of browsers and devices?
If not then I'd write it in JS but take a look at some MVC frameworks such as backbone.js or JavaScriptMVC etc. in which case you'll likely want to be using client-side templating so you're html should be in the page but not in the DOM.
I wonder how it is possible to (more or less ) reliably clip the content from a random web site (using Ruby or JavaScript, doesn't really matter).
Much like Evernote and Flipboard do.
What is the best way to determine where the actual content is within a page?
The purpose: given a URL - retrieve the actual content of that page and ignore all the layout and other unrelated information.
For example:
given http://ninemsn.com/ => the HTML of the main news topic that is in the middle part of the content.
given the http://news.cnet.com/8301-1035_3-20104048-94/a-beginners-guide-to-telecom-jargon-part-7 => the HTML of the main article.
Just use Evernote's "clip full page" option to see exactly what I mean.
Thanks.
My initial thoughts would be to DOM parse the page, then traverse the DOM tree to the content of a specific div and show that (via XPath, etc). For pages without clearly-defined sections it's going to be difficult regardless of which method you use. The AutoPager plugin for Firefox and Chrome implements XPath parsing behaviour. Get the latest version and open up the .xpi to see how he does it. It's a JavaScript implementation.
Pick the div by letting someone enter, per URL/site scheme, what the id or class of the content div is. For your ninemsn example, the div containing the article's title, share buttons, the author's image, and the post content is
<div class="post">
and the actual body of the text is
<div class="postBody txtWrap" section="txt">
So someone would enter that you need to parse the first h1 from <div class="post"> and that's the article title, and then get all the text from <div class="postBody"> and make that the article content (you might need to parse the class in such a way that it can match both postBody and txtWrap).
Another example (for funsies): Stack Overflow. A question's title is contained in
<div id="question-header">
A question's text is trickier, because it's in a div with the same class as an answer's text, and no id. You need to match <div id="question"> and then traverse down to
<div class="post-text">
Similarly for answers, each <div id="answer-[UINTEGER]"> contains a <div class="post-text"> with its respective text.
In both situations, you can traverse those top-level question and answer- divs for <div class="user-details"> to fetch usernames, reputation and badge counts, etc.