I am trying to set each button to control the style of an iframe in c#.
The HTML code is as follows
style="border: 0px none; margin-left: -185px; height: 100%; margin-top: -533px; width: 100%;">
I have my C# code as
IFrame.Attributes.Add("style", "height: 100%, Margin-top:-533px, margin-left: -185px, width: 100%,");
The issue is that the C# is not acting out like the HTML, How do I amend the C# code to behave like the HTML ? Please Help.
Why d'ont you do like this below :
IFrame.Attributes["style"] = "border: 0px none; margin-left: -185px; height: 100%; margin-top: -533px; width: 100%;";
Related
I am trying to change the background of a div after clicking a button. this are the codes.
Div I want to change color:
<div id="example1" runat="server">
</div>
and CSS for it:
#example1 {
position: absolute;
z-index: 5;
top:0;
background-color: orange;
width: 310px;
height: 34px;
color: white;
border-radius: 4px;
}
I want to change it to this:
#example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
I tried to write some code at Page.aspx.cs
example1.CssClass = "example2";
but looks like CssClass is not a function of the div. how can I add it? or whats a way to do it on C#?
You don't have to go back to server, in order to change the color of your div. This can be done solely on client by writing a simple script:
var example1 = document.getElementById("example1");
example1.addEventListener("click", function(){
this.className = "example2";
});
.example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
<div id="example1" runat="server">
sample text
</div>
Important Note
In your case, since your div is a server side control, (runat="server"), the id that is generated before the page is sent to the client is not example1. So in the script I presented above we have to make a change:
var example1 = document.getElementById("<%= example1.ClientID%>");
For this answer, I will assume based on your code that you will be handling the click event on the back end.
The issue is your CSS is targeting the elements by id but you are trying to assign a CSS class by name.
First, change your div to use the class by name:
<div id="example1" class="example1" runat="server">
</div>
(The name of the class is your choice. I just used the same for simplicity)
Then change your CSS classes to NOT target an id:
.example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
Notice the period (.) instead of the hash (#).
I have a div with a background image with an image nested inside of it. I am using a CSS class to set the background and positioning properties of that div. I would like for the user to control which background they see via a query string. The code behind would basically change (switch) the class of that div so that the background image would change based on the string typed in the address box.
Here is the HTML with the div and Css.
.background1 {
background-image: url(../Background1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
.background2 {
background-image: url(../Background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
.background3 {
background-image: url(../Background3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
<div id="div" class="background1" runat="server"></div>
Here is what I (currently) have in the code behind.
if (Request["nobg"] != null)
{
div.Style.Add("display", "none");
}
So in the end I would like the user to switch between classes by typing in something like "?Background3" after the url to change the class (to see a different background) But I am sort of stuck as I really do not know if what I would like to do (switch between the background classes via query-string) is possible. Any help would be great. Thanks.
I am creating an Windows phone application which is rendering html content on web browser.
I have a css file where i need to alter some values which are in a special format.
Following is an example of my data, where you can see a number of '.position-page{n}-{n}'
style tags there includes 3 properties in each margin left ,right & top.
</style><style type='text/css'>
.position-page2-1 {
margin-right: 180px;
margin-left: 180px;
margin-top: 280px;
}
.position-page2-2 {
margin-right: 350px;
margin-left: 150px;
margin-top: 20px;
}
.position-page2-3 {
margin-right: 180px;
margin-left: 220px;
margin-top: 80px;
}
.position-page2-4 {
margin-right: 180px;
margin-left: 220px;
margin-top: -20px;
}
.position-page2-5 {
margin-right: 350px;
margin-left: 140px;
margin-top: -10px;
color: #5ED6FB;
}
.page2-2 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
.page2-3 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-4 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-5 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
</style>
We are getting this style text as response from a 3rd party service.
As per our requirement i need to reduce margin's value to some percentage. Suppose if 150px is the margin i want replace it by 30px , i need to replace each margin value in to currentmargin/5 px.
What is the best way to do this?
Is that possible for you to use viewport scale?
In that case you should not change anything in css at all.
<meta name="viewport" content="width=320, initial-scale=1">
Here is more info about design adaptation, provided by Microsoft:
Managing the Windows Phone Browser Viewport
I need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!
my aspx code:
<div class="tabcontent">
<div class="tabcontent-inner">
<div class="tabcontent-inner-left grid_20">
</div>
<div class="tabcontent-inner-right grid_20">
</div>
</div>
</div>
my stylesheet css:
.tabcontent-inner {
width: inherit;
padding: 10px 10px 10px;
margin-top: 10px;
margin-bottom: 1px;
position: relative;
display: block;
}
.tabcontent-inner-left {
padding: 20px 20px;
border-left: solid 1px #ddd;
width: 45%;
float: left
}
.tabcontent-inner-right{
padding: 20px 20px;
border-right: solid 1px #ddd;
width: 45%;
float: right
}
Basically, I want the tabcontent-inner div to get the height of what is inside of it.
this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height
you can find more suitable answer here How do you keep parents of floated elements from collapsing?
Add this code to Your CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
and
change
<div class="tabcontent-inner">
to
<div class="tabcontent-inner clearfix">
Semi colons are missing in the css after
float : left
and
float : right
I have a web application that has a menu bar on top of the page. This menu bar is showing fine in Internet explorer 9 however in chrome it is showing incorrectly. I don't really know how to make this css file a cross browser css file.
here is how it shows in IE.
and here is how it shows in chrome.
my css is as follows:
div.hideSkiplink
{
background-color: #796540;
width: 100%;
height: 56px;
margin: 0px 5px 20px 0px;
}
div.menu
{
padding: 1px 0px 1px 8px;
margin: 5px 0px 5px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
and here is my page markup
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
IncludeStyleBlock="False" Orientation="Horizontal" BackColor="#F7F6F3" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px"
DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="NavigationMenu_MenuItemDataBound">
</asp:Menu>
</div>
can somebody please help me?
try override default parameters of li paddings, li margins,hideskipling paddings
Try changing width: 100%; to something fix/constant. Alternatively, try reading this post http://fabenterprises.wordpress.com/2009/03/21/aspnet-menu-not-rendering-correctly-in-googles-chrome/