I'm using the following code to create a custom SoundCloud player:
https://github.com/soundcloud/soundcloud-custom-player
What I have done is:
http://epopengate.org/wp-content/themes/epopengate/test/examples/sc-player-standard.html
What I would like to do is have the track listing appear when the user clicks on the info button...I would like to save space and I don't really need to display what's being shown in that window anyway. What would I need to change in order to do that? I assume something in the JS file, but I'm not sure what to move around to make it work.
I know there is a widget that works similar here: https://soundcloud.com/pages/widgets - but it's flash based so Apple devices would not be able to use it and by creating a track listing that appears when the Info button is clicked, increases mobile compatibility by allowing the user to click because you can't hover with mobile devices.
Thanks,
Josh
You can use HTML5 widget, which is the default option for embeds from SoundCloud now – https://blog.soundcloud.com/2011/11/03/html5/
These will work fine on iOS and Android.
Related
I'm trying to figure out how to attach a tracking code to a link and still keep the anchor functional. This will be used in an email newsletter.
ex:
www.example.com/welcome#Intro so that link would scroll down to the intro section right?
now if I were to do the same thing but like this www.example.com/welcome#Intro?TrackingCode the scroll no longer works.
I tried to google it but I couldn't find anything, any suggestions?
thanks for your time!
Don't think you can track scrolls. The images load top to bottom. We can't use anything like lazy load as JavaScripts don't work in emails unless it's viewed in the browser. If you want to use on browser then you can use jQuery to do that.
I have developed a website based on Joomla 2.5 and I wish to make it mobile friendly, without changing (or changing as less as possible) the desktop version of my website.
So I have installed Joomla Mobile component. This component allows activating dynamically a different template (w.r.t the one that is used on desktop), when detecting a mobile device.
By default, the template that is activated when detecting a mobile is "Mobile_basic". This is a simple and really nice template, but the problem is that it doesn't support some menu positions, which are used by the desktop template. So the result is that some menu items are not displayed on mobile device.
I give an example for better clarification: my website uses a menu that is placed in "right" position. But the "Mobile_basic" template doesn't have this position. It has instead other positions called "mj_top", "mj_top2"...
The possible solutions could be:
1) Find a way to instruct Joomla to show a menu item in a different position, depending on the template which is used at that moment
2) Create new positions which are valid both desktop and mobile templates
Has anybody some better idea to solve my task?
Best regards
Alberto
Maybe best solution will be use the same position in both templates [desktop and mobile] ?
at first i suggest to make a copy of mobile template - when you update your Joomla Mobile component it can overwrite your changes.
here you can find easy way to do that
https://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template
then edit index.php file in your mobile template
templates/My_mobile_basic/index.php
and insert this code in place you want to display menu
<?php if ($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
Code above check is there are any modules with 'right' position, and display them
Also you need to change default template at Joomla Mobile configuration - so it will use your version
thank you for the smart hint.
I have tested it an it allowed me to achieve my goal, but I had to abandon it because I found a bit difficult to control the order and the visualization of the objects in the mobile version.
Finally I opted for a solution that I would recommend to others who have my same need. With the menu manager I have created "clones" of the menus that are visible only in the desktop template, using positions that are valid only for the mobile template. Then I have populated these cloned menus with a copy of the items that are in the desktop menus.
In this way I can control the order and the visualization of the menu items in the mobile version, easily and independently from the desktop version.
Using Orchard 1.8.1 I have written a simple image gallery that displays thumbnails and a lightbox. It is just a template that is driven by an Orchard Projection, using a Shape Layout. Works just fine. However, for phone users there is no point displaying thumbnails and it's better to just display the lightbox (with touch support). So I have also implemented that in a separate template. But how can I get Orchard to switch templates depending on the UserAgent string?
I have tried implementing Theme switching (http://weblogs.asp.net/bleroy/dynamically-switching-the-theme-in-orchard), but it's a really ugly solution when I really want to just replace one view, and still enable implementers to switch themes. This is NOT an issue of styling; it's an issue of changing the content based on the device.
I tried implementing DisplayModeProvider as described here: http://www.campusmvp.net/blog/displaymodes-in-mvc-4. But although the filter was called, it had no effect on view names.
Are Projections problematic here because the shape name is set? Is there a better way to go about this?
Create an alternate when you see a mobile browser, preferably from a shape table provider.
I'd like to use the Notification API to create toast notifications for a Silverlight app designed to run both in and out of the browser, but the NotificationWindow class is only available OOB.
Does there exist anything that can replicate the behaviour inside the app? My idea is to have a container in the bottom right of the screen overlaying all other content. Then, create a wrapper which detects OOB-mode, passing params to the Notification API if possible, or populating and showing my own container if not. Is there anything that does this available?
It seems strange that MS chose not to implement something like this, as has been pointed out before.
Displaying a notification in browser is simple. You just need to use a popup and make it appear in the right place. See the following post as an example.
Now the difference with that approach is that the notification will show inside the browser. In OOB it shows outside the window and it's visible even if the windows is minimized. Due to security reasons it's not possible to directly do this.
Out of interest, Chrome Applications like Tweetdeck and Gmail, are able to display notifications outside of the browser. I think this might be a possiblity, but not exactly a Silverlight and cross browser solution.
I'm building a responsive website at the moment and the main site navigation contains 10 links. I've seen a few sites that compress their navigation into a simple drop down select menu when the screen size gets below 480px, but I can't find any tutorials out there that explain how to do this - apart from the CSS Tricks one here:
http://www.css-tricks.com/convert-menu-to-dropdown/
I've tried this tutorial but not had any success with it as I implemented the code and yes I get a lovely menu on the iPhone, but the links don't work and clicking on it makes the page zoom in which is not desirable as this doesn't happen when I don't have the menu in place.
I'm looking for something simple like used on these websites:
http://www.hanselman.com/blog/
http://www.lancs.ac.uk/
anyone?
I managed to find this snippet of code on http://www.w3schools.com here:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu
Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.