I'm sorry if the title of this question is quite vague...
I have a Web Application composed by a MasterPage in wich I include all my css and js files and any other page will be loaded into the content of the MasterPage.
In a page I call another page via javascript with this call:
<script type=text/javascript>window.open('ApriOrdine.aspx?ID=B300&MODE=UPD',null,'scrollbars=1')</script>
the page ApriOrdine.aspx contains 2 UserControls. I have a problem with css rules, I cannot set the padding using css rules written in css external files.
This is the whole code of my ApriOrdine.aspx:
<%# Page Title="Orders" Language="C#" AutoEventWireup="true" CodeBehind="ApriOrdine.aspx.cs" Inherits="WebApplication1.ApriOrdine" EnableEventValidation="false" %>
<%# Register TagPrefix="UC" TagName="UserControlCom" Src="~/Commessa.ascx" %>
<%# Register TagPrefix="UC" TagName="UserControlCli" Src="~/Cliente.ascx" %>
<head runat="server">
<link href="css/css.css" rel="stylesheet">
</head>
<body>
<form runat="server">
<div class="ApriOrdine">
<div>
<UC:UserControlCom runat="server" ID="ucCommessa" />
</div>
<div>
<UC:UserControlCli runat="server" ID="ucCliente" />
</div>
</div>
</form>
</body>
As you can see, the css.css file it's included behind head tags.
The problem in that if I write this css rule in my css.css like this it doesn't works.
.ApriOrdine
{
padding:50px;
}
Instead, if I assign the padding using style attributes to the div it works perfectly...
<div class="ApriOrdine" style = "padding:50px;">
EDIT
this is my complete source code
and this is the css
So, what is wrong here? Please help me, thanks!
If you need some more details please ask me!
The only reason i see is that your reference to the css is not good.
I don't know the structure of your project but i guess the master page is not at the same place as your .aspx page. So if you copy and paste the reference from the master page it's not working in the .aspx page cause the structure is not the same.
An other thing you could do is once the page is loaded, open the source code of the page and look at the reference generated in the page and make sure the path is good.
Hope this help.
Related
i have a very simple asp.net code but my code doesnt make any sense and after run there would be nothing happen .
I'm using external java script file and trying to run my Script from my asp page and in the button object .
Its my asp code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication2.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ">
<title></title>
<script src="Script/Script_Validate.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<asp:Button runat="server" Text="aaaaaa" OnClientClick="valid();" />
</div>
</form>
</body>
</html>
Its my JS's file content :
function valid()
{
alert("Hello! I am an alert box!!");
}
please help .
Your code works for me. Do you definitely have a "Script" folder? Is the name of the file correct? Do you have JavaScript enabled on your browser?
The only problem I can see with your code is your head tag has a single quotation mark ("). Maybe this should be runat="server"?
So here I want to put some JavaScript for my carousel from Twitter bootstrap, the problem is, it seems having no effect no matter where I put it, I already made sure the id matches. Here's the code (note: I'm using master page)
$(‘.carousel‘).carousel
({
interval: 1000
})
I put it in <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content> which I believe is the head, but it still not working, any advice on how to do this?
Assuming your master page has something like this in it:
<head>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then any page which is based on this master page you can indeed put anything inside <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> which you want to be placed in the <head> section of your web page. This routinely contains bits of javascript, however in order for jQuery to do it's think you must wait until the document is ready:
<script>
$(document).ready(function(){
$('.carousel').carousel
({
interval: 1000
});
});
</script>
As an additional point (or, stab in the dark) you mention in your question "I already made sure the id matches" however you have not referenced any element by ID (except perhaps the ContentPlaceholder); your jQuery code references an element by class name .carousel.
Put your code in child page in which you have implemented carousel. also make sure to reference JQuery and carousel script file
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000
});
});
</script>
I'm trying to create a little script to allow me to set the style of a couple of menu items (done via a simple div with li items, which contain an each to send me to the correct page) but I'm not getting nowhere so I'm in need of help.
I have the following code on the master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MILLS001_PAINEL.Site1" EnableTheming="True" %>
<!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">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
<link href="../css/reset.css" rel="Stylesheet" type="text/css" />
<link href="../css/style.css" rel="Stylesheet" type="text/css" />
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<div id="banner" class="gradient">
<div id="menu">
<ul>
<li>Painel de Gestão</li>
<li>Cockpit Operacional</li>
</ul>
</div>
<div id="logo"></div>
</div>
<div>
<asp:ContentPlaceHolder ID="Placeholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
The menu is defined in the master page, now I have this script to add certain classes (already created in CSS) to allow me to add/remove styles to the menu items:
$(document).ready(function () {
$('menu').find('li').hover(function() {
$(this).addClass("hovered");
},
function() {
$(this).removeClass("hovered");
});
$('menu').find('a').click(function(e) {
alert(e);
$(this).parent().addClass("active");
});
});
For some reason, I can't make this to work although I do not see any errors.
I had a problem with another script in which I had to reference names by using '[id$=name]', because Master page name mangling creates that problem, but it doesn't seem to be the case here...
Could anyone help me see what is wrong here?
Thanks in advance
EDIT
Got the hover thing working, but now I can't make to seem the active class to stay in place after the page refresh (apparently, a default behaviour of ASP).
You need to do:
$('#menu') <-- note the # sign
in your selectors.... Otherwise it looks like it should work OK
API Reference: jQuery ID Selector
To address your edit:
Element state is not automatically preserved between page loads. The browser doesn't look for "the same element" and try to make it appear the same. If you want the menu to remain open, you need to persist some data (whether through postback data or (I would recommend) some browser side state saving (e.g. localStorage)) and handle it manually in your menu code
Oh....rereading your question I think it might be simpler than that....
On page load, you could do something like:
$('[href=' + window.location.path + ']').addClass('active');
the window.location.path would likely need some pre-processing before the selector though to handle extra url parameters and variations of the path (e.g. ./index.html and index.html) in the href. However, note the various types of matching available with the attribute selector...namely *=...might make your href matching a lot easier...but I'm not gonna write all your code =0D
API Reference: jQuery Attribute Selector
Your selector looks incorrect, looks like your missing the # which notes it's an ID. Should be:
$('#menu').find('a').click()
And a slightly different approach:
$('#menu a').click()
I've a specific requirement of rendering Javascript onto a master page of an asp.net site. There are two specific requirements of it:
1) The position - It should be rendered at the very end of the page just before BODY tag
2) Control - Render it only when requested.
I solved #2 by creating a web-part which will render the javascript only when its placed on the page. But I could not achieve #1 since the web part doesn't give me control over where to render the javascript inside body tag.
Did anyone solve this problem before?
Please advice.
Thanks
Sachit
Try using ClientScript.RegisterStartupScript, it injects the script right above the </body> tag.
RenderControl is the last method to return in MasterPage Event Lifecycle that you can override. My guess would be to put it there.
If you are using Master Page, then why not put a content place holder just before the end body tag? The content pages should render their JavaScript in that particular place holder.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<asp:ContentPlaceHolder ID="headerContent" runat="server"/>
</head>
<body>
<form id="mainForm" runat="server">
<asp:ContentPlaceHolder ID="mainContent" runat="server" />
<asp:ContentPlaceHolder ID="footerContent" runat="server" />
</form>
<asp:ContentPlaceHolder ID="footerJsContent" runat="server"/>
</body>
</html>
Content pages should render their JavaScript inside the footerJsContent place holder.
I have a simple View and I wish to add a JQuery DatePicker JavaScript to this view (and not every view, via a masterpage).
I'm not sure what is the best way to do this.
Second, I'm conscious of where/when my JavaScript loads. I'm a fan of YSlow and it recommends that I add any scripts to the bottom of the page, which I do.
So, how could I do both?
Here's the view:
<%# Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<% using (Html.BeginForm()) {%>
<p>
<label for="StartDate">Start Date:</label>
<!-- JQuery DatePicker to be added, here. -->
</p>
<% } %>
</asp:Content>
In ASP.NET MVC3, you can now use a RenderSection to achieve this, at least for simpler scenarios. Just add a RenderSection to the bottom of the layout page, and from your view fill in the appliation code
RenderSections: http://www.dotnetcurry.com/ShowArticle.aspx?ID=636
Your MasterPage should have a ContentPlaceHolder for the head.
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then you're able to include head elements (JavaScripts, StyleSheets, etc...) in your views:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/Scripts/jquery/ui/ui.datepicker.js" type="text/javascript">
</script>
<link href="/Styles/myStyle.css" rel="stylesheet" type="text/css" />
</asp:Content>
One way is put a content placeholder at the bottom of your master page, then the specific slave page that needs the javascript can specify the placeholders contents as the required javascript. Other pages that don't need the javascript simply don't specify any content for the placeholder.