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="ＭＳ ゴシック" 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">６部バイリンガルの漫画（アメリカ、ドイツ、オランダ、デンマーク、セルビア,英国から１つずつ、が無料で付いてきます。それぞれ単語と文法練習が付いたレッスンで物語を完全に理解し、イギリスとアメリカ英語で考え、話せるようになります。 </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="１"><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">上のコミック好きだったら、きっと、あなたがこの南蛮画（ナンバンガ）２３ヶ国、６０
以上の漫画家の作品集大好きです。。。。<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
Related
I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.
Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.
It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/
Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.
Here's product pricing section HTML source code-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">
<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Begin Header-->
<div class="topbar">
<div class="container">
<div class="row">
<!--Begin Social Icons-->
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
<div class="link"><i class="fab fa-facebook"></i></div>
<div class="link"><i class="fab fa-twitter-square"></i></div>
<div class="link"><i class="fab fa-youtube-square"></i></div>
<div class="link"><i class="fab fa-skype"></i></div>
</div>
<!--End Social Icons-->
<!--Begin Client Links-->
<div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
<div class="link xshide"><i class="fas fa-coins"></i>$ USD</div>
<div class="link xshide"><i class="fas fa-globe"></i>Language</div>
<div class="link"><i class="fas fa-lock"></i>Customers</div>
<div class="link"><i class="fas fa-life-ring"></i>Support</div>
<div class="link"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</div>
</div>
<!--End Client Links-->
</div>
</div>
</div>
<!--End Header-->
<!--Begin Web Hosting-->
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Micro Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $2<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>1 GB Storage</td>
</tr>
<tr>
<td>10 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Small Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $7<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>10 GB Storage</td>
</tr>
<tr>
<td>100 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Big Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $9<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>20 GB Storage</td>
</tr>
<tr>
<td>200 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
</div></div></div>
<!--Libraries-->
<script src="assets/libraries/jquery/jquery.min.js"></script>
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/libraries/wow/wow.min.js"></script>
<script src="assets/libraries/zumada/sticky-header.min.js"></script>
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script>
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script>
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script>
<script src="assets/libraries/zumada/countdown.min.js"></script>
<!--Custom Scripts-->
<script src="assets/js/scripts.js"></script>
</body>
</html>
I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).
There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.
const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{
tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
.price {text-align:right}
<table>
<tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
<tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
<tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
<tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
<tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
<tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
<tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
</table>
<button>change currency</button>
And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):
let cur=1;
document.querySelector("button").onclick=()=>{
document.querySelectorAll(".the-price h1").forEach(h=>{
let p=h.dataset.pr.split(" ")[cur].split(".");
h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
});
cur=1-cur;
}
.subscript {font-size:1ex}
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
<div class="panel">
<div class="panel-heading" style="background: #03989e">
<a name="pricing"></a>
<h3 class="panel-title">NVMe-1</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading" style="background: #38b6ff ">
<h3 class="panel-title">NVMe-2</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
</div>
</div>
</div>
<button>change currency</button>
You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.
If I could see your page source code, I would be able to help you resolve this better.
HTML/CSS Solution
No JavaScript Needed
Points to Consider Before Saying, "It Doesn't Work"
The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.
The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:
Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).
Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn't be a problem about adding anything around, ahead, or behind them.
All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can't be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.
Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.
The dynamically changing text relies on the following:
:checked + label::before changes {content: '💲USD';... to '\a0€ EUR'
:checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
:checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
Since there's no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}
<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
label.money.money {
font-size: 2.5ch;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
label.money.money::before {
content: '💲USD';
}
#currency:checked+label.money.money::before {
content: '\a0€ EUR';
}
figure.price.price {
width: max-content;
font-size: 4.75ch;
font-weight: 500;
line-height: 1.33;
}
figcaption.caption.caption {
width: 100%;
font-size: 0.3em;
padding: 0 0 0 1.5em;
}
sup.cents.cents {
vertical-align: middle;
font-size: 0.6em;
line-height: 0.7;
margin-left: -.75ch;
}
figure.price.price::before {
content: '💲'attr(data-usd);
}
sup.cents.cents::before {
content: '.'attr(data-usd);
}
#currency:checked~figure.price.price::before {
content: '€\a0'attr(data-eur);
padding-left: 0.3em;
}
#currency:checked~.price>sup.cents.cents::before {
content: '.'attr(data-eur);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input id='currency' class='btn-click' type='checkbox' hidden>
<label class='money btn btn-link btn-lg' for='currency'></label>
<figure class='price' data-usd='2' data-eur='4'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='7' data-eur='13'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='9' data-eur='16'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
</body>
</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
I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at http://muconf.missouri.edu/boats2016/
(http://muconf.missouri.edu/boats2016/boatsproblem.png) My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.
CSS
<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt"
codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
<style>
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
</style>
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
HTML
<body>
<!-- begin header -->
<div class="header">
<img src="images/header_2016.jpg" width="3300" height="446" alt=""/>
</div>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>Presenters</li>
<li>Location/Travel</li>
<li>Contact Us</li>
<li>Previous Years</li>
</ul>
</nav>
<!-- end nav menu -->
/*** showing the menu ***/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>
<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->
<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href="http://truefalse.org/"><h5 style="text-align:center">True/False Film Fest</h5>
<img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a>
</div>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</p>
<p></p>
<p></p>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<span class="text"><img class="main" src="images/slideshow/slide05.jpg" />
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
<img class="thumb" src="images/slideshow/slide04.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by EasyRotator, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p>Mizzou Advantage</p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" /> </p>
<p>Jonathan B. Murray <br />
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /> </p>
<p>True/False Film Fest</p></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri Humanities Council</td>
<td height="40" colspan="2" align="center"><a href="http://grs.missouri.edu">Univ. of Missouri <br />
Department of German & Russian Studies</a></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri School of Journalism</td>
<td height="40" colspan="2" align="center">Chancellor's Distinguished Visitors Program</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Donald W. Reynolds Journalism Institute</td>
<td height="40" colspan="2" align="center"><p>Department of Women's and Gender Studies</p></td>
</tr>
<tr>
<td height="40" colspan="4" align="center">Univ. of Missouri Film Studies Program</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
</tr>
</table>
</div>
<!-- end Footer -->
</div> <!-- end TextOnlyContainer -->
</body>
<!-- InstanceEnd --></html>
Seems to be a problem with the background going white when the link is visited
Try to get rid of the a:visited selector altogether, it is not needed
#nav a:link, a:visited {
...
}
To
#nav a {
...
}
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/
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, " ???" );