How call Javascript Function - javascript

I have code (see below) in my webpage. With below code i get two flash mp3 players on the web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="Contents/swfobject.js"></script>
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="width:100%; text-align: center;">
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId1", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Sleep Away.mp3"}, false);
</script>
<div id="myId1"
style="position: relative; width: 250px; height: 20px; ">
</div>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId2", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Kalimba.mp3"}, false);
</script>
<div id="myId2"
style="position: relative; width: 250px; height: 20px; ">
</div>
<br />
Stop
</td>
</tr>
</table>
</form>
</body>
</html>
The above code works fine and all i need now that only one flash mp3 player should play the audio at one time. For example if i click on flash plyer 2 then falsh player 1 should stop and vice versa. I can stop flash players with click event with below code but this is not fulfilling what i need.
I have put below function in head tag
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
and this in body tag
Stop
Can please any friend tell me that how can i achive what i need with above stop function. Or where should i put this code so when i click on fash player 2 then flash player 1 should stop playing audio.

Make only one of the players start on page load.
Then, make a handler that will be ran on a click on one of the players. If the click was originated from player1, them stop it and start player2 (and viceversa).

Related

Flow Player Not Working For in Asp.Net C#

I am working in asp.net c# project, in that i have to play videos from folder path.
iam trying below code, the video path binding in datalist is correct, but when i press play button its always spinning, no videos display
<asp:DataList ID="DLVideos" RepeatColumns="2" runat="server">
<ItemTemplate>
<a class="player" style="height: 300px; width: 300px; display: block" href='<%# Eval("Column1","../Uploads/App_Videos/{0}") %>'></a>
<br class="clear"/>
</ItemTemplate>
</asp:DataList>
<script src="../FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
flowplayer("a.player", "../FlowPlayer/flowplayer-3.2.16.swf",
{
plugins: {
pseudo: { url: "../FlowPlayer/flowplayer.pseudostreaming-3.2.12.swf" }
},
clip: { provider: 'pseudo', autoPlay: false},
});
</script>
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>
my question is :
does flow player not support other video formats?(i have used .3gp format)
For Referance : http://flash.flowplayer.org/demos/plugins/javascript/embed.html
pls help to play video in asp.net c#, any othe code welcome.

How to display the input value one frame to another frame onclick?

I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
First define the names of the frames:
<frameset cols="25%,75%">
<frame name="left" src="left-panel.html"></frame>
<frame name="right" src="right-panel.html"></frame>
</framset>
And then in the javascript:
function myfunction(ad) {
top.left.document.getElementById("footer").innerHTML = ad;
}
You can access only to parent:
function myfunction(ad) {
parent.left.document.getElementById("footer").innerHTML = ad;
}
First, the sub-frames should have the same origin(same domain) in order to manipulate them.
Then, get the parent frame by parent.
Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):
window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name
So the answer is
$().ready(function(){
$("#cli").hover(function () {
parent.frames[1].$("#footer").css("visibility","visible");
},
function () {
parent.frames[1].$("#footer").css("visibility","hidden");
});
});
edit: sorry to find that the question is modified.
Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html
Remember JS is executed in client side.
Maybe you must to use two divs:
your.css
#wrapper {
}
#left {
float: left;
width: 75%;
background-color: #CCF;
}
#right {
float: right;
width: 25%;
background-color: #FFA;
}
#cleared {
clear: both;
}
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="your.css">
<script src="min.js"></script>
<script src="file.js"></script>
</head>
<body>
<div id="wrapper">
<div id="left">
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</div>
<div id="right">
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</div>
<div id="cleared"></div>
</div>
</body>
</html>
If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side

start/play video player onClick of image for LeadPlayer (or any Player)

I would like to figure out a way to get my image when clicked on to autoplay my media player. I'm a bit new and can't figure out onclick for this matter. I suppose jquery is the way to go. So, Thanks in advanced.
<!DOCTYPE html>
<html><head><style>#leadplayer_video_element_5348CAD9E1F02
<head>
<style>
<style>
position:absolute;
left:8px;
top:8px;
z-index:-1;
}
</style>
</head>
</head>
<body>
<a href="#">
<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/1508520_496016637195955_3564444582693127544_n.png" hight="294" width="377" onclick="this.style.display='none';" style="position:absolute;opacity:1.0; z-index:1;"/>
</a>
<!-- LeadPlayer video embed code start [ video: 5348CAD9E1F02 ] -->
<div>
<script type="text/javascript" src="//s3.amazonaws.com/cdn.leadbrite.com/leadplayer/r0034/js/leadplayer.js">
</script>
</div>
<div id="leadplayer_video_element_5348CAD9E1F02" style="width:377px;height:260px">
</div>
<div>
<script type="text/javascript">jQLeadBrite("#leadplayer_video_element_5348CAD9E1F02").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6dHJ1ZSwicG93ZXJlZF9ieSI6dHJ1ZSwicG93ZXJlZF9ieV9saW5rIjoiaHR0cDpcL1wvd3d3LmxlYWRwbGF5ZXIuY29tXC8/dXRtX3NvdXJjZT1kZW1vLXNpdGUmYW1wO3V0bV9tZWRpdW09cG93ZXJlZC1ieS1sb2dvJmFtcDt1dG1fY2FtcGFpZ249TGVhZFBsYXllciAiLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiU1VCTUlUIiwidHh0X3BsYXkiOiJQTEFZIiwidHh0X2VtbCI6IllvdXIgRW1haWwgQWRkcmVzcyIsInR4dF9uYW1lIjoiWW91ciBOYW1lIiwidHh0X2ludmFsaWRfZW1sIjoiUGxlYXNlIGVudGVyIGEgdmFsaWQgZW1haWwiLCJ0eHRfaW52YWxpZF9uYW1lIjoiUGxlYXNlIGVudGVyIHlvdXIgbmFtZSIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMS44IFVubGltaXRlZCIsImlkIjoiNTM0OENBRDlFMUYwMiIsIndpZHRoIjozNzcsImhlaWdodCI6MjYwLCJ0aHVtYm5haWwiOiJodHRwczpcL1wvZmJleHRlcm5hbC1hLmFrYW1haWhkLm5ldFwvc2FmZV9pbWFnZS5waHA/ZD1BUUQ1S0U0R3lkYkotY0Y4JmFtcDt3PTM3NyZhbXA7aD0xOTcmYW1wO3VybD1odHRwJTNBJTJGJTJGcGljcmVkaXJlY3QuY29tJTJGcG9zdCUyRnVwbG9hZHMlMkYxMzk3MDY2MzkyLmpwZWclM0Z2JTNENTkyMTg3NjY1JmFtcDtjZnM9MSIsInRpdGxlIjoiVmlkZXJlZGlyZWN0IFRlc3QgQ29kZSAxIiwiZGVzY3JpcHRpb24iOiJUZXN0IENvZGUiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOjEwLCJidGV4dCI6IkNhbGwgVG8gQWN0aW9uIC0gQ2xpY2sgSGVyZSAiLCJ1cmwiOiJodHRwczpcL1wvd3d3LnBheXBhbC5jb21cL2NnaS1iaW5cL3dlYnNjcj9jbWQ9X3MteGNsaWNrJmFtcDtob3N0ZWRfYnV0dG9uX2lkPURZVUdCRUpHVzg2U0ciLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOnRydWV9LCJ5bSI6IklUWlUwaTlueEdnIn0=");
</script>
</div>
<!-- LeadPlayer video embed code end [ video: 5348CAD9E1F02 ] -->
</body>
</html>
OR... Can anyone find a way to make the pic refresh in the same div using ajax and jquery? Both would be highly appreciated.
Add Jquery Lib in head section
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
Try this (Add inside <script>..code..</script>)
$(window).load(function(){
$('a').click(function(){
$('.player').slideToggle();
});
});
DEMO

how to show lightbox popup with image?

In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.

Quote issue in HTML, Javascript, .innerHTML, switch and case

I'm modifying a websense block page to include a few functions based on a variable: $*WS_BLOCKREASON*$. I know the potential output of this variable, and I want to have a specific function for.
The issue is that the page is not passing even the default case to the '<'div'>' contents. Essentially I need the contents of the <div id="helpDiv"> to be a whole set of text including the button. Script below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Access to this site is blocked</title>
<link rel="stylesheet" href="/en/Custom/master.css" type="text/css">
<script type="text/javascript" language="javascript" src="/en/Default/master.js"></script>
<script type="text/javascript" language="javascript" src="/en/Default/base64.js"></script>
<script type="text/javascript" language="javascript" src="/en/Custom/security.js"></script>
<style type="text/css">
.style1
{
width: 130px;
height: 70px;
}
</style>
</head>
<body>
<!--[if lt IE 7]> <div style="width: 725px; height: 381px;"> <![endif] -->
<img alt="BHI" class="style1"
src="/en/Custom/other.gif" /><br />
<br />
<br />
<div style="border: 1px solid #285EA6;width: 99.5%; max-width: 915px; overflow: hidden; margin-left: 1px; background-color: #EEF2F7;">
<iframe src="$*WS_BLOCKMESSAGE_PAGE*$*WS_SESSIONID*$" title="BHI_BLOCK"
name="ws_block" frameborder="0" scrolling="no"
style="width:100%; height: 200px; margin-bottom: 0px;">
</iframe>
<hr />
<!-- onload=function() possible fix -->
<script type="text/javascript">
var blockReason=$*WS_BLOCKREASON*$;
switch (blockReason)
{
case 'This Websense category is filtered: <b>Uncategorized</b>.':
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
<hr />\
<p style="margin-left: 64px">Clicking on the above button will open your mail client to send an e-mail to Websense for recategorization of the above site.</p>\
<p style="margin-left: 64px">You will receive a confirmation e-mail and a case number from Websense indicating your request is proccessing.</p>\
<p style="margin-left: 64px">Please note the response time for your request will vary. Allow to three to four (3-4) hours for updates to take effect once approved.</p>\
<p style="margin-left: 64px">If you have any questions, please contact SOLV at this link.</p>';
break;
case 'This Websense category is filtered: <b>Parked Domain</b>.':
document.getElementById('helpDiv').innerHTML='<p>Parked domain</p>';
break;
default:
document.getElementById('helpDiv').innerHTML='<p>No Block message help.</p>';
}
</script>
<div frameborder="0" scrolling="no" style="width:100%; height: auto; margin-bottom: 0px;" id="helpDiv">
</div>
<iframe src="$*WS_BLOCKOPTION_PAGE*$*WS_SESSIONID*$" name="ws_blockoption"
frameborder="0" scrolling="no" style="width:100%; height: auto;">
<p>To enable further options, view this page with a browser that supports iframes</p>
padding: 2px 0px;">
<div style="clear: both; overflow: hidden; height:1px;"></div>
</div>
</div>
<!--[if lt IE 7]> </div> <![endif]-->
<div id="light" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Try this instead. You have some incorrect escaping going on...
The part in particular is around your onClick in the first line of the case
case 'This Websense category is filtered: <b>Uncategorized</b>.':
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
<hr />\
<p style="margin-left: 64px">Clicking on the above button will open your mail client to send an e-mail to Websense for recategorization of the above site.</p>\
<p style="margin-left: 64px">You will receive a confirmation e-mail and a case number from Websense indicating your request is proccessing.</p>\
<p style="margin-left: 64px">Please note the response time for your request will vary. Allow to three to four (3-4) hours for updates to take effect once approved.</p>\
<p style="margin-left: 64px">If you have any questions, please contact SOLV at this link.</p>';
break;
UPDATE:
Having just had a play in jsFiddle I have come to the conclusion that your reference to helpDiv is invalid..
If you replace all of these with some alerts your switch will reach the default. It's dying because there is something wrong with your getElementById. Maybe the element doesn't have the ID helpDiv?
Here is a well and truly stripped down version
http://jsfiddle.net/5wvC3/
Here is another fiddle - and update on the last one, showing that the code mostly works. You deff have an issue with your HTML
http://jsfiddle.net/5wvC3/1/
You've escaped improperly on this line:
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location="'\\"mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A$*WS_URL*$%0A%0AThank you."'\\"></p>
It should be (after onClick):
"parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
A fiddle with the escapes corrected: http://jsfiddle.net/3UxCc/
It works.
Edit:
It looks like your $*WS variables are markers. In this case you're assigning blockReason to something, but unless your WebSense variable contains quotes (it doesn't btw), then you're assignment looks something like:
var blockReason = other;
Since there are no quotes around it, it believes that other is a variable not a string literal. You need to enclose this in quotes like:
var blockReason = '$*WS_BLOCKREASON*$';
This will establish it as a string literal that the switch will be able to use. Anything else will be a bad variable that will throw an error.

Categories

Resources