Currently I'm using following CSS to show a hover box:
.box {
width: 500px;
padding: 3px;
background: #404040;
color: #fff;
font: normal 12px Arial, Sans-serif;
position: absolute;
}
the javascript function:
function showBox(i,j){
if(i==1){
document.getElementById("box"+j).style.display='block';
} else if(i==2) {
document.getElementById("box"+j).style.display='none';
}
}
the html code:
<div style="height:175px;overflow:auto;">
<table>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p>
<div id="box1" class="box">I'm hover box 1.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p>
<div id="box2" class="box">I'm hover box 2.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p>
<div id="box3" class="box">I'm hover box 3.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p>
<div id="box4" class="box">I'm hover box 4.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p>
<div id="box5" class="box">I'm hover box 5.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p>
<div id="box6" class="box">I'm hover box 6.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p>
<div id="box7" class="box">I'm hover box 7.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
If you run this you will find that a hover box is appeared when you hover on any "Hover ME X" text. This works fine until you have not scrolled down in div. When you scrolled down in div the hover box is showing in wrong position. How can I overcome this issue?
If you use
position: absolute;
And you use negative and positive margins, you will be able to place the div wherever you want (eliminating the need for using anything other than position: absolute), the margins will just be relative to wherever the div is placed in the code.
Another bug with the coding is that the div shows up (at least in my browser {chrome}) before you even hover above the text that activates it. A very quick fix for this, to ensure the proper functionality in all (or most) browsers, is to add the following style to the CSS style "box":
display: none;
This will hide the DIV by default, in turn, stopping it from showing up on the page load. Then when you hover above the text the "display: block" in the JavaScript will overwrite it, so there will be no issues.
The final outcome of my "box" css style is:
padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;
The problem is your positioning the box absolutely:
position: absolute;
Instead try positioning relative or fixed.
position:fixed;
Here the problem is that until u scroll the page the div will be positioned in the proper position, and when scroll down u have to keep in mind that ur page have extended from the default screen size, so when positioning the div you have to consider the facts scroll top and scroll left, then only you have the div positioned correctly. Try defining expressions within the css or manually write your own function to position the div.
Hope this helps you.
Related
I have created html which after conversion to pdf has 6 pages. I have fixed footer and want to add there page number. I have tried all code I have found #page{#bottom: content :counter(page)} and it is not working I have also tried to write js code but it also didn't work.
footer{
position:fixed;
z-index:1;
bottom:0;
font-size:11px;
background-color: white;
color:#A2A2A2;
padding-left: 80px;
padding-right: 60px;
width:910px;
box-sizing: border-box}
<footer>
<table id="footer" class="t_f1 pf">
<tbody>
<tr >
<td width="280" align="left">some text</td>
<td width="450" align="right">some text</td>
</tr>
<tr>
<td class="section" align="left">some text</td>
<td align="right">Page number </td>
</tr>
</tbody>
</table>
</footer>
Do you have any idea how to add page number to this footer?
Thank you for any response
I want to change the height of at element when I have a click event. The height is set to auto, but when the event is fired I want to draw the chart with a different height..
My HTML looks like:
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr> <td style="height:300px; width:100%" id="Chart"></td></tr>
<tr> <td id="errorDetails" style="height:100%; width: 100%"></td></tr>
</table>
</td>
</tr>
</table>
and part of the javascript:
document.getElementById('Chart').setAttribute("style", "height:75");
document.getElementById('Chart').style.height = "75px";
Have tried everything, but nothing works...
Now I have found out that when i predefined the height of ID= "chart" to 100% then I am able to change if afterwards. But this does not work for me. I need to set the size of the height of the Chart to 300px in the start and then change it. But i does not work....
When you try to apply height to td tags it wont get applied.
For more details on this click here
So you may have to put a div inside your td tag and apply height to it.
HTML
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr>
<td >
<div id="Chart" style="height:300px; width:100%">
</div>
</td>
</tr>
<tr>
<td>
<div id="errorDetails" style="height:100%; width: 100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Javascript
document.getElementById('Chart').style.height = "75px";
Here is a working jsfiddle
I have a table and the last should show additional on click. Everything works fine, but I need a transition (after click the table should expand smoothly).
My test table:
<div ng-app="app">
<table>
<thead ng-controller="TestController">
<tr>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first
</td>
</tr>
<tr>
<td>
second
</td>
</tr>
<tr ng-show="display">
<td>
third
</td>
</tr>
<tr ng-show="display">
<td>
fourth
</td>
</tr>
<tr ng-show="display">
<td>
fifth
</td>
</tr>
<tr ng-click="display = !display" class="last-color">
<td>
click me
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px;
}
td {
border: solid 2px;
}
.last-color td {
background-color: green;
}
tbody {
transition: height 2s;
}
My example on JSFiddle
First of all, CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration. In other words, in order to see a transition working, you should specify both values in your CSS explicitly.
More over, you cannot apply height transitions to table elements (<table>, <tbody>, <tr>, <td>, etc.). However, if you can wrap the contents with <div> elements, you can apply CSS transitions to the <div> elements.
Just for example: https://jsfiddle.net/r4w1u5or/3/
I have some table like this
<tbody>
<tr class="column" id="1-row">
<td>
<span id="1">1</span>
(link)
</td>
<td>id</td>
<td>username</td>
<td>sometext</td>
</tr>
<tr class="column" id="2-row">
<td>
<span id="2">2</span>
(link)
</td>
<td>name</td>
<td>username</td>
<td>sometext</td>
</tr>
</tbody>
I need to add border with style outline: 'thick solid black', for example, to first row when I jumping to page by clicking http://www.thiswebpage/#1
Use the css :target selector
a {
color:black
}
* {
text-align: center;
}
div#myTarget:target, div#myOtherTarget:target {
color: red;
}
Click to target #myTarget<br>
Click to target #myOtherTarget
<br><br>
<div id="myTarget">#myTarget</div>
<div id="myOtherTarget">#myOtherTarget</div>
i need to slide down a div from top of page to center. i tried(pleas check the code) but it is sliding from button to down.what i need is ,when i click button , one div slide from top of the page to center.when i click the close button , it should close the div. please give me some suggestion or ref link.
<div id="divtbl" >
<table style="width:100%">
<tr>
<td>
Table Names
</td>
</tr>
<tr>
<td>
Table Names 1
</td>
</tr>
<tr>
<td>
<input type="button" value="Add New Feild" onclick="addnewrow()" />
</td>
</tr>
</table>
</div>
<div id="divpopup" style="display:none;" class="pop">
<table style="width:100%">
<tr>
<td>
display Names
</td>
</tr>
<tr>
<td>
display Names 1
</td>
</tr>
<tr>
<td>
display Names 2
</td>
</tr>
</table>
</div>
<style type="text/css">
.pop
{
font-size:12px;
top:0px;
position:absolute;
}
</style>
<script type="text/javascript">
function addnewrow() {
try
{
$("#divpopup").slideToggle("slow");
}
catch (e) {
alert(e.message);
}
}
</script>
Try this to position your popup div at center of the page-
.pop
{
font-size:12px;
top:40%;
left:40%;
position:absolute;
}