I'll try to explain it as best as I can. I want to apply this principle to my own.
Tab Add Example
As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.
It should also behave the same on window resize.
Window Resize Example
Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.
HTML I want to apply:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
</ul>
</div>
</div>
When I add new tab it adds this
<li class="contentTab"></li>
JSFiddle
Any suggestions?
You can do this with Flexbox, you just need to set flex-basis
$(".add").click(function() {
$(".tabs").append('<li class="tab">Lorem ipsum</li>');
})
$('.remove').click(function() {
$('.tab').last().remove();
})
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
border: 1px solid black;
flex-basis: 200px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>
You can use display: table and display: table-cell for this:
$("#add").click(function() {
$("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});
$("#del").click(function() {
$(".tab").last().remove();
});
.tabs {
display: table;
border-collapse: collapse;
padding: 0;
}
.tab {
display: table-cell;
width: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button id="add">Add Tab</button>
<button id="del">Remove Tab</button>
$('.tab-add').click(function() {
$('.tab-add').html('+');
var lastCount = $('#myTab1 li:last-child').html();
var plusOne = parseInt(lastCount) + 1;
$('#myTab1').append('<li class="contentTab">' + plusOne + '</li>');
});
* {
margin: 0; padding: 0;
}
.l_tabs {
width: 100%;
background-color: red;
}
#myTab1 {
display: flex;
list-style-type: none;
}
#myTab1 li {
display: flex;
justify-content: center;
flex: 1;
line-height: 50px;
color: white;
background-color: hsla(0, 0%, 20%, 1);
}
#myTab1 li:nth-child(even) {
background-color: hsla(0, 0%, 40%, 1);
}
.tab-add:hover {
background-color: hsl(0, 55%, 55%)!important;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">click to add</li>
<li class="contentTab">1</li>
<li class="contentTab">2</li>
<li class="contentTab">3</li>
<li class="contentTab">4</li>
</ul>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/mx2mxgg1/2/
You can use flexbox to do exactly what you want
ul {
display: -webkit-box;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
min-width: 60px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
Related
const menuBtn = document.querySelector('#menuBtn')
const exitBtn = document.querySelector('#exitBtn');
const menu = document.getElementsByClassName('menu');
menuBtn.addEventListener('click' , () => {
menu.style.display = 'block'
})
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu{
display: none
}
.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
</div>
<div class="exit">
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
How do I make it work ? I tested to see if the add event listener was working and it was working but when it comes to displaying the menu when clicked it does not work. Any idea what the issue may be ? I am not that good at using Javascript so any help would be appreciated . Thank you
document.getElementsByClassName('menu'); doesn't return a single element. It returns an HTMLCollection. So menu isn't an element and menu.style.display = 'block doesn't do what you're trying to do.
document.getElementsByClassName('menu') gets multiple elements, all of which have the class 'menu'. The function returns an HTMLCollection, but you can treat it like a list. If you want to use classes, I would recommend using:
var list = document.getElementsByClassName('menu')
for (var item of list) {
// Do Stuff Here
}
If you have multiple menus, consider using JQuery with the .each(function) method for functions.
I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.
My guess it is something to do with the JS, but again, I am only really new to this.
Any help would be greatly appreciated! Thanks!
(I have used code found on CodePen for this)
<html lang="en" >
<head>
<script>$(function () {
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});</script>
<meta charset="UTF-8">
<title>CodePen - Simple tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
}
.tabs .active-tab:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
}
.tabs li:first-child {
margin-left: 10px;
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
}
.tabs-content li {
display: none;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="tabs">
<li class="active-tab">First tab</li>
<li>Second tab</li>
<li>Third tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
</ul>
<!-- partial -->
</body>
</html>
There are lots of stuff happening there.
At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.
It must be placed before your JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I would recommend placing the code you've written at the bottom of the page, before the closing body tag
---> HERE
</body>
Improvements:
Separating your code into "modules" or smaller chunks.
Everything inside style tag, cut it and paste it in a new file, for example, style.css.
Everything inside script tag, cut it and paste it in a new file, for example, app.js.
After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.
So, you'll end up with something like this:
Top of the page, inside head tag
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Bottom of the page, before closing body tag
...
<script src="./app.js"></script>
</body>
You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.
You can use this for now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
you can use this code for creating your simple tabs
(function() {
'use strict';
var tabMenus,
tabContents;
tabMenus = document.querySelectorAll('.tab_menu_item_link');
tabContents = document.querySelectorAll('.tab_content');
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].className = 'tab_menu_item_link';
}
this.className = 'tab_menu_item_link is-active';
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className = 'tab_content';
}
document.getElementById(this.dataset.id).className = 'tab_content is-active';
});
}
}());
body {
font-size: 14px;
line-height: 1.5;
color: #333;
}
ul , li {
padding : 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: bottom;
}
.clearfix {
display: table;
clear: both;
}
.container {
width: 400px;
margin: 0 auto;
padding: 50px 0;
background: #fff;
}
.tab_menu {
width: 100%;
}
.tab_menu_item {
float: left;
margin-right: 2px;
text-align: center;
}
.tab_menu_item:last-child {
margin-right: 0;
}
.tab_menu_item_link {
display: block;
width: 100px;
padding: 10px;
background: #fff;
border-radius: 5px 5px 0 0;
border: 1px solid #888;
border-bottom: none;
box-sizing: border-box;
color: #888;
transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
background: #888;
color: #fff;
}
.tab_container {
border: 1px solid #888;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_content.is-active {
display: block;
-webkit-animation: fade 0.5s ease;
animation: fade 0.5s ease;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">
<div class="tab">
<ul class="tab_menu clearfix">
<li class="tab_menu_item">About</li>
<li class="tab_menu_item">Works</li>
<li class="tab_menu_item">Contact</li>
</ul>
<div class="tab_container">
<div class="tab_content is-active" id="about">
<p>some content about ...</p>
</div>
<div class="tab_content" id="works">
<p>some content works ...</p>
</div>
<div class="tab_content" id="contact">
<p>some content contact ...</p>
</div>
</div>
</div>
</div>
you can see this sample in my codepen:
codepen.io
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
I am trying to build a very simple pyramid construction kit. The user can add a block or remove one.
This works fine using the code below. However, currently I am specifying the next block's width using css (.item1 {200px;}, .item2 {300px;}. The problem is, I don't know how many blocks the user will add eventually and therefore, I cannot specify this in CSS. I would like to calculate the width of each additional block's width based on the previous block's width + 100px (previous width + 100px). Unfortunately, I don't know how to do this...Any help would be appreciated.
simple pyramid pic
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var $block = $('<li><div class="item"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
$('ul li div').addClass(function(index) {
return "item" + index;
}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});
.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>
You can get the last .item width then append your desire number var lastwidth = $('.pyramid li:last-child .item').width();
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var lastwidth = $('.pyramid li:last-child .item').width();
if(lastwidth == null){
var plus = 0;
} else {
var plus = lastwidth + 100;
}
var $block = $('<li><div class="item" style="width:' + plus + 'px"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
//$('ul li div').addClass(function(index) {
//return "item" + index;
//}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});
.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>
Trying to make a monthly calendar that displays scheduled events in gray and gives a popup with more information about the event on mousehover.
Additionally, I wanted to highlight the current day of the month in pink. My code was working a couple days ago but it doesn't seem to work anymore and I can't seem to figure out the problem.
HTML:
<!--ignore all this -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Kendall Lee Kasper | Events</title>
</head>
<nav>
<!--Logo Within Navigation Bar-->
<img src="http://i.imgur.com/HYzJLrm.png" class="logo">
<!--Mobile Navigation Setup -->
<button id="nav-open">☰</button>
<span class="deskNav">
HOME
ABOUT
EVENTS
GALLERY
BOOKING
</span>
<div id="menu">
<ul>
<button id="nav-close"> X </button>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Booking</li>
</ul>
</div>
</nav>
<body>
<div class="section group">
<div class="col span_2_of_2">
<span class="textstyling">
<center>
<img src="http://i.imgur.com/Y1uU2NM.png" class="border">
<hr>
<img src="http://i.imgur.com/w0tJXYE.png" class="mobileImg">
<p>
</center>
<!--CALENDAR CODE STARTS HERE-->
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
<center>November<br>
<span style="font-size:18px">2016</span>
</center>
</li>
</ul>
</div>
<!-- POPUP DIV TO DISPLAY EVENT INFO-->
<div id="pop-up">
Event info
</div>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="scheduled">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li class="scheduled">15</li>
<li>16</li>
<li>17</li>
<li class="scheduled">18</li>
<li class="scheduled">19</li>
<li>20</li>
<li>21</li>
<li class="scheduled">22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
</div>
<!--CALENDAR HTML ENDS HERE-->
<hr>
<center>
<img src="http://i.imgur.com/n9x7PV5.png" class="border">
</center>
</span>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: Verdana, sans-serif;
}
ul {
list-style-type: none;
}
/* Month header */
.month {
padding: 70px 12px;
width: 100%;
background: #FA89C4;
}
/* Month list */
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}
/* Next button */
.month .next {
float: right;
padding-top: 10px;
}
/* Weekdays (Mon-Sun) */
.weekdays {
padding: 5px 12px;
font-size: 12px;
width: 100%;
margin: 0;
background-color:#ddd;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
/* Days (1-31) */
.days {
padding: 5px 12px;
font-size: 12px;
line-height: 25px;
width: 100%;
background: #eee;
border-top: 5px solid #ddd;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 15%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color:#777;
}
/* Highlight the "current" day */
.days li .active {
padding: 5px;
background: #FF47A6;
color: white !important
}
.days li .scheduled {
padding: 5px;
background: #C2C2C2;
color: white !important
}
.days li .event {
cursor: default;
}
.scheduled {
background: #C2C2C2;
}
div#pop-up {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
Javascript:
var novEvents = {
5: "Pride Week Drag Show # UT Arlington | 7:00pm",
15: "Twisted Tuesday # Rainbow Lounge | 11:00pm",
18: "All Star Drag Show # Club 1851 | 10:30pm",
19: "All Star Drag Show # Club 1851 | 10:30pm",
22: "Twisted Tuesday # Rainbow Lounge | 11:00pm"
};
$(".scheduled").hover(function(){
$('div#pop-up').show();
$('div#pop-up').show();
}, function() {
$('div#pop-up').hide();
});
// wrap the Events scripts in its own scope
(function ($) {
$(function () {
setActiveDate();
setEventDates();
});
function setActiveDate() {
var currentMonthDate = new Date().getDate();
$('.days li').each(function (i, ele) {
if ($(ele).text() == currentMonthDate) {
$(ele).html($('<div>', { class: 'active event', html: $(ele).html(), title: ''}));
}
});
}
function setEventDates() {
$.get('getEvents.php', null, function (data) {
data = JSON.parse(data);
$('.days li').each(function (i, ele) {
var currentDate = "11/" + $(ele).text() + "/2016";
if (!$(ele).hasClass('scheduled') && $.inArray(currentDate, data) != -1) {
$(ele).html($('<div>', { class: 'scheduled event', html: $(ele).html(), title: 'Info' }));
}
});
setDateMouseEvents();
})
}
function setDateMouseEvents(){
$('.event').click(function(){
$('<div>', {title: 'Event'}).dialog();
}).tooltip();
}
})(jQuery)
I know the code is janky; it's my first try at making a calendar and I'm on a tight deadline.
Here's a pastebin with all the code that might be easier to read: http://pastebin.com/mPg1pEWn
And here's what the final result looks like right now:
http://omega.uta.edu/~slc1101/courses/ctec4350/semester-project/events.php
The scheduled events are highlighted, but the problem is I'm having trouble highlighting the current day and getting the div#pop-up to display event information.
If anyone has any solutions or suggestions on how to improve my code, please let me know!