Display 8 images using the whole page - html

I have some webcams, that I'm trying to display nicely on 1 html page. This page wil be used on 2 or 3 screens (using Rpi or windows client).
All the screens have different resolutions, but I'm trying to make my view responsive to the display.
I'm trying to display it like this:
Currently I have this code:
<html>
<body bgcolor=000000>
<script language="javascript" type="text/javascript" >
<!--
function ChangeMedia(){
var d = new Date();
var t = d.getTime();
document.getElementById('cam1').src = "http://10.101.4.2/image.jpg?feed=%7B66CA3FEA-7841-4486-B7D2-253EBF08E852%7D&webview&quality=100&noupsample=1/"+t;
document.getElementById('cam2').src = "http://10.101.4.2/image.jpg?feed=%7BEB2548AA-3183-4FB9-BD5A-199887346827%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam3').src = "http://10.101.4.2/image.jpg?feed=%7B6A3C56CE-F186-4205-9A62-7740207F8BEF%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam4').src = "http://10.101.4.2/image.jpg?feed=%7BAB013929-4D26-4CD4-82BA-F13532D4E7CE%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam5').src = "http://10.101.4.2/image.jpg?feed=%7BE9FB6FCC-0748-48A5-A679-DBD875C5A651%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam6').src = "http://10.101.4.2/image.jpg?feed=%7B0E5C454A-98DC-4C16-95B9-CE3B6097B2E7%7D&webview&quality=100&noupsample=2/"+t;
}
var reloadcam = setInterval("ChangeMedia()",500);
</script>
<script type="text/javascript">
function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds;
timeElement.innerHTML="<font style='font-size:12px;font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime
</script>
<center>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
<br>
<span style="color:white" id=curTime></span>
</center>
</body>
</html>
Which results in this:
Now I'm wondering how I can make it work so that I get 1 pic bigger, and 3 smaller right to it, and 4 smaller below. The whole width should be used.
Should I use tables, but will I still be able to make it responsive when a smaller or 4:3 screen is used?
Extra issue is that not all images are the same size. I was thinking of cropping them a bit by using object-fit.
Thanks for any help.

It's not an ideal solution but if you choose to use tables this should work:
function ChangeMedia(){
var d = new Date();
var t = d.getTime();
document.getElementById('cam1').src = "http://10.101.4.2/image.jpg?feed=%7B66CA3FEA-7841-4486-B7D2-253EBF08E852%7D&webview&quality=100&noupsample=1/"+t;
document.getElementById('cam2').src = "http://10.101.4.2/image.jpg?feed=%7BEB2548AA-3183-4FB9-BD5A-199887346827%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam3').src = "http://10.101.4.2/image.jpg?feed=%7B6A3C56CE-F186-4205-9A62-7740207F8BEF%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam4').src = "http://10.101.4.2/image.jpg?feed=%7BAB013929-4D26-4CD4-82BA-F13532D4E7CE%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam5').src = "http://10.101.4.2/image.jpg?feed=%7BE9FB6FCC-0748-48A5-A679-DBD875C5A651%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam6').src = "http://10.101.4.2/image.jpg?feed=%7B0E5C454A-98DC-4C16-95B9-CE3B6097B2E7%7D&webview&quality=100&noupsample=2/"+t;
}
var reloadcam = setInterval("ChangeMedia()",500);
function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds;
timeElement.innerHTML="<font style='font-size:12px;font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime;
<table border="1">
<tr>
<td rowspan="3" colspan="2">
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
</td>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
</td>
</tr>
<tr>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
</td>
</tr>
<tr>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
</td>
</tr>
<tr>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
</td>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
</td>
<td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
</td>
</tr>
</table>
<br>
<span style="color:white" id=curTime></span>

You may use Bootstrap grid, something like...
<div class="wrapper">
<div class="row">
<div class="col-xs-8">Big screen</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">Small screen</div>
<div class="col-xs-12">Small screen</div>
<div class="col-xs-12">Small screen</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">Small screen</div>
<div class="col-xs-3">Small screen</div>
<div class="col-xs-3">Small screen</div>
<div class="col-xs-3">Small screen</div>
</div>
</div>
Although this may be accomplished also with table or flex mockup, up to your choice

Related

Regular Express to filter base on character until end

I would like to use regex to get some data from my existing html , my html is as below
<h2 style="text-align: center;"><strong>Title/strong></h2>
<h1 style="text-align: center;">Latest Update : 11-12-209</h1>
<h1 style="text-align: center;"><strong>Comics</strong></h1>
<hr />
<a href="" alt="" width="300" height="169" class="" /></a>
<strong>Ttile: Book1</strong>
<strong>ISBN : 1234567ND​​</strong>
<hr />
<img class="" src="" alt="" width="300" height="225" />
<strong>Ttile: Book2</strong>
<strong>ISBN : 12345678ND​​</strong>
<hr />
My Expected data would be from the first < hr > to the last < hr > ,
I try regex ^ to last < HR >.
What is the correct regex that allow me to get my expected result
Here is a working example:
var html = '<h2 style="text-align: center;"><strong>Title/strong></h2>\
<h1 style="text-align: center;">Latest Update : 11-12-209</h1>\
<h1 style="text-align: center;"><strong>Comics</strong></h1>\
<hr />\
<a href="" alt="" width="300" height="169" class="" /></a>\
<strong>Ttile: Book1</strong>\
<strong>ISBN : 1234567ND​​</strong>\
<hr />\
<img class="" src="" alt="" width="300" height="225" />\
<strong>Ttile: Book2</strong>\
<strong>ISBN : 12345678ND​​</strong>\
<hr />';
console.log( html.match(/<hr \/>(.*)<hr \/>/i)[1] );

Japanese Text not showing correctly

Currently I am working on a website which has some text in Japanese Language. All the texts are showing weird in all browser. The website has "charset" of "Shift_JIS". I have recoded the website with some new code as it was coded 10 years ago with some table like email template.
Here is the Head part of the site
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>コミックで英語を学ぶ,,漫画で学ぶ英語:, ESL, EFL, TOEFL, FCE, TOIEC, IELTS</title>
All the texts are looking like this
Here is all the code I have used in the page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>コミックで英語を学ぶ,,漫画で学ぶ英語:, ESL, EFL, TOEFL, FCE, TOIEC, IELTS</title>
<script language="JavaScript">
<!--HPB_SCRIPT_ROV_50
//
// Licensed Materials - Property of IBM
// 83H7391, 42L1820
// (C) Copyright IBM Corp. 1995, 1999 All Rights Reserved.
//
// Version: 5.0.1
//
// HpbImgPreload: 画像のプリロードを行ないます
//
function HpbImgPreload()
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
var isIE=(document.all && (appVer >= 4)); // Internet Explorer 4.0 or later
if (isNC || isIE)
{
if (document.images)
{
var imgName = HpbImgPreload.arguments[0];
var cnt;
swImg[imgName] = new Array;
for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
{
swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
}
}
}
}
// HpbImgFind: Imageオブジェクトを探します
//
function HpbImgFind(doc, imgName)
{
for (var i=0; i < doc.layers.length; i++)
{
var img = doc.layers[i].document.images[imgName];
if (!img) img = HpbImgFind(doc.layers[i], imgName);
if (img) return img;
}
return null;
}
// HpbImgSwap: 画像を入れ換えます
//
function HpbImgSwap(imgName, imgSrc)
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
var isIE=(document.all && (appVer >= 4)); // Internet Explorer 4.0 or later
if (isNC || isIE)
{
if (document.images)
{
var img = document.images[imgName];
if (!img) img = HpbImgFind(document, imgName);
if (img) img.src = imgSrc;
}
}
}
var swImg; swImg=new Array;
//-->
</script><script language="JavaScript">
<!--
HPB_SCRIPT_PLD_50
HpbImgPreload('_HPB_ROLLOVER3', 'image/english02.gif', 'image/english01.gif');
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
TD {
font-size : 12px;
}
-->
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container-fluid">
<div class="header row">
<div class="col-md-3"></div>
<div class="col-md-6"><img src="banners/banner-cfangollll-flyguy600-105.png"></div>
<div class="col-md-3"></div>
</div>
<div class="middle row">
<div class="col-md-3"></div>
<div class="col-md-6" style="background:#fff">
<div class="top_sec_mid row">
<div class="top_text">
<h1 align="center"><br>
コミックデ英語学ぶ</h1>
<h1 align="center">世界コッミクで国際的なビジネス言語を勉強。</h1>
<h5 align="center"><br>
<b>Language Learning thru World Comics</b> </h5>
</div>
<!--top_text ends-->
<div class="top_txt2"> 英語を学ぶ人、そして教える人を対象とした、プリントOK、フォトフリーのお手
軽レッスン。難易度は中レベルで、初級編・中級編・上級編の3段階に別れてい
る。まずは下のタイトルをクリックしてみよう。 </div>
<div class="pdf">
<ul>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_us.png" width="27" height="17">幻視少女(作:リー・ケネディ)</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_Flag_of_England.png" width="27" height="17"> ルッキング(作:キャスパー・ウィリアムス)</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_icon-denmark.png" width="27" height="17"> 冷や汗タラタラ(作:オーレ・コモル</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_dutch.png" width="27" height="17"> ピート(作:マイケ・ハーチェス)</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_germany-flag-icon.png" width="27" height="17"> 悪魔主義死神カルト(作:ウルリッチ・メイジン)</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
<li>
<div class="list_left col-md-9 col-sm-9"><img src="images/flag-icon_Serbia Yugoslavia.png" width="27" height="17"> 夢見るセルビア人(作:アレクサンダー・ゾグラフ)</div>
<div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
</li>
</ul>
</div>
</div>
<!--top_sec_mid-->
<div class="mid_box_1">
<div class="mid_box1_img"><img src="alezog/serdre_02.gif" width="465" height="281"></div>
<div align="center" class="mid_box1_txt"> <strong>aleksandar zograf </strong><br>
(作:アレクサンダー・ゾグラフ)<br>
夢見るセルビア人 </div>
</div>
<!--mid_box_1 ends-->
<div class="mid_box_2">
<div class="mid_box2_img"><img src="olecom/olecomTOP.gif" width="431" height="306" alt=""></div>
<div align="center" class="mid_box2_txt"> <strong>ole comoll</strong><br>
I was hopelessly in love. I couldn't sleep, but lay think of her....Every day I came to see her, but all I dared to say to her was: "The usual please." It went on for some weeks until: "And here?" </div>
</div>
<!--mid_box_2 ends-->
<div class="mid_box_3">
<div class="mid_box3_img"><img src="caswil/look0203.gif" width="222" height="258" alt=""></div>
<div align="center " class="mid_box3_txt"> <strong> caspar williams</strong><br>
カスパーウィリアムズは、毎日の生活が何のためにあるのかということに全く確新が待ってない人々のために神経質な物語シリーズを書いている。Suburban Nightmare シリーズの中の LOOKING(ルキングか見ている)でもどちらかといえばふつうの状況にあるふつうの男が 神経質になっていく。Mr. Williams は<small><font face="MS ゴシック" lang="JA">ブ</font></small>ライトンで植物だけを友にひとりで住んでいる。 <strong>Click here for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong> </div>
</div>
<!--mid_box_3 ends-->
<div class="mid_box_4">
<div class="mid_box4_img"><img src="leeken22/02t_r2_c2_f2.gif" width="205" height="228" alt=""></div>
<div align="center " class="mid_box4_txt">
<p><strong>lee kennedy</strong><br>
幻視少女(作:リー・ケネディ</p>
<p><strong>Click here for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong></p>
</div>
</div>
<!--mid_box_4 ends-->
<div class="mid_box_5">
<div class="mid_box5_img"><img src="maahar22/maaful4.gif" width="241" height="332" alt=""></div>
<div align="center mid_box5_txt" class="mid_box5_txt"> <strong>maaike hartjes</strong><br>
この小さな物語は私の友人ピートについて,彼はいいやつですが、巨大な浮気者です。 <strong>Click here for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong> </div>
</div>
<!--mid_box_5 ends-->
<div class="mid_box_6">
<div class="mid_box6_img"><img src="ulrmag/ulrTOP.gif" width="425" height="367"></div>
<div align="center mid_box6_txt" class="mid_box6_txt">
<p>ulrich magin</p>
<p><strong>Click here for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong></p>
</div>
</div>
<!--mid_box_6 ends-->
<div class="mid_box_7">
<div class="mid_box7_img1 col-md-6"><img src="images/holocomics-template-FLATSURFACEVIEWnoLAYERS400traN.png" width="316" height="192"></div>
<div class="mid_box7_img2 col-md-6">
<div class="box7_txt">
<h5>xxxxxxxxxxxxxxxxxx</h5>
<h6>Click here for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</h6>
</div>
</div>
</div>
<!--mid_box_7 ends-->
<div class="bottom_blue row">
<div class="mid_box_8">
<div align="center" class="mid_box8_txt">
<p align="left">6部バイリンガルの漫画(アメリカ、ドイツ、オランダ、デンマーク、セルビア,英国から1つずつ、が無料で付いてきます。それぞれ単語と文法練習が付いたレッスンで物語を完全に理解し、イギリスとアメリカ英語で考え、話せるようになります。 </p>
<h6 align="left">What you get for free are 6 bilingual comics (one each from America, Serbia, Holland, Germany, Denmark and England). Each includes a complete lesson that will ensure that you know the story as well as how to think and talk about it in English. What are you waiting for?</h6>
</div>
<div class="mid_box8_img1"><img src="images/serdre-bilinguallastPage.png" width="600" height="354"></div>
</div>
<!--mid_box_8 ends-->
<div class="mid_box_9">
<table width="60%" border="2">
<tr>
<th height="372" bgcolor="#0066FF" scope="col"><h6 align="left">Maximizeyour your learning and memorization potential with three modes. Experience these comics and lessons thru your three main senses, </h6>
<h1 align="center">Listen See Feel</h1>
<p align="center">(auditory, visual and kinethetic) </p>
<p align="center">then </p>
<h1 align="center">Think and Create</h1>
<h6 align="left">(auditory, visual and kinethetic) </h6>
<table width="88%" border="0" align="center">
<tr>
<th height="42" scope="col"><img src="images/icon-movie2.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-text.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-voice.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-hear-2.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-comic40.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-slideshow.png" width="40" height="40"></th>
</tr>
</table>
<table width="88%" border="0" align="center">
<tr>
<th height="42" scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
<th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
<th scope="col"><img src="images/icon-watch2.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/icon-do.jpg" width="40" height="40"></th>
<th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
<th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
</tr>
</table>
<p align="left">Depending on what kind of learner you are (auditory, visual or kinesthetic), I believe it is best to 1) listen<img src="images/icon-hear-2.jpg" width="40" height="40">, 2)see <img src="images/icon-watch2.jpg" width="36" height="36"> and feel <img src="images/icon-do.jpg" width="40" height="40"> the comic and finally, 3) involve yourself in Creative Thinkingcheck out the translated version <img src="images/Flag_of_Japan_27.png" width="27" height="17"> <img src="images/icon-plus20.jpg" width="20" height="20"> <img src="images/flag-icon_british-flag.png" width="27" height="17">. You should then be ready for the lesson.</p>
<h6 align="center">All the audio is inEnglish in accents from various countries. </h6></th>
</tr>
</table>
</div>
<!--mid_box9-->
<div class="mid_box_10">
<table width="60%" border="2">
<tr>
<th scope="col"><div align="center">
<table width="60%" border="2">
<tr>
<th bgcolor="#FFFFFF" scope="col"><div align="center">
<p><img src="images/wordshoot.gif" alt="Language Learning Game " width="228" height="22"><br>
</p>
</div></th>
</tr>
</table>
<p><img src="images/worshoot-scrnsht.jpg" alt="Wordshoot: Language Learning Game" width="232" height="184"></p>
</div></th>
</tr>
</table>
</div>
<!--mid_box10-->
<div class="mid_box_11">
<h2 align="center" >(語学学習シューティング・ゲーム:TOIEC, TOEFL, IELTS, ケンブリッジ英検対策用)
100以上の問題&回答を収録。<br>
<br>
<strong>PC版:ここをクリック! MAC版:ここをクリック! </strong></h2>
<table width="100%" border="0" align="center">
<tr valign="top">
<td ><p align="center"> </p>
<p align="center" style="color:#fff;"><font face="Arial, Helvetica, sans-serif" size="1"><b>Language
Learning shoot 'em up for learners of TOIEC, TOEFL, IELTS et) </b></font></p>
<h6 align="center"><font face="Arial, Helvetica, sans-serif" size="3" color="#333333">A horde of illiterate, savage, grammatically-challenged and linguistically-dysfunctional
mutant aliens from a far off planet in an alternative dimension
want you for breakfast. Prevent this from happening by downloading this somewhat retro but still fun game.</font> <font face="Arial, Helvetica, sans-serif" size="3" color="#333333">Yummmy!</font></h6></td>
</tr>
</table>
</div>
<!--mid_box11-->
<div class="mid_box_12">
<table width="78%" border="2">
<tr>
<th bgcolor="#FFFFFF" scope="col"><div align="left">
<h2 style="color:#000">上のコミック好きだったら、きっと、あなたがこの南蛮画(ナンバンガ)23ヶ国、60
以上の漫画家の作品集大好きです。。。。<br>
</h2>
<h5 align="center" style="color:#000">If you like the comics above you'll love the works on the Nambanga Collection .</h5>
<div align="center">
<table width="80%" border="0">
<tr>
<th bgcolor="#3E8FD1" scope="col"><img src="images/nambangaFRONT.jpg" alt="xxxxxx" width="404" height="600" id="Image10"></th>
</tr>
</table>
<h2 align="left" style="color:#000">ここはアーティストやクリエイターのインクです(略歴も読めます!!)</h2>
<h5 align="center" style="color:#000">here is a link to a list of the artists and creators and short bios. </h5>
<h2 align="center" style="color:#000">★ ★ ★ 今だけ999円 ★ ★ ★</h2>
<p align="center"> </p>
<h2 align="center" style="color:#000">75%割引きです</h2>
<p align="center" style="color:#000">★ ★ ★ はいそうです ★ ★ ★</p>
<h2 align="center" style="color:#000">75%オフ</h2>
<h6 align="center" style="color:#000">Now only 750 yen (that's a 75% discount)</h6>
<p align="center"><img src="images/warning.png" width="60" height="60"></p>
<h2 align="center" style="color:#000">成人向けの漫画</h2>
<h2 align="left" style="color:#000">いくつかの物語を子どもたちにとって不適切であると考えていますよ。</h2>
<h5 align="left" style="color:#000">Some stories are suitable for a mature audience only!!!</h5>
<p align="center"><img src="images/banner-holoM-signmeUP-englishJP.jpg" alt="Lorem ipsum dolor..."></p>
</div>
<div align="center"></div>
</div>
<div align="center">
<table width="58%" border="2">
<tr>
<th scope="col"><div align="left">
<h2 style="color:#000">ホロミーム言語暗記システムは、英語学習が効率的になるだけでなく、スペイン語でも中国語でもフランス語でもどんな言語でもあなたが学びたい学習に役立ちます。</h2>
<h5 align="center"><img src="images/logo_header.jpg" width="289" height="86"></h5>
<h5 align="center">The Holo-MeME Language Memorization System will help you to learn not only ENGLISH faster and<br>
more efficiently but also Spanish, French, Chinese. In fact, whatever language you want to learn.<br>
</h5>
</div></th>
</tr>
</table>
</div></th>
</tr>
</table>
</div>
<!--mid_box12-->
<div class="mid_box_13"> <img src="banners/banner_nambanga-titlewithdilcar600only-60-20.jpg" width="600" height="74" id="Image25"> </div>
<!--mid_box13-->
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="footer row">
<p><img src="banners/banner-cfangollll-flyguyblack600-105.png" width="600" height="105">
<center>
<iframe src="footer.html" frameBorder="0" width="610" height="100"></iframe>
</center>
</p>
</div>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
How can I fix that? Thanks
The problem, apparently, is that the encoding which you have declared (Shift_JIS) no longer matches the actual encoding used (probably UTF-8), and so the browser renders garbage. Either that, or your browser doesn't recognize the Shift_JIS encoding.
What may have happened is that when you edited the source, your text editor re-wrote the text in its preferred encoding, which differed from Shift_JIS. It's not possible to tell which encoding your current source file is in based on the code you posted; we'd need to have the raw file.
Another possibility is that your source is, in fact, encoded in Shift_JIS correctly, but your server is serving the page with a mis-matched Content-Type header which is overriding the <meta> tag.
In any case, I would recommend switching things entirely to UTF-8 where possible.
Try changing the declared charset of your page to UTF-8 (maybe add the modern <meta charset="utf-8"> tag while you're at it). If that doesn't work, try these steps:
Convert the original source to UTF-8
Open the original source in your editor
Ensure that the text displays properly in the editor (means the editor recognizes the encoding)
Use the editor's settings to re-save as UTF-8
Change the declared encoding to UTF-8
Apply your changes

How can i format these elements properly? I've used padding and margin. Any ideas?

so im new to html and need help formatting. i wasnt the first two images to have 10px of space between them but also centered above the bottom image. ive tried padding and margin any ideas?
<table>
<tbody>
<tr>
<td>
<div style="margin-right: 10px;" align="center"><a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a> <a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a></div>
<div style="padding-left: 10px;" align="center"></div></td>
</tr>
<tr>
<td colspan="2">
<div align="center"><a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a></div></td>
</tr>
<tr>
<td colspan="2">`enter code here`
<div align="center">Axis 360 Digital Media Library</div></td>
</tr>
<tr>
<td colspan="2">
<div align="center"><span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span></div></td>
</tr>
</tbody>
</table>
<div style="margin:auto; width:(xx+yy+10)px;" >
<img src="image1" style="margin-right:10px;" widht="xxpx">
<img src="image2" width="yypx">
</div>
<div style="margin:auto; width:image3widht px;">
<img src="helloworld" style="margin:auto;" width="image3widthpx;">
</div>
See fiddle
I would do it like this:
<div class="topRow">
<a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a>
<a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a>
</div>
<div style="padding-left: 10px;" align="center"></div>
<div align="center">
<a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a>
</div>
<div align="center">
Axis 360 Digital Media Library
</div>
<div align="center">
<span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span>
</div>
With CSS:
.topRow {
text-align: center;
}
.topRow > a {
display:inline-block;
}
.topRow > a:first-child {
margin-right: 10px;
}
And the finished product: http://jsfiddle.net/D7rvc/

Is it possible to stop the marquee which has images as elements in it, after every images slides?

I have created one marquee with images as element.
Code is
<marquee behavior="scroll" direction="left" scrollamount="30" class="image-marquee" >
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
</marquee>
CSS
.image-marquee{ }
.image-marquee img{margin-top:70px;cursor:pointer; }
Is it possible to stop the marquee after every image slide and after some time it should run forward to next image?
Try this code
scrolldelay="2000"
scrollamount="500"

replace numbers in class names by javascript

Why doesn't my script work?
I want to replace numbers in this code:
<!--m-->
<li class="g videobox" style="position:relative">
<div class="s">
<table class="ts" style="width:auto">
<tbody>
<tr>
<td style="padding-top:5px;padding-right:8px" valign="top" width="1%">
<div class="th" style="background-color:#000;height:68px;overflow:hidden;position:relative;width:120px">
<a id="v0" style="text-decoration:none" href="/url?url=http://www.dailymotion.com/video/xt80kj_2nd-september-2012-southampton-vs-manchester-united-2-3-hd_sport&rct=j&sa=X&ei=P2hEUIfkKYKk0QXppoHgCA&ved=0CDwQuAIwAA&q=manchester&usg=AFQjCNGmLl3hg6CUcX5MsuU-njXolHOOlQ">
<div style="position:relative;top:0px;left:0px">
<img src="data:image/jpeg;base64,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" alt="" id="vidthumb1" class="th vidthumb1" style="display:inline-block;height:67px;margin:0px 0px 0px 0px;border:0;width:120px" align="middle" border="0" height="67" width="120">
</div>
<span class="vdur" style="right:0;background-color:#000;bottom:0;color:#000;filter:alpha(opacity=70);font-size:11px;font-weight:bold;opacity:0.7;-khtml-opacity:0.7;-moz-opacity:0.7;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">► 4:01</span>
<span class="vdur" style="right:0;bottom:0;color:#fff;font-size:11px;font-weight:bold;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">► 4:01</span>
</a>
</div>
</td>
<td style="padding-top:1px" valign="top">
<h3 class="r inl">
<a href="http://www.dailymotion.com/video/xt80kj_2nd-september-2012-southampton-vs-manchester-united-2-3-hd_sport" class="l" onmousedown="return rwt(this,'','0','','1','AFQjCNFZjowZj8K920o31HeauBkHuwmpzA','6LR8Li4Qt3qhz4xWQE49yQ','0CDsQtwIwAA',null,event)" title="2nd September 2012 Southampton vs Manchester United 2-3 [HD] - Video Dailymotion">2nd September 2012 Southampton vs <em>Manchester</em> <b>...</b>
</a>
</h3>
<div> <cite class="kv">dailymotion.com</cite>
<span class="st">
<span class="f">
<span style="background:#aaa;border:#999 1px solid;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;color:#fff;font-size:10px;font-weight:bold;margin-right:5px;padding:0 3px;text-transform:uppercase">New</span>
<span class="nobr">14 hours ago</span> - <span class="nobr">4 min</span>
</span>
<br>2nd September 2012 Southampton vs <em>Manchester</em> United 2-3 [HD]<br>
</span>
</div> </td>
</tr>
</tbody>
</table>
</div>
<!--n-->
<!--m-->
</li>
<li class="g videobox" style="position:relative">
<div class="s">
<table class="ts" style="width:auto">
<tbody>
<tr>
<td style="padding-top:5px;padding-right:8px" valign="top" width="1%">
<div class="th" style="background-color:#000;height:68px;overflow:hidden;position:relative;width:120px">
<a id="v0" style="text-decoration:none" href="/url?url=http://www.footytube.com/video/southampton-manchester-united-sep02-127801&rct=j&sa=X&ei=P2hEUIfkKYKk0QXppoHgCA&ved=0CD8QuAIwAQ&q=manchester&usg=AFQjCNGWDlz10zch_sUaWuQ63AO88LPtzA">
<div style="position:relative;top:-1px;left:0px">
<img src="data:image/jpeg;base64,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" alt="" id="vidthumb2" class="th vidthumb2" style="display:inline-block;height:70px;margin:0px 0px 0px 0px;border:0;width:120px" align="middle" border="0" height="70" width="120">
</div>
<span class="vdur" style="right:0;background-color:#000;bottom:0;color:#000;filter:alpha(opacity=70);font-size:11px;font-weight:bold;opacity:0.7;-khtml-opacity:0.7;-moz-opacity:0.7;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">► 4:40</span>
<span class="vdur" style="right:0;bottom:0;color:#fff;font-size:11px;font-weight:bold;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">► 4:40</span>
</a>
</div>
</td>
<td style="padding-top:1px" valign="top">
<h3 class="r inl">
<a href="http://www.footytube.com/video/southampton-manchester-united-sep02-127801" class="l" onmousedown="return rwt(this,'','0','','2','AFQjCNE5svFiL4Af9K2TuhaGf4ydP-LjtQ','t7BFtngpHDrP_gEBAAj7eg','0CD4QtwIwAQ',null,event)" title="Southampton vs. Manchester United Video Highlights & Interviews (02nd Sep 12)">Southampton vs. <em>Manchester</em> United Video <b>...</b>
</a>
</h3>
<div> <cite class="kv">footytube.com</cite>
<span class="st">
<span class="f">
<span style="background:#aaa;border:#999 1px solid;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;color:#fff;font-size:10px;font-weight:bold;margin-right:5px;padding:0 3px;text-transform:uppercase">New</span>
<span class="nobr">13 hours ago</span> - <span class="nobr">5 min</span>
</span>
<br>Southampton v <em>Manchester</em> United video highlights, results and news. Match played on Sunday, Sep 02 2012 <b>...</b>
<br>
</span>
</div> </td>
</tr>
</tbody>
</table>
</div>
<!--n-->
<!--m-->
</li>
<li class="g videobox" style="position:relative">
<div class="s">
<table class="ts" style="width:auto">
<tbody>
<tr>
<td style="padding-top:5px;padding-right:8px" valign="top" width="1%">
<div class="th" style="background-color:#000;height:68px;overflow:hidden;position:relative;width:120px">
<a id="v0" style="text-decoration:none" href="/url?url=http://www.footytube.com/video/southampton-manchester-united-sep02-127812&rct=j&sa=X&ei=P2hEUIfkKYKk0QXppoHgCA&ved=0CEIQuAIwAg&q=manchester&usg=AFQjCNEBZOpSGbL3i-xMze45YxunEAhAag">
<div style="position:relative;top:-1px;left:0px">
<img src="data:image/jpeg;base64,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" alt="" id="vidthumb3" class="th vidthumb3" style="display:inline-block;height:70px;margin:0px 0px 0px 0px;border:0;width:120px" align="middle" border="0" height="70" width="120">
</div>
<span class="vdur" style="right:0;background-color:#000;bottom:0;color:#000;filter:alpha(opacity=70);font-size:11px;font-weight:bold;opacity:0.7;-khtml-opacity:0.7;-moz-opacity:0.7;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">► 5:53</span>
<span class="vdur" style="right:0;bottom:0;color:#fff;font-size:11px;font-weight:bold;padding:1px 3px;position:absolute;text-align:right;text-decoration:none">
with this code:
var html = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML
html = html.replace( /2012/g, "???" );
document.getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML =html;
In this code i want to replace 2012 with ????
But I want to replace every number in the value by ??? but not replace the numbers in url.
Is that possible?
Since the URLs all use slash - in the URL you could do something like:
html = html.replace( /[^\-]2012/g, " ???" );