Tab menu in CSS - how to set an active tab - html

So I have a tab menu written in CSS. It works fine, but there's one problem - all tabs are not active until I click on one of them. And I'd like, for example, first tab to be active just when I load the homepage, so I can read a content that's in the tab, not needing to click on it to read it.
HTML:
<div class="tabmenu">
<div id="polski-tab" class="current">
Polski
<div>Put content here</div>
</div>
<div id="deutsch-tab">
Deutsch
<div>Put a different content here</div>
</div>
<div id="russian-tab">
Russian
<div>And thank God if it works</div>
</div>
<div id="french-tab">
French
<div>It works! :D hahaha</div>
</div>
<div id="greek-tab">
Greek
<div>Fabuloso :D</div>
</div>
</div>
CSS:
.tabmenu {
min-height: 178px;
position: relative;
width: 100%;
}
.tabmenu>div {
display: inline;
}
.tabmenu>div>a {
margin-left: -1px;
position: relative;
left: 1px;
text-decoration: none;
color: black;
background: white;
display: block;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid white;
}
.tabmenu>div:not(:target)>a {
border-bottom: 0;
background: linear-gradient(to bottom, white 0%, #eee 100%);
}
.tabmenu>div:target>a {
background: white;
}
.tabmenu>div>div {
background: white;
z-index: -2;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 20px;
border: 1px solid #ccc;
}
.tabmenu>div:not(:target)>div {
position: absolute;
}
.tabmenu>div:target>div {
position: absolute;
z-index: 1;
}

Modify your code like this:
.tabmenu>div:target>a, .tabmenu>div.current>a {
background: white;
}
.tabmenu>div:target>div, .tabmenu>div.current>div {
position: absolute;
z-index: 1;
}
To use javascript the fastest way is use jQuery library, by adding:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
before the closing </body> tag and then use following piece of code:
<script>
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
</script>
jsFiddle - updated.

Related

How do I join my list and div using css?

I need your help.
I am attempting to no avail, in trying to figure out as to how to make my li join neatly with my div. I have attached an example of the problem as well as the desired result. Maybe there are some CSS tricks to this, but I am no where near that skilled to figure this out on my own, only to see that it has been done on some websites.
Problem:
Desired result:
window.onload = function() {
$("#list li").click(function(){
var $li = $(this);
var selector = $li.data("show"); // => "#item1"
$('.item').addClass('hidden');
$('ul').children().removeClass('selected');
$(selector).removeClass("hidden"); //but show matching item
$(this).addClass("selected"); //but show matching item
alert($(this).attr("class").split(' '))
});
$("#list li").eq(0).click();
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
#container {
bottom: 0; left: 0; top: 0; right: 0;
margin: auto;
position: absolute;
width: 900px;
height: 600px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
#list li {
margin:0 0 10px 0;
background: #FFF;
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
.item {
width: 100%;
height: 100%;
border: 1px solid red;
}
#menu {
float: left;
width: 25%;
height: 100%;
}
#content {
float: left;
width: 75%;
background-color: rgb(238,238,238);
height: 100%;
}
.hidden{ display:none; }
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.selected {
background: rgb(238,238,238) !important;
color: rgb(51,51,51) !important;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul id="list">
<li data-show="#item1">File Information</li>
<li data-show="#item2">My Summary</li>
<li data-show="#item3">Comments</li>
</ul>
</div>
<div id="content">
<div id="item1" class="hidden item">FILE INFORMATION</div>
<div id="item2" class="hidden item">MY SUMMARY</div>
<div id="item3" class="hidden item">COMMENTS</div>
</div>
</div>
I will give you the conceptual solution that can easily be achieved with pure CSS.
1) Set the list item to have borders at top, bottom, and left.
2) Then bring the list item above the larger box with z-index.
3) Finally, you will need to either shift the list to the right or the box to the left by the amount of your border width, so that they overlap to cover the small part of the border that is supposed to stay hidden under the list item.
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
width: 205px;
z-index: 40;
position: absolute;
}
Please try this
Hope this help you.
You are seeing the border of the file information. There are two possible solutions:
1 - don't put a left border on the .item class. (But this will still not look right)
2 - Make the li overlap the content area slightly. You'll need to raise the z-index of the content and use a negative margin to bring them together.
Not the prettiest solution, but if you are okay with removing the white background of the "inactive" tabs, you can do some overlapping:
Demo
Your #list and #list li will need to be changed like this:
#list {
list-style-type: none;
padding: 0;
margin: 0;
position: relative; /*added*/
left: 1px; /*added*/
}
#list li {
margin:0 0 10px 0;
/*removed background*/
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}

Bottom to top, right to left position small rectangles inside a bigger one (calendar)

I'm building a calendar, and this is what I'm after:
http://postimg.org/image/vpd10bkqt/
So basically I want to show all the events as a small rectangle inside the
appropriate day's big rectangle.
The difficulty is the first element should be shown at the bottom right corner,
and should be filling form right to left and bottom to top.
I think the simplest solution would be if a rectangle would be a
span element with a solid border around it, and it contains a dot as text.
Here is a jsfiddle demo:
http://jsfiddle.net/jv392gmv/
CSS:
section#calendar {
width: 970px;
}
time {
display: inline-block;
width: 120px;
height: 120px;
margin: 4px;
text-align: right;
font-size: x-large;
font-weight: 900;
border: 1px solid #c3c7c7;
border-radius: 5px;
background: #fff;
}
time.notmonth {
background: #777;
}
section#calendar h1 {
text-align: center;
}
section#calendar time a {
display: inline-block;
width: 110px;
height: 110px;
margin: 5px 5px 0 0;
padding: 3px 3px 0 0;
color: #f55b2c;
text-decoration: none;
}
section#calendar time a:hover {
color: #000;
}
span.event {
top: 10%;
left: 7px;
position: relative;
border-color: #222;
border-style: solid;
border-radius: 5px;
border-width: 5px;
}
HTML:
<section id="calendar">
<h1>
←
July 2015
→
</h1>
<time datetime="2011-05-29">
29
<!-- <span class="event">.</span> -->
</time>
</section>
Anyone has any idea how to achieve it?
The original time tag idea came from here:
http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata
In the container, set a rotation of 180 deg.
In the children, rotate again to get them upright
.base {
width: 140px;
height: 140px;
border: solid 1px black;
position: relative;
}
.test {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.children {
width: 40px;
height: 40px;
background-color: lightblue;
transform: rotate(180deg);
display: inline-block;
margin: 2px;
}
<div class="base">
<div >123</div>
<div class="test">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
</div>
</div>

CSS arrow. Only a portion of the arrow is being displayed

I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>

Absolute vs Fixed Positioning

I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%. Here comes the problem, the height 100% just gets the height of the browser window so when I scroll down on the page it remains at the top. How can I set its height to full page height not browser's?
Fiddle.
HTML:
<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
<button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
<textarea rows="5">Write a short experience about yourself</textarea>
<textarea rows="5">Write what do you want in return</textarea>
<button id="send_offer">Send Offer</button>
</div>
CSS:
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: absolute;
top: 0;
left: 0;
}
#offer_help {
background-color: #eee;
border: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
display: none;
width: 400px;
height: 250px;
position: fixed;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
}
.offer_a_help textarea {
width: 90%;
padding: 2px;
font-family: Calibri;
}
.offer_a_help textarea:first-child {
margin-top: 20px;
}
.offer_a_help button {
float: right;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
background-color: #ddd;
padding: 5px;
border-radius: 3px;
}
How can I set its height to full page height not browser's?
position: absolute takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed and you will see better results.
Use position:fixed.
http://jsfiddle.net/ryJEW/2/
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}

Using <object> to embed pdf, does not expand to wrapping div in chrome

It's not a massive deal but would like consistency across browsers and the document would be easier read if it fills the box. In Chrome, increasing the 'width' only increases the margin around the pdf and not itself as it does in Firefox. Any ideas appreciated.
.box {
height: 70%;
margin-left: 22%;
margin-top: 6%;
width: 57%;
}
<div class="box">
<object data="/name.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.</p>
</object>
</div>
EDIT: I have added some parameters on the pdf such as ..name.pdf#zoom=100%" but still does not change up in Chrome. Anyone ? ?
Just use iframe instead of object if you don't need the data of pdf,
<div class="tip-win is-display">
<div class="tip-head">
<span class="tip-title">Tips</span>
<span class="close-btn" id="close-btn">✖</span>
</div>
<div class="tip-content" id="tip-content">
<div>This is a test message</div>
</div>
<div class="tip-foot">
<a class="mini-button blue tip-btn" id="ok-btn">ok</a>
<a class="mini-button blue tip-btn" id="cancel-btn">cancel</a>
</div>
</div>
<div class="tip-div">
<iframe id="tip-iframe" class="tip-iframe is-display" height="422" width="602" ></iframe>
</div>
<div class="pdf-iframe" id="targetElementID">
<iframe id="ipdf" src="yyytest.pdf" height="100%" width="100%"></iframe>
</div>
css:
.tip-win {
position: absolute;
z-index: 100;
background: #f6f6f6;
border: 1px solid #bbb;
height: 420px;
width: 600px;
top: 15%;
left: 30%
}
.tip-div {
position: absolute;
z-index: 20;
top: 15%;
left: 30%
}
.pdf-iframe {
position: absolute;
z-index: 10;
margin-top: 45px;
height: 90%;
width: 100%
}
.tip-iframe{
border:none;
}
.is-display{
display: none;
}
.tip-head{
border-bottom: 1px solid #ddd;
background: #eee;
}
.tip-title{
display: inline-block;
margin: 5px 20px;
}
.close-btn{
height: 32px;
line-height: 32px;
float: right;
text-align: center;
width: 32px;
border-left: 1px solid #bbb;
}
.close-btn:hover{
cursor: pointer;
background: #ccc;
}
.tip-content{
height: 336px;
overflow-y: scroll;
padding-left: 20px;
}
.tip-foot{
border-top: 1px solid #ddd;
padding: 10px;
text-align: center;
background: #eee;
}
.tip-btn{
font-size: 12px;
padding: 4px 16px !important;
}
<script>
$('#tip-content').html(message);
$('.is_display').css('display','block');
$('.sb-btn').attr('disabled','disabled');
$('.tip-btn').click(function(){
var id = $(this).attr('id');
if(id==="ok-btn"){
closeTip();
send2SB02();
}else{
closeTip();
}
});
// “X”
$('#close-btn').click(closeTip);
function closeTip() {
$('.is_display').css('display','none');
$('.sb-btn').removeAttr('disabled');
return false;
}
</script>