Please anyone can help me with this problem it would be much appreciated.
When I use this code outside the div for the tabs it works fine, but when inside it, it fails to appear:
echo '<div id="product-desc">'.$obj->product_desc.'</div>';
Here is the script for the page:
<?php
session_start();
include_once("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="style/normalise.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page-wrapper">
<div id="product-page">
<div id="wrapper">
<?php
$current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$results = $mysqli->query("select * from products where product_code='nikon002'");
if ($results)
{
$obj = $results->fetch_object();
echo '<div id="products-wrapper">';
echo '<form method="post" action="cart_update.php">';
echo '<div id="product-image"><img src="images/new folder/'.$obj->product_thumb_name.'"></div>';
echo '<div id="product-name"><h3>PC '.$obj->product_name.'</h3></div>';
echo '<div id="product-price">'.$currency.$obj->price.'</div>';
echo '<div id="product-buybttn"><br><button class="add_to_cart">Buy</button></div>';
echo '<div id="tabContainer">';
echo '<div id="tabs">';
echo '<ul>';
echo '<li id="tabHeader_1">Summary</li>';
echo '<li id="tabHeader_2">Details</li>';
echo '<li id="tabHeader_3">Specifications</li>';
echo '</ul>';
echo '</div>';
echo '<div id="tabscontent">';
echo '<div class="tabpage" id="tabpage_1">';
echo '<h2>Summary</h2>';
echo '<p>im summary</p>';
echo '<div id="product-desc">'.$obj->product_desc.'</div>';
echo '<p>im summary</p>';
echo '</div>';
echo '<div class="tabpage" id="tabpage_2">';
echo ' <h2>Details</h2>';
echo '<p>ADFASFASFSAFA</p>';
echo '<div id="product-desc">'.$obj->product_desc.'</div>';
echo '</div>';
echo '<div class="tabpage" id="tabpage_3">';
echo ' <h2>Specifications</h2>';
echo '<div id="product-desc">'.$obj->product_desc.'</div>';
echo '</div>';
echo ' </div>';
echo ' </div>';
echo ' </div>';
echo ' </div>';
echo '<script src="tabs_old.js"></script>';
echo '</div>';
echo '</div>';
}
?>
</div>
And here is the javascript code:
window.onload=function() {
// get tab container
var container = document.getElementById("tabContainer");
var tabcon = document.getElementById("tabscontent");
//alert(tabcon.childNodes.item(1));
// set current tab
var navitem = document.getElementById("tabHeader_1");
//store which tab we are on
var ident = navitem.id.split("_")[1];
//alert(ident);
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");
//hide two tab contents we don't need
var pages = tabcon.getElementsByTagName("div");
for (var i = 1; i < pages.length; i++) {
pages.item(i).style.display="none";
};
//this adds click event to tabs
var tabs = container.getElementsByTagName("li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
}
// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current).removeAttribute("class");
document.getElementById("tabpage_" + current).style.display="none";
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class","tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display="block";
this.parentNode.setAttribute("data-current",ident);
}
</body>
</html>
I'm sure the solution must be pretty simple but I can't figure it out as a programming novice!
Thanks in advance!
