I have an iFrame inside my index page. This iFrame contains an aspx page with a form inside it, with runat=server.
For some weird reason, anything I add after the iFrame is not being rendered to the page.
I tried adding text, a div, nothing is being added after when I run the page.
Code:
<body>
<asp:Panel ID="Panel1" runat="server" Height="80px">
<iframe name="LogoFrame" id="LogoFrame" src="asp/Logo.aspx"
scrolling="no"
style="border-style: hidden; padding: 0px; margin: 00px; width: 100%; height: 100%"
width="100%"/>
</asp:Panel>
<form id="MainMenu" method="post" runat="server">
<asp:Panel ID="Panel2" runat="server" Height="38px">
<table class="tableMenu" id="MainTable" style="BACKGROUND-COLOR: #e2eded" cellSpacing="0"
cellPadding="0" width="100%" border="0">
<tr class="trMenu2" vAlign="middle">
// Some other things below, including the closing of Panel2 and MainMenu form
When I run and inspect the page...
If I remove the iFrame, the rest of the page renders properly.
What is up with that?
I suspect it's because the iframe tag is self-closing and iframes should not be self-closing. If you replace ' />' with '></iframe>', I think that should resolve the problem.
Seems like the iframe is out of the form tag. But you put the iframe inside a Panel, which is an asp.net tool. You can try Removing the panel, or moving the code inside the form tags.
Related
I know this question has been asked many times, but I didn't seem to find any solution that I can understand online. Most says using javaScript and css but I don't really know how to implement that.
I'm using visual studio and i have a master page and several other content pages. On the master page I have a link that redirects me to one of these content pages using
"a href = pages.aspx"
Since the content page uses a SQL query to retrieve data so it takes a very long time. I would like to show a loading spinner or progress bar or even just a text saying "loading..." while the page loads.
Are there anyway to do this?
I also thought about using a label which is only visible when the link is clicked, and goes invisible when the page loads. Is there a way of doing this?
Thanks!
An exact situation with detailed code and explanation, where a loading image is shown on loading of an asp.net page can be seen at following URL : Show Loading Image when Page first Loads.
This has detailed explanation with full working code as well as a link to demo page. You can ask me if you have any questions regarding this sample.
To verify that the loading image shows up in above sample you can simply go to this URL : Loading Image when Page first loads
Another very simple approach with tested/tried sample code is as explained below.
You will need jquery in your aspx page for this to work.
There are three scenarios in which you would like to show a loader element in an aspx page and they are:
On button click that does a non-ajax postback
hyperlink click that navigates to another page
on button click that does an ajax postback
In first two of above scenarios, all you need to do is hookup their client click event with a JavaScript method of ShowProgress. This method shows a popup div that has an animated image in it.
In the last scenario where an ajax postback is done, an UpdateProgress control is used so it automatically hides once the ajax postback completes.
The loader popup is styled to show at center of page in a modal manner'; these styles can be found in the head section of markup pasted below. You can modify some of these styles like border or background-color and also you can substitute any animated image in place of loading.gif.
I tested the markup below with a Page PageTakingLongToLoad.aspx that took 20 s to load the first time it rendered, and with ajax/non-ajax postbacks that took 10 s to complete, and in both cases the loader displayed perfectly as expected.
Markup of Page from which a loader is shown
<%# Page Language="C#" AutoEventWireup="true" CodeFile="InitialPage.aspx.cs" Inherits="InitialPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: lightgray;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px dashed #f00;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
margin: 0 auto;
text-align: center;
padding-top: 35px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div class="loading">
<div>
Loading. Please wait.<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
Link To Another Page
<br /><br />
<asp:Button ID="btnPostBack" runat="server" OnClientClick="ShowProgress();" OnClick="btnPostBack_Click" Text="Do Long Process without Ajax" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="btnAjax" runat="server" OnClick="btnPostBack_Click" Text="Do Long Process with Ajax" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading" style="display: table">
<div>
Processing. Please wait...<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.css("vertical-align", "middle");
loading.css("display", "table-cell");
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
</script>
</form>
</body>
</html>
I use Master Page in my Project.But Master Page contents are not same in all pages.In Home.aspx page it's margin is 0px and in other page isn't. Texts are Bold and Big Size in one page and Small in another Page. Why this occur?
My Master.master page Code :
<body style="margin:0px; text-align: left;">
<form id="form1" runat="server">
<div>
<div class="auto-style1" style="background-color: #3399FF; height: 42px;">
<h2>
<asp:Label ID="homeLabel" runat="server" Text="Home"></asp:Label>
</asp:Label>
<asp:Label ID="file_sharedLabel" runat="server" Text="Files Shared"></asp:Label>
<asp:Label ID="blogLabel" runat="server" Text="Blogs"></asp:Label>
</h2>
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
And Two picture of Home.aspx and Members.aspx are
What happens I don't Catch .
Again, it is hard to tell what is going on without the actual HTML from your child pages. However, judging from the picture, you are probably looking for a margin value on a an element between your <asp:ContentPlaceHolder> tags.
It looks like your second page is using a <table> of some sort.
Make sure your table has:
style="margin-top: 0px;"
Or
<table class="noTopMargin"> ...
<style>
.noTopMargin { margin-top: 0px; }
</style>
As for the font-size and font-weight being messed up, it is possible that your second page has a <style> declaration somewhere which is screwing it all up. Also make sure that your browser zoom is the same between both pages.
I have developed a Web Application where i have these following pages and their corresponding Problematic tags.
Login Page :
<div id="maindiv" runat="server" style="background-image: inherit; height: 997px;">
<img id="Img1" runat="server" src="images/Login1.jpg"
style="width: 100%; height: 978px" alt="" />
Master Page:
<div id="Div1" style="position: absolute">
<img src="images/Circle_300.jpg" style="height: 132px; width: 159px" />
</div>
and
<div id="logo">
<asp:Panel ID="ImgagePanel" runat="server"
BackImageUrl="~/images/Logo_2.jpg" Height="100%"
Width="100%" > </asp:Panel>
</div>
I have all those Images under "images" directory in the application. the images are getting displayed well and good in all our office environment systems and outside client machines too. but the same not getting displayed in my real Client office systems..but the div tag with "Div1" alone is getting displayed in their systems.but not other images. Don't know where im going wrong. Please help me out.
One More Info: When I right click and save on the place where image is to be displayed i get "blockedpage.gif" instead of the real image in the site whereas I can save the images from my machine. is it something with their security settings ?
I've got a question - i know how to fill in a text in a textbox which is in an iframe if there is the FORM-tag used. But what can i do if the textbox don't have the FORM tag? I've tried some code variations without success. Let's say the code looks like this:
<tr><td align="left" valign="top" class="etext">Please enter your search string:</td></tr><tr><td align="left" valign="top" class="formfieldpadding"><label><INPUT TYPE="TEXT" id="text" class="formfield" NAME="pse_164_etext" VALUE="" ></label></td></tr><tr><td align="right" valign="top" class="buttonpadding"><input name="submit" type="image" src="/blah/button1.png" alt="Submit Button" wcflags="IgnoreDBOCheck,TreatAsCDATA" style="width: 237px; height: 60px; border: none; padding-top: 0px;" /></td></tr>
How can i fill the VALUE of the textbox which is in my iframe ???? Would be REALLY glad if someone could help me, I mean REALLY! thanks guys :)
The problem you'll face is that JavaScript is not allowed to access IFrame content from the parent window. This is a normal security restriction.
You can still bypass that by calling javascript FROM the Iframe. You can still access parent window from inside the IFrame:
parent.getElementById('text').value;
I've added a Wordpress "contact us" page to my web site. But i couldnt align the content normally. I added a contact form and a google maps iframe. But i cant shown them at the same level together. The page's sidebar is hidden and I dont need it. How can this problem be solved?
http://www.mersinhatayrestaurant.com/?page_id=10
I also try using tables
<table>
<tr>
<td>[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>
But nothing changed. I am waiting for your solutions. Thank you.
try a float:left on both the iframe and div for the contact form without the table. or add a vertical-align: top; to the TD with the contact form. you have statically assigned height and width to iframe, and if that is taller than the contact form, then it will fill the entire TD cell and the contact form will move to the bottom as the default behavior for TD is vertical-align: bottom;
EDIT:
Added the vertical align dynamically to your site and it worked, just add it in below.
<table>
<tr>
<td style="vertical-align:top;">[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>