?
Solved

Javascript Hide and Fade effect for tabs

Posted on 2013-01-12
3
1 solution
Medium Priority
?
367 Views
Last Modified: 2013-05-15
This page here has tabs for each advert section, but I'd like to show the sections below the initial 'about us' text, as well as having the separate tabs, and also having a fade effect for the tab transition, similiar to this page here.

Here is the javascript file 'DirectoryBrowser.js' which handles the tabs currently:

$(window).load(function(){
	
	$('.tab:not(.aboutus)').hide();
	
	$('.tabs li').click(function(){
		var thisAd = $(this).parent().parent();
		$(thisAd).children('.tab').hide();
		$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
		$('.tabs li').removeClass('active');												 	
		$(this).addClass('active');
	});

	
	if(window.location.hash) {
		if (window.location.hash == "#map") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.map').show();
			$('.tabs li').removeClass('active');												 	
			$('.maptab').addClass('active');
		}
		if (window.location.hash == "#voucher") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.vouchers').show();
		}
	}	
	
});

Open in new window



And the html for the full page advert:

<!--#include virtual="/System/Startup_Public.asp"-->
<%
if isnumeric(""&getquery("id")) then
	adname = replace(getquery("ad"),"-"&getquery("id"),"")
	sqlCommand = "SELECT * FROM uvw_DirectoryBrowser_Adverts WHERE ID = "&cint(getquery("id"))&" AND url = cast(? as varchar)"
	getrs rsAdvert,sqlCommand,array(adname)
else
	adname = getquery("ad")
	sqlCommand = "SELECT * FROM uvw_DirectoryBrowser_Adverts WHERE cast(ActiveAdvertGID as varchar(255)) = cast(? as varchar(255))"
	getrs rsAdvert,sqlCommand,array(adname)
end if

if getcount(rsAdvert) = 0 then 

	sqlCommand = "SELECT * FROM uvw_DirectoryBrowser_Adverts "&_
		"WHERE cast(FranchiseGID as varchar(255)) = cast(? as varchar(255)) "&_
		"AND dbo.RemoveNonAlphaCharacters(CompanyNameText) = cast(? as varchar(255));"
		
	getrs rsAdvert,sqlCommand,array(getquery("f"),adname)

	if getcount(rsAdvert) = 0 then 
		response.end
		response.redirect("/PageHandlers/404handler.asp")
		if ""&rsAdvert("FullPageAdvert") <> "True" then response.redirect("/PageHandlers/404handler.asp")
	end if

end if

' breadcrumb
sqlCommand = "SELECT * FROM AdvertDirectories WHERE AdvertGID = '"&rsAdvert("ActiveAdvertGID")&"';"
getrs tmp,sqlCommand,""
strDB_SQLCommand = "USP_Helper_GetDirectoryHierarchy '" & tmp("AdvertDirectory") & "'"

getrs rsDB_rsCrumbs,strDB_SQLCommand,""
strDB_Crumbs = ""
sFolder = lcase(Session("PublicFranchiseName"))
While Not rsDB_rsCrumbs.EOF
	sFolder = sFolder & "/" & rsDB_rsCrumbs("URL")
	'strDB_Crumbs = strDB_Crumbs & "<a href=""" & DirectoryBrowser_GetScriptName() & "?Action=Select&amp;PID=" & rsDB_rsCrumbs("GID") & "&amp;f="&Session("PublicFranchiseGID")&""">" & rsDB_rsCrumbs("DirectoryName") & "</a>"
	strDB_Crumbs = strDB_Crumbs & "<li><a href='/" & sFolder & ".html'>" & rsDB_rsCrumbs("DirectoryName") & "</a></li>"		
	rsDB_rsCrumbs.MoveNext
Wend
session("strFolder") = sFolder
rsDB_rsCrumbs.Close
If Left(strDB_Crumbs, 3) = " » " then
	strDB_Crumbs = Right(strDB_Crumbs, Len(strDB_Crumbs) - 3)
End if
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%=server.HTMLEncode(rsAdvert("CompanyNameText"))%>&nbsp;<%=server.HTMLEncode(Session("PublicFranchiseName"))%>, Essex | <%=server.HTMLEncode(Session("PublicFranchiseName"))%>&nbsp;<%=server.HTMLEncode(rsAdvert("CompanyNameText"))%></title>
<meta name="Description" content="<%=server.HTMLEncode(rsAdvert("CompanyNameText"))%>&nbsp;<%=(Session("PublicFranchiseName"))%> | <%=(Session("PublicFranchiseName"))%> Business Directory. <%=server.HTMLEncode(rsAdvert("CompanyNameText"))%> business <%=server.HTMLEncode(Session("PublicFranchiseName"))%>, Essex" />
<meta name="Keywords" content="<%=server.HTMLEncode(rsAdvert("CompanyNameText"))%> in <%=server.HTMLEncode(Session("PublicFranchiseName"))%>, business of <%=server.HTMLEncode(Session("PublicFranchiseName"))%>, <%=server.HTMLEncode(rsAdvert("CompanyNameText"))%>, Essex" />
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"-->
<link rel="stylesheet" type="text/css" href="/css/FullPageAdvert.css"/>
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/DirectoryBrowser.js"></script>
</head>
<body id="business">
<!--#include virtual="/Assets/Templates/Public/Franchise/FullPageAdvert.asp"-->
  <h1><%=server.HTMLEncode(rsAdvert("CompanyNameText"))%></h1>

  <div class="Advert">
     <div id="topcontact" class="clearfix">
	<ul class="contact">
		<% if len(""&rsAdvert("ContactTel"))>0 then %><li><img alt='<%=(Session("PublicFranchiseName"))%> business phone icon' src='/Assets/Images/SiteStructure/Advert-Template/phone.png' /><span><%=server.HTMLEncode(rsAdvert("ContactTel"))%></span></li><% end if %>
		<% if len(""&rsAdvert("ContactFax"))>0 then %><li><img alt='<%=(Session("PublicFranchiseName"))%> business fax icon' src='/Assets/Images/SiteStructure/Advert-Template/fax.png' /><span><%=server.HTMLEncode(rsAdvert("ContactFax"))%></span></li><% end if %>
		<% if len(""&rsAdvert("WebAddress"))>0 then %>
        	<% if instr("abc"&rsAdvert("WebAddress"),"http:")>0 then shttp="" else shttp="http://" %>
        	<li><img alt='<%=(Session("PublicFranchiseName"))%> website icon' src='/Assets/Images/SiteStructure/Advert-Template/web.png' /><a href='<%=shttp%><%=rsAdvert("WebAddress")%>' target='_blank' rel='nofollow'>Visit Website</a></li>
		<% end if %>
		<% if len(""&rsAdvert("ContactEmail"))>0 then %><li><img alt='<%=(Session("PublicFranchiseName"))%> business email icon' src='/Assets/Images/SiteStructure/Advert-Template/email.png' /><a class='image' href='mailto:<%=server.URLEncode(rsAdvert("ContactEmail"))%>'>Send Email</a></li><% end if %>
	</ul> 

	<ul class="contact address">
            <% if len(""&rsAdvert("ContactAddress1"))>0 then %><li><img alt='<%=(Session("PublicFranchiseName"))%> business address icon' src='/Assets/Images/SiteStructure/Advert-Template/address.png' /><span><%=server.HTMLEncode(rsAdvert("ContactAddress1"))%>,</span></li><% end if %>
            <% if len(""&rsAdvert("ContactAddress2"))>0 then %><li><span><%=server.HTMLEncode(rsAdvert("ContactAddress2"))%>,</span></li><% end if %>
            <% if len(""&rsAdvert("ContactTown"))>0 then %><li><span><%=server.HTMLEncode(rsAdvert("ContactTown"))%>,<% end if %>
            <% if len(""&rsAdvert("ContactCounty"))>0 then %><li><span><%=server.HTMLEncode(rsAdvert("ContactCounty"))%>,<% end if %>
            <% if len(""&rsAdvert("ContactPostcode"))>0 then %><li><span><%=server.HTMLEncode(rsAdvert("ContactPostcode"))%><% end if %>
         </ul>  
     </div>
	<ul class="tabs clearfix">
		<li class="aboutustab active">About Us</li>
		<li class="maptab">Map</li>
        <li class="featurestab">Features</li>
		<li class="openingtimestab">Open Hours</li>
		<li class="voucherstab">Voucher</li>
	</ul>
	<div class="tab aboutus">

       <div class="inner clearfix">        
			<%=rsAdvert("Descriptiontext")%>
            <div style="height:15px;"></div>
			<%
                strTempHTML1 = ""
                strTempHTML2 = ""
                For intTempLoop = 1 to rsAdvert("BulletPointLimit")
                    if abs(intTempLoop) mod 2 = 1 then
						bullet = rsAdvert("BulletPoint" & Trim(CStr(intTempLoop)))
						if len(""&bullet)>0 then strTempHTML1 = strTempHTML1 & "<li>"&bullet&"&nbsp;</li>"
                    else
						bullet = rsAdvert("BulletPoint" & Trim(CStr(intTempLoop))) 
						if len(""&bullet)>0 then strTempHTML2 = strTempHTML2 & "<li>"&bullet&"&nbsp;</li>"
                    end if
                Next
                %><ul class="abullets1"><%
                response.write(strTempHTML1)
                %></ul><ul class="abullets2"><%
                response.write(strTempHTML2)			
                %></ul><%
            %>


<div id="share" style="float:left;margin-top:2em;width:60%;clear:left;">
<!-- AddThis Button BEGIN -->
 <div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_twitter"><img alt="<%=(Session("PublicFranchiseName"))%> Share Twitter" src="/images/social/twitter.png" /></a>
  <a class="addthis_button_facebook"><img alt="<%=(Session("PublicFranchiseName"))%> Share Facebook" src="/images/social/facebook.png" /></a>
  <a class="addthis_button_google"><img alt="<%=(Session("PublicFranchiseName"))%> Share Google" src="/images/social/google.png" /></a>
 </div>
  <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
  <script type="text/javascript" defer="true" src="http://s7.addthis.com/js/250/addthis_widget.js#username=insideguides"></script>
  <!-- AddThis Button END -->
</div>
</div>
</div>

	<div class="tab map"><div class="inner">
        <% if len(""&rsAdvert("ContactPostcode"))>0 then %><iframe width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
        src="http://maps.google.co.uk/maps?q=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&amp;ie=UTF8&amp;hq=&amp;hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>,+United+Kingdom&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
        <% else %><p>The Map feature is not available for this business</p> <% end if %>
       </div></div>

    <div class="tab features"><div class="inner clearfix">
			<%
                strTempHTML1 = ""
                strTempHTML2 = ""
                For intTempLoop = 1 to rsAdvert("BulletPointLimit")
                    if abs(intTempLoop) mod 2 = 1 then
                        strTempHTML1 = strTempHTML1 & "<li>"&rsAdvert("BulletPoint" & Trim(CStr(intTempLoop))) & "&nbsp;</li>"
                    else
                        strTempHTML2 = strTempHTML2 & "<li>"&rsAdvert("BulletPoint" & Trim(CStr(intTempLoop))) & "&nbsp;</li>"
                    end if
                Next
                %><ul class="bullets1"><%
                response.write(strTempHTML1)
                %></ul><ul class="bullets2"><%
                response.write(strTempHTML2)			
                %></ul><%
            %>
    </div></div>
	<div class="tab openingtimes"><div class="inner">
    	<% if len(""&rsAdvert("OpeningTimes"))>0 then %><%=rsAdvert("OpeningTimes")%>
        <% else %><p>Opening Times have not been provided for this business</p><% end if %>
    </div></div>
	<div class="tab vouchers"><div class="inner">
    <% if len(""&rsAdvert("VoucherTitle")) = 0 then %>
        <p>This business has not added a voucher to their profile.</p>
    <% else %>
    	<div class="voucher">
        	<h3><%=rsAdvert("VoucherTitle")%></h3>
            <p><%=rsAdvert("VoucherText")%></p>
        </div>
        <div class="voucher-page-text">
        <p>Here is your Discount Voucher from <%=server.HTMLEncode(rsAdvert("CompanyNameText"))%>.</p>
        <p>You can print the voucher out and bring it along when you visit us or simply mention the Offer Code if one has been quoted.</p>
        <p>You can share this offer with your friends and family too!</p>
        <p>For any questions or full terms and conditions regarding this offer, please contact <%=server.HTMLEncode(rsAdvert("CompanyNameText"))%> directly. </p>
        <% end if %>
        </div>
  </div>
 </div>

<h2 class="mention">Please mention Inside <%=(Session("PublicFranchiseName"))%> when contacting <%=server.HTMLEncode(rsAdvert("CompanyNameText"))%>.</h2>
<br />
</div>
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"-->
</body>
</html>
<!--#include virtual="/System/Shutdown.asp"-->

Open in new window


Some suggestions and pointers would be great as I've not had much luck so far..
0
Comment
Question by:UName10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38770223
There are 34 validation errors including duplicate id declarations.  Clean up the code, before you try adding a new effect.

Cd&
0
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 2000 total points
ID: 38770369
Have you considered starting with a simple example, and building from there?

<!DOCTYPE html>
 <html>
 <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #content-container {
            background-color: gray;
        }
        .content {
            display: none;
            height: 20em;
            background-color: gray;
        }
        .current-content {
            display: block;
        }
        .tab {
            background-color: black;
            color: white;
        }
        .tab:hover {
            background-color: white;
            color: black;
        }
        .current-tab {
            background-color: gray;
            color: black;
        }
        #tab-container ul {
            list-style-type: none;
        }
        #tab-container ul li {
            float: left;
            margin: auto .4em;
        }
        .clear {
            clear: both;
        }
    </style>
 </head>

 <body>
    <div id="tab-container">
        <ul>
            <li id="tab-1" class="tab current-tab">Tab 1</li>
            <li id="tab-2" class="tab">Tab 2</li>
            <li id="tab-3" class="tab">Tab 3</li>
        </ul>
        <div class="clear"></div>
    </div>
    <div id="content-container">
        <div id="content-1" class="content current-content">
            This is the first tab.
        </div>
        <div id="content-2" class="content">
            This is the second tab.
        </div>
        <div id="content-3" class="content">
            This is the third tab.
        </div>
        <script>
            $('#tab-container li').click(function() {
                var currentTab = $('.current-tab');
                var clickedTab = $(this);

                if (!clickedTab.is(currentTab)) {
                    currentTab.removeClass('current-tab');
                    clickedTab.addClass('current-tab');


                    var currentContent = $('.current-content');
                    var clickedTabId = '#' + $(this).attr('id');
                    var newContent = $(clickedTabId.replace('tab', 'content'));

                    newContent.hide();
                    currentContent.fadeOut(750, function() {
                        newContent.fadeIn(500);
                        currentContent.removeClass('current-content');
                        newContent.addClass('current-content');
                    });
                }
            });
        </script>
    </div>
 </body>
 </html>

Open in new window

0
 

Author Comment

by:UName10
ID: 38822760
Ah that's great thank you - sorry I'd missed this one.

I'll have a go and come back... Many thanks for the suggestion.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Get the Guide
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question
How to Become a Web Developer
Article by: Ryan
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Get HTML5 Certified in July’s Course of the Month
Article by: Experts Exchange
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
How to Add a Watermark to an Image Using PHP (Part 1)
Video by: Marco
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
How to Create WordPress Blog With Free Self Host Service
Video by: Kimsea
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Advertise Here
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here