I am using jquery 1.9.1 so do i just change
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
to …1.9.1/jquery.min.js ? and it also says that type/html is not supported.
<table>
<tr>
<td id="tab1">Tab1</td>
<td id="tab2">Tab2</td>
<td id="tab3">Tab3</td>
<td id="tab4">Tab4</td>
</tr>
</table>
<div id="mainbody">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
window.onload = function()
{
var tab = gettab();
if (tab == '1')
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab1.html" ></object>';
if (tab == '2')
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab2.html" ></object>';
if (tab == '3')
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab3.html" ></object>';
if (tab == '4')
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab4.html" ></object>';
else
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab1.html" ></object>';
};
function gettab()
{
pCOOKIES = new Array();
datax = new Array();
pCOOKIES = document.cookie.split('; ');
if (pCOOKIES == "")
return false;
var i = 0;
do
{
datax = pCOOKIES[i].split('=');
if (datax[0] == "tab")
{
return datax[1];
}
i++;
} while (i < 10);
return false;
};
tab1.onclick = function()
{
document.cookie = "tab=1";
window.location.reload();
}
tab2.onclick = function()
{
document.cookie = "tab=2";
window.location.reload();
}
tab3.onclick = function()
{
document.cookie = "tab=3";
window.location.reload();
}
tab4.onclick = function()
{
document.cookie = "tab=4";
window.location.reload();
}
</script>
[quote=“forforfor, post:23, topic:224247, full:true”]
I am using jquery 1.9.1 so do i just change
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
to …1.9.1/jquery.min.js ?[/quote]
Yes, that makes good sense.
It seems though that you are not using jQuery UI which allows you to use their tabs library, so we will need to either migrate over to that, or go with some other solution that doesn’t rely on jQuery UI for their tabs.
That is the object tags that you’re using, that the browser is complaining about. iframes tend to be the more appropriate solution for that.
Hi, so what do i need to do ? is there a coding or guide line i can follow ? becuase i am stuck with that cookie coding now. Anyway for tabs, i am using this
<ul id="tabs" >
<nav>
<li>
<a href="#tab1" >Live</a>
</li>
<li>
<a href="#tab2" >Con</a>
</li>
<li>
<a href="#tab3" >Ref</a>
</li>
<li>
<a class="logout" a href="#tab4" >Log</a>
</li>
</nav>
</ul>
instead of
<table>
<tr>
<td id="tab1">Tab1</td>
<td id="tab2">Tab2</td>
<td id="tab3">Tab3</td>
<td id="tab4">Tab4</td>
</tr>
</table> .
What i am using is jquery tab right ?
For the jQuery tabs, you will need to load more than just the base jQuery code. You will also need to jQuery UI code, and the jQuery UI CSS code. An example can be seen by clicking the view source link on their tabs page.
You can explore different themes at ThemeRoller by clicking on the Gallery tab, or you can create your own visual theme.
The minimum code you’ll need to get jQuery UI is the theme (smoothness by default), the jQuery library, and the jQuery UI library. You can get the jQuery UI library from https://code.jquery.com/ui/
Here’s an example, using CDN (content delivery network) locations for the files:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
Ya, i have similar things to that website. So will the coding that i uploaded regarding cookie be working ? Example: For the website you sited, i inserted a refresh button on third tab, when i press refresh, it will reload. But after reloading, i want to stay third tab instead of the first tab.
For iframe, all i need is to change
document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab3.html" ></object>';```
into
```if (tab == '3')
document.getElementById("mainbody").innerHTML = <iframe src="tab3.html" /> ;``` ?Because you are not using a fragment identifier (which is the text after the # symbol on the URL), you will need to do more work to get the appropriate tab to load.
When the page is loaded (usually just by placing the script after other scripting code that you have there), you will need to read the cookie for the name of the active tab, then use the active option to trigger the appropriate tab.
An example of using local storage for this, is:
$("#tabs").tabs({
activate: function(event, ui) {
localStorage.selectedTab = ui.newTab.index() + 1;
},
active: (localStorage.selectedTab) ? localStorage.selectedTab - 1 : 0
});
If you really need to use cookies instead of local storage, we can come up with a solution there too.
I cannot do that for you right now though, but this should give you more than enough information to help you on your way.
if i am using fragment identifier, all 4 tabs will be in one vertical list right ? it will be mix together ?
Using the fragment identifier, cookies, or local storage, does not change how things look.
I suspect that it was in a vertical list for you because you did not have either the theme or the UI code loaded.
When you have those properly loading, your tabs will look nice and beautiful, like on this tabs demo page from https://jqueryui.com/tabs/
because before i add anything, it will be in individual tab. But when i add the coding such as
$("#tabs").tabs({
activate: function(event, ui) {
localStorage.selectedTab = ui.newTab.index() + 1;
},
active: (localStorage.selectedTab) ? localStorage.selectedTab - 1 : 0;
});
in jquery-ui.js , it will become vertical list. all tab will be mix together.
[quote=“forforfor, post:32, topic:224247, full:true”]
because before i add anything, it will be in individual tab. But when i add the coding such as[/quote]
That code was not designed to work with your code. It was an example of how things can be done.
Why did I not design it for your code? Because I have to be out the door. Now. Good luck.
Okay, I’m back.
I have your sample code from post #24 with the updated tab list from post #26
Let’s run it and see what happens.
Nothing.
Ahh, you only have jQuery there. Let’s replace that with what’s wanted for jQueryUI, from post #27
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
Still nothing. Ahh, the tabs aren’t yet initialised. Let’s use the code from post #29
$("#tabs").tabs({
activate: function(event, ui) {
localStorage.selectedTab = ui.newTab.index() + 1;
},
active: (localStorage.selectedTab) ? localStorage.selectedTab - 1 : 0
});
What do things look like now? Still nothing? Why not?
The error console says:
tabs-test.html:34 Uncaught SyntaxError: Unexpected token ;
Aha! A bug due to being untested when previously in a rush. Sorry about that. I’ve corrected that bug it in the original post, and and that bug is fixed now.
What do things look like now? There we go - nice and pretty tabs now.
But nothing happens when a tab is clicked. Why not? Let’s look at the error console.
jquery-1.12.3.min.js:2 Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
The link is for <a href="#tab2">Con</a> but the tabs code cannot find an id="tab2" link to show.
We need to put those content sections inside the id="tabs" section, below the </nav> part.
We could start with some iframes, such as:
<div id="tabs" style="margin-left: 2em">
<nav>
...
</nav>
<iframe id="tab1" src="tab1.html" ></iframe>
<iframe id="tab2" src="tab2.html" ></iframe>
<iframe id="tab3" src="tab3.html" ></iframe>
<iframe id="tab4" src="tab4.html" ></iframe>
</div>
It could also be <div id="tab2"> sections in there instead, or other types of content. As long as they’re identified by the appropriate link.
Looking lovely now.
The rest of your script is not needed now, and can be disposed of.
Thanks to jQueryUI the tabs all work well, the content sections are automatically hidden, local storage for the tabs remembers what they are after a refresh, and you’re ready to take on other challenges.
The full code for this tabs test is pretty small now, and is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="tabs" style="margin-left: 2em">
<nav>
<ul>
<li><a href="#tab1">Live</a></li>
<li><a href="#tab2">Con</a></li>
<li><a href="#tab3">Ref</a></li>
<li><a class="logout" href="#tab4">Log</a></li>
</ul>
</nav>
<iframe id="tab1" src="tab1.html" ></iframe>
<iframe id="tab2" src="tab2.html" ></iframe>
<iframe id="tab3" src="tab3.html" ></iframe>
<iframe id="tab4" src="tab4.html" ></iframe>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
With the script being in script.js consisting only of the following:
$("#tabs").tabs({
activate: function(event, ui) {
localStorage.selectedTab = ui.newTab.index() + 1;
},
active: (localStorage.selectedTab) ? localStorage.selectedTab - 1 : 0
});
Hello. Thank you for replying. Really appreciate your help.
I tried the coding but apparently, iframe make my web page to create a lot of white box.
For jquery, currently i only have
<script src="jquery-ui.js"><script>```.
So i need to delect this two and just change to
``` <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>``` ?I realise, when my url is something like ftp://ip address/…html, it will have #tab1/ #tab2 / #tab3 / #tab4. Without ftp, it will not be mix together, it will show up individually. What is the cause as it might be more easy if i refresh within the tab if my website consist of #tab3 / #tab2 at the last part of url.
[quote=“forforfor, post:37, topic:224247, full:true”]
I realise, when my url is something like ftp://ip address/…html, it will have #tab1/ #tab2 / #tab3 / #tab4. Without ftp, it will not be mix together,[/quote]
I didn’t know that you could interact with a web page using ftp. Can we get more details on what’s going on there?
Is it possible or more clear if i put my html with css here ? So that u can test out why my refresh button at third tab when pressed, it will return to tab1 instead of staying at third tab?
Yes indeed, the more info we have here the better.
HTML
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div id="container">
<div id="header" class="gradient backgroundColor">
<div class="pagewidth">
<ul id="tabs" >
<nav>
<li>
<a href="#tab1" >Live</a>
</li>
<li>
<a href="#tab2" >Con</a>
</li>
<li>
<a href="#tab3" >Ref</a>
</li>
<li >
<a class="logout" a href="#tab4" >Log</a>
</li>
</nav>
</ul>
</div>
</div>
<div id="main" class="pageWidth">
<div class="container pagewidth" id="tab1">
<div class="panel" id="imagearea">
<div img class="image-bank">
<div class="image-toolbar">
<span class="panel-heading" style="color:pink">Please</span>
<span class="panel-heading" >update </span>
</div>
</div>
<div class="panel" >
<div class="panel-heading">Information</div>
<div class="panel-content">
<table>
<tr>
<th>Number:</th>
</tr>
<tr>
<th>No:</th>
</tr>
<tr>
<th>Yes:</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="container pagewidth" id="tab2">
<div class="panel">
<div class="panel-heading">Command</div>
<div class="panel-content" id="calibration-panel-content">
<table>
<tr>
<th>
<label label-for="">Type in</label>
</th>
</tr>
</table>
</div>
</div>
<div class="panel" id="calibration-panel-content">
<div class="panel" id="imagearea">
<img class="image-bank image">
<div class="image-toolbar">
<span class="panel-heading" style="color:pink">Click on to display.</span>
<span class="panel-heading" >Updated </span>
<input class="large ui-button" type="button" onClick="window.location.reload();" VALUE="Refresh" >
</div>
</div>
</div>
</div>
<div class="container pagewidth" id="tab3">
<div class="panel" id="imagearea">
<div class="panel">
<div class="panel-content" id="calibration-panel-content">
<div class="panel" id="imagearea">
<img class="image-bank image">
<div class="image-toolbar">
<span class="panel-heading" style="color:pink">Click on to display.</span>
<span class="panel-heading" >Updated </span>
<input class="large ui-button" type="button" onClick="window.location.reload();" VALUE="Refresh" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container pagewidth" id="tab4">
<div class="paragraph"
<p>Log?</p>
</div>
<table width=800px align=center>
<tr height=12px></tr>
<tr height = 60px>
<td rowspan=2 id="menu" width=150px>
<table id="vert_menu" align=center>
<div class="previous">
<input type=button value="Yes" class=menubutton onclick=" window.close(); window.open('http://yahoo.com') " >
</div>
<div class="next">
<input type=button value="No" class=menubutton onclick=" window.close(); window.open('http://google.com') " >
</div>
</table>
</td>
</table>
</div>
</body>
</html>
CSS
body {
background-color: #FFFFFF !important;
}
.backgroundColor {
background-color: #0084c2 !important;
}
.borderColor {
border: 1px solid #0084c2;
}
body {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.10) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.10)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.10) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.10) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.10) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.10) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#20000000', GradientType=0);
/* IE6-9 */
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
margin: 0;
text-align: center;
font-family: tahoma, verdana, arial;
font-size: 14px;
}
.gradient {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#26000000', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
}
div {
margin: 0;
}
h1 {
margin: 0;
}
#container {} #header {
height: 50px;
width: 100%;
top: 0px;
left: 0px;
padding-top: 15px
/* margin-bottom: 10px;*/
}
#main {} #info {
float: both;
display: none;
}
.pageWidth {
width: 950px;
margin: 0px auto 0px auto;
padding: 20px 0px;
}
#mainImage {
width: 60%;
}
.button {
background-color: #CCC;
padding: 5px 10px 5px 10px;
display: block;
margin: 10px 10px 10px 10px;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
border: none;
float: inherit;
}
.button:hover,
.hover {
background-color: grey;
}
.large {
padding: 10px 15px 10px 15px;
}
.on,
.button.on:hover {
background-color: #0084c2;
}
a.button {
color: white;
display: inline-block;
}
#ImageBanks {
height: 580px;
width: 90%;
border: 1px solid #0084c2;
/*margin: 5px auto 5px auto;*/
margin: 5px auto 5px auto;
overflow: auto;
}
#bank img {
width: 90%;
/*height: 60px;*/
}
#bank {
text-align: center;
padding: 0px;
}
#mainImage img {
width: 575px;
height: 430px
}
.centerPart {
margin-top: 0;
width: 600px;
float: left;
}
.hiddenFrame {
visibility: hidden;
}
.spacer {
clear: both;
height: 1px;
}
.leftBox div.bottom,
.pendingIndicator {
display: inline;
margin: 11px 10px;
}
#tabs {
padding-left: 0px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
#tabs li {
float: left;
list-style: none;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#tabs li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 7px 14px 7px 12px;
display: block;
background: #FFFFFF;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
background: -moz-linear-gradient(top, #ebebeb, white 20%);
background: -webkit-gradient(linear, 0 0, 0 20%, from(#ebebeb), to(white));
border-top: 1px solid white;
text-shadow: -1px -1px 0 #fff;
outline: none;
}
#tabs li a.inactive {
margin-top: 3px;
padding-top: 5px;
padding-bottom: 6px;
color: #666666;
background: -moz-linear-gradient(top, #eeeeee, #f8f8f8 75%);
background: -webkit-gradient(linear, 0 0, 0 75%, from(#eeeeee), to(#f8f8f8));
}
#tabs li a:hover,
#tabs li a.inactive:hover {
border-top: 1px solid #dedede;
color: #000000;
}
.container {
clear: both;
}
.panel {
margin: 15px 7px;
padding: 0;
background-color: rgb(245, 245, 250);
border-radius: 3px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
body {
background-color: rgb(247, 248, 250);
color: rgb(77, 77, 77);
}
.panel-heading {
background-color: #0084c2;
height: 40px;
line-height: 2em;
color: white;
font-size: 18px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-content {
padding: 5px;
}
.panel-content tr {
line-height: 1.8em;
}
.image {
width: 100%;
max-height: 300px;
min-height: 300px;
.bgROI {
border-top: #88CC88 3px solid;
border-bottom: #88CC88 3px solid;
background-color: rgba(125, 255, 225, 0.5) !important;
}
.image-overlay {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
position: absolute;
width: 100%;
height: 300px;
}
#imagearea {
position: relative;
background-color: black;
}
.hidden {
display: none;
}
.image-toolbar {
height: 32px;
/*
width: auto;
right: 0px;
left: 0px;
bottom: 0px;
z-index: 10;
*/
padding: 5px;
background-color: #0084c2;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.ui-button .ui-icon.ui-icon-magic {
background: url(sprites.png) no-repeat -79px -5px;
width: 16px;
height: 16px;
}
.ui-button .ui-icon.ui-icon-pause {
background: url(sprites.png) no-repeat -79px -30px;
width: 16px;
height: 16px;
}
.ui-button .ui-icon.ui-icon-pick {
background: url(sprites.png) no-repeat -80px -53px;
width: 25px;
height: 25px;
}
.ui-icon.ui-icon-direction {
background: url(sprites.png) no-repeat -100px -0px;
width: 100px;
height: 75px;
}
.ui-icon.ui-icon-live {
background: url(live.png) no-repeat;
width: 100%;
height: 100%;
background-position: right top;
margin: 10px -10px;
}
.ui-icon.ui-icon-target {
width: 613px;
height: 132px;
margin-left: auto;
margin-right: auto;
}
.ui-button .ui-icon.ui-icon-laserLast {
background: url(sprites.png) no-repeat -325px -0px;
width: 50px;
height: 40px;
}
.ui-button .ui-icon.ui-icon-laserFirst {
background: url(sprites.png) no-repeat -325px -40px;
width: 50px;
height: 40px;
}
.controlGroup {
margin: 0px 20px 30px 20px;
}
div.panel-content table {
width: 100%;
}
.floatRight {
float: right;
right: 5px;
}
.image-toolbar .infotext {
color: white;
padding: 0px 10px;
}
#calibration-panel-content th {
width: 40%;
font-weight: normal;
text-align: left;
}
#tabs li a.logout
{
position: relative;
left: 450px;
}
.menubutton
{
position: relative;
left: 50px;
right: 20px;
width: 120px;
height: 25px;
background: #157DEC;
font-size: 20px;
font-weight: normal;
color: white;
border-radius: 10px;
border: 2px solid #000000;
padding-bottom:28px;
}
.paragraph
{
position: relative;
top:70px;
font-size: 50px;
color: Black;
font-family: Arial, Helvetica, sans-serif;
}
.next
{
position: relative;
top: 118px;
left:700px;
}
.previous
{
position: relative;
top: 150px;
left: 450px;
}
td
{
position:relative;
right:270px;
}
.right {
margin-top: 0;
padding: 0;
float: left;
width: 350px;
}
div.right .result-heading {
background-color: #F39200;
height: 40px;
line-height: 2em;
color: white;
font-size: 18px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-left: 0.0em;
padding: 0 0 0 0;
margin: 0;
}
div.right
{
position: relative;
left:345px;
bottom:415px;
}
.left {
margin-top: 0;
padding: 0;
float: left;
width: 350px;
}
div.left .result-heading {
background-color: #F39200;
height: 40px;
line-height: 2em;
color: white;
font-size: 18px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-left: 0.0em;
padding: 0 0 0 0;
margin: 0;
}
div.left
{
position: relative;
left:130px;
}
I see that the jQuery UI CSS is not being used. Also, please show us the JavaScript that you are currently using?