Click here to Skip to main content
15,904,416 members
Home / Discussions / Web Development
   

Web Development

 
GeneralRe: CSS Selector Problem Pin
Patrick Skelton28-Oct-10 8:44
Patrick Skelton28-Oct-10 8:44 
GeneralRe: CSS Selector Problem Pin
Manfred Rudolf Bihy28-Oct-10 11:57
professionalManfred Rudolf Bihy28-Oct-10 11:57 
GeneralRe: CSS Selector Problem Pin
Patrick Skelton28-Oct-10 23:22
Patrick Skelton28-Oct-10 23:22 
GeneralRe: CSS Selector Problem [modified] Pin
Manfred Rudolf Bihy29-Oct-10 1:25
professionalManfred Rudolf Bihy29-Oct-10 1:25 
GeneralRe: CSS Selector Problem Pin
Patrick Skelton2-Nov-10 3:17
Patrick Skelton2-Nov-10 3:17 
QuestionIncrease your webpage performance by using 80/20 rule of Vilfredo Pareto Pin
Sunasara Imdadhusen27-Oct-10 22:45
professionalSunasara Imdadhusen27-Oct-10 22:45 
QuestionYahoo. Google Oauth APIs.. Pin
Lijo Rajan27-Oct-10 4:07
Lijo Rajan27-Oct-10 4:07 
QuestionHtml element tooltip / title attribute in Opera kioskmode not showing? [modified] Pin
rolfhorror22-Oct-10 22:37
rolfhorror22-Oct-10 22:37 
QuestionNeed help on Windows Mobile 5.0 [modified] Pin
Rahul Chitte22-Oct-10 5:36
Rahul Chitte22-Oct-10 5:36 
QuestionSSL, but not via a web server Pin
TimWallace21-Oct-10 5:53
TimWallace21-Oct-10 5:53 
AnswerRe: SSL, but not via a web server Pin
Rob Smiley21-Oct-10 6:26
Rob Smiley21-Oct-10 6:26 
Questionie css display issue, I need advice Pin
cjoki15-Oct-10 3:30
cjoki15-Oct-10 3:30 
AnswerRe: ie css display issue, I need advice Pin
phil.o15-Oct-10 4:15
professionalphil.o15-Oct-10 4:15 
GeneralRe: ie css display issue, I need advice Pin
cjoki15-Oct-10 4:40
cjoki15-Oct-10 4:40 
GeneralRe: ie css display issue, I need advice Pin
phil.o15-Oct-10 5:10
professionalphil.o15-Oct-10 5:10 
GeneralRe: ie css display issue, I need advice Pin
cjoki15-Oct-10 5:57
cjoki15-Oct-10 5:57 
GeneralRe: ie css display issue, I need advice Pin
cjoki16-Oct-10 8:05
cjoki16-Oct-10 8:05 
GeneralRe: ie css display issue, I need advice Pin
phil.o26-Oct-10 3:41
professionalphil.o26-Oct-10 3:41 
GeneralRe: ie css display issue, I need advice Pin
W Balboos, GHB8-Nov-10 2:34
W Balboos, GHB8-Nov-10 2:34 
GeneralRe: ie css display issue, I need advice Pin
cjoki10-Nov-10 15:10
cjoki10-Nov-10 15:10 
QuestionTabbed Page in HTML Pin
swornavidhya_m14-Oct-10 1:26
swornavidhya_m14-Oct-10 1:26 
I'm creating a tabbed page. I'm stuck with setting the images to the tab headers.

Coding
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Try Tabbed Page Example</title>

<script type="text/javascript" >
/* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
Technical support: http://www.php-development.ru/

YOU MAY NOT
(1) Remove or modify this copyright notice.
(2) Distribute this code, any part or any modified version of it.
    Instead, you can link to the homepage of this code:
    http://www.php-development.ru/javascripts/tabview.php.

YOU MAY
(1) Use this code on your website.
(2) Use this code as a part of another product.

NO WARRANTY
This code is provided "as is" without warranty of any kind, either
expressed or implied, including, but not limited to, the implied warranties
of merchantability and fitness for a particular purpose. You expressly
acknowledge and agree that use of this code is at your own risk.


If you find my script useful, you can support my site in the following ways:
1. Vote for the script at HotScripts.com (you can do it on my site)
2. Link to the homepage of this script or to the homepage of my site:
   http://www.php-development.ru/javascripts/tabview.php
   http://www.php-development.ru/
   You will get 50% commission on all orders made by your referrals.
   More information can be found here:
   http://www.php-development.ru/affiliates.php
*/

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }


</script>

<style>

div.TabView div.Tabs {
  height: 36px; /* 24px; */
  overflow: hidden;
}


div.TabView div.Tabs a {
  float: left;
  display: block;
  width:  148px;/* 90px; */
  text-align: center;
  height:   36px;   /* 24px; */
  line-height: 30px; /*  To position the text of a inside the menu box */
  vertical-align: middle;
  background: url('images/tab1-h.jpg') no-repeat; /* url('tabs.png') no-repeat -2px -1px; */ 
  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #fff; /* #000080; */
  margin-right:1px;
}


div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background: url('images/tab1.jpg') no-repeat; /* url('tabs.png') no-repeat -2px -31px; */
}

div.TabView div.Pages {
  clear: both;
   /* border: 1px solid #404040; */
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 18px;
}

</style>
</head>

<body>

<div class="TabView" id="TabView-demo" style="width: 740px; height: 192px; text-align: left; background: url('images/bgTabMenu 2.jpg') no-repeat;">

    <!-- *** Tabs ************************************************************** -->
    
    <div class="Tabs" style="width: 740px;">
      <a>Academics</a>
      <a>Notifications</a>
      <a>Opportunities</a>
      <a>Announcements</a>
      <div style="width:144px; height:36px; float:right; top:0; margin:0; padding:0; background: url('images/tab2-h.jpg') no-repeat">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
    </div>
    
    <!-- *** Pages ************************************************************* -->
    
    <div class="Pages" style="width: 740px; height: 156px; text-align: left;">
        
    	<!-- *** Page1 Start *** -->
          
    	<div class="Page">
    		<div class="Pad">    
            	<br>
            	<p>    You are Viewing Tab Page 1.</p>  
    		</div>
    	</div>
          
    	<!-- *** Page1 End ***** -->
          
    	<!-- *** Page2 Start *** -->  
            
     	<div class="Page">
    		<div class="Pad">
        		<br>Categories include:<br>    
            	<br>
            	<p>    You are Viewing Tab Page 2.</p>
        
    		</div>
    	</div>
        
    	<!-- *** Page2 End ***** -->
        
        
    	<!-- *** Page3 Start *** -->
          
        <div class="Page">
            <div class="Pad">    
            	<br>
            	<p>    You are Viewing Tab Page 3.</p>    
            </div>
        </div>
    
    	<!-- *** Page3 End ***** -->
    	
    	<!-- *** Page4 Start *** -->
          
        <div class="Page">
            <div class="Pad">    
            	<br>
        		<br>Categories include:<br>          		
        		<br>Categories include:<br>   

            	<p>    You are Viewing Tab Page 3.</p>    
            </div>
        </div>
    
    	<!-- *** Page4 End ***** -->

</div>
  
<script type="text/javascript">
  tabview_initialize('TabView-demo');
</script>

</body>

</html>


The above coding is working fine how i need. But still i need some modifications which satisfies my work defenition..

And the modifications which i need to satisfy client requirement are mentioned as below.


Modifications needed only in setting the background of the tabs as follows:
1. Acadamics tab contains 2 images (tab1-h.jpg) as background and when hover/clicked the image (tab1.jpg) should get displayed.

2. All the other 3 tabs uses the images (centre-h.jpg) and (centre.jpg) during hover/clicked of the tabs.

I need the same functionality which is currently present in my code. Only i need the modifications which i've mentioned...

I need it urgently.

Thanks
M.Sworna Vidhya
GeneralRe: Tabbed Page in HTML Pin
Murugesan G14-Oct-10 20:51
Murugesan G14-Oct-10 20:51 
QuestionWant to display images from database with thumbnails but I have errors [modified] Pin
dababy13-Oct-10 5:43
dababy13-Oct-10 5:43 
AnswerRe: Want to display images from database with thumbnails but I have errors Pin
Not Active14-Oct-10 0:17
mentorNot Active14-Oct-10 0:17 
AnswerRe: Want to display images from database with thumbnails but I have errors Pin
NeverHeardOfMe14-Oct-10 3:46
NeverHeardOfMe14-Oct-10 3:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.