this should be simple...could someone provide me a simple code sample that has an aspx page hosting both a silverlight app (consisting of, say a button) and an iframe (pointing to, say stackoverflow.com). The silverlight app and iframe could be in separate div's, the same div, whatever.
Everything I've tried so far leaves me with a page that has no silverlight control rendered on it.
EDIT: At the request for what my xaml looks like (Plus I should point out that my controls render just fine if I comment out the iframe.)
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Pink">
<Button Content="Click Me!"/>
</Grid>
</UserControl>
Thats it. Just for good measure here is my aspx page...
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div style="height:100%;">
<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"/>
</form>
Hmm, sound a bit odd, a quick google gave me this top result which talks about using an Iframe and Silverlight on the same page, without problems.
Also a quick test with the following code:
<%# Page Language="C#" AutoEventWireup="true" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
<title>Test Page</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Test.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"></iframe>
</form>
</body>
</html>
Renders out both Silverlight and the Iframe quite happily.
What code were you using when trying and it didn't work?
What does your XAML look like?
It could be something along the lines of the size set on the usercontrol in XAML, doesn't match the size set on the plugin on the aspx page. In that case, your button might be there but just not in the viewable area... Try checking the size of things, make sure they match.
A quick test you could do is to change the background color of your root element in the XAML and see if anything happen on the page.
Also, does the silverlight work if you remove the Iframe but leave everything else as is?
Sorry if this a too simple suggestion but without knowing your experience level with XAML...
Funny enough, I just solved this issue by ensuring that I specify the iframe dimensions by pixel.
Related
In an angularjs application, is it possible to use a different (index.html?) for login page and use another index.html page for rest of the pages in the application?
It is possible, however you can also use ng-if on the login html code and the regular html code:
<div ng-if="userLoggedIn">
<login page html>
</div>
<div ng-if="!userLoggedIn">
<regular page html>
</div>
Which will show one of the divs according to what is set as $scope.userLoggedIn in your main controller.
also you can use ng-show and ng-hide
<div ng-show="userLoggedIn">
<login page html>
</div>
<div ng-hide="!userLoggedIn">
<regular page html>
</div>
I am using the Chrome toolbar from http://wave.webaim.org/extension/ to check the ADA compliance of my React-Bootstrap app.
When I use a Popover within an OverlayTrigger without an ID, it warns me in the console:
Warning: Failed propType: The prop 'id' is required to make 'Popover' accessible for users using assistive technologies such as screen readers
Problem is, when I add an ID to the Popover, I then get the following error on my accessibility scan:
Broken ARIA reference: An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.
I am guessing it's happening because the element with that ID doesn't exist until the button is clicked. Am I missing something, or is this element not ADA compliant? Or, is this just a problem with the scan, and there's a better tool I should be using to prove my site is compliant?
Here is the code for an example site that demonstrates the issue. I have thrown it in a Fiddle, but it won't do you much good because if you run the accessibility tool on that, it will give you JSFiddle's errors rather than the ones for the relevant code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React-Bootstrap Popover Accessibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;
var Overlay = React.createClass({
render: function() {
return (
<OverlayTrigger trigger="click" placement="right" overlay={
<Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
}>
<Button bsStyle="primary">Click to see Popover</Button>
</OverlayTrigger>
);
}
});
ReactDOM.render(
<Overlay />,
document.getElementById('container')
);
</script>
</body>
</html>
I can confirm that the code is not compliant. You can double-check whether this code validates by:
Inspecting this element in the developer console (before the button is clicked)
Copying the rendered HTML to the clipboard
Loading http://validator.nu and selecting the ‘Textfield’ option
Pasting your HTML between the <body></body>tags
Clicking ‘Validate’
As you’ll see, the code does not validate, because, as oobgam mentioned, the target ID is not initially present in the DOM.
There are a number of different approaches to fixing this. Once I understand which design pattern you’re trying to accessibly support, I can provide more concrete advice.
Can you please provide more information about why you chose this implementation? How do you see desktop and mobile users interacting with this, and to what end?
Quora has a good list of related patterns at What's the difference between a modal, a popover and a popup?
I'm trying to use dojo's dialog box in a page in my application but having some problems with the page in IE7 (or in IE 8 in some cases, when the page is viewed in compatibility mode).
Following is a rough skeleton structure of the page i'm trying to write.
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
var secondDlg;
dojo.addOnLoad(function() {
var foo = new dijit.Dialog({id:'testDialog', title: "test dialog", content: "test content" }, dojo.byId('dialog1Container'));
foo.startup();
var foo2 = new dijit.Dialog({id:'testDialog2', title: "test dialog 2", content: "test content 2" }, dojo.byId('dialog2Container'));
foo2.startup();
});
wrapper = function() {
dijit.byId('testDialog').show();
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<p>
When pressing this button the dialog will popup. Notice this time there
is no DOM node with content for the dialog:
</p>
<a onClick="wrapper();"> Show the test dialog</a>
<br />
<a onClick="dijit.byId('testDialog2').show();"> Show the test dialog</a>
<div id="dialog1Container"></div>
<div id="dialog2Container"></div>
</body>
In IE7, the page just hangs when it tries to display the dialog box from the 1st link.
Here are some symptoms of the malady ailing this page:
It breaks if there are more than 1 Dijit.dialog in the dom. If there is only 1, then it works fine
If there are more than 1 dialogs instances in the dom, only the last one works correctly. All previous ones end up freezing the browser.
The work around i'm using is to dynamically create an instance of dijit.Dialog in my js and insert it into the dom container and hitch a custom method to hide it. And when i'm hiding it i also call destroy on the dialog so it removes the dialog from the dom. This allows me to have multiple places in my page which can use the dialog, but only 1 will be displayed and be present in the dom at any point of time
And some extra info:
The html doc type i'm using is DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
It works fine in FF, Chrome and IE 8, only breaks in IE 7
I'm using dojo 1.5 (not the one from google's site, but a copy from my server, but i cant put that in the sample code)
Anybody have any idea about dojo's dialog having problems in IE 7?
Turns out this wasn't a problem with the dijit Dialogs itself, there was an event handler (not connected to dojo at all) which was causing the error, which is why it wasn't reproducible in a standalone page.
Here I am new to Silverlight and I have to implement a video player in asp.net with C# , I found some article about video player and media player. I am implementing according the tutorials but the that is not working here I am sending my code please find out what is problem. Tell me what is the difference between media element and media player in Silverlight?
here is the code of .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<%# Register assembly="AjaxControlToolkit" amespace="AjaxControlToolkit" tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SILVERLIGHT MEDIA PLAYER | DEMO</title>
</head>
<body>
<form id="form1" runat="server">
<div id="xx" runat="server"></div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div style="float:left">
<asp:DropDownList ID="cmbSkins" runat="server"
onselectedindexchanged="cmbSkins_SelectedIndexChanged" />
</div>
<div><h3>SELECT PLAYER STYLE</h3></div>
</div>
<asp:MediaPlayer ID="MediaPlayer1" runat="server"
Width="600px"
Height="440px"
PlaceholderSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgMain.JPG">
</asp:MediaPlayer>
<hr />
<hr />
</form>
</body>
</html>
and this the code behind page:
public partial class _Default : System.Web.UI.Page
{
protected enum MediaPlayerSkins
{
AudioGray,
Basic,
Classic,
Console,
Expression,
Futuristic,
Professional,
Simple
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MediaPlayer1.AutoPlay = true;
MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
cmbSkins.Items.Add(MediaPlayerSkins.Classic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Console.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Expression.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Futuristic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Professional.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.AudioGray.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Simple.ToString());
cmbSkins.AutoPostBack = true;
cmbSkins.SelectedIndex = 4;
MediaPlayer1.MediaSource = Server.MapPath("~/") + "Wildlife.wmv";
xx.InnerHtml = Server.MapPath("~/") + "Wildlife.wmv";
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
I don't know anything about Silverlight and this is done using a article, I only changed the source of player nothing else and this is not working.
One question is arising in my mind that which is the best for playing video flash player or this one while we have a low bandwidth internet connection. Please tell me some useful solution?
Thanks
To answer this part of your question:
tell me what is the difference between media element and media player in silver light.
The MediaPlayer element you've used is an ASP.NET control which consists of a basic Silverlight player (using Silveright 1.0 I think). All you have to do is point it at the video file and it will play. The MediaPlayer gives you all the basic controls for playing media (play/pause, etc).
A MediaElement is a Silverlight type used in a Silverlight application, not an ASP.NET application like the MediaPlayer. MediaElements are used in XAML (i.e. Silverlight markup) to represent, well, media elements. The MediaElement doesn't give you controls for playing the media, it just renders it (whether audio or visual). You can use other elements in XAML to control the MediaElement, e.g. if you wanted a play/pause button, you could create another element to do that.
guys i found why it was not working i am missing the proper source path that should be "~/MediaFile.wmv" instead of server.mappath(....).
I am using IE and firefox, this is the default statement that was created using a default asp.net tag.
This works perfectly fine with IE but with firefox, nothing is rendered.
<%# Page Title="" Language="C#" MasterPageFile="~/Core.Master" AutoEventWireup="true"
CodeBehind="photoalbum.aspx.cs" Inherits="mkuk.photoalbum" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentLeft" runat="server">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/Static/silverlight/PhotoAlbum.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentRight" runat="server">
</asp:Content>
change Width="100%" Height="100%" to Width=600px Height= 800px. FF and IE7/IE8 cause problem with 100% values.
check this out -
Any chance you installed FireFox after installing the Silverlight plugin? Maybe you could uninstall Silverlight (plugin only) and reinstall. You could also try loading this page in FireFox on multiple machines to see if its really a FireFox issue (shouldn't be).