EDIT - Here's what I have: https://codepen.io/anon/pen/wZQjQy
Here's the original: https://codepen.io/anon/pen/YMRLBN
(had to put it on codepen, somehow adding a snippet here doesn't link the css)
I basically copy-pasted a customized on-screen keyboard which worked flawlessly (mostly) but after putting it in a different HTML, it's not working anymore.
keyboard I copied
This is the keyboard, all I really did is replace the characters with Cyrillic and remove the caps, tab, shift and all the "on" spans, since all I really need are the buttons and letters, all capitalized. Now, this worked nicely on my previous build for a page, but the page was inherently flawed by my endless barrage of copy-pasted material and became unfixable at some point, so I started over.
Using some more copy-paste but with Bootstrap now, I built something at least a quarter percent better than my previous mess. But when I imported the on-screen keyboard from the last HTML file, it's now not showing any characters, basically just not working. I really don't know what's going on.
the CSS (I included this because maybe the text is actually being written but just not being shown due to a messy CSS?)
$(function() {
var $write = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
$write.html($write.html() + character);
});
});
html {
width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer {
background-image: url(b.png);
background-repeat: repeat-y;
background-position: right;
}
/*head*/
.nav-text {
vertical-align: middle;
color: white;
}
.row {
padding: 15px;
display: flex;
justify-content: center;
}
.back-button {
height: 100%;
}
#backer {
float: left;
width: auto;
}
.red {
background-color: darkred;
}
.header {
text-align: center;
color: white;
font-size: 25px;
float: left;
width: 90%;
}
.uk-icon {
color: white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone {
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo {
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London {
text-align: center;
}
#searchbutton {
background-color: darkred;
color: white;
border: 0;
border-radius: 5px;
margin-bottom: 15px;
padding-right: 20px;
}
#write {
width: 90%;
height: 300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left: 50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
font-size: 10vh;
}
#London>.container-fluid>h3 {
margin-top: 5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;
;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul {
margin: auto;
float: center;
}
#container-x {
width: 50%;
margin: auto;
}
input[type=submit] {
background: url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;" src="images/logo.png">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')"><img style="width: 8.7%; margin-right: 10px;" src="images/car.png">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')"><img style="width: 9.3%; margin-right: 10px" src="images/passport.png">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<input type="text" id="write" maxlength="7" placeholder="UBA 0000">
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter">Ф</li>
<li class="letter">Ц</li>
<li class="letter">У</li>
<li class="letter">Ж</li>
<li class="letter">Э</li>
<li class="letter">Н</li>
<li class="letter">Г</li>
<li class="letter">Ш</li>
<li class="letter">Ү</li>
<li class="letter">З</li>
<li class="letter">К</li>
<li class="letter">Ъ</li><br>
<li class="letter">Й</li>
<li class="letter">Ы</li>
<li class="letter">Б</li>
<li class="letter">Ө</li>
<li class="letter">А</li>
<li class="letter">Х</li>
<li class="letter">Р</li>
<li class="letter">О</li>
<li class="letter">Л</li>
<li class="letter">Д</li>
<li class="letter">П</li><br>
<li class="letter">Я</li>
<li class="letter">Ч</li>
<li class="letter">Е</li>
<li class="letter">Ё</li>
<li class="letter">С</li>
<li class="letter">М</li>
<li class="letter">И</li>
<li class="letter">Т</li>
<li class="letter">Ь</li>
<li class="letter">В</li>
<li class="letter">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>
When I click on a li element from the keyboard, it's supposed to call that JS, making magic happen. It ain't doing nothing.
My best guess is the "tabs" not being active on form load, since the only real difference is I used bootstrap tabs on the last one but on this one I copied the W3 schools one.
Change your input area with ID "write" into a textarea.
Replace this line:
<input type="text" required="" id="write" maxlength="7" placeholder="UBA 0000">
with this:
<textarea id="write" rows="6" cols="60" placeholder="UBA 0000"></textarea>
Code Pen shows the changed code.
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
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
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!
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly