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;
Related
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 was searching for a scrolling-system like this:
Scroll down to page, scroll up to top system like on a MEGA.co.nz download page
The scrolling works fine, but I've got a problem with an Iframe I want to use in the content div. If I open up the page the content part is 75% visible and above is the splash part. I just want that the splash part is fully visible if I open the page.
My CSS:
#font-face
{
font-family: 'hightide'; src: url(../resources/other/HighTide.woff) format('woff');
}
#font-face
{
font-family: 'ontwerp'; src: url(../resources/other/Ontwerp.woff) format('woff');
}
html, body {
height:100%;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
p::selection {background: #000000; color:#ffffff;}
p::-moz-selection {background: #000000; color:#ffffff;}
a:link
{
text-decoration:none; font-weight:bold; color: #000;
}
a:visited
{
text-decoration:none; font-weight:bold; color: #000;
}
#wrapper
{
height:100%;
}
#splash
{
position: relative;
width: auto;
background: url(../resources/img/background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
}
#splash-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#content
{
position: relative;
height: 100%;
overflow: auto;
}
#content-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#quote
{
text-align: center;
font-family: "ontwerp", arial, sans-serif;
position: fixed;
top: 30%;
left: 25%;
font-size: 3.5em;
color: white;
width: 50%;
height: auto;
}
#cloudlogin
{
background-attachment: fixed;
width: 100%;
height: 97%;
bottom: 3%;
position: relativ;
}
#headerbar
{
position: fixed;
z-index: 3;
background: url(../resources/img/gamer752-header.png);
background-size: 15% auto;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 7%;
top: 0%;
left: 0%;
background-color: black;
}
My HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/stylesheet.css" media="screen">
<title>amer752: Public</title>
<link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
<script src="resources/js/jquery-1.10.1.js"></script>
<script src="resources/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
/* scroll events */
$("#splash").on("mousewheel", function (e) {
if (e.deltaY <= 0) {
$('#splash').animate({
height: 0
}, 500);
}
});
$("#content").on("mousewheel", function (e) {
if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
$('#splash').animate({
height: '100%'
}, 500);
}
});
/* click events */
$("#splash-footer").on("click", function () {
$('#splash').animate({
height: 0
}, 500);
});
$("#content-footer").on("click", function () {
$('#splash').animate({
height: '100%'
}, 500);
});
});//]]>
</script>
<div id="headerbar"></div>
</head>
<div id="wrapper">
<div id="splash">
<div id="quote">
<p>The Art</p>
<p>Of</p>
<p>Doing Nothing.</p>
</div>
<div id="splash-footer">
<p>Click here or scroll</p>
</div>
</div>
<div id="content">
<div id="cloudlogin">
<iframe width=100% height=100% frameborder="0" src="cloud\index.html"></iframe>
</div>
<div id="content-footer">
<p>Click here or scroll</p>
</div>
</div>
</div>
</html>
I'm using Chrome and it will be enough when it just works for Chrome. Hope you guys know what's the matter.
PS. I'm new on stackoverflow. I do my best not to act like a total noob. If there's something I cloud do better just tell it me.
Thanks.
In the head tags i did:
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="vertical_slider.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In the bottom in the body tags i did:
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Then in the vertical_slider css file i did:
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
And in the java_script.js file top i did:
$(function() {
$('.slideshow').cycle();
The way it is now i see one image and the next image replacing the other one on same place like fade in.
But in the javascript file if i change the function to:
$('.slideshow').cycle({
fx: 'scrollUp'
});
I see the images move up scrolling up one by one.
The problem is that the arrows not working and not in place and i see each time one image and not 3 images.
It should be working like this jsfiddler and i can't figure out why it's not. I don't get any errors.
Vertical Slider
Well if you want a carousel you have the wrong script included it should be from cycle2 plugin plus the script for the carousel. And then it will work like in the snippet below :)
It should be this two scripts
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
Instead of
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
$('.slideshow').cycle();
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Please try this. It is working.
Updated fiddle[1]: http://jsfiddle.net/uncb4bs9/8/
have you put
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.js"></script>
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
in your code????
please put that and try again. it will work.
for full example please have a look to this http://fiddle.jshell.net/uncb4bs9/3/show/light/ and go to its source code by ctrl+U.
I am making a site with a background image slider where images must cover the 100% width and height of a div element where they are. The problem is that in Safari and Chrome everything works just fine, but in Opera and Mozilla Firefox, the images doesn't scale.
I tried adding '-o-background-size:cover' and '-moz-background-size:cover' but that didn't make the trick.
Here is the code:`
---HEAD---
....
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var imgArr = new Array() // relative paths of images
imgArr[0]="images/artema_big.jpg";
imgArr[1]="images/donskoi_big.jpg";
imgArr[2]="images/dzerzhinski_big.jpg";
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 1000);
/* image rotator */
function changeImg(){
$(".fakeBackground").animate({opacity: 0}, 1000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')top left no-repeat');
}).animate({opacity: 1}, 1000);
};
});
</script>
</head>
<body>
<div class="parent">
<div class='fakeBackground'></div>
<div class="menuLeft">
<div class="logo"></div>
<ul id="menu">
<li class="about">О клубе</li>
<li class="offers">Услуги</li>
<li class="cards">Карты</li>
<li class="personal">Персонал</li>
<li class="news">Новости</li>
<li class="contacts">Контакты</li>
</ul>
</div>
</div>
<div class="rightBottom"><img src="images/virtualTour.png" alt="virtual_tour" /></div>
</div>
</div>
</body>
</html>
and CSS:
*{
margin: 0px;
}
body, html{
height: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
margin: 0px auto;
position: relative;
}
.parent .fakeBackground {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
margin: 0px auto;
background-size: cover;
-o-background-size: cover;
background: url(../images/artema_big.jpg) no-repeat;
background-position: center center;
}
.logo{
width: 188px;
height: 78px;
background-image: url(../images/logo.png);
margin-bottom: 20px;
margin-left: 60px;
}
.menuLeft{
width: 678px;
height: 100%;
background-image: url(../images/artemaDescr.png);
background-size: cover;
background-repeat: no-repeat;
}
#menu li{
list-style: none;
margin-bottom: 10px;
position: relative;
}
#menu li a{
font-family: Arial;
font-size: 14px;
border-bottom: 1px dotted;
text-decoration: none;
color: #373e96;
}
/*Menu Items*/
.about{
margin-left: 70px;
}
.offers{
margin-left: 60px;
}
.cards{
margin-left: 50px;
}
.personal{
margin-left: 11px;
}
.news{
margin-left: 5px;
}
.contacts{
margin-left: -10px;
}
.rightBottom{
position: absolute;
bottom: 0;
right: 0;
width: 301px;
height: 520px;
display: block;
}
Any help will be appreciated.
PS. The link for the site is: http://sportmax.codo.dn.ua
The problem is possibly that 'background' overwrites 'background-size'. Look also at
this answer.
So put background on top whereever necessary.