I am developing an application which is the mixture of Silverlight and Javascript.
From Javascript , I am getting the content through html div (and using css).
The problem is to manage the layout how should i manage the layout. My whole application working is in Silverlight so it depends on xap but because of developed a web chat Message at page footer, i am using some html portion. Now how should i cater these
problems:
Silverlight Light layer should be at top but on the selection of Page Footer Chat Messenger, Page footer should be at top but 'll display the effects.
It's not unknown for jquery to remove features so your code could just break when a new version comes out. Also it doesn't have minification to make the donwload smaller and its expiry header is very short so you don't get the caching benefit.
The best way to include jquery is to include the latest version via the google cdn as this is the most popular and you are more likely to have visitors that already have the file downloaded:
Thanks rtpHarry. It really helped me. Silverlight have an equivalent property to it. I just have one minor issue remained.
When i try to increase the size of silverlight object and give a percentage to it then it didn't consider to be effective. I think some html div styles take some
maifs
Member
375 Points
378 Posts
Layout problem
Jan 04, 2012 08:10 AM|LINK
I am developing an application which is the mixture of Silverlight and Javascript.
From Javascript , I am getting the content through html div (and using css).
The problem is to manage the layout how should i manage the layout. My whole application working is in Silverlight so it depends on xap but because of developed a web chat Message at page footer, i am using some html portion. Now how should i cater these problems:
Silverlight Light layer should be at top but on the selection of Page Footer Chat Messenger, Page footer should be at top but 'll display the effects.
For detailed view, source is mentnioed below:
<%@ Page Language="C#" AutoEventWireup="true" %> <!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" > <head runat="server"> <title>NFS.UI.Silverlight</title> <link href="CSS/Default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="JS/DefaultBehavior.js" type="text/javascript"></script> </head> <body> <div id="content"> <asp:ScriptManager ID="scriptManager" runat="server"> </asp:ScriptManager> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost" style="height:80%;"> <object id="Xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/NFS.UI.Silverlight.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50826.0" /> <param name="uiculture" value="<%= System.Threading.Thread.CurrentThread.CurrentUICulture %>" /> <param name="culture" value="<%= System.Threading.Thread.CurrentThread.CurrentCulture %>" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> <div id="plexbar"> <div id="container"> <div id="title"> <img alt="" src="Images/N.jpg" height="20" width="20" style="float: left; padding-right: 4px;" />Live Support </div> <input id="nicknameTextBox" type="text" class="nickname" value="Type a nickname" /> <input id="connectButton" type="button" value="connect" class="connect" /> <div id="chatbar"> <div id="usersButton" class="button"> <div class="usersTitle"> <img alt="" src="Images/Dot.png" height="12" width="12" class="titleImage" /> Online Friends <strong id="numberOfOnline">(loading)</strong> </div> </div> </div> <div id="login"> Welcome</div> </div> </div> <div id="box"> <div id="plexbox"> <table id="listOUsers" style="margin: 0; padding: 0;"> </table> </div> </div> </form> </div> </body> </html>Can i run it parallel or seem like parallel working like i said above.
seee the below snapshot
Please mark as Answer, if it helps you
________________________
maifs
rtpHarry
All-Star
56620 Points
8958 Posts
Re: Layout problem
Jan 04, 2012 08:04 PM|LINK
Hey
jquery
Just wanted to point out that you shouldn't really use the lastest jquery url like this:
It's not unknown for jquery to remove features so your code could just break when a new version comes out. Also it doesn't have minification to make the donwload smaller and its expiry header is very short so you don't get the caching benefit.
The best way to include jquery is to include the latest version via the google cdn as this is the most popular and you are more likely to have visitors that already have the file downloaded:
items on top
I think when you mean on top you mean to say that it should cover the other element?
To position items like this you should look into css absolute postioning and css z-index:
overlaying objects
In flash there is a mode called wmode = transparent which will let you overlay and click through the background of flash files.
I haven't used silverlight before but it seems that the equivalent property is called isWindowless.
more help
If you haven't tried already to might want to check out the official silverlight forums over at:
maifs
Member
375 Points
378 Posts
Re: Layout problem
Jan 05, 2012 04:49 AM|LINK
Thanks rtpHarry. It really helped me. Silverlight have an equivalent property to it. I just have one minor issue remained.
When i try to increase the size of silverlight object and give a percentage to it then it didn't consider to be effective. I think some html div styles take some
higher priority to silverlight object 's style.
Guide me how can i give a percentage to it.
Below height-style doesn't seem to effective.
Please mark as Answer, if it helps you
________________________
maifs
maifs
Member
375 Points
378 Posts
Re: Layout problem
Jan 12, 2012 04:39 AM|LINK
=======================Default.css================================
body
{
overflow: hidden;
width: 100%;
margin: 0;
background-color: transparent;
}
#plexbar
{
width: 100%;
position: fixed;
bottom: 0px;
text-align: right;
min-width: 450px;
}
#container
{
height: 26px;
margin-left: 15px;
margin-right: 15px;
border-top: solid 1px #424242;
background-color: #323232;
border-right: solid 1px #424242;
border-left: solid 1px #424242;
}
#title
{
float: left;
color: #AFAFAF;
padding-top: 2px;
padding-left: 5px;
font-weight: bold;
font-family: Trebuchet MS;
font-size: 10pt;
cursor: default;
}
#box
{
position: fixed;
bottom: 26px;
right: 28px;
}
#plexbox
{
height: auto;
width: 140px;
background-color: #292929;
border-top: solid 1px #565656;
border-right: solid 1px #565656;
border-left: solid 1px #565656;
display: table;
}
#chatbar
{
height: 26px;
float: right;
margin-right: 10px;
}
#login
{
color: #AFAFAF;
margin-right: 10px;
font-style: italic;
}
.nickname
{
float: left;
margin: 0px 0px 0px 20px;
font-size: 9pt;
height: 23px;
padding: 3px 4px 0px 6px;
width: 110px;
text-align: left;
font-family: Trebuchet MS;
background-color: #424242;
color: #AFAFAF;
border-left: solid 1px #878787;
border-right: solid 1px #878787;
border-bottom-style: none;
border-top-style: none;
font-style: italic;
visibility:hidden;
}
.connect
{
border: solid 1px #878787;
background-color: #424242;
height: 100%;
padding: 3px 10px 3px 10px;
color: #AFAFAF;
margin-left: 10px;
outline-style: none;
float: left;
visibility:hidden;
}
.button
{
width: auto;
height: 100%;
cursor: pointer;
text-align: center;
margin: 0 2px 0 2px;
display: inline-block;
border-left: solid 1px #565656;
border-right: solid 1px #565656;
color: #AFAFAF;
font-size: 9pt;
padding-top: 3px;
padding-right: 13px;
padding-left: 12px;
font-family: Trebuchet MS;
background-color: #323232;
}
.button:hover
{
background-color: #444444;
color: #FFFFFF;
}
.usersTitle strong
{
font-weight: bolder;
font-size: 1.01em;
}
.titleImage
{
position: relative;
top: 1px;
}
.userOnline
{
color: #66AFE3;
font-size: 9pt;
margin:0;
padding-left: 10px;
font-family: Trebuchet MS;
cursor: pointer;
width: 130px;
}
.userOnline:hover
{
color: #A5D6F8;
background-color: #444444;
}
.me
{
margin:0;
color: #CFF1AC;
font-size: 9pt;
padding-left: 10px;
font-family: Trebuchet MS;
cursor: default;
width: 130px;
border-bottom: solid 1px #565656;
}
.me:hover
{
color: #CFF1AC;
}
.chatbox
{
width: 170px;
height: 155px;
text-align: center;
background-color: #444444;
color: #AFAFAF;
display: table;
position: relative;
bottom: 185px;
border: solid 3px #242424;
border-bottom-style: none;
border-right-width: 1px;
border-left-width: 1px;
padding: 2px 5px 0px 5px;
float: right;
}
.chatbody
{
text-align: left;
font-family: Trebuchet MS;
font-size: 9pt;
height: 110px;
overflow: auto;
}
.titleBar
{
font-style: italic;
font-weight: bold;
font-size: 10pt;
font-family: Trebuchet MS;
}
.removepad
{
padding-left: 0px;
padding-right: 0px;
width: 190px;
cursor: default;
}
.chatInput { width: 170px; }
.chattext
{
text-align: left;
width: 100%;
height: auto;
padding-top: 1px;
}
.buttonName
{
width: 100%;
height: auto;
}
.selected
{
border: solid 3px #242424;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: #444444;
color: #FFFFFF;
}
Please mark as Answer, if it helps you
________________________
maifs