CSS Tab Control - How do I show only the first div? - javascript

Okay...I know there are already loads of Pure CSS Tab Controls out there...
Here is my HTML
<div class="tabs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="tabPage1">
<p>
Hello World
</p>
</div>
<div id="tabPage2">
<p>
Goodbye World
</p>
</div>
<div id="tabPage3">
<p>
Another World, somewhere far, far away!
</p>
</div>
</div>
Here is my CSS
.tabs > div {
display: none;
}
.tabs > div:target {
display: block;
}
There's no styling for this example as I'm only concerned with the behavior.
You can try it here...http://jsfiddle.net/rcrdC/
How do I get it to display the first div until an anchor is clicked?
How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?

from here , you can make the last one be display at the beginning with like this (working example)
.tabs > div:target ~ div:last-child,
.tabs > div{
display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
display: block;
}
Just move the first tabpage to be the last.

This is an interesting challenge. Unfortunately, I don't believe the intended result can be achieved (purely) with CSS.
We can show the first div easily enough using:
div:first-of-type { display: block; }
But I don't know of a way to select our previously :targeted divs without using JavaScript.
Here I've set up some jQuery to apply class .active on any div with an id that equals that of a clicked anchor href. From there we can override display: none; on divs of that class with some simple CSS:
$('li a').each(function () {
$(this).click(function () {
var active = $(this).attr('href');
$(active).addClass('active');
});
});
And here's the related CSS:
div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }
And a working example: http://jsfiddle.net/fjKUw/1/

showing the first tab on load should not be that hard. You can use the :first-of-type pseudo class. Something like this:
.tabs > div{
display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
display: block;
}
The second question is a bit harder. The first tab will be shown again as soon as your target moves to an anchor outside the tabs. http://jsfiddle.net/rcrdC/4/ You need some way to preserve state. The 'real life' solution would be to add a few lines of javascript to achieve this, as suggested already by #StuartKershaw.
If you insist on going fully css, you could use a (hidden) radio button to preserve the state. It is a bit hacky (inputs are not meant for that) and you would have to change your markup a bit, but it should be feasible.
An example of what I mean can be found here: http://jsfiddle.net/rcrdC/5/
Note that I placed some hidden radio buttons between the tabs. I replaced the links to the tabs by labels that reference those radio's. Then I use a combination of the :checked and the + selector to make things work. And the tab that is visible on load is the one with checked attribute.
Again, this is not the way I would recommend. You are adding to your markup, with the sole purpose of achieving a certain layout, which should be the task of your css. Also the stuff you need to add is far from semantically correct...

Related

js code displays as text on hover

There's a hidden block with some javascript code inside <script type="text/javascript"></script> tag.
When I hover on the div I see this code as text. If I move js code outside the hidden block, the code is invisible. Why this happens?
You can check my demo here: http://goo.gl/XVlhXq Just hover on any product image.
Bug screen: http://goo.gl/Qvu7Hr
You have that CSS rule
.car-item:hover .hide * {
display: block;
}
Which also targets script tags.
Either do not add scripts inside the page markup (e.g. put it at the end of the body) or add a less specific CSS rule.
How about:
script {
display: none;
}
You got
.car-item .hide {
display:block;
}
overriding the
.hide {
display:none;
}
as it has more classes defined and therefore higher level by CSS Specificity
You can workaround this by either
removing display:block from .car-item .hide,
adding !important flag like
.hide {
display:none;!important
}
adding a couple classes to it, which is awful, like
.car-item .hide * {
display:none;
}
Also, this is unrelated, but you have
<div class="rating">
inside your
<div class="hide">
which doesnt sound right. Maybe that's a case, because having "height: 15px;" isn't quite "hiding".

Changing css on span click

I have a 3 spans I use to navigate to 3 different pages, they basically act like buttons for me, only a plugin I use require them to be spans (why I cant use buttons, so dont tell me to use buttons instead).
What I want to do is change background color on the clicked span, so if I am on page 3, span 3 is green for instance, and when I click on another span, that one changes and the previous green span goes back to normal.
Any idea on how to do this either in js,html or css?
This is easily achieved with jQuery.
jQuery
$('span').on('click', function() {
$('span').removeClass('active');
$(this).addClass('active');
});
CSS
span {
background: #c1c1c1;
display: block;
width: 100px;
height: 25px;
float: left;
}
span.active {
background: green;
}
html
<span class="active">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
This just adds the class active to the clicked element while removing any active before.
JSFIDDLE

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/

How to create a menu tree using HTML

I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this.
Can anyone help me solve this problem.
Thanks in advance.
Here is something very simple to start with.
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
EDIT
Implementing what I learned from #sushil bharwani.
Here is how I found the above URL i.e. at the courtesy of #sushil bharwani
http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1
You don't need to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)
You can make vertical dropdown menus or (prettier example) horizontal menus using the techniques explained in the Sons of Suckerfish article at HTMLDog.
Simple and meaningful.
Sample
Here is a simple example. In it you can see the hover functionality working perfectly.
The CSS is not good, because it's only a sample.
To work on the style, disable the display: none; line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none; line to get the submenus to hide and only show on hover.
HTML
<nav>
<p>Collapsing:</p>
<ul class="collapsable">
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
<p>Not collapsing:</p>
<ul>
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
</nav>
CSS
nav li:hover {
background: #EEEEEE;
}
nav li>ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: ": { ";
}
nav li>ul::after {
content: " } ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
display: inline-block;
}
nav li>ul>li+li::before {
content: ", ";
}
Here is a jsfiddle: http://jsfiddle.net/x8dxv/
With a bit of javascript and a knowledge around CSS you can convert a simple UL LI list to a menu tree. its right that you can use jQuery if you understand it.
You can narrow your google search by Menu Tree using UL Li. or CSS to convert UL LI to tree.
Navigation menus are mostly created using a combination of UL and LI.
<UL id="Menu">
<LI>Home</LI>
<LI>Links</LI>
</UL>
And you can insert UL inside LI element and thus get a tree structure for navigation.
Here is a simply way to do it if you don't want to write one yourself..
http://www.mycssmenu.com/#css-menu-demo
You might want to look into some of the online tools that builds the menu for you. E.g. CSS Menu Generator
I am not sure if you will find your answer, but here is a list with several different types of vertical menus
http://css.maxdesign.com.au/listamatic2/index.htm
no javascript is involved in those examples

Making an entire tab clickable

I'm making a template that is relying on a lot on a tabbed interface and in order to make it a bit more intuitive, I want to make sure that a user can click anywhere in the tab in order to activate it, instead of having to click the text inside the tab. In order to achive this, I'm currently doing this:
<div class="tab" onclick="javascript:window.location='http://example.com';">
tab text
</div>
for all the tabs I create. Does anyone have a more efficient way of doing this that they'd like to share with me/the community?
It would be more accessible if you did this:
<div class="tab">
tab text
</div>
Setting the <a> to block lets it fill the width, and you can give it height, padding etc. just like a <div>. You could even do away with the <div> entirely.
tab text
Of course, you'd add display: block; to .tab {} but you get the idea.
It's better in terms of semantics and compatibility to modify the <a> tag with CSS to do this, you could try something like this:
a.tab { display:block; }
And then also set other relevant attributes like the width/height, background color, etc for that.
Then instead your HTML looks like this:
<a class="tab" href="http://example.com">tab text</a>
Make your a tags block-level elements and put your tab padding on the link instead. For example, if you have…
<style type="text/css">
div.tab {
float: left;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
…then change it to this…
<style type="text/css">
div.tab {
float: left;
padding: 0;
}
div.tab a {
display: block;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
This will cause the link to take up the entire "body" of the tab, so you can click anywhere on it.
PPS: the short answer was, you can turn a A tag to display "block" mode, and add any padding, and that padding will catch the clicks. Floating the element (float:left, float:right) is an implicit "display:block". An "inline" element (such as SPAN) also uses padding to determine the area which gets the background image; but without affecting the layout.
The simplest way to do it would be something like this:
ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }
<ul class="tabs">
<li>Lorem</li>
<li>Ipsum</li>
...etc...
</ul>
<div class="clear"></div>
If you use the same width for each tab (depending on longest text in it), then you can even use a single gif background image:
ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }
The more advanced, classic way of doing tabs that adapt to varying font sizes and can use custom imags for the corners and filling is "Sliding Doors" :
http://www.alistapart.com/articles/slidingdoors/
Since you're opening up a new window, this is about as efficient as you're going to get, unless you want to put it into a function to shorten it for typing purposes.
Instead of using a <div/> tag, why not use an <a/> with appropriate styling to match what is currently applied to the <div/>? That way you can use the href attribute of the anchor rather than resorting to JavaScript to direct the user.
As mentioned by John Rasch, making a javascript function for typing purpose could help you, but also... dont make me think! If its clickable, show it with cursor: hand in the css!!!
how about:
<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
$(".tab").click(function(event){
window.location='http://example.com';
});
});
</script>
...
<div class="tab">
tab text
</div>
There are two techniques to achieve this
inline li + a
and
float li + block a
summariezed here
http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm

Categories

Resources