I have a simple question probablly easy for someone...
I want to change de default.aspx background from white to a simple IMAGE (.jpg) and i couldnt do this adding :
< param name="background" value="/images/fondo.jpg" >
What`s the right ay to do this?
Thanks
<body background=BackgroundImage>
In your case,
body background="/images/fondo.jpg">
I cannot add a Background mark to the Body...
Here is the code:
body>
form id="form1" runat="server" style="height:100%">
div id="silverlightControlHost">
object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
param name="source" value="ClientBin/CCARS.Client.xap" />
param name="onError" value="onSilverlightError" />
param name="background" value="white" />
param name="minRuntimeVersion" value="4.0.50826.0" />
param name="autoUpgrade" value="true" />
param name="splashscreensource" value="Splash.xaml" />
param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
param name="onSourceDownloadComplete" value="onSourceDownloadCompleted" />
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>
/form>
/body>
Related
I have recreated a minimal reproducible example for the following question p:calendar popup remain below from calendar input in dialog when scroll (on IE and Chrome). I have also been encountering this issue and just figured out what was happening but I do not know how to fix it. The appendTo suggestion in the referenced question for selectOneMenu does not seem to be an attribute we can apply to the calendar.
Here is how to reproduce:
If the parent window is scrolled to the top, the calendar popup on the dialog is positioned correctly
If the parent window is scrolled down a little, the calendar popup on the dialog is positioned a little further down from the input box
The distance offset is seems relative to the amount the parent window is scrolled.
the top value seems to be the culprit.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions">
<h:head>
<title>Calendar</title>
</h:head>
<h:body>
<h1>Calendar Popup Issue PF 8.0</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h:panelGrid id="gridId">
<h:panelGrid id="panelId">
<h:form id="laborForm">
<p:commandButton oncomplete="PF('dialogWv').show()" title="Click to open dialog" update="dialogId" value="Open dialog with popup time only calendar" />
</h:form>
</h:panelGrid>
</h:panelGrid>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p:dialog id="dialogId" header="Test" dynamic="true" widgetVar="dialogWv" modal="true" showEffect="fade" hideEffect="fade"
resizable="true" width="400px" height="100px">
<h:form id="formId">
<p:panelGrid style="margin-bottom: 5px; border: 2px; width: 100%;" id="pg1">
<p:row>
<p:column colspan="2">
<p:calendar value="#{cc.attrs.viewBean.backfitTime}" timeOnly="true" pattern="HH:mm" showMillisec="false" showSecond="false" required="true"
requiredMessage="Time is required" rendered="true" />
</p:column>
</p:row>
</p:panelGrid>
<br />
</h:form>
</p:dialog>
</h:body>
</html>
EDIT
I am unable upgrade to PF10 at the moment due to too much of my site's look and feel getting broke with 10. So my short term fix was just to use the datePicker but with PF8. But the datePicker with PF8 doesn't render nice. Plus the mouse pointer covers the hour and minute numbers when incrementing up.
Clicking an up or down arrow is inefficient.
This is fixed in PrimeFaces 10.0.0RC1 or higher.
Issue: https://github.com/primefaces/primefaces/issues/6583
You should use p:datePicker instead of p:calendar. DatePicker is designed to replace the old p:calendar component. The p:datePicker (at least the one in PrimeFaces 10) uses absolute positioning instead of fixed, so that should solve your problem.
See also:
Can I position an element fixed relative to parent?
https://primefaces.github.io/primefaces/10_0_0/#/components/datepicker
I am working on wordpress project i have embed a flash player it's working in Fire Fox,Opera, IE9 + IE10 but in Google Chrome animation not working.If any body have any idea how to sort out this issue let me know.
<link href="http://banditbuster.com/wp-content/themes/banditbuster/style.css" rel="stylesheet" media="all" type="text/css" />
<!--[if !IE 10]><html id="ie10" <?php language_attributes(); ?><![endif]-->
<div class="main-content flash" style="float: left; width: 100%;" align="center">
<a style="margin-left: -48px; text-decoration: none;" href="home-2"><img alt="" src="http://banditbuster.com/wp-content/themes/banditbuster/images/enter1.png" width="216" height="62" /></a>
<div class="main-intro" style="border-radius: 10px;">
<div style="float: left; width: 100%;">
<div class="fottext" style="position: absolute; margin-top: 36%; text-align: center; width: 100%;"><a style="text-decoration: none;" href="how-bandit-buster-works"><strong style="color: red;"><span style="font-size: xx-large;"> "BANDIT BUSTER SECURITY SYSTEM"</span> </strong></a>
<strong style="color: red;"><span style="font-size: x-large;"> "IF YOU CAN'T SEE IT, SOMEONE CAN AND WILL STEAL IT"</span> </strong></div>
<object id="FlashID" style="border-radius: 10px;" width="1100" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="swfversion" value="6.0.65.0" /><param name="expressinstall" value="http://banditbuster.com/wp-content/themes/banditbuster/Scripts/expressInstall.swf" /><param name="src" value="http://banditbuster.com/wp-content/themes/banditbuster/intro7.swf" />
<embed src="http://banditbuster.com/wp-content/themes/banditbuster/intro7.swf" quality="high" bgcolor="#ffffff"width="1100" height="480" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object >
</div>
</div>
</div>
In your source code you have an unclosed tag...
<script type="text/javascript" href="http://banditbuster.com/wp-content/themes/banditbuster/Scripts/swfobject_modified.js" </script>
Should be
<script type="text/javascript" href="http://banditbuster.com/wp-content/themes/banditbuster/Scripts/swfobject_modified.js"></script>
Below code working for flash embed animation with transparent background for IE9 +10 ,firefox,chrome,opera browser's.
<!--[if IE 10]><html id="ie10" <?php language_attributes(); ?><![endif]-->
<!--[if firefox]><html id="firefox" <?php language_attributes(); ?><![endif]-->
<!--[if ! chrome]><html id="chrome" <?php language_attributes(); ?><![endif]-->
<object id="FlashID" style="border-radius: 10px;" width="1100" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="wmode" value="transparent" /><param name="quality" value="high" /><param name="wmode" value="transparent"/><param name="swfversion" value="6.0.65.0" /><param name="expressinstall" value="http://banditbuster.com/wp-content/themes/banditbuster/Scripts/expressInstall.swf" /><param name="src" value="http://banditbuster.com/wp-content/themes/banditbuster/intro7.swf" />
<embed id="FlashID" src="http://banditbuster.com/wp-content/themes/banditbuster/intro7.swf" wmode="transparent" quality="high" width="1100" height="480" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</embed>
</object >
<!--[if firefox]>
<embed id="FlashID" src="http://banditbuster.com/wp-content/themes/banditbuster/intro7.swf" wmode="transparent" quality="high" width="1100" height="480" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</embed>
<![endif]-->
I have a HTML div on the top of flash object(flex-3). Its coming in IE-8. But its not coming on Chrome/Firefox. Problem is that when I open developer tool of those two browser its coming.
So the problem is that without developer tool its not appearing on the screen.
I used Z-index, display:block, param name="wmode" value="opaque" as well.
<script>
function setupDivDimensions(){
var bodyElement = document.getElementsByTagName('body')[0];
var bodyW = bodyElement.clientWidth;
var bodyH = bodyElement.clientHeight;
document.getElementById('flexContainerMain').setAttribute("style","position:relative;width:"+bodyW+";height:"+bodyH);
document.getElementById('flexContainerMain').style.width=bodyW;
document.getElementById('flexContainerMain').style.height=bodyH;
document.getElementById('uam_boxes').setAttribute("style","z-index:3;display:block;");
document.getElementById('flexContainer').setAttribute("style","z-index:1;position:absolute;top:0;left:0;display:block;width:"+bodyW+";height:"+bodyH);
document.getElementById('flexContainer').style.width=bodyW;
document.getElementById('flexContainer').style.height=bodyH;
}
</script>
<body onload="setupDivDimensions();">
<input type="hidden" id="globalLogoutUrl" name="globalLogoutUrl"
value="/logout/page/link/goes/here" />
<input type="hidden" id="appLogoutUrl" name="appLogoutUrl" value="<%=request.getContextPath()%>/Logout" />
<f:verbatim>
<div id="flexContainerMain">
<div id="uam_boxes"></div>
<div id="flexContainer"><Object id="flex" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%"
height="100%" codebase="https://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="<%=request.getContextPath()%>/flex/MyFlashPage.swf" />
<embed src="<%=request.getContextPath()%>/flex/MyFlashPage.swf" width="100%" height="100%" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="wmode" value="opaque" />
<param name='flashVars'
value='userName=<h:outputText value="#{USER_OBJECT_KEY.userName}"/>&selMenuId=<h:outputText value="#{menuController.selectedMenuItem.menuId}"/>&selMenuTitle=<h:outputText value="#{menuController.selectedMenuItem.title}"/>' />
</object></div>
</div>
<div style="display:none">
<form name="redirection" action="" method="post" width="0" height="0"><f:verbatim>
<a style="margin-right:20px;" class="globalLinkBranding"
onmouseover="isStatusAvail = false;window.status='Logout';return true" onmouseout="isStatusAvail = true;"
id="uam_modal"> Logout </a>
</form>
</div>
</f:verbatim>
</body>
I just started learning Silverlight and I failed to use a transparent background for my Silverlight app in my asp.net page. I have searched on the internet and found that these two lines should fix it:
<param name="background" value="Transparent" />
<param name="pluginbackground" value="Transparent" />
but unfortunately it didn't. Here is the way i embed the Silverlight app:
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:SilverlightApplication4," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication4.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="Transparent" />
<param name="pluginbackground" value="Transparent" />
<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>
</form>
and this is my Silverlight code:
<UserControl x:Class="SilverlightApplication4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Loaded="UserControl_Loaded" BorderBrush="Transparent">
<StackPanel x:Name="LayoutRoot" Height="147" Width="226" Background="Transparent">
<StackPanel.Resources>
<Storyboard x:Name="FirstStoryBoard">
<DoubleAnimation Storyboard.TargetName="FirstEllipse"
Storyboard.TargetProperty="Width"
To="1" AutoReverse="True"
Duration="00:00:01" />
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="Hello, World!" HorizontalAlignment="Center" Name="txtMessege" />
<Ellipse Name="FirstEllipse" Height="100" Width="200" Fill="SlateBlue" />
<Button Name="FirstButton" Width="100" Content="Click" Click="FirstButton_Click" />
</StackPanel>
</UserControl>
Try with these parameters:
<param name="background" value="Transparent" />
<param name="windowless" value="True" />
You might need to restart the browser too.
What I am trying to achieve is to have a scrollable, auto-re-sizable div inside an iframe.
The problem is that iframe, unlike a div, has a scroll in itself, therefore the overflow-y property of my div is ignored, and entire content of my div is displayed, instead of a just a small portion.
The best explanation is a sample, which you can view by clicking
http://www.alocet.com/VictorsTestFolder/Sample/Default.html
When I've added CSS "html,body,form{ height:100%; margin:0px; padding:0px;}" to IFrame page, it almost worked, but unfortunately I wasn't able to get rid of duplicate scroll-bars.
Any suggestions?
I'm going to go out on a limb and say that you can't really do the thing you want to do without JavaScript.
Divs just don't work like that. They typically overflow as far as needed, spilling wherever. The only way to keep a div from being sized according to its contents (I'm speaking on experience) is to give it an explicit height. Otherwise, it will either spill out of its container or, if its container is its own block formatting context, cause its container to start scrolling.
The iframe appears to be its own context. Thus, you MUST set an explicit height if you want the div it contains to keep itself compact. Two options I see:
You can add a parameter for the server to change the page's height:
<iframe src="Default_files/IFrame2.htm?h=400"
Then, create a containing div for the whole page with a fixed height that fits within the iframe. Everything inside of it should flow properly. Then, set the div that might have a lot of content to a fixed size.
The other option is to use JavaScript, which I think can obtain exactly the variables you're looking for using document.documentElement.clientWidth. See this article for more details. Even in this case, you still end up setting the framed page to a fixed height.
Both methods are sketchy workarounds, but I'm somewhat confident you can't do what you want with just CSS.
whats wrong with your 3rd example? you have a fixed size iframe and the div inside still has a scroll bar.
Also what do you mean by scrollable, auto-re-sizable div surely if it is auto resizing it won't be having a scroll bar?
otherwise I'd suggest using a div inside a div and you will have a lot more control and your content will still be showing on search engines.
So implementation of a simple javascript that executes onload solved my problem... well, partially, since if you have a table inside a fixed height div, it goes over the specified div height... so I am trying to find a solution for this problem now...
<!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">
<style type="text/css">
html, body, form
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" language="javascript">
window.onresize = doResize;
window.onload = doResize;
function doResize() {
document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="popupHeight">
Text before the div
<br />
<div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
</div>
Text after the div
</div>
</form>
</body>
</html>