how to make a soundcloud widget? - javascript

So I have been looking to make a Sound Cloud widget for code-pen for testing then I will implement it to my website. what I am trying to aim for is something that displays a couple of tabs that you can click on that will let you change the view to different parts of my profile such as my re-posts and my tracks that is all I want but my problem is that i do not know how to code at all I have looked at the soundcloud resources:
https://developers.soundcloud.com/docs/widget
but it is all confusing as I have no idea what to start with as a base and what I need. I have looked for templates but found nothing that matches my keywords.
for now all I am trying to do is create a widget that matches this Image
using css js and html and any other code that can be embedded in html
I also want to make it possible for anyone to modify it for their own account by a variable at the top of the JavaScript code for the key, a commented out link to get a consumer key and any other key that is related/required for the widget, the user id / user URL, how to find the user id with link.
for now those are not required because getting a working widget is my first priority even if it does not look good. so I am asking for help on what I NEED to do first to get a base to it for example what lines do I need in my html to import the SDK for the widget? what are the requirements do I need for my widget such as a API key and what one because I know you can enable certain things with api's and disable options such as playback

https://www.w3schools.com/howto/howto_js_tabs.asp
Make the href="www.example.soundcloud.com/user/re-posts" for each tab, I am unfamiliar with soundcloud API's though

Related

Advanced Customization of Alfresco

I am having trouble figuring out how to do even the simplest things in Alfresco, like typing a simple document. I've been Googling and noticed that customizations can be done through HTML documents. I need help and decided to post a question to a knowledgeable user platform. THe following customizations I would like are WAY far fetched and most likely not even achievable, but any help that can be provided I would really appreciate.
*list items in bold are most important
Anyone could be assigned a login and when they logged in they would have access to and easily view all of the contents of the site (or multiple sites that make up one accessible website?)
All of the items on the website would be a hierarchy, the user facing contents of the site would be a list of links with thumbnails, when one link was clicked it would be another list of links with large thumbnails, when one of those links was clicked a text document would be brought up, that document would contain clickable sections, when one of those sections was clicked it would bring up a page only containing the section clicked:
Links (crafts)
2nd layer of links (modules)
Text and image document with clickable links (single module containing clickable sections)
Section (single sections of module)
The module and section text would also contain images and tables throughout and mixed in the text
If a link (module or section) was used in multiple places all instances of the link would be linked to each other. If on instance was edited, the other would also change. THis setting could be turned off for any individual link if necessary.
Every document should have an easy to use live commenting system (something simple like Disqus would work) The comments are the most important on the single section pages but would also be good on the module page
An advanced tagging system that would be part of the entire site/website environment. A user could type anything they wanted as a tag and use multiple tags. The tags would be used for their comments on the content (text, sections) but the tags could be searched (most importantly by the administrators of the site) at any time in the whole environment. A popularity of any tag could also be viewed (I'm not sure how that would work, possibly another section of the site or an easy to see column on any text/image document?)
A user could edit their own comment if they wished but would not be able to delete it entirely. Comments would also be date and time stamped.
I know all of this is most likely impossible but if anyone has an idea of Alfresco customizations that could pull any of this off, or of an entirely different secure platform or site that would perform anything similar to this please let me know.
Thank you!
It sounds like you are looking for a Web Content Management (WCM) System. Alfresco is a Document Management (DM) System. You can use Alfresco as a back-end for a custom content-centric solution, but if you are expecting to install it, start it up, and have anything close to what you've listed above, you are barking up the wrong tree.
Everything you've listed is a front-end concern. You can use whatever you want to develop that functionality, but none of it will leverage Alfresco unless you choose to store some of the data in the Alfresco back-end.
You might be better off looking at something in the WCM space, such as Drupal or Wordpress. Or if you want something Java-based, look at Magnolia CMS or Hippo CMS.

How to Preload the Next Page of a Website into the Browser

I am looking to implement special functionality for my website, where loading a page that has multiple other consecutive pages (such as a search result) pre-loads the next page into the browser, accessible via the "forward" button. This sort of functionality is seen on the MSN News website; see the following screenshot.
I am looking to have this functionality implemented through JavaScript on a static deployment, as in, the server would just send everything client side. Is this at all possible? Where could I look for documentation for such a thing? I have already attempted to search for the answer to this inquiry elsewhere with no avail. Thanks in advance.
I'd avoid looking to use the forward button as its not a primary target but rather preload links on the page like the next button, but rather do it through something called InstaClick. If you're looking to specifically target the forward button itself best place to look is at the History API but thats browser specific. I've attached Mozillas doc on this.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
http://instantclick.io/
https://github.com/dieulot/instantclick

Can I customize custom Google search engine to show or link to the first result only?

I'm making a site for my web dev class that's supposed to act like ai, where the user asks a question about a computer issue and ideally, the main result would be a YouTube tutorial embedded on the site. So the site homepage would just be a search bar in the middle, kind of like google's homepage.
I want the question to just be entered in the search bar(I already designed it in html, css, and javascript) in the middle of the homepage and when the user presses enter, the result page should just be an embeded youtube video spanning the page width.
Realistically, if I were to work on a site like that I'd have to develop my own algorithm, but for demonstrating how the site would look, how can I go about customizing the Google CSE script to result in one embed video, or what's the closest way thing I can do to that.
Is the javascript in google CSE even customizable in that regard?
Also, open to trying any suggested, more open source search API.
I started learning HTML, CSS, and JavaScript this year btw, so I'm sorry if I'm saying anything noobish/dumb
Search engine makes use of crawlers and build indexes to show up results on searches. A search's result is entirely based on how the site was ranked based on the keywords. So in short, no you can not customize the google search result. However you can implement SEO (Search Engine Optimization) on your site in order to have your site show up in search result on any search engine. For starters, you can read more about it here: https://en.m.wikipedia.org/wiki/Search_engine_optimization
You can. Because you are not customizing how the public sees search results but only yours. However, there is no official customization method provided. You need to fake a Google by setting up a local website or using some user script technology.

jPlayer and jScrollPane not working together

I'm creating a streaming music service on my website using a fork of jPlayer called jPlaylister.
One thing this doesn't do is scroll the playlist to the currently playing song.
I would also like to implement a nicer scrollbar for manually scrolling the playlist (instead of using browser default).
I came across http://jscrollpane.kelvinluck.com/index.html which looks perfect for what i want (it can do both things).
So when i tried implementing it, it just didn't work. No results, nothing. It's like the code wasn't even there.
I of course included the neccessary js files and put the below JS function in my head:
$(function()
{
$('.scroll-pane').jScrollPane();
});
I actually changed the .scroll-pane class name to an existing class name (the one which i want to scroll of course).
If anyone has successfully got this working (as i've seen a few questions on the same subject on various forums, websites etc) then i'd love some help!
The development version (http://jplaylister.yaheard.us/dev/) has this feature...I'm long overdue for a release, but prepped the files for someone else and will be happy to pass it on to you if you are interested.
nc (jplaylister author)
email at thenickchapman ... gmail or use the jplayer google group and tag me or something crazy.

Dynamic Pages with html5 + XML + JS?

Basically this is the first time when i ASK A QUESTION on stackoverflow. Anyway i will really appreciate if someone can point me to some direction about creating an simple product catalog app using html5+xml+js.
Well the structure is the following:
A: Home page >click> Product Categ >click> List of Products >click> Product Page Description
I'm not sure how shall i create the dynamic pages for the products to be able to extract all the products description from XML whenever click on any of product from the list page.
For example i have 10 products on the page, when i click on product X, an dynamic page with the product X 's (image, description, price) to be created, and so on.
I hope all of these things make sense for you and thanks a lot for your precious time.
For reading XML files using JavaScript, check answers from this question. For HTML5 and JavaScript in general I suggest you to check tutorials for some basics:
JavaScript - http://www.w3schools.com/js/default.asp
HTML5 - http://www.w3schools.com/html/html5_intro.asp
You can also check jQuery library tutorial. And here is jQuery's website.
I think that you should read some basics to learn how to look for more in the web and search for "how-to" connected with specified things you want to do and still don't know where to start.
EDIT:
If you want to check something that you'll need exactly at the beginning, you can check this documentation of addEventListener JavaScript method that will allow you to set action that will be invoked when particular event of the element fires. You can also check links connected to jQuery I mentioned above - jQuery is JavaScript library that makes writing JS simplier. But with both JavaScript and jQuery you have to spend some time reading documentation to know what you can do and how to achieve it.

Categories