Search jQuery

jQuery Forum

Roll Your Own - Tabbed Menu issue

in Using jQuery UI • 6 years ago

Hi All,
I am working on a clients website which is very information heavy. Trying to make tabbed areas to limited the amount of space taken up.

I went on themeroller and got this:

http://jqueryui.com/themeroller/#!zThemeParams=5d00000100c005000000000000003d8888d844329a8dfe02723de3e5701fa198449035fc060c60d90ab42a9576967ec2e17f4e216009e15891758c06c64cfd470466d5dc37c164a68069267698161defb8ccc57ef0ebca1830333d6f5c5acbd6934454d5f9785ae2a775f6be5172ccdcb8da273a83ebccb477d1c743421206752b6db33bfbf508417ce75c229797b8417ab7b3e52916122b8f795259f0d87f33752259b97ac68499319a295cab4b3a86e6c38ea1aa16ab081209d200dcd64850c77f2a750ae17fd69b4e486df479038d2a5907296038dc6340dae3fca7fd3cb4c8cb8638cd4871dc0753d8d5cd713d9130584ac8cda1adedd53bf2eabdd77b1303ad395766ff4672a3978dba42571fae4f82ade505babf85ca568763a4635b18414dc24bc3b5f8fdfe24d8e11240c65f92a354574f067c2d66e171d10f784388e7775a1c7ca44d73ffc3ee602710bf126a07da14f270cfff02fc07c67dce5466ef1fe97d23d51db71c04ff5e208a55feead406c0ceca7900c7bc1ab1de92acb7e55bc4d97258ece083938555a455ba3da7cbc5e2a8dd281eda01c61a3c2be61307b533049c1f12ffc2a8de3341aa2bfeb224f56420d2e8bdb699654f53dd20ffb570ee8248ecffd6c1269e

Which is great. But when I try and use the files I downloaded I have had a couple of issues.

1. Accordion
http://www.mason-uk.co.uk/flexible-pipe-connectors3.asp
This is the page I am testing the code on. To see it scroll down to the bottom.
The drop down DIV's seem to have a lot of dead space beneath the info. and the related products are severally warped (the divs are too big vertically)
IF I click inspect element I can see that the jquery seems to be adding inline CSS to my divs. When I try and overide this by putting inline css (or external file css) it doesn't make a difference.

2. Tabbed Menu
http://www.mason-uk.co.uk/flexible-pipe-connectors4.asp
This is another option I've been working on. But it doesn't seem to work at all. Even though I have copied over all the files I downloaded from the website...

Any ideas?
Thanks so much
Rich

Replies(7)

jakecigar

Re: Roll Your Own - Tabbed Menu issue

6 years ago

in #1 .listbox in http://www.mason-uk.co.uk/css/main8.css has a height. remove it.

JΛ̊KE

kbwood.au

Re: Roll Your Own - Tabbed Menu issue

6 years ago

#2 You are applying accordion again, but there's no #accordion element.

Richard11..

Re: Re: Roll Your Own - Tabbed Menu issue

6 years ago

Thanks man, that sorted it for number 2 :-) . It's strange because that bit in the head that calls in the Jquery, isn't in the current download I got from 'rollyourown' but was in a previous download I'd been experimenting with... I just forgot to delete it at first, but when I did, it stopped my accordion working. I didn't think about adjusting it for the tabs file... Guess I'm tired :/

Cheers, thanks for taking a look.

Richard11..

Re: Roll Your Own - Tabbed Menu issue

6 years ago

I saw that too Jake but that CSS is not visible in the code I have. I think that it gets added in server side through the JQuery somehow, I have searched through the files that came with it, but it isn't obvious to me what is causing it.
Below is the code I have.
The bits that are from the JQuery I downloaded are:
Lines: 96 - 105 (in the head)
and
Lines: 120-218 (in the body)

<%
productID = TRIM( "443" )
Set Con = Server.CreateObject( "ADODB.Connection" )
Con.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("********") &";"
sqlstring = "SELECT * From Products "
sqlstring = sqlstring & "WHERE product_id=" & productID
Set RS = Server.CreateObject( "ADODB.Recordset" )
RS.ActiveConnection = Con
RS.Open sqlString
cat = RS( "product_category" )
p1 = RS ( "paragraph1" )
if p1 <> "" then
p1 = Replace(p1, ">", "=NULL,")
end if
p2 = RS ( "paragraph2" )
if p2 <> "" then
p2 = Replace(p2, ">", "=NULL,")
end if
p3 = RS ( "paragraph3" )
if p3 <> "" then
p3 = Replace(p3, ">", "=NULL,")
end if
p4 = RS ( "paragraph4" )
if p4 <> "" then
p4 = Replace(p4, ">", "=NULL,")
end if
p5 = RS ( "paragraph5" )
if p5 <> "" then
p5 = Replace(p5, ">", "=NULL,")
end if
p6 = RS ( "paragraph6" )
if p6 <> "" then
p6 = Replace(p6, ">", "=NULL,")
end if
%>
<!DOCTYPE html>
<html class="no-js">
<head>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<title>Flexible Pipe Connectors & Expansion Joints - Mason UK Ltd</title>
<meta name="description" content="<%=RS( "product_briefdesc" )%>. Mason UK Ltd" />
<meta name="keywords" content="<%=RS( "product_name" )%> Mason UK Ltd <%=RS( "product_briefdesc" )%>, <%=RS( "product_category" )%>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main8.css">
<link href="css/navstyle.css" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="tinybox.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25736117-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript" src="http://www.glb12pkgr.com/js/68433.js" ></script>
<noscript><img src="http://www.glb12pkgr.com/68433.png" style="display:none;" /></noscript>
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=400,width=350,scrollbars=yes');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion({
collapsible: true
});
} );
</script>
<link href="jquery-ui.css" rel="stylesheet">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<%topnav%>
<%producthead%>
<a href="addcart.asp?pid=<%= RS( "product_id" )%>" onClick="return popitup('addcart.asp?pid=<%= RS( "product_id" )%>')">View Variations & Enquiry Basket</a>
<%productbody%>
<div id="accordion">
<h3>View Products & Enquiry Basket</h3>
<div style="height: 100%;">
<table><tr>
<td align="center" colspan="2"><h5><font color="black" face="arial">Description<br><br><br></font></h5></td>
<td align="right"><h5><font color="black" face="arial">Price<br><br><br></font></h5></td>
<td align="center"><h5><font color="black" face="arial">Quantity<br><br><br></font></h5></td></tr>
<form method="post" action="enquirybasket.asp">
<h3>Specific Product Types</h3> <%
cartcat = RS ( "product_name" )
CartSQLStr = "SELECT * FROM Cart WHERE cart_status=1 AND cart_category LIKE '%"& CartCat &"%' ORDER BY cart_name DESC;"
DrawAllCarts(CartSQLStr)
%>
<tr><td><input name="SQLtxt" type="hidden" value="<%=CartSQLStr%>"></td></tr>
<tr><td></td><td><font color="black" face="arial" size="1">
To add items to your basket simply enter the quantities desired next to the products and click on the 'Add to Basket' button</font>
</td><td></td><td align="center"><input type="image" name="submit" src="images/add.gif" WIDTH="135" HEIGHT="28"></td></tr>
</form>
</table>
</div>
<h3>Request Engineer Call Back</h3>
<div>
<h4>Call Back Enquiry Form</h4>
<form method="post" action="thanx.asp">
<%
if err = 0 then
%>
<label>
<span class="accordionspan">Name *</span><input id="name" type="text" name="name" value="<%%>"/>
</label><br><br>
<label>
<span class="accordionspan">Surname *</span><input id="name" type="text" name="lastname" value="<%%>"/>
</label><br><br>
<label>
<span class="accordionspan">Company</span><input id="name" type="text" name="company" value="<%%>"/>
</label><br><br>
<label>
<span class="accordionspan">Email *</span><input id="email" type="text" name="email" value="<%%>" />
</label><br><br>
<label>
<span class="accordionspan">Telephone *</span><input id="subject" type="text" name="Tel" value="<%%>" />
</label><br><br>
<label>
<span class="accordionspan">Product</span><input id="subject" type="text" name="Product" value="<%=RS( "product_name" )%>" />
</label><br><br>
<label>
<span class="accordionspan">Message *</span><textarea id="feedback" name="ad1" value="<%%>"></textarea><br><br>
<input width="100" type="submit" value="+ Submit" name="Submit" class="searchbutton">
</label>
<%
else
%>
<label>
<span class="accordionspan">Name *</span><input id="name" type="text" name="name" value="<%=Request.Form("name")%>"/>
</label><br><br>
<label>
<span class="accordionspan">Surname *</span><input id="name" type="text" name="lastname" value="<%=Request.Form("lastname")%>"/>
</label> <br> <br>
<label>
<span class="accordionspan">Company</span><input id="name" type="text" name="company" value="<%=Request.Form("company")%>"/>
</label><br><br>
<label>
<span class="accordionspan">Email *</span><input id="email" type="text" name="email" value="<%=Request.Form("email")%>" />
</label><br><br>
<label>
<span class="accordionspan">Telephone *</span><input id="subject" type="text" name="Tel" value="<%=Request.Form("Tel")%>" />
</label><br><br>
<label>
<span class="accordionspan">Enquiry About *</span><input id="subject" type="text" name="Product" value="<%=Request.Form("Product")%>" />
</label><br><br>
<label>
<span class="accordionspan">Message *</span><textarea id="feedback" name="ad1" value="<%=Request.Form("ad1")%>"></textarea><br><br>
<input width="100" type="submit" value="+ Submit" name="Submit" class="searchbutton">
</label>
<%
end if
%>
</form>
</div>
<h4>Related Products</h4>
<div class="topbit"> <%
CurrentProdCat = RS( "product_category")
CurrentProdID = RS( "product_id")
sqlString = "SELECT product_id, product_name, product_category, product_category2, product_date, pdf1, pdf2, pdf3, pdf4, pdf_desc1, pdf_desc2, pdf_desc3, pdf_desc4, CAD1, CAD2, CAD3, CAD4, cadDesc1, cadDesc2, cadDesc3, cadDesc4, main_pic, product_briefdesc, main_pic_desc FROM Products WHERE product_status = 1 AND product_category LIKE '%"& CurrentProdCat &"%' OR product_category2 LIKE '%"& CurrentProdCat &"%' AND (Not product_id = " & CurrentProdID & ") ORDER BY product_date DESC;"
DrawAllProducts(sqlString)
%>
</div>
</div><div class="textspan"><p>  </p></div>
</article>
<div class="sidebar">
<%
CurrentProdID = RS( "product_id")
RelProjectsSQLStr= "SELECT * FROM projects WHERE project_status=1 AND (projects.related_product1="& CurrentProdID &" OR projects.related_product2="& CurrentProdID &" OR projects.related_product3="& CurrentProdID &" OR projects.related_product4="& CurrentProdID &" OR projects.related_product5="& CurrentProdID &" OR projects.related_product6="& CurrentProdID &" OR projects.related_product7="& CurrentProdID &" OR projects.related_product8="& CurrentProdID &" OR projects.related_product9="& CurrentProdID &" OR projects.related_product10="& CurrentProdID &") ORDER BY projects.project_date DESC;"
DrawPDFandImLinks(RS)
socialmedia
DrawAllRelatedProducts(RelProjectsSQLStr)
%>
</div>
</div>
</div>
<%footer%>