Click here to Skip to main content
15,887,214 members
Home / Discussions / Web Development
   

Web Development

 
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 
GeneralRe: Want to display images from database with thumbnails but I have errors Pin
dababy14-Oct-10 4:33
dababy14-Oct-10 4:33 
GeneralRe: Want to display images from database with thumbnails but I have errors Pin
NeverHeardOfMe14-Oct-10 4:39
NeverHeardOfMe14-Oct-10 4:39 
QuestionRe: Want to display images from database with thumbnails but I have errors Pin
Luc Pattyn14-Oct-10 4:57
sitebuilderLuc Pattyn14-Oct-10 4:57 
AnswerRe: Want to display images from database with thumbnails but I have errors Pin
T M Gray21-Oct-10 10:14
T M Gray21-Oct-10 10:14 
GeneralRe: Want to display images from database with thumbnails but I have errors Pin
Anupam Singh2-Jan-11 19:57
Anupam Singh2-Jan-11 19:57 
QuestionSetting background image for iframe? Pin
swornavidhya_m12-Oct-10 4:54
swornavidhya_m12-Oct-10 4:54 
AnswerRe: Setting background image for iframe? Pin
Jules VDV26-Oct-10 15:46
Jules VDV26-Oct-10 15:46 
QuestionSimple CSS Question. Pin
Dalek Dave11-Oct-10 8:59
professionalDalek Dave11-Oct-10 8:59 
AnswerRe: Simple CSS Question. [modified] PinPopular
DaveAuld11-Oct-10 9:06
professionalDaveAuld11-Oct-10 9:06 
GeneralRe: Simple CSS Question. [modified] Pin
Dalek Dave11-Oct-10 10:28
professionalDalek Dave11-Oct-10 10:28 
GeneralRe: Simple CSS Question. Pin
DaveAuld12-Oct-10 1:18
professionalDaveAuld12-Oct-10 1:18 
AnswerRe: Simple CSS Question. Pin
Pete O'Hanlon11-Oct-10 9:47
mvePete O'Hanlon11-Oct-10 9:47 
GeneralRe: Simple CSS Question. Pin
Jules VDV26-Oct-10 4:46
Jules VDV26-Oct-10 4: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.