Applying CSS (a vertical line) to an iFrame from the parent document

StackOverflow https://stackoverflow.com/questions/23669095

سؤال

I have an 'Export Text/PDF to Excel' functionality in my webapp. I display the original report in the same domain to be exported to excel in an iFrame inside a jsp(parent doc)

<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>

In the existing page, I ask the users to click the positions/points inside the iFrame for column splitting i.e., the text between 2 selected split points form a column in the resultant excel sheet and I record the positions using jQuery's event.pageX. NOW WHERE I NEED HELP is that I want the selected positions to be highlighted by vertical, colored thin lines as a column marker from the top edge to the bottom edge of the iFrame

This is what I want: Click to view the resultant jsp page

Some one please help!!!

هل كانت مفيدة؟

المحلول

Ended up positioning the elements over each other, the text file was a random file I selected from google. You will have to track the clicks but the hard part is done an the code could be a little cleaner but it answers your problem I hope.

Answer requires jQuery

Live demo: http://jsfiddle.net/3aQC4/1/

<html><head>
<style>
#con, .line{
    display:block;
    position:absolute;    
    top:0;
    left:0;
    height:300px;
    width:600px;
    border:1px solid black;
z-index:10;
    background-color:transparent;
}

.line{
    border:none;
    border-right:1px solid black;
    z-index:5;
}

iframe {
    position:absolute;    
    top:0;
    left:0;
    z-index:1;
    height:300px;
    width:600px;
}
</style>
</head>
<body>
  <div id="con"></div>
  <iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>


<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>

</body>
</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top