Making an entire tab clickable - javascript

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

Related

Dynamically set the height of a Button to be the height of a Textarea

This is a little thing, but I can't find anything at all in regard on how to go about doing it!
In the picture below, there is a textarea with a styled (and disabled) buttonpurely for aesthetic purposes:
But when you resize the textarea, this happens:
This doesn't look so great.
I want to tie the dynamic height of the textarea to the height of the button so that they stay together at whatever height, but I cant find anything like this.
How do you tie an elements styling to another's?
Note - Much more confident at PHP than jQuery/javascript, but obviously won't refuse answers in those languages.
Flexbox can do that
div {
display: inline-flex;
margin: 1em;
}
textarea,
botton {
flex: 1;
}
<div>
<textarea id="output">My size will be matched by the button</textarea>
<button>Click</button>
</div>
Here is a way to do it with HTML and CSS, no javascript or php code needed:
<div class="container">
<textarea rows="4" cols="50"></textarea>
<button type="button">Click Me!</button>
</div>
.container{
overflow: auto;
position: relative;
}
textarea, button{
float: left;
}
button{
position:absolute;
height:100%;
width:150px;
}
Here is a JsFiddle: https://jsfiddle.net/83uuk6gx/1/
EDIT:
You can remove the min-height, it will work without it (I removed it from code above and updated jsfiddle). Also I would not use flex as it will impose restrictions on earlier version of the browsers. IE9 does not support it I believe, here is more details on it: http://www.w3schools.com/cssref/css3_pr_flex.asp
The easiest way would be to wrap the textarea within another element and set the display property of that parent to flex, like so:
div{
display:flex;
}
textarea{
resize:vertical;
}
<div>
<textarea></textarea>
<button>text</button>
</div>
Depending on your requirements and other styles, you may need to adjust some of the other flexbox properties. See caniuse.com as well for details on browser support and prefixing.
Either disable the resise of textarea using the following :
textarea {
resize: none;
}
or use this fiddle(I did not create it) by making necessary changes.
http://jsfiddle.net/gbouthenot/D2bZd/

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

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...

Pure CSS & JS drop down menu - onmouseover issue

I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

Is there anyway in CSS to make the page width variable?

I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.
As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/
Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example
You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?
Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.
I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>​
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
​
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});​
Demo:
http://jsfiddle.net/foxbunny/EY9sc/

Categories

Resources