I have written the following code in JSFiddle.
https://jsfiddle.net/msridhar/1zvhmpjq/11/
HTML file:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="results">
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body{
position: relative;
}
#results{
width: 100%;
height: 100%;
position: absolute;
top: 150px;
left: 300px;
overflow: auto;
}
body{
position: relative;
}
#headerDiv{
position: fixed;
top: 0;
width: 100vw;
//border-bottom: 3px solid #808080;
}
#headerHR{
width: 100%;
height: 1px;
}
#headerImg{
float: left;
margin-top: 0px;
margin-left: 0px;
}
#headerPre{
float: left;
font-family: "Arial", Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
}
Javascript:
$('#results').load('https://fiddle.jshell.net/ds2vxqbg/1/show')
The code for html file loaded in Javascript is:
<table border="1">
<tr>
<th>Product no.</th>
<th>Product name</th>
<th>Product type</th>
<th>Product Description</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>3</td>
<td>Pineapple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>4</td>
<td>Pear</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>5</td>
<td>Plum</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
</table>
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
I have loaded a html page in a div tag with id results. Though that div tag was enabled to overflow auto, it is not showing entire contents when scrolled. Please point out me what is the problem.
#results cuts off by body {overflow:hidden;} because div set width and height to 100% of body, but it has additional offset.
You can try to do next:
html:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="wrapper"> <!-- add wrapper -->
<div id="results"></div>
</div>
</body>
and css:
#wrapper {
padding-top: 150px;
padding-left: 300px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#results {
width: 100%;
height: 100%;
overflow: auto;
}
Related
I have a project where I define a variable and I pass it to html template to recreate a PDF template.
For example I have a variable "rates" with 24 elements, the problem is that in html file it shows only 20 elements.
my rates variable:
rates = <table class='service'>
<thead>
<tr>
<td>Number</td>
<td>Causale</td>
<td>Total (€)</td>
</tr>
</head>
<tbody>
<tr>
<td width='10%'>1°</td>
<td>144.93 € for .... <br></tr>
<tr>
<td width='10%'>2°</td>
<td>144.93 € for ... <br</td>
</tr>
</tbody>
</table>
(i only wrote 2 row, but imagine it has 24 rows)
Then I pass to my html file where I show it as:
<page id="page-1">
<div class="body-page">
<div class="main-container">
<div class="table-box payment-table">
<div class="table-box payment-table">
<div class="table-title">Rates</div>
{{rates}}
</div>
</div>
</page>
service: {
margin-top: 10px;
margin-bottom: 10px;
}
body-page: {
float: left;
min-height: 1032px;
}
main-container: {
position: relative;
float: left;
height: 1032px;
margin-top: -50px;
}
page{
float: left;
width: 210mm !important;
/* height: 303mm;*/
height: 296mm !important;
position: relative;
padding: 5mm;
overflow: hidden;
}
EDIT: Ok i found the hidden rows:
Is that because you set fixed height and more than 20 elements don’t fit in the element?
I want to set my table's position right of my image.
Here's my code:
<html>
<head>
<style type="text/css">
.podium { display: block; margin-left: 300; margin-top: 500; position: static; }
table { position: relative; left: 100px; }
</style>
</head>
<body>
<img src="podium.jpg" class="podium">
<table border="5px">
<tr>
<td>aaa</td>
</tr>
</table>
</body>
</html>
I've tried this, but it didn't work.
How can I make it?
Wrap image and table in a div and than You can use flex and flex-order property of Flex order.
#wrapper{ display: flex; }
#image{ order:2; width: 100px; height:100px; margin-left:15px}
#table{ order:1; }
<div id='wrapper'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNyNcwf4fDjX_2L4mUcJNmg92fOmWlDTYxcefggBG0VAr6MX32" class="podium" id='image'>
<table border="5px" id='table'>
<tr>
<td>aaa</td>
</tr>
</table>
</div>
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});
You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle
Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>
I'm developing an app using JavaScript and want to use SemanticZoom.
We use only one list view but I have multiple list views in my page.
This is my sample code which I'm using right now:
<section>
<table><tr><td style="width: auto; height: 100%; display: none;" id="myDealsSection">
<table style="height: 100%; margin-left: 80px; margin-bottom:
50px;">
<thead>
<tr>
<td ><span id="MyDealsHead" style="font-size: 20pt; font-family: 'Segoe UI
Light'; padding-left: 5px;">My Deals</span><span id="myDealsHdrArrw"style="font-
size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-align: top;">
<div id="homePageDealsList" aria-label="List of this group's items"style="height:
100%; width: auto;" data-win-control="WinJS.UI.ListView" data-win-options="{
selectionMode: 'none',layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 100%; height: 100%; display: none;" id="pinnedDealsSection">
<table style="height: 100%; margin-left: 80px;">
<thead style="width: 100%;">
<tr>
<td><span id="pinnedDeals" style="padding-left:
5px; font-size: 20pt; font-family: 'Segoe UI Light';">Pinned Deals</span><span
id="pinnedDealsHdrArrw" style="font-size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-
align: top;">
<div id="pinnedDealsList"
class="pinnedDealsItemsList" aria-label="List of this group's items" style="height:
100%; width: auto; margin-bottom: 50px;" data-win-control="WinJS.UI.ListView" data-
win-options="{ selectionMode: 'none', layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td></tr></table>
</section>
How can I add two list views to zoomed in view?
I am not able to understand how to do that.
For the SemanticZoom sample visit: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx