I have probably very simple question.
I have copied that code to my asp.net web application project but i couln't minimize the box.
Is there anything special i should do to use javascript with asp.net projects?
I tried the code tree times.
Put script code in to head block
Put script code to just before div starts
Put script code to just before form tag closes
Javascript code
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
html code
<div id="widnow">
<div id="title_bar"> Basic information
<div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
css code
#widnow{
width:400px;
border:solid 1px;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
I am assuming you are missing reference to jquery. Replacing your script part with this will solve the problem if that is the case.
<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
Most probably you are missing the jquery file ....try this
<html>
<head runat="server">
<title></title>
<style>
#widnow
{
width: 400px;
border: solid 1px;
}
#title_bar
{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button
{
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box
{
height: 250px;
background: #DFDFDF;
}
</style>
<script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
}
else {
$(this).html("-");
}
$("#box").slideToggle();
});
});
</script>
</head>
<body>
<div id="widnow">
<div id="title_bar">
Basic information
<div id="button">
<img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
</body>
</html>
Related
I created web application. I think that all parts are done, but I don't know how is it connect.
Html page - here one field: user will add word and after that my program will parse top 5 results in google.
Several questions:
I created html page but know I didn't apply bootstrap and css, but I added file for that. Why it doesn't work
My html page
#page
#model SearchDemos.Controllers.SearchInfo
#{
//ViewData["Title"] = "Get Data";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Application</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="~/css/Style.css" rel="stylesheet" />
</head>
<body>
<section class="main">
<!-- Another variation with a button -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Google & Bing">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search">Search</i>
</button>
</div>
</div>
</section>
</body>
</html>
<script>
var name =
$.ajax({
type: "POST",
url: '#Url.Action("DoGoogleSearch", "SearchController")',
context: document.body,
success: function () { alert('Success'); },
error: function () { alert('error'); }
});</script>
My CSS file (it doesn't work)
.main_class {
max-width: 800px;
margin: 50px auto;
position: relative;
box-shadow: 0 10px 30px 0px rgba(0,0,0, 0.1);
padding 30px;
}
.main_class.title {
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
font-size: 3em;
line-height: 48px;
padding-bottom: 20px;
color: #5543ca;
background: linear-gradient(to right, #f4524d 0%, #5543ca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contact-form.form-field {
position: relative;
margin: 32px 0;
}
.contact-form.input-text {
display: block;
width: 100%;
height: 36px;
border-width: 0 0 2px 0;
border-color: #5543ca;
font-size: 18px;
line-height:26px;
font-weight: 400;
}
.contact-form.submit-btn {
display: inline-block;
background-image: linear-gradient(125deg, #a72879, #064497);
color: #fff;
text-transform:uppercase;
letter-spacing: 2px;
font-size:16px;
padding: 8px 16px;
border: none;
cursor: pointer;
}
and second question: added controller but now when user click on a button nothing happened. I tried to connect my controller and HTML page using AJAX. But I have no experience with it. Where did I mistake?
My controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using HtmlAgilityPack;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
namespace SearchDemos.Controllers
{
public class SearchInfo
{
public string Title { get; set; }
public string Link { get; set; }
}
[ApiController]
[Route("[controller]")]
public class SearchController : ControllerBase
{
[HttpGet("Google")]
static IList<SearchInfo> DoGoogleSearch(string q, int limit = 5)
{
var html = #"https://www.google.com/search?q=" + q;
HtmlWeb web = new HtmlWeb();
// accept-language : RU or EN
var htmlDoc = web.Load(html);
var rows = htmlDoc.DocumentNode.SelectNodes("//*[#class='r']").Take(limit);
var result = new List<SearchInfo>();
foreach (HtmlNode row in rows)
{
var nodeRef = row.SelectSingleNode("./a");
var si = new SearchInfo
{
Link = nodeRef.GetAttributeValue("href", string.Empty),
Title = nodeRef.InnerText.Trim()
};
result.Add(si);
}
return result;
}
}
}
Try adding styles in _Layout.
In your controller you have not got an action. Instead you are returning ILIST and that is your problem. You need an action so ajax will work properly.
I'm looking for a way to disable a button before the call of a method and enable when the method has ending.
Code should be something like that:
Btn.Enabled = false;
MyMethode();
Btn.Enabled = true;
But the Btn still be enable.
NB: All the controls are in an UpdatePanel.
I have tried with Js:
ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "document.getElementById('BtnClone').disabled = true; ", true);
ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "document.getElementById('BtnClone').disabled = false; ", true);
The Button stay enable.
Thanks
The Solution you can give is you can use the loading gif image once the post back starts, you put the below code in the master page
<asp:ScriptManager EnablePartialRendering="true" ID="ScriptManagerMain" runat="server"
AsyncPostBackTimeout="360000">
</asp:ScriptManager>
Before the Content place holder in the master page, put the below update progress
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
</script>
<script type="text/javascript" src="Scripts/js/jsUpdateProgress.js">
</script>
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div class="divWaiting">
<img id="progressImg" src="img/App/Rolling.gif" alt="Processing" height="60px" width="60px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />
The CSS used in the Progress Div as below
.divWaiting
{
position: fixed;
background-color: #313130;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: 30%;
}
The jsUpdateProgress.js code as below,
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// hides the Popup
$find(ModalProgress).hide();
}
Try with this , it will open up the loading GIF once the post back starts and it will end when the postback ends up. This will prevent the double click
I have solve the problem with this code in the aspx.
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
It's create a loading message , until the update panel is ready.
I'm using iTextSharp in my project and using this method to parse html string to pdf
public static MemoryStream MakePdf(string htmlCode)
{
MemoryStream msOutput = new MemoryStream();
TextReader reader = new StringReader(htmlCode);
Document document = new Document(PageSize.A4, 30, 30, 30, 30);
PdfWriter writer = PdfWriter.GetInstance(document, msOutput);
HTMLWorker worker = new HTMLWorker(document);
document.Open();
worker.StartDocument();
worker.Parse(reader); // EXCEPTION IN THIS LINE!!!!
worker.EndDocument();
worker.Close();
document.Close();
return msOutput;
}
And it doesn't work for me. It throws an exception at selected line
URI formats are not supported.
How can I solve this problem?
P.S. Here is html I need to parse
<!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>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />
<style type="text/css">
body
{
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
font-family: Myriad Pro;
font-style: italic;
background: #f3f3f3;
}
#font-face
{
font-family: 'Myriad Pro';
src: url('../fonts/myriadpro.eot');
src: url('../fonts/myriadpro.eot?#iefix') format('embedded-opentype'),
url('../fonts/myriadpro.woff') format('woff'),
url('../fonts/myriadpro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.clear
{
clear: both;
}
a,.blue_text
{
color:#2aa2f6;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.simple_title
{
font-size: 22px;
}
.text750
{
width: 750px;
margin: 20px 0;
}
.full_width_text
{
margin-right: 35px;
text-align: justify;
}
.grey_text
{
color:#afafaf;
}
.email_page
{
width: 1025px;
margin: 20px auto;
background: #fff;
padding: 20px 0;
}
.email_page p
{
font-size: 18px;
}
.email_div
{
margin: 0 auto;
background: #fff;
width: 998px;
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
display: table;
}
.email_content
{
margin-left: 60px;
margin-top: 40px;
}
.email_logo
{
float: left;
}
.email_title
{
float: left;
margin-left: 130px;
font-size: 22px;
color:#f7941d;
margin-top: 50px;
}
.email_img_container
{
float: right;
width: 270px;
}
.email_img_container .text_description
{
font-size: 18px;
color:#000000;
margin-bottom: 15px;
}
.email_img_container img
{
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
.text600
{
width: 600px;
float: left;
}
</style>
<title>Voucher</title>
</head>
<body>
<div class="email_page">
<div class="email_div">
<div class="email_content">
<div class="text600">
<div class="email_logo">
<a href="#">
<img src="{EmailLogo}" />
</a>
</div>
<div class="email_title">
Instant Gift Certificate
</div>
<div class="clear"></div>
<div>
<p>To: <span class="blue_text">{RecipientName}</span></p>
<p>
<div>{GiftVoucherName}</div>
<div>{GiftVoucherDescription}</div>
</p>
<p>
This gift is from: <span class="blue_text">{SenderName}</span>
</p>
</div>
</div>
<div class="email_img_container">
<div class="text_description">
<div>SG Code: {SGCode}</div>
<div>Purchased on: {PurchaseDate}</div>
</div>
<img src="{MerchantImage}" alt="" />
</div>
<div class="clear"></div>
<div class="text750">
<p>
This gift must be redeemed by: <span class="blue_text">{Date}</span><br />
Redeemable at the following locations: <span class="blue_text">{Locations}</span><br />
For other details and terms and conditions, please see the other attachment.
</p>
<div class="simple_title">
Disclaimer
</div>
<p>
Test.com is not responsible for the content of the message or the selection of the gift by the sender.
Once the sender enters the information, the instant gift is automatically generated and sent to
the recipient.
</p>
<p>
Visit us at: www.Test.com
</p>
</div>
</div>
</div>
</div>
</body>
</html>
To solve this issue you can add Providers to your HTMLWorker using the SetProviders method which takes an IDictionary the HTMLWorker class has constants for the string keys. In your case have a look at the ILinkProvider and/or IImageProvider. These provide a way to handle the images and URLs inside of your HTML yourself, translating them into usable parts for the PDF.
I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}
Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.
Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.
I have this script in Master page (it shows a panel on hover of menu element)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#<%= menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').slideDown(200);
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
});
$('#<%= sub_menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').show();
$('#<%= menu1_lbl.ClientID %>').addClass("menuhover");
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
$('#<%= menu1_lbl.ClientID %>').removeClass("menuhover");
});
});
</script>
it works fine on Chrome & Firefox but it doesnt work in IE. Any ideas on what should I do to make it work?
thanks in advance.
UPDATE: Here is the full client-side generated code:
<!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>
<title>Smart Finance </title>
<style type="text/css">
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="ie_not_compatible.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWBAIBD2QWAgIBDxUHFi9GaW5hbmNhL2ltYWdlcy9iZy5wbmcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAzLmpwZxYvRmluYW5jYS9pbWFnZXMvYmcucG5nGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAyLmpwZxkvRmluYW5jYS9pbWFnZXMvaW1nMDIuanBnGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGdkAgMPZBYCAgkPZBYCAgEPDxYCHgRUZXh0BQVlbmRyaWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBRhjdGwwMCRMb2dpblN0YXR1czEkY3RsMDEFGGN0bDAwJExvZ2luU3RhdHVzMSRjdGwwMwUMY3RsMDAkY29uZmlnwdDc6GaGSg1K9roW+pf9g9bwZ08=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKDjNy/AwLh8tHdBgL0/brqCByGAqyFdaUy3EVtuUCi/i44T7vY" />
</div>
<div id="menu" style="top: 12px; width: 1250px; position: relative; float: left;">
<ul>
<li>Home</li>
<li id="faturatli">Default </li>
</ul>
</div>
<div id="ctl00_sub_menu1_lbl" style="display: none; top: 137px; padding: 15px 15px 15px 15px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .5); z-index: 99999; left: 155px; position: absolute;
float: left; width: 300px; background: #FFFFFF;">
Submenu panel
</div>
<div id="logoutcontainer" style="top: 113px; right: 50px; position: absolute;">
<div id="ctl00_Panel1" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_config')">
<span id="ctl00_userloggedin" style="color: #ADC9C9; font-size: small; font-weight: 700;">
endri</span> <a id="ctl00_LoginStatus1" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl00','')"
style="color: #CCFFFF; font-size: small; font-weight: 700;">Logout</a>
<input type="image" name="ctl00$config" id="ctl00_config" src="images/config.png"
style="height: 20px; border-width: 0px;" />
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script defer="defer" type="text/javascript">
$(document).ready(function () {
"use strict";
$('#ctl00_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').slideDown(200);
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
});
$('#ctl00_sub_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').show();
$('#ctl00_menu1_lbl').addClass("menuhover");
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
$('#ctl00_menu1_lbl').removeClass("menuhover");
});
});
</script>
<div id="ContentDiv" style="float: left; position: relative; margin: 50px 50px 50px 50px;
text-align: left; top: 21px; left: 0px;">
<span class="style3">Not working on internet explorer.</span>
</div>
<script src="/finance/WebResource.axd?d=lLeg7eZU8UNEVWRCMptUog2&t=633750586290014532"
type="text/javascript"></script>
</form>
</body>
</html>
Hey This error usually comes when jquery library is not loaded properly.
Try to load it this way
<script type="text/javascript" src='<%=Page.ResolveUrl("http://code.jquery.com/jquery-1.7.2.min.js")%>'></script>