How to make this website responsive using javascript? - javascript

I would like to know how to make this HTML site responsive. It contains many iframes grouped into one table.
First, the main page.
<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:200%;">
<table>
<tr>
<td rowspan="2"><iframe name="mainframe" src="youtube cover art.jpg" width="1345" height="720"></iframe></td>
<th style="width:10px;"> </th>
<th style="width:446px;height:215px;font-size:40px;">Apps</th>
<th style="width:446px;height:215px;font-size:40px;">An overview for the day</th>
<th style="width:446px;height:215px;font-size:40px;">Settings</th>
</tr>
<tr>
<th style="width:10px;"> </th>
<td><iframe src="apps 1.html" width="446" height="500"></iframe></td>
<td><iframe src="http://feeds.bbci.co.uk/news/world/asia/rss.xml" width="446" height="500"></iframe></td>
<td><iframe src="settings 1.html" width="446" height="500"></iframe></td>
</tr>
</table>
</body>
</html>
the iframe with apps 1.html as the src
<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:425px;">
blank
wallpaper
<img src="youtube.jpg">
<img src="BBC News.jpg">
</body>
</html>
and the iframe with settings 1.html as the src
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var password = "Hudson1377";
var x = prompt("Enter in the password "," ");
if (x!== password) {
alert("Please try again.");
window.location.reload();
}
</script>
</head>
<body style="width:445px;">
log out
</body>
</html>

You must use css media query for make it responsive.
But you can using percentage in width value. Example: width=100%

You can use CSS media Queries for that make sure to use min-width and max-width property and break point should follow this grid standard.
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px

Bicycle reinvention ?
Use Bootstrap and other available libraries or frameworks

Related

How to correct display formula in ckeditor when edit content

I'm using ckeditor with math formula, when I insert new math formula, it can good display but when I edit the content in editor, it seem not can correct display or read format of math formula...
My source:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard-all/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
</head>
<body>
<table border="0">
<tr>
<td width="640" height="650">
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea>
<script>
var ir1 = CKEDITOR.replace('ir1');
CKEDITOR.config.extraPlugins = 'mathjax';
CKEDITOR.config.mathJaxLib = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';
CKFinder.setupCKEditor(ir1, 'libraries/ckfinder/');
</script>
</td>
</tr>
</table>
<body>
this is result when edit content:
within 'ir' is string of math formula..
So, How to correct display format of math formula in ckeditor when edit content ?
Thanks..

How to use CSS to add a newline in JavaScript based buttons

I have created the table using DataTable.
It looks like this:
What I want to do is to split them like this:
How can I achieve that with customized CSS?
My HTML looks like this:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable-table').DataTable( {
// Allow column selection, based on this
// https://datatables.net/extensions/colvis/
"dom": 'C<"clear">lfrtip',
// Except first column,
// it should stay.
// https://datatables.net/extensions/colvis/options
colVis:{exclude:[0]}
});
} );
</script>
<style>
body {
font-family: 'Helvetica Neue';
margin:150px;
}
img {
max-width:65%;
max-height:65%;
}
</style>
<title>Experiment 11</title>
</head>
<body>
<h2> G. Shared functional annotation</h2>
Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
<h3> LN </h3>
<table border="1" class="dataframe sortable-table display compact pure-table">
<thead>
<tr style="text-align: left;">
<th>GO</th>
<th>FOO</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
<tr>
<td> regulation of response to wounding</td>
<td> 6.850</td>
<td> 11.975</td>
</tr>
</table>
</body>
</html>
As Per your example:
<div class="ColVis" >
<button class="ColVis_MasterButton">
<span>Show / hide columns</span>
</button>
</div>
This is your html for that button now we are applying css to it
.ColVis{
width:100%
}
button.ColVis_Button{
float:right
}
Provide Width 100% to your Colvis class and FLOAT:right to button.
Note :
If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.
example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/
When you see output in jsfiddle first starch the size of output screen
so you can see proper output
Try adding this rule to your CSS:
div.ColVis {
float: right;
margin-bottom: 1em;
}
Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.

Javascript Printing Doesn't work - not printing full page

i am trying to print full page but it doesn't work tried different codes but no success
here is tried code.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<table width="94%" style="margin-left:2%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
please help me with it.
thanks
are you trying to render your page through javascript? If yes the following tutorial may help.
http://www.w3schools.com/js/js_htmldom_html.asp
Recommend reading the following API of the tutorial
document.getElementById(id).innerHTML = new HTML
Hope this helps.
this should work for you:
<html>
<head>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<input type=button name=print value="Print" onClick="window.print()">
<table style="margin-left:2%;width:94%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
note: always construct you html properly. width is a part of style tag it is not a tag itself.

Fitting element into table cell

I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>

Center .css Button, Display javascript Content Locker and Display java Alert onClick

Im having a few problems (I've highlighted them in the code):
Problem 1: I don't know how to get the #dl_buttn centred - (45% is nearest) - is there any way to 'Align:centre'?
Problem 2: Im trying to display a content locker onClick - However my locker isn't popping up? - is the code wrong to display a javascript content locker?
Problem/Question 3: Instead of displaying a message on the second click, i would like to display a java alert - I have tried to do this, but failed - could anyone help me out? - (the id for it is 'message')
<html>
<head>
<title>Passupload Passowords - Get the Passwords for your .RAR Files Here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#dl_buttn {
position:absolute;
left: 45%;
top: 280px;
}
-->
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<center>
<body bgcolor="#3c3c3c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" position:absolute; onClick="imageClick()" />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript"> // --------------PROBLEM 3
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("dl_buttn").src = "images/REVEALPASS.png"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://tvserieslink.com/CLP/locker.js?guid=44f3fa3f991e9a34');
showMessage();
setTimeout(changeImage, 3000);
}
/* ]]> */
</script>
<!-- Save for Web Slices (Puloaaa.psd) -->
<table id="Table_01" width="1100" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/Pulo_01.gif" width="1100" height="150" alt=""></td>
</tr>
<tr>
<td><img src="images/Pulo_02.gif" width="1100" height="650" alt="">
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
Sorry I'm a noob & Sorry for posting the whole code - Thanks
Problem 1:
a) You have improper syntax for your input, remove the position:absolute css as it doesn't belong there:
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" onClick="imageClick()" />
b) use margin: 0 auto; to center your dl_buttn and get rid of the absolute positioning.
Problem 2:
You are creating a script element in the DOM but you are not attaching it anywhere. You need to use document.body.insertBefore or insertAfter or similar to attach it to the document.
Problem 3:
To display a javascript alert use alert('Your message here.');

Categories