|
HTML - Default Slide For Tabbed Content Box
I have a tabbed content box using jQuery, but I want to show HTML upon loading that is not one of the actual tabs. Here is my code so far.
Code: <div id="tabs_container">
<ul id="tabs">
<li><a class="imgrep exceed" href="#tab1">tab1</a></li>
<li><a class="imgrep fun" href="#tab2">tab2</a></li>
<li><a class="imgrep envelope" href="#tab3">tab3</a></li>
<li><a class="imgrep love" href="#tab4">tab4</a></li>
<li><a class="imgrep ceo" href="#tab5">tab5</a></li>
<li><a class="imgrep embrace" href="#tab6">tab6</a></li>
<li><a class="imgrep shoes" href="#tab7">tab7</a></li>
<li><a class="imgrep celebrate" href="#tab8">tab8</a></li>
</ul>
</div>
<div id="tabs_content_container">
<!-- code I want to show as the default slide -->
<div class="tab_content" style="display: block;">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Our Recipes for Success</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
</div>
</div>
<!-- end default code -->
<!-- Tab 1 -->
<div id="tab1" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Exceed Expectations everyday.</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>2 determination</li>
<li>1 positive attitude</li>
<li>2 self-motivation</li>
<div id="logo-blue"></div>
</ul>
</div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #d18c02;">Have fun.</span></p>
<p class="inside_p">We get to do the unthinkable - work and have a good time. We share that philosophy through. Fun is what makes it so invaluable.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>1 passion</li>
<li>3 positive attitude</li>
<li>1 goofyness</li>
</ul>
</div>
</div>
... more tabs...
Similar TutorialsHello friends, As a Newbie.. I got a live project and im bowled in a part Attached is the target/goal image Need to be done in html/css format Attached is my work. can anyone help me in creating tabbed pane like in screen shot image? regards Could someone please give me some sample code to show how to create a tabbed panel in html>? thanks a lot! My first post what a beautiful forum .......anyway ........i know i can use and anchor tag and set it to open in a _blank window, but how do i make it so that the window which opens ....... opens in a new tab in IE 7 or Firefox 2.0 ? So, I'm using Dreamweaver to build this site. I know a bit about HTML, but really not very much. I used the built in tabbed panels, which I'm going to be editing to look better soon, one I get it working. For whatever reason, it's not working......that is, the tabs aren't separate. I'm guessing I have overlooked something, but it would be helpful if someone could point it out to me. The correct CSS and JS files are mentioned, and the files themselves are in the correct place. Yeah.....comments on the site are welcome too, though it is still under construction for awhile. Hi, It's quite popular to have a tabbed pane in web pages nowadays. We can have sub-section of our page in the tabs and thus minimize scrolling. As such, I'm just wondering whether in terms of performance (not sure how browser render it), is it faster to just have HTML tables rather than those tabbed panes. eg: <With tabbed panes> Section 1 / Section 2 / Section 3 <With HTML tables> Section 1 Section 2 Section 3 Please comments. Thanks in advance. how do I create a section slide? This is where say, we have an item on this page. And we can expand/collapse that part from a click of a button? I can't seem to find the examples....but have seen them before. I hope you know what I mean basically just want some panel where I can click on a button, it will expand the contents (slide) and when I click on the button again, it will collapse the contents (sliding back up) I am in need of assistance. I have generated a script for a slide in menu and on its own it works alright. However when I try to set it up for multiple slide menus in the same webpage I run in to some issues. Primarily the script only working for one slide on both tabs. So tab 1 hides and and un hides menu and tab 2 does the same thing. Any Ideas???Also when the page loads i need the menu to be closed below I have included the base script Im using any help would be great...thank you <HTML> <head> <style> #tabdiv { z-index: 2; left: 220px; position: absolute; top: 210px } #textdiv { z-index: 1; padding-top: 10px; position: absolute; top: 200px; border-top-width: 1px; padding-right: 5px; padding-left: 5px; border-left-width: 1px; border-left-color: #000099; left: 0px; border-bottom-width: 1px; border-bottom-color: #000099; padding-bottom: 10px; width: 220px; color: black; border-top-color:GREEN; background-color:GREEN; border-right-width: 1px; border-right-color:GREEN } </style> <SCRIPT language=JavaScript1.2> if (document.layers) {n=1;ie=0} if (document.all) {n=0;ie=1} function init() { if (n) tab = document.tabDiv if (n) poptext = document.textdiv if (ie) tab = tabDiv.style if (ie) poptext = textdiv.style } var tabShow=1; function myfunction() { if (tabShow == 1) { if (n) { tab.visibility = "hide"; tab.left = 0; tab.visibility = "show"; poptext.visibility = "hide"; tabShow = 0; return; } if (ie) { tab.visibility = "hidden"; tab.left = 0; tab.visibility = "visible"; poptext.visibility = "hidden"; tabShow = 0; return; } } if (tabShow == 0) { if (n) { tab.visibility = "hide"; tab.left = 220; tab.visibility = "show"; poptext.visibility = "show"; tabShow = 1; } if (ie) { tab.visibility = "hidden"; tab.left = 220; tab.visibility = "visible"; poptext.visibility = "visible"; tabShow = 1; } } } </SCRIPT> </head> <body onload=init()> <!-- Slide-in table start --> <DIV id=tabDiv><B>IRA</B><a href="javascript:myfunction();"> <IMG alt="Click here to close" src="images/popout_menu.gif" width=14 border=0></a></DIV> <DIV id=textdiv> <font face="Verdana" size="2"><B>INDIVIDUAL RETIREMENT ACCOUNT</B></font><br> <font face="Verdana" size="1">IRA is held at a custodian institution such as a bank or brokerage, and may be invested in anything that the custodian allows (for instance, a bank may allow certificates of deposit, and a brokerage may allow stocks and mutual funds). Unlike the Roth IRA, the only criterion for being eligible to contribute to a Traditional IRA is sufficient income to make the contribution.Transactions in the account, including interest, dividends, and capital gains, are not subject to tax while still in the account, but upon withdrawal from the account, withdrawals are subject to federal income tax. </font><br> </DIV> <!-- Slide-in table end --> </body> </HTML> </HTML> I have tried to find a code for my site to add a slide show for photo's with no luck, has anyone done this and can anyone help me out here? Thanks I'm trying to figure out how to create a slide show within a static sliced webpage. I'm self taught with Fireworks and am pretty confident however always willing to learn from others whenever I get the chance. The page is for a friend, they have asked me if its possible to have a maximum of 3 images that roatate on a slide show within the page, so the first picture will be there for 4 seconds then the next and so on. Thanks in advance... Hi all, I would like to display the left 2/3rds of an image, and then immediately pan to the right to switch the view to the right hand side 2/3rds of that image. How can I do this? I've tried the marquee keyword, but that starts with a blank space then slides in the whole image. I want to start with the left 2/3rds then pan to the right 2/3rds then stop. See here for an example: http://www.pinecrestmaine.com/gorham.htm Any ideas how this is done? Thanks, Sandi Well, im using a cool slider to make the page slide to the designated anchor-name. In this case I want the page to slide down to the contact info, when the contact button is clicked at the top. Problem is, that that button is located inside the header.php file... and the browser reacts strange whenever its pressed. HTML Code: <div class="g-contact"><a href="#aanpak" rel="" id="anchor1" class="anchorLink" title="Contact">Contact</a></div> when clicked it should slide smoothly down to: HTML Code: <a name="aanpak" id="anchor1"></a> Please have a look at the situation here. Thanks. I think I kinda know how the coding is thinking... but I wouldnt have the slightest clue how to make it act like I want it to. Help much appreciated, cheers. I want to have multiple banners appear every couple seconds like a slide show. Here is my website. (http://www.dubcityfilms.com) The banner is the one with the cars on it. I want to have 5 or so different ones that randomly switch. Can someone help me with this? Thanks. This is what I have in mind, only I would like it a bit better looking http://www.dynamicdrive.com/dynamici...lide/index.htm So basically, a menu thats hidden until you hover over the small part thats visible - then it slides out. Is it possible to do in jquery or mootools or similar ? I cant code myself so some tutorial would be helpful. Thanks in advance I have a CD that has a slide show of a fashion show. How can I add this slide show to my web site so that by just clicking on a designated word the slide show will begin? Much appreciated, Jaymom Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe This slide show, which I like the functions of, show the size of the show by the side of the photo. Is there a way, other than changing all pictures to about the same size that I can keep the slide show uniform? show at link below TIA http://www.nomagicneon.com/customerphotos.html Hi, I like to show picture like a slide show like below link http://www.giftedpenguin.co.uk/ PLease tell me how to do that,do i need to do j-script or something? thanks Hi there, you might remember me from this thread. (which was resolved by Mandarin, thanks you!) Now Im back with another, kind of the same thing: "Click -> Locate page -> & then slide down?" Allow me to explain: So ive got this header.php right. And the header file is included at every page. All the links in the header.. link to 1 file. (diensten.php) BUT, each link links to different areas within that file... So what I would like to achieve is that when a link in the header is clicked, it slides down to the correct page-area. Porblem is.... after clicked, is doesnt even go the right page. I think the smooth slider jquery-plugin is interfering someway. I already laid down the groundwork inside the header. Please have a look here. Would my wish be possible? Or should I just lay it to rest? Thanks. Hi, I'm building a web site for someone. At the top of the page is the logo and some flowing lines going from left to right on screen. If you look he http://www.chrisvanochten.com/clients/voicecontrol/ and start resizing your browser window then you would see the content at the bottom moves along so that it is always in the center. The problem I have is that the image on the top will not do this. This is because it's a background image. I want the image to be positioned so that the logo is above the latest news section. I have tried using a normal image and aligning it to the center (scroll down on the page above for this) but the image is always anchored to the left of the screen if the image is larger than the browser window. Is there anyway to set the background image so that it is anchored in position and that it will run off both the left and right hand side of the screen (as opposed to just the right hand side)? Hi, I am trying to solve this for few days, but i cant slove it, so frustrated and nervous. Following is my coding: <select name="lang" onChange="form.redirect.value='index.html'; form.submit()" > <option value=0>English</option> <option value=1>English</option> <option value=2>Francais</option> <option value=3>Castellano</option> <option value=4>Deutsch</option> </select> how can i set English as default? yet user can see the Word "English" appear as deafult. HElp me please..Thanks and appreciate for your help :-) |
|||||||