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;
}
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 have managed to remove the tooltip entirely, just to see if it was possible to style this tooltip, in any way. But what I actually need is to position it centred below the choose file button.
The CSS for getting rid of the tool tip was basically this:
input[type="file"] {
display: none;
}
Which basically results in the button looking like this
However, if I remove the css, I am left with this mad button inside of a button mess which includes the tooltip inside the button
To be clear, both the button and the button within the button do the same thing. I am not 100% clear on why it displays like it as this is my first time working with a file upload button which isn't my own code.
Followed by this Codepen you can simply do it like this:
<html>
<style>
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
<input type="file" class="custom-file-input" />
</html>
Now the question is how it works?
To get the answer know about css ::before selector here
Hope this helps!
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.
I am composing notifications that consist of a title and some description. And displaying it next to the form.
Composing elements in jQuery:
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').text(plainText);
var $notification = $('<span></span>').append($title).append($description).addClass('notification');
CSS:
.notification{
border: 1px solid red;
margin: 10px;
}
Ideally, I would like the border to surround the title and description. What am I doing wrong here?
Fiddle
<span> is an inline element by default. To force it to respect the rectangular dimensions of the content inside, use display: inline-block;
.notification{
border: 1px solid red;
margin: 10px;
display: inline-block;
}
Demo: http://jsfiddle.net/7b3j2/20/
Just add display:block; to .notification calss
.notification{
border: 1px solid red;
margin: 10px;
display: block;
}
or change the notification wrapper to div instead span
var $notification = $('<div></div>').append($title).append($description).addClass('notification');
Demo: Jsfiddle
I am having global css file contains below code
#menu_left
{
color: #004080;
width: 225px;
margin: 0px;
border-style: solid solid none solid;
border-color: #ffffff;
border-size: 1px;
border-width: 1px;
}
#menu_left li a
{
color: #222222;
height: 26px;
voice-family: inherit;
text-decoration: none;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
#menu_left li a:link, #menu_left li a:visited
{
color: #222222;
display: block;
padding: 8px 0 0 10px;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
#menu_left li a:hover
{
color: #222222;
padding: 8px 0 0 10px;
border-bottom: solid 1px #ffffff;
font-weight:normal;
background-color:#B9C4CA;
font-size:12px;
font-family:tahoma;
}
as of now i assigned #menuleft id to my div which contains li's(list tag) and each li tag having one anchor tag.
all my li's will come in the left side panel as list .once i selected any li it should display some css styles and other should have the above css.
i have written one js function to toggle these css changes on selection and un slection .
but hover css is not applying if do like below ...
function setSelected(selID)//selId is ID for anchor tag in selected li item
{
//contains all list of anchor tag id's
var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
for(i=0;i<anchorID.length;i++)
{
if(selID!=anchorID[i])
{
var div = document.getElementById(anchorID[i]);
div.style.fontWeight = 'bold';
div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
}
else
{
var div = document.getElementById(selID);
div.style.fontWeight = 'bold';
div.setAttribute('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
}
}
can any one help me how can i get all css properties in such way that it should work for selection hover and normal while toggeling selection?
Regards,
Kamesh
In your setSelected you are overwriting the bold style right after you set it.
That said, you can deal with css a lot more comfortably.
Instead of setting the css right at the node level, why not use what css was invented for?
You can set a a selected class and in your code just toggle the className
.selected {
color: #222222;
height: 26px;
voice-family: inherit;
text-decoration: none;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
And a simple JS function takes care of the class swapping:
function setSelected(selID) {
var anchorIDs = {
'usersAnchor': true
'securityAnchor': true
'passPolAnchor': true
'activeSessAnchor': true
};
var div = document.getElementById(selID),
className = div.className;
if (anchorIDs[selID] === true) {
div.className = className.replace(/\s+(selected)/, " selected");
} else {
div.className = className.replace(/\s+(selected)/, "");
}
}
Use jQuery to make your work simpler!
Instead of using this:
div.setAttribute('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
When you use jQuery, it will be easy and cross browser compatible. You can do the same using this way:
$('div').attr('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
Or
$('div').css({
'color': '#FFFFFF',
'display': 'block',
'padding': '8px 0 0 10px',
'border-bottom': 'solid 1px #ffffff',
'background-color': '#718296',
'font-size': '12px',
'font-family': 'tahoma'
});
The .css attribute from jQuery can be used! :)
I recommend using .css from jQuery API.
Please see this fiddle. Is this the effect you are going for? It uses jQuery to make the Javascript easier, but switches the styles by toggling a CSS class instead using jQuery's .css() method. There are two reasons for this… The first is that you should separate your code by purpose. HTML should be content, CSS should be styles, and Javascript should be used for logic only (you shouldn't put content or styles in your Javascript if possible). The second reason is that it's much easier to use Javascript to switch a class than to switch styles.