I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
My small library has a website that was created in HTML and CSS by a previous employee. I know the the display of the site is dynamic based on screen size-- the mobile site is slightly different from the desktop site. It appears he used some libraries from JQuery, too. I have a very limited background in coding, so I make only minor content changes and NO functional changes. At some point, while I was on vacation, the footer of our website stopped displaying in the desktop version of the site, but it still shows in the mobile site.
I have audited the HTML and CSS files against the archived files to be sure I didn't inadvertently make any changes before I left. I have checked the versions of files that are rarely used and noticed they haven't been changed since 2017. I commented out the CSS and ran just the HTML locally to see if there was a stylesheet difference I was missing (though I haven't edited them), but I couldn't get anything to display in the footer. The footer has a widget that displays one iframe with a link to another website, a second iframe with a link to a calendar, and a group of icons with links to our partners. Again, everything worked fine until a month ago on the mobile and desktop sites, and I can view the footer if I resize my desktop browser to something very narrow.
Here's the relevant HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109165971-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109165971-1');
</script>
<meta charset="UTF-8">
<meta name="msvalidate.01" content="63DD6F645CCF71531665417F6978B20A" />
<title>Welcome to the Toccoa-Stephens County Public Library</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome the Toccoa Stephens County Library! Celebrating 80 years of operation and still going strong!" />
<meta name="keywords" content="Toccoa-Stephens County Public Library, Northeast Georgia Public Libraries, search catalog, account, events, hours, new books, Toccoa, library, Friends of the Library, Stephens County, opac, steam, 3d printing, makerspace, state park pass" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Literati Ltd" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
</head>
<body>
<!--header-->
<header>
<!--insert a lot of contents organized into tabs-->
<!--End Navigation tabs,begin accordion. tabs.css media queries will cause tabs to display:none at 500px and accordion to display.
Any information added to tabs must be duplicated in the accordion-->
<div class="container">
<!--Home-->
<!--insert a lot of contents organized into accordion tabs-->
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="https://gapines.org/opac/extras/browse/html-full/item-age/NEG-TOCCOA/1/5"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="https://teamup.com/ksx6i3x71k3mbbkzbk?view=a&disableSidepanel=1&showLogo=0&showHeader=0&showTitle=0&showViewSelector=0"></iframe>
<div id="bottom-right"><strong>SEE ALL EVENTS</strong> </div>
</div>
</div>
</div>
<div id="social">
<h3>More to See!</h3>
<img class="socialpics" src="images/facebook.png" title="LIKE US ON FACEBOOK!" alt="LIKE US ON FACEBOOK!" />
<img class="socialpics" src="images/niche.png" title="TUTORIALS FOR OUR DIGITAL SERVICES" alt="TUTORIALS FOR OUR DIGITAL SERVICES" />
<img class="socialpics" src="images/tumblebook.png" title="MORE EBOOKS FOR KIDS!" alt="MORE EBOOKS FOR KIDS!" />
<img class="socialpics" src="images/novelist.png" title="FIND A GOOD RECOMMENDATION WITH NOVELIST" alt="FIND A GOOD RECOMMENDATION WITH NOVELIST" />
</div>
</footer>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<p align="right">E-Verify ID#792629</p>
<!--Javascript used-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/tabs.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/agenda.js"></script>
<script src="https://my.nicheacademy.com/api/widget/toccoa-stephenslibrary"></script>
</body>
</html>
Here's the primary CSS code that relates to that section:
#social {
width: 375px;
height: 250px;
float: right;
text-align: center;
margin-top: 1%;
margin-right: 1%;
background: rgba(255,255,255,0.5);
overflow: hidden;
}
.socialpics {
display: inline-flex;
margin: 15px 30px 0px 30px;
width: 95px;
height: 95px;
}
#newbooks {
float:left;
background-color: rgba(255,255,255,0.5);
margin: 1%;
height: 250px;
width: 400px;
overflow: auto;
}
#tscpl-calendar {
margin-top: 1%;
margin-left: .5%;
display: inline-flex;
float: left;
width: 415px;
height: 250px;
position: relative;
}
#calendar {
width: 415px;
height: 225px;
float: left;
margin: 1%;
background: rgba(255,255,255,0.5);
overflow: auto;
}
#bottom-right {
right: 0;
bottom: 0;
position: absolute;
}
#tscpl-calendar a:link {
background-color: #379676;
color: white;
}
#tscpl-calendar a:visited {
background-color: #379676;
color: white;
}
#media only screen and (max-width : 800px) {
.gapines {
float: left;
text-align: left;
margin-left: 10px;
}
}
#media only screen and (max-width : 500px) {
.gapines {
width: 100%;
text-align: center;
margin-left: 0;
}
.new-books {
margin-top: 10px;
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
padding-bottom: 125%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#tscpl-calendar {
width: 100%;
margin: 0;
}
#calendar {
width: 100% !important;
margin: 0 !important;
}
#social {
width: 100%;
margin: 0;
}
}
.after-box {
clear: both;
}
#media only screen and (min-width: 800px) and (max-width : 1279px) {
#tscpl-calendar{
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 35%;
min-width: 25%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 99%;
min-width: 40%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 32%;
display: block;
max-width: 50%;
min-width: 35%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 45%;
max-width: 25%;
margin-top: 5px;
display: block;
float: left;
}
.socialpics {
display: inline-block;
margin: 0;
margin-top: 2%;
max-width: 100%;
}
}
#media only screen and (min-width: 501px) and (max-width : 799px) {
#tscpl-calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 30.50%;
display: block;
max-width: 100%;
min-width: 90%;
max-height:100%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 100%;
min-width: 90%;
display: block;
float: left;
}
.socialpics {
display: inline-block;
max-width: 100%;
}
}
There is another CSS file, but I don't think it's quite relevant. However, I'm definitely a newbie, so if something's missing, please let me know. Also, there may be something related to JavaScript that I need to include. Let me know if I'm missing that.
I expect my page to display the footer, regardless of the device accessing it. I also need specific instructions for fixing any coding errors, even if you have to point me to a "for Dummies" resource. We have no real programmers here, but we have plenty of books.
On review by a commenter, the other CSS file is important, so here is a scaled down version:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.tabs {
margin-top: .5%;
margin-left: 1%;
margin-right: 10%;
position: relative;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 98%;
opacity: 1;
height: 485px;
margin-bottom: .5%;
}
.tabs nav {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #379676;
color: #ffffff;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
height: inherit;
}
.tabs nav a {
padding: 15px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.tabs .content {
padding: 15px 0px;
position: absolute;
top: 2px;
left: 150px;
color: #2b2626;
background: rgba(255,255,255,0.5);
width: 0px;
height: 100%;
overflow: scroll;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.tabs .content.visible {
padding: 20px;
background-color: #ffffff;
width: calc(100% - 150px);
opacity: .87;
}
.tabs .content p { padding-bottom: 1px; }
.tabs .content p:last-of-type { padding-bottom: 0px; }
/* Beginning of Accordion nav */
.container {
width: 100%;
max-width: 500px;
}
.accordion {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.accordion input {
position: absolute;
left: 0;
top: 0;
z-index: -999;
}
.accordion label {
display:block;
padding: 15px 20px;
background: #379676;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 22px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
margin-bottom: 3px;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: all .40s;
}
.accordion-content {
text-align: center;
background-color: #ffffff;
opacity: .87;;
margin: 1em 0;
text-decoration: none;
}
.accordion input:checked ~ .accordion-content {
max-height: 600px;
overflow: scroll;
}
#media only screen and (max-width: 500px) {
.tabs {display: none;
height: 0px;}
}
#media only screen and (min-width: 501px) {
.container {display: inline-flex;
height: 0px;}
}
Basically, if you're on a mobile site, the tabs on the side are all collapsed until you touch one of them, but the footer displays at all times.
Update: After looking at the website, I have a solution:
As another user has also pointed out, your is within a , there is a media query which sets this to 'display: none;'. This means anything within this will be hidden on those media specific screen sizes.
A solution is to take the
<footer> ... </footer>.
and place this just before the closing body tag like this...
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/5.html"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/ksx6i3x71k3mbbkzbk.html" class="fc fc-unthemed fc-ltr">
<div class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<h2> </h2>
</div>
<div class="fc-right">
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">today</button>
<div class="fc-button-group">
<button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left">
<span class="fc-icon fc-icon-left-single-arrow"></span>
</button>
<button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-right-single-arrow"></span>
</button>
</div>
</div>
<div class="fc-center">
</div>
<div class="fc-clear">
</div>
</div>
<div class="fc-view-container">
<div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
<div class="fc-scroller" style="overflow: hidden auto;">
</div>
</div>
</div>
</iframe>
<div id="bottom-right">
<strong>SEE ALL EVENTS</strong>
</div>
</div>
</div>
</footer>
</body>
</html>
This will take the footer out of the container which is being hidden on desktop.
I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});
i'm trying to insert this tab box in my section tag.. from this website http://www.9bitstudios.com/2012/11/create-a-responsive-tab-box-using-jquery-and-css/
source code download link: http://www.9bitstudios.com/demos/blog/tab-box/tab-box.zip
here is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Librarian's corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav-menu.css">
<link rel="stylesheet" type="text/css" href="css/body.css">
</head>
<body >
<div class="big-wrapper">
<div class="form-nav-menu">
<nav>
<ul>
<li><a id="active" href="adduser.html">ADD USER</a></li>
<li><a class="in-active" href="#">EDIT USER</a></li>
<li><a class="in-active" href="#">DELETE USER</a></li>
<li><a class="in-active" href="#"> VIEW USER</a></li>
</ul>
</nav>
</div>
<header>
<h1>The Librarian's corner</h1>
</header>
<section>
> insert tab box here <
</section>
<footer>
<h1>this is footer</h1>
</footer>
</body>
</html>
and my css code filename: nav-menu.css
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background: orange;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
body {
display: block;
width: 100%;
}
header {
width: 100%;
background: rgba(0, 0, 12, 1); /* Fallback */
background-color: rgba(12, 12, 12, 0.5);
margin: 0;
}
header h1 {
text-align: center;
line-height: 400px;
z-index: 99;
color: #fff;
font-size: 50px;
font-family: Comic Sans, Comic Sans MS, cursive;
text-shadow: rgb(3, 3, 3) 4px 4px 4px;
height: auto;
}
section {
height: auto;
background: white;
width: 100%;
margin-top: 0px;
}
footer {
height: 150px;
background: black;
width: 100%;
margin-top: 0px;
}
.form-nav-menu {
z-index: 99;
position: fixed;
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
.form-nav-menu nav {
width: 100%;
height: 70px;
}
.form-nav-menu nav ul{
width: 100%;
height: 70px;
list-style-type: none;
}
.form-nav-menu nav ul li{
height: 70px;
width: 120px;
display: inline-block;
float: right;
}
the problem is when i trying to insert the css tab box code for the tab box located in section tag, the footer background dis align...
im wondering why, why the footer background dis aligned.. my body background is orange and the footer is black... as we can see, the black color is in the top..
I think you may need to add a min-height to your "section" tag since you've added that container:
section {
height: auto;
**min-height:300px;**
background: white;
width: 100%;
margin-top: 0px;
}
I have been trying to get this simple code to work for hours but need help as it does not seem to work.
I'm using toggleClass in a js file to switch class on the header. I´ve tried every possible way, also tried it in jsfiddle and it works sometimes and sometimes not even with the same code. So something is definitely wrong.
Here is my html code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="menystyle.css">
</head>
<body>
<header class="large">
<nav>
<ul>
<li>Home
</li>
<li>Posts
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<section class="stretch">
<p>Make menu small</p>
<p>End of the line.</p>
</section>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
And here is the script code in the js file:
$(document).on("scroll", function () {
$("header").toggleClass("small", $(document).scrollTop() > 100);
});
And here is the CSS:
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;}
section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; }
header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }
/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }
/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
In the head tags, include this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
It should work after that.
Include jquery.min.js in your code and then your code will work fine. See your code in working condition.