How to pass parameter to embedded music player from datatable ? vb.net - datatable

I have a small music site which you can see songs in a gridview and play/download them. Now I want to play though a embedded music player. There are so many embedded music players and examples when I googled it but most of them they just say with fixed URL of songs to play. I couldn't find out how to pass parameter to a embedded music player from the gridview that i currently have.
What I have now. Song_Name represents name of mp3 file in the Uploads folder which is in datatable.
<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="Song_Name" Target="_blank"
DataNavigateUrlFormatString='~/Uploads/{0}' Text="<img src='Images/play.png' border='0'/>" >
</asp:HyperLinkField>
</Columns>
</asp:GridView>
Code Behind
On PageLoad
Dim dtable = GetSong()
gridview1.datasource = dtable
gridview1.databind()
Simple Embedded Player code that I might use.
<embed type=”application/x-shockwave-flash” flashvars=”audioUrl=MP3_FILE_URL”
src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” width=”400″ height=”27″
quality=”best”></embed>
In this example, I have to pass filename which is Song_Name in the gridview + fixed url such as http://www.mysite.com/uploadds/Song_Name to audioUrl for the embedded player. How do i do it ? Basically, if a user click, play button on the gridview of each song, i want to use the embedded music player to play the song. Pls see girdview example. Playbutton is the hyperlink field as the code above. Sorry for poor english. :D
Thanks so much.
L

No one answered my question. I am not sure if my question wasn't clear enough for people to understand. Well, I finally found a way around the problem. So i want to share my solution. Hope it helps to others who need to work with Gridview alot.
To achieve that, I have to put a hidden label field inside gridview as
<ItemTemplate>
<asp:Label ID="lblSongNam" Visible="false" runat="server" Text='<%#Eval("Song_Name") %>'></asp:Label>
</ItemTemplate>
And you also need a empty Div where you want the embedded music player to appear as
<div id="musicplayer" runat="server"></div>
It is essential to put runat="server" property for Div.
In the code behind of Gridview rowcommand as
Dim indexx As Integer = Convert.ToInt32(e.CommandArgument)
Dim roww As GridViewRow = GridView1.Rows(indexx)
Dim usernamee As String = Page.User.Identity.Name
Dim Song_Namee As String = (DirectCast(roww.FindControl("lblSongNam"), Label)).Text
Dim str As New StringBuilder()
str.Append("<embed type='application/x-shockwave-flash' flashvars='audioUrl=http://www.mysite.com/songs/")
str.Append(Song_Namee)
str.Append("&autoPlay=true' src='http://www.google.com/reader/ui/3523697345-audio-player.swf'")
str.Append(" width='700' height='27' quality='best'></embed>")
musicplayer.InnerHtml = str.ToString
In this example, i used google flash audio player but the player can be anything of course. It is quite handy way to manipulate HTML or Javascript code from asp.net code behind using StringBuilder and server side Div to use InnerHtml property of Div and change content at runtime.
Thanks all,
L

Related

CKEDITOR force VSPACE and HSPACE on images

I'm working on an email editor using the last ckeditor version.
To provide compatibility with outlook, I need to force HSPACE and VSPACE on images.
I found some workarounds that have been working on previous ckeditor version.
Now CKEDITOR output is:
<p><img alt="" src="/userfiles/images/river.jpg" style="float:left; height:900px; margin:10px; width:1600px" /></p>
I need something like:
<p><img alt="" src="/userfiles/images/river.jpg" align="left" vspace="10" hspace="10" /></p>
Any idea how to achieve that on the last ckeditor version?
Thank you in advance
My method would be simpler than modifying ckeditor. I would attempt to do something like the following. Disclaimer, the regex here probably doesn't work as written. Regex is not my strength and it takes a lot of research and time for me to get it right. And depending on the various possibilities for your output, you might have to loop through multiple images if each has different needs. But as an idea.... I am replacing the whole style statement with the vspace and hspace settings. Note, editor is the name of your instance of the editor
window.onbeforeunload = function (e) {
data = CKEDITOR.instances.editor.getData();
data = data.replace(/<style=(.*)>/g, 'align="left" vspace="10" hspace="10"');
CKEDITOR.instances.editor.setData(data);
};

Display Images from Umbraco Media in Document

i create a Document(PDF) and get the Content from the Umbraco nodes.
But there's a problem by displaying the images. How can i display or get the images from the Media libary of Umbraco? Is there a way, offered from Umbraco to get the Image(s)?
Thanks a lot.
If I understand your query correctly, you a pretty much there.
You should simply be able to get the umbracoFile path (just like you are for the PDF file) and simply declare it as the img src!
With Razor...
<umbraco:Macro runat="server" language="cshtml">
<img src='#Model.MediaById(#Model.imgProperty).umbracoFile' alt="" />
</umbraco:Macro>

Dynamic display in Grails

I have this problem I'm facing. I have been working on a project using Grails based on the advice from a friend. I'm still a novice in using Grails, so any down to earth explanation would be highly welcomed.
My project is a web application which scans broken or dead links and displays them on a screen. The main application is written in Java, and it displays the output (good links, bad links, pages scanned) continuously on the system console as the scan goes on. I've finished implementing my UI, controllers, views, database using Grails. Now, I will like to display actively in a section of my GSP page say forager.gsp the current link being scanned, the current number of bad links found and the current page being scanned.
The attempts I have tried in implementing this active display include storing the output my application displays on the console in a table in my database. This table has a single row which is constantly updated as the current paged scanned changes, number of good links found changes and number of bad links found changes. As this particular table is being updated constantly, I've written an action in my controller which reads this single line and renders the result to my UI. The problem I'm now facing is that I need a way of constantly updating the result being displayed after an interval of time in my UI. I want the final output to look like
scanning: This page, Bad links: 8, good links: 200
So basically here is my controller action which reads the table from the database
import groovy.sql.Sql
class PHPController {
def index() {}
def dataSource
def ajax = {
def sql = new Sql(dataSource)
def errors = sql.rows("SELECT *from links")
render (view: 'index', template:'test', model:[errors:errors])
}
}
Here is the template I render test.gsp
<table border="0">
<g:each in="${ errors }" var="error">
<tr><td>${ error.address }</td><td>${ error.error}</td><td>${ error.pageLink}</td></tr>
</g:each>
</table>
For now I'm working with a test UI, which means this is not my UI but one I use for testing purposes, say index.gsp
<html>
<body>
<div><p>Pleaseeee, update only the ones below</p></div>
<script type="text/javascript">
function ClickMe(){
setInterval('document.getElementById("auto").click()',5000);
alert("Function works");
}
</script>
<div id="dont't touch">
<g:formRemote url="[controller:'PHP', action:'ajax']" update="ajaxDiv"
asynchronous="true" name="Form" onComplete="ClickMe()" after="ClickMe()">
<div>
<input id="auto" type="button" value="Click" />
</div>
</g:formRemote>
<div id="ajaxDiv">
<g:render template="/PHP/test"/>
</div>
</body>
</html>
The div I'm trying to update is "ajaxDiv". Anyone trying to answer this question can just assume that I dont have an index.gsp and can propose a solution from scratch. This is the first time I'm using Grails in my life so far, and also the first time I'm ever dealing with ajax in any form. The aim is to dynamically fetch data from my database and display the result. Or if someone knows how to directly mirror output from the system console unto the UI, that will also be great.
It sounds like a form would be appropriate for your needs. Check out the Grails documentation on forms. You should be able to render a form with the values you would like without too much trouble. Be sure to pay attention to your mapping and let me know if you have any questions after you have set index.gsp up to render a form for your values.

Can you control pinterest's "find image" results?

Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.

img tag inside anchor tag... read on

So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx

Resources