I have article details page where i display article details like article image, date and article text. On the left side of the article i put a vertical blue line which is equal to the height of the article body, since i am not sure of the article height i use javascript to get the height of the article text container and assign that same height to the vertical blue bar (div id='ArticleBlueSide') which is 3 pixels in width.
It was working fine & blue line was also showing up without URL Routing, but when i add URL routing Blue line doesn't show up.
Below is the block of script and my HTML div contains.
I am working with ASP.Net 4.0 web form using c#.
I would appreciate if some can help me to fix this design issue.
$(document).ready(function () {
var h = document.getElementById("ArticleTextArea").offsetHeight;
h = h - 25;
document.getElementById("ArticleBlueSide").style.height = h + "px";
});
<div id="ArticleContainer">
<div id="ArticleBlueSide"></div>
<div id="ArticleTextArea">
<asp:Label ID="lblArticleDetails" CssClass="PageBodyText" runat="server" meta:resourcekey="lblArticleDetailsResource1"></asp:Label>
</div>
</div>
Example of page illustration
After Implementing Solution suggested by riffnl (This has its own issue as blue line is longer than text and i cant fix it as paragraphs have padding around it. My first solution worked fine except it is not working after URL routing
@riffnl's solution is the way to go - solve your padding issue like so: http://jsfiddle.net/Wf6tA/
Notice that you can click a paragraph to mark or unmark it.
I moved the following script and put it after the div tag which solved my problem. I dont understand why it is not working if i keep this script before div tags.
$(document).ready(function () {
var h = document.getElementById("ArticleTextArea").offsetHeight;
h = h - 25;
document.getElementById("ArticleBlueSide").style.height = h + "px";
});
I appreciate reply from other guys but this is the what i wanted script to behave.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.