second css in content placeholder problem with javascript
this might get abit confusing but here it goes.
I have a masterpage called UserProfile.master it has a contentplaceholder linked to UserProfileWall.aspx now im trying to load some javascript and a second css file in the userprofilewall page but when ever I add a second link to the css file it screws up everything on the master page. I cant put the css link in the userprofilewall contentplaceholder because it says link can not be nested in div table which brings me to the javascript and div table.
The java script just runs a button click event for adding text from a textarea into the div. But for some reason it doesnt work. Not without the second css
This is what I would like to insert in the second css:
div{
width:400px;
height:400px;
border:1px solid red;
padding:10px;
margin-top:10px;
}
my code so far for the entire userprofilewall
<%@ Page Title="" Language="C开发者_Go百科#" MasterPageFile="~/UserProfile.master" AutoEventWireup="true" CodeFile="UserProfileWall.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('button').click(function () {
var x = $('textarea').val();
$('div').html(x);
});
</script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>
<div></div>
</asp:Content>
how do i go about either fixing the javascript or fixing the css into my userprofilewall so the javascript can pick up on it
First, I needed to fix the Javascript to add the button click handler in a $(document).ready() call, not as inline script code. This fixed the "Post Message" button issue. Next up, how to handle the style change of the div...
For now, I've added a .css() call to set the css properties you defined in your question inline in the click handler, but you would probably want to move these css properties into a single CSS rule and use .addClass() and .removeClass()
Here are some links to check out regarding the changes I made:
$(document).ready()
.css()
.addClass()
.removeClass()
Here's the source I used to fix the JS and CSS issues, from a static HTML page I created from your source code. Hope it helps.
<html>
<head>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function () {
var x = $('textarea').val();
$('div').html(x);
$('div').css({width:"400px",height:"400px",border:"1px solid red",padding:"10px","margin-top":"10px"});
// or $('div').addClass('name of css rule with above css props');
// or $('div').removeClass('name of css rule with above css props');
});
});
</script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>
<div></div>
</body>
</html>
加载中,请稍侯......
精彩评论