Good Day Every one,
So here is my code:
I have a Div in my aspx page that contains a loading bar gif image
<div runat="server" id="divwait" style="border-right: #808080 1px solid; border-top: #808080 1px solid;
z-index: 100; left: 570px; border-left: #808080 1px solid; border-bottom: #808080 1px solid;
position: absolute; top: 401px">
<div class="body" style="padding-right: 10px; padding-left: 10px; border-left-color: #808080;
border-bottom-color: #808080; padding-bottom: 10px; border-top-style: solid;
border-top-color: #808080; padding-top: 10px; border-right-style: solid; border-left-style: solid;
background-color: #f2f2f2; border-right-color: #808080; border-bottom-style: solid">
<img alt="" src="Images/ajax-loader.gif" /> <br />
<asp:Label ID="Label7" runat="server" BackColor="White" BorderColor="White" Text="Processing transaction. Please wait."
Width="219px" ForeColor="Black"></asp:Label></div>
what I'm trying to do is to invoke/open the div upon button click that's why i use this code in my button click
protected void uploadButton_Click(object sender, EventArgs e)
{
divwait.Visible = true;
// do serverside process after showing the div
}
the problem is that when i click the uploadbutton, it doesn't view the divwait before doing the processes below.
What i aim on doing is making a please wait loading bar that would notify the users to please wait because the processes that is going to take place in the upload button takes some time to finish.
I'm really sorry if this is a newbie question i have just started learning programming.
im using VS 2005/.net2.0 and i cannot use ajax as what i have saw in other examples.
thank you for your help and kind understanding.
**EDIT
In the Page Load i have hid the div
if (!Page.IsPostBack)
{
divwait.Visible = false;
}
the div should only be shown upon button click and while the sytem do it's work.
if you can recommend also recommend other process to do this, that would be highly appreciated.
In your Page_Load you should probably hide the div only if IsPostBack is false:
if (!IsPostBack) {
// first time we load the page, hide the div
divwait.Visible = false;
}
Related
Getting the error from the title when attempting to click on an <a> tag in a regression test script. I've researched the issue here: Selenium::WebDriver::Error::MoveTargetOutOfBoundsError: Element cannot be scrolled into view:[object HTMLSpanElement] and here as well: https://groups.google.com/forum/#!msg/webdriver/R2jwSWrIK44/RaCLRPlKIWEJ but I don't understand the root cause of the issue.
I've tried using By.jQuery, By.Id, By.Css, By.Xpath, as well as selecting by index and always get the same error. Here's the relevant code:
HTML:
<div id="divTabs">
<a id="tabECheck" target="#divECheck">eCheck</a>
<a id="tabAceComments" target="#divAceComments">Ace Comments</a>
<a id="tabReviewComments" target="#divReviewComments">Review Comments</a>
<a id="tabReviewHistory" target="#divReviewHistory">Review History</a>
</div>
CSS:
#divTabs{
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
width: 27px;
padding: 0px;
height: auto;
display: table-row;
margin-bottom: 10px;
}
#divTabs a
{
border: 1px solid #CCC;
padding: 3px;
white-space: nowrap;
cursor: pointer;
color: #3966BF;
display: table-cell;
background-color: #FFF;
}
C#:
element = driver.FindElement(By.Id("tabReviewComments"));
element.Click();
As you can see, I'm trying to click on the 3rd <a> tag with the id of "tabReviewComments." However, if I have the script click on the first <a> tag with the id of "tabECheck", it works in the sense that I don't get the "can't scroll element into view" error, the element is clicked, and the script moves on past that line. Sadly, I need to click on that third <a> tag. Any ideas short of moving the <a id="tabReviewComments" target="#divReviewComments">Review Comments</a> to the top?
Thanks!
Its likely that the element is actually un-clickable as far as the browser goes, this may be because
Its position is off-screen (negative space)
Its behind another element (like modal overlay or something)
It has 0 size (sometimes css can be funny, browser maybe calculating size differetnlty to what your seeing)
A UI bug in your system whereby the element isn't visible for another reason
I am working on a website (C#, .Net 3.5 Framework) and looking for an alternate of Popup window to avoid the popup blocker settings of browsers or in other words want to remove the dependency of popup blocker for Website. Many users disable them because they don't like it.
I am using Master page for Menus and common interface of website.
But all the requirements are same.
Overlapped window
Common Interface/component that can be used to display the content of other HTML/ASPX page
Value can be passed and returned to the Opener Window.
Which is the best option for this scenario?
Thanks.
Your best bet is javascript, maybe modal plugin of jquery, but... The problem is, that it isn't 100% reliable as well. Many people disable javascript or maybe don't have a browser with that js (some older mobile phones etc.).
I have found a way, as an alternate of popup window.
Style Sheet (Popup related CSS)
Purpose: CSS for popup window
.PopupOuterDiv
{
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
.PopupInnerDiv
{
position:fixed;
background-color:#ffffff;
z-index:50;
left:25%;
right:25%;
top:25%;
border-right: #0066ff 5px solid;
border-top: #0066ff 5px solid;
border-left: #0066ff 5px solid;
border-bottom: #0066ff 5px solid;
font-family: Arial;
}
.PopoupTitle
{
background-color: #0066ff;
height:25px;
color: white;
}
.PopoupButton
{
color: #ffffff;
width:20px;
border:white 1px solid;
background-color: #663300;
}
Master Page
Purpose: Contains the Common code for popup
1. Create 1 Div for Outer faded Effect
2. Create Div as container or popup Window
3. Create Iframe inside a container DIV and assign the URL.
<div class="PopupOuterDiv" runat="server" id="PopupOuterDiv" style="display:none;"></div>
<div class="PopupInnerDiv" runat="server" id="PopupInnerDiv" style="display:none;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="PopoupTitle">
<td id="PopoupTitle"></td>
<td align="right">
<input class="PopoupButton" type="Button" value="X" onclick="closePopup();" />
</td>
</tr>
<tr style="height:8px;" ><td></td></tr>
<tr>
<td colspan="2">
<iframe id="PopupIframe" src="" runat="server" height="300px" width="480px"></iframe>
</td>
</tr>
</table>
</div>
JavaScript to open and close the Popup
function closePopup()
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = 'none';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = 'none';
}
function openPopup(PopupTitle, PopupURL)
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = '';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = '';
document.getElementById('PopoupTitle').innerText = PopupTitle;
document.getElementById('<%=PopupIframe.ClientID%>').src = PopupURL;
}
Content Page
Call the popup window from any content page.
openPopup('My Custom Popup', '../aspx/User.aspx');
I applied a css for image button as follows
<style type="text/css">
.selected
{
padding-left:50px;
background: transparent url('Images/samplecopy.jpg') ;
background-repeat: repeat;
}
</style>
<asp:ImageButton ID="btnYes" CssClass="selected" runat="server" ImageUrl="~/Images/image.jpg" />
But i am not getting as per required. i would like to cover the whole image button with the background image that applied
I need to hover that black back ground exactly on the image can any one help me
Don't use the padding, that's what causing the problem.
Use the following code and see if it helps
<style type="text/css">
.selected
{
padding:0px;
background: transparent url('Images/samplecopy.jpg') ;
background-repeat: repeat;
}
</style>
UPDATE
clear: both;
padding: 5px;
border: 1px;
background: transparent url('Images/samplecopy.jpg') ;
background-repeat: repeat;
color: #FFF;
font-weight: bold;
font-size: 12px;
border-radius:3px;
Try these properties in CSS and tell me if it helps.
I am using a httphandler to dynamically resize images that are rendered on a page. I have a preset width that all images must confirm - and the height of the images can vary (proportions constrained to the original width and height). I am caching the images - however, when they are originally loaded, the httphandler is called after the page is rendered - so for longer images - sometimes on intial load, layout breaks with larger images as they overlap the content that is below it. Here is an example screenshot from here http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801:
Here is the css:
.gallery
{
margin-left:0px;
padding-left:5px;
}
ul.gallery div.top_frame
{
width:732px
}
ul.gallery div.view_frame
{
margin-left:5px;
}
ul.gallery div.image_frame
{
border: 1px solid #dddddd; padding-top: 5px; height:100%; min-height:490px;
padding-bottom: 5px; text-align: center;
}
ul.gallery div.button_frame
{
width: 732px; text-align: right; margin: 4px 0px 0px 0px;
}
ul.gallery div.name_frame, ul.gallery div.original_name_frame
{
margin: 0px 0px 0px 5px;
}
ul.gallery div.name_frame h2
{
margin: 2px 0px 3px 0px;
padding: 0px;
}
ul.gallery div.date_frame
{
margin-left:5px;
margin-bottom:5px;
}
ul.gallery div.update_frame
{
width: 732px; margin-bottom: 5px; margin-top: 5px;text-align:right;
}
ul.gallery div.desc_frame
{
margin-left:5px;
background-color:#eeeeee;
}
ul.gallery li
{
width: 732px;
display: -moz-inline-stack;
display: inline-block;
vertical-align:top;
margin: 5px;
zoom: 1;
*display: inline;
_height:100%;
color:#000000;
letter-spacing:0px;
line-height:normal;
}
ul.breadcrumbs li
{
float:left;
margin:0px;
padding:0px;
width:100%;
}
ul.breadcrumbs li a
{
font-size:12px;
}
Since the image in the screenshot below may be cached you may not see the broken layout. I wonder if rendering the images in a table would be better? Or is there a css fix? I've even tried Jquery and used document ready to adjust the height of the image containers - but the image may not be loaded - so I can't return the height of the image in the function. Any suggestions on how to solve this issue?
If your images are all going to be the same width, output the IMG tag with a width attribute. this may help.
<img src="..." width="720">
Using input type="image" for this type of application is a bit odd. Why not just use an A-tag wrapped around an image?
This is the key to your problem:
however, when they are originally loaded, the httphandler is called after the page is rendered
An IHttpHandler sees the request before the response is sent to the browser and can do whatever it needs, including responding with a resized image. I'm doing that a lot, never had a problem. Since it doesn't work for you, I'm 100% you've got a bug in your HttpHandler.
If i create the image and load it into the cache in the custom image's prerender event - it seems to have fixed this issue. Originally the control rendered the image info to the src string in the browser and the image was then intercepted by a httphandler that calls a cachemanager (if exists - return, if not - create). Since the problem above seemed to happen only when the image was initially created - I figured recreating it before it was 'requested' may help - and it appears it has. If there are consequences to this - I will edit my solution.
I would not say I wasted my time, but spent around few hours changing this. But in vain. Could some one please help me out.
In the following code:
I need to use break in between Disable Location(Title) and the gridview
I want the border color of grid to none. I do not want any color.
I want both the buttons Disable or deactivate and Cancel to be displayed just below the gridview. and in the middle of the page.
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;
border-left: #88b9c7 1px solid; border-bottom: #88b9c7 1px solid; border-top: #88b9c7 1px solid;
border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px;
height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr>
<td align="center" colspan="5" style="font-weight: normal; font-size: 20px; margin: 0px;
font-family: Arial; color: #1e7c9b;">
Disable Location</td>
</tr>
I need number 1 over here..
<asp:GridView ID="disableloc" runat="server" AutoGenerateColumns="False" DataKeyNames="LocationName"
DataSourceID="" AllowPaging="True" EnableViewState="true" BorderStyle="None">
i want 2 over here, i guess
</asp:GridView>
I want 3 in here..
<tr align ="center" style="position:fixed">
<asp:ImageButton ID="btnDisable" runat="server" ImageAlign="Middle" ImageUrl="~/images/green-deactivate.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" />
</tr>
</table>
</div>
Use padding-bottom in the header td style to get the proper spacing.
Use gridlines="None" on the GridView.
Put the Gridview and the buttons in td:s to place them properly.
This is rather basic HTML/CSS knowledge (nothing wrong with that), but investigating basic information sources may help you help yourself.
As to your specific items:
A 'break' can be as simple as a <br /> statement between the controls
if you don't want colors: #88b9c7 and similar-looking statements are colors.
As you're using a table, positioning the buttons below your grid can be done by placing them in the correct <tr> / <td>
For #1, try using margin or padding on the td, or wrap "Disable Location" in a span (or something) and style its margin/padding to give some space.
For #2, try setting Gridlines="None" on the GridView.
For #3, make sure you have a <td> inside the <tr>, and try using text-align:center on either the td or a div wrapping the buttons. Alternatively, don't put it in the table, just wrap them in a div with text-align:center, right under the table (do you need the table at all?)