I am trying to create a set of tabs like what you'd find in a dialog box in Windows, where each tab links to a different 'panel' of information. As you may know, the key features of these types of tabs are that a) they auto-stretch to fit both their contents and the width of the container, and b) they do this regardless of the number of tabs (i.e. they can be created dynamically).
So far, I have managed to create this:
This is created using several <table> elements. I am looping through the tabs (SQL/PHP), and when the number of tabs reaches 5, the table tag is closed and a new table is created. So in the screenshot above, there are 3 tables (I found this easier than trying to get divs to replicate this behaviour). When you click a tab, it's corresponding parent table is moved to the bottom of the 'set'.
While this is working quite well, I would like to have the table columns (<th>) stretch to fit in a nicer way (for example I would expect tabs 'Test 6' and 'Test7' to be equal in width).
The table code looks like this:
table.tabs_grey {
text-align: left;
border-collapse: collapse;
margin: 0px;
padding: 0px;
}
table.tabs_grey > thead > tr > th:last-child {
width: 1%;
white-space: nowrap;
}
table.tabs_grey > thead > tr > th.active > div {
width: auto;
margin: 0px;
padding: 4px 10px 4px 10px;
text-align: center;
border: 1px solid #4C758A;
background: #5292B3;
font-size: 12px;
color: #FCFCFC;
cursor: default;
}
table.tabs_grey > thead > tr > th.inactive > div {
width: auto;
margin: 0px;
padding: 4px 10px 4px 10px;
text-align: center;
border: 1px solid #bebebe;
background: #EBEBEB url('Images/gui.shade.trans.24.png');
font-size: 12px;
color: #4e4e4e;
cursor: default;
border-radius: 10px 0px 0px 0px;
}
If I remove the "width: 1%;", I get this:
Is there a way to achieve the kind of spacing I have described? I'm sure the way I've done it is a bit crazy, so any tips would be greatly appreciated. Thanks.
Related
I need help related to disappearance of the popup in each day cell block, When there are too many events in a day, a link that looks like “+2 more” is displayed. How to avoid this popup, my requirement is default eventLimit: 2 and next for the remaining it should show a button, and click on this button, It should navigates to day mode similar as in the above screenshot.
Thanks & Regards,
Prabha
Then use fullcalendar.io/docs/eventLimitClick to change what happens when you click that link. If you notice, one of the options is "day". – ADyson
Thanks a lot Adyson
Using the below function in calendar intialisation we can remove the default more link text '+n more'.
eventLimitText: function() {
return " ";
}
And using the following CSS(in HTML style tag) we can insert a button like appearance instead of default text.
a.fc-more {background-size: contain;cursor: pointer;width: 14px;height: 6px;
letter-spacing: 1px;
background-image: url(dots.png);
background-color: #F0F0F0;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 4px;
margin-top: 10px;
float: right;
background-position: center;
}
dots.png is the image that has 3 horizontal dots.
Using the below function in calendar instantiation we can click on 'more button' to change to day view.
eventLimit: 3,
eventLimitClick: function(cellInfo) {
calendar.gotoDate(cellInfo.date);
calendar.changeView('timeGridDay');
}
Below image is my local calendar click more button view with hover text(click for more cells) and the hover css style as:
a.fc-more:hover:after {
content: 'Click for more cells';
font-size: 9px;
text-align: center;
position: absolute;
margin-top: -2px;
margin-left: 15px;
line-height: 2em;
width: 12em;
border-radius: 0.3em;
background: #ffffcc;
display: inline-block;
}
I am making a Ruler scale using html, css, js, whose length is supposed to be fixed always. On clicking the scale, between any two bars, a prompt will be generated and the user will then input a number which signifies the no. of sections by which the scale length (between any two bars) will be divided in equal parts and get displayed on it.
e.g. if initially the scale is |_____|_____|_____| , then on clicking 2nd bar and entering divide by 2, the scale should look like|_____|__|__|_____|
I referred to the following link for making the ruler:
How to make a ruler scale in HTML and CSS
But in the answer given in the above link, the user has to manually change the value of the "data-items" attribute, to make different no. of sections every different time, and also, on changing its value, the overall size of the scale also increases, which contradicts my case.
This is what I have coded so far and I really don't know how to split any bar on user input without changing the overall length.
https://jsfiddle.net/yoshi2095/pvjhLggz/9/
HTML:
<div>
<ul class="ruler" data-items="10"></ul>
</div>
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
JS:
function inputNumber() {
var inputNum = prompt("Divide by");
$("a").attr("data-items",inputNum);
}
$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
var ruler = $(this).empty(),
len = Number(ruler.attr("data-items")) || 0,
item = $(document.createElement("li")),
i;
for (i = 0; i < len; i++) {
ruler.append(item.clone().text(i + 1));
}
});
});
Any help would be greatly appreciated. Thanks.
I have some html data coming from database dynamically. In some of the html the div is properly closed and some records the the div inside is not properly closed with .
I put these things into a jquery tab but when the unended div comes the tab stop working. I want something in which the the open div's will be ended dynamically.
If you have access to the HTML before it's rendered then it's easy: you let jQuery chew it for you. Example:
jQuery("<div>Hello <span>Sir</span>")[0].outerHTML;
Will give you:
<div>Hello <span>Sir</span></div>
So if you are able to get the received HTML in a variable "dbStringName" before it's inserted into the tab so just do
var myCleanedUpHTML = jQuery(dbStringName)[0].outerHTML;
and put that in your tab.
You might want to look into making sure the html that is put into the database is all closed properly to begin with.
Or you could use javascript's indexof to check if the div is properly closed, and if not, add a closing div.
Something like:
if (!dbStringName.indexOf("</div>") > -1){
//add div here
}
use this css to table using div
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
So I am trying to add a custom style to the select2 jquery plug, it is a tag like multi selector plugin. The way that select2 renders selected "tags" guides my css rules to try and style. select2 renders a <div> containing the selected tag text followed by an <a> to remove that selected tag if the user desires.
I want the close btn and the tag text to look like one block. I have it almost where I want but you can see that the <a> element and the div element vary in height by a pixel or two. I thought maybe this was a display:inline versus display:block issue but I have tried setting both the elements to display:inline-block with no luck, here is a jsfiddle, just select both option1 and option2 to see my issue:
http://jsfiddle.net/QRNqm/
And here is my code, remember I am using the select2 plugin also:
$(function(){
$('#mdlTags').select2();
});
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
}
.select2-choices li div {
border-radius: 2px 2px 2px 2px;
color: #fff !important;
text-decoration: none;
padding: 3px 14px 3px 12px;
background-color: #bdc6e5;
}
<select multiple="multiple" id="mdlTags" class="skipMsDropdown" style="width:330px;">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
Replace .select2-search-choice-close class with below:
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
height: 14px; /* given height (actual 13px and 1px to adjust bottom margins) to adjust line-height of parent element */
margin-top: -1px; /* to adjust top margins to get in proper line */
}
Here is a working DEMO.
It's now on the same level. Here is the edited css.
.select2-search-choice-close {
background: url("/images/projects/closeWhite.png") no-repeat scroll 5px center #BDC6E5;
border-radius: 2px;
padding: 3px 14px 3px 0; // increase the top padding for 1 point.
}
.select2-search-choice-close {
background: url("select2.png") no-repeat scroll right top rgba(0, 0, 0, 0);
display: block;
font-size: 1px;
height: 13px;
outline: medium none;
position: absolute;
right: 3px; // Reduce the top position for 1 point
top: 3px;
width: 12px;
}
First off, you have one less pixel of top padding on the select2-search-choice-close style. But even once you fix that, there will still be a pixel of difference between the two elements.
If you take a look at the demo on the Select2 page, that's the way it appears there as well (with one vertical pixel difference between the two elements). The difference is that they are applying the unifying style on the container that holds these two elements, rather than styling each of these elements separately.
If you make these two changes, you end up with something like this:
http://jsfiddle.net/Cv6cH/
I am using Firebug, I just saw tha it is a div with css, but I dont get it how they did it?
<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>
I am trying to make something similar but I am just a beginner,I want that effect of the button but I don't get it how they did it? even I don't understand the css, I just copy this but no effect
.num1 {
-moz-border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666666;
cursor: default;
font: 75% arial,sans-serif;
margin: 0 8px 0 0;
outline: medium none;
padding: 3px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.num2{
display: inline-block;
position: relative;
}
.num3{
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-left-width: 0;
margin-left: 0 !important;
}
Here just the CSSed div: http://jsfiddle.net/bmWGY/1/
You'll need much more if you want to do something with this div.
Gmail uses JavaScript to detect the click event on the div. In addition, classes are dynamically added/removed to give the "button" the correct styles.
It is much easier to style a div element correctly than to try to style input and button elements for a cross-browser solution.
It's likely a simple div with a javascript onclick function attached. If using jQuery or some other framework, the "action" can be defined elsewhere using the .click() or .bind() (for jQuery) functions. See the examples provided in the preceding two links to see this in action.