Unable to vertically align text against picture - javascript

I've been trying to get the text to align vertically (90 degrees) against a picture but unfortunately I haven't found a solution that is responsive and works properly. Tell me what you guys think!
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Bootstrap main css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<!--bootstrap-->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body class = "loading">
<div id="preload">
<img src="img/bcg_slide-1.jpg">
</div>
<main>
<!--Navigation Menu -->
<nav class="navbar navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
Random</span> Name
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
<section id="slide-1" class="homeSlide">
<div class="hsContainer">
<div class="bcg">
</div>
</div>
<div class="displayContent">
<ul class = "rotate" style="background-color: #000; float: left;">
<li><a>ABOUT ME</a></li>
<li><a>PROJECTS</a></li>
<li><a>RESUME</a></li>
</ul>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/_main.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
color: #ffffff;
padding-bottom: 60px;
margin-bottom: 60px;
}
.navbar a {
font-size: 35px;
padding-left: 65px;
padding-top: 50px;
font-weight: normal;
opacity: 100%;
}
.navbar {
background-color: rgba(0,0,0, 0.0);
}
.no-js {
padding-top: 106px;
}
h2 {
margin-top: 0;
}
.loading {
background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
min-width: 100%;
opacity: 0;
}
.loaded section,
.no-js section {
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
transition: opacity 300ms ease-out;
}
#preload {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
height: 100%;
width: 50%;
}
.hsContainer {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.displayContent{
background-color: #fff;
height: 100%;
left: 50%;
top: 0;
bottom: 0;
float: left;
width: 50%;
position: absolute;
background-color: #0909fd
}
.rotate {
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}
#slide-1 .hsContent {
bottom: 200px;
top: auto;
}
.rotate li {
top: 50px;
display: inline;
padding: 10px;
text-decoration: none;
background-color: #000;
}

Normally your text will be filled in a as per it's width. So, you can reduce the width of the as that it accommodates only one character.
By doing so, you can achieve the vertical aligning of text.

Related

Side Bar - Position logout in menu

I need move the Logout "button" for bottom in SideBar menu.
body{
background: #526b62;
}
/* Sidebar */
#sidebar-wrapper{
z-index: 1;
position: absolute;
width: 0px;
height: 100%;
overflow-y: hidden;
background: #1c1c1c;/*#2C3E50;*/
/*border: 2px solid red;*/
/*opacity: 0.9;*/
}
#wrapper.MenuDisplayed #sidebar-wrapper{
animation-duration: 2s;
animation-name: side-wrapper;
width: 250px;
}
#wrapper.MenuDisplayed #page-content-wrapper{
animation-duration: 2s;
animation-name: side-content;
padding-left: 250px;
}
.wrapper-reverse{
animation-duration: 2s;
animation-name: side-wrapper-reverse;
}
.content-reverse{
animation-duration: 2s;
animation-name: side-content-reverse;
padding-left: 0px;
}
#keyframes side-content {
from {
padding-left: 0px;
}
to {
padding-left: 250px;
}
}
#keyframes side-content-reverse {
from {
padding-left: 250px;
}
to {
padding-left: 0px;
}
}
#keyframes side-wrapper {
from {
width: 0px;
}
to {
width: 250px;
}
}
#keyframes side-wrapper-reverse {
from {
width: 250px;
}
to {
width: 0px;
}
}
/* Sidebar styling*/
.title-sidebar{
display: flex;
justify-content: center;
font-size: 2em;
color: #ddd;
margin-top: 10px;
}
.sidebar-nav{
padding: 0;
margin-top: 15px;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
padding: 10px;
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li :hover{
background: skyblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sidebar2.css" >
<style>
#menu-toggle div {
width: 20px;
height: 2px;
background-color: white;
margin: 6px 0;
}
.sidebar-nav{
height: 100%;
}
#a_logout{
}
</style>
</head>
<body>
<div id="wrapper">
<!--SideBar -->
<div id="sidebar-wrapper">
<h1 class='title-sidebar'>Welcome</h1>
<h1 class='title-sidebar'>USER</h1>
<ul class="sidebar-nav">
<li><a href="/" class='btn text-start'>HomePage</a></li>
<li><a href="#" class='btn text-start'>View</a></li>
<li><a href="/logout" id='a_logout' class='btn text-start' >Logout</a></li>
</ul>
</div>
<!--Contents -->
<div id="page-content-wrapper">
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle"><div></div>
<div></div>
<div></div></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqkt
iwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click( function(e){
e.preventDefault();
$("#wrapper.MenuDisplayed #page-content-wrapper").addClass("content-reverse");
$("#wrapper.MenuDisplayed #sidebar-wrapper").addClass("wrapper-reverse");
$("#wrapper").toggleClass("MenuDisplayed");
});
</script>
<!-- Booststrap -->
</body>
</html>
How can I do it?
Add
#a_logout{
width: 100%;
position: absolute;
bottom: 0;
}
Add position:relative in <u>
Add position: absolute in Log-out <li>
Also Add top: calc(100vh - 12rem)

How do i make an unordered list show and hide when a different div (menu i created) is clicked?

$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE

Cannot center image

My image wont center either will any text when I use the center tool in both CSS and HTML it tends to just stay close to the Top left hand corner if anyone has Ideas on what to do please let me know. also I followed a video tutorial on a vertical nav bar so maybe that is interfering with centering my elements that I would like centered
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
.logo{
float: right;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
video {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
<doctype.html>
<head>
<title> LAP Aerial Photography </title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="overlay">
<header>
<nav>
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li><i class="fa fa-home" aria-hidden="true"></i>Home</li>
<li><i class="fa fa-user" aria-hidden="true"></i>About</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>Contact</li>
<li><i class="fa fa-money" aria-hidden="true"></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden="true"></i>Gallary</li>
</ul>
</nav>
<div class="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</div>
</header>
</div>
<video autoplay="true" loop="true">
<source src="Background.mov" type="video/mov">
<source src="Background.webm" type="video/webm">
</video>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
</script>
</body>
</html>
Follow this Guide! It is well-explained and clear.
EDIT:
I’ve used CSS-transformations to center the image, because flexbox is’t supported in old browsers:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I hope the following code will help you.
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
#logo > img {
/* center image */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* nav */
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>LAP Aerial Photography</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<header>
<nav>
<i class="fa fa-bars" aria-hidden></i>
<ul>
<li><i class="fa fa-home" aria-hidden></i>Home</li>
<li><i class="fa fa-user" aria-hidden></i>About</li>
<li><i class="fa fa-phone" aria-hidden></i>Contact</li>
<li><i class="fa fa-money" aria-hidden></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden></i>Gallary</li>
</ul>
</nav>
<div id="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

Why does my wrapper move outside its position when i add an animation to it?

i am doing a simple animation to my header text box which i placed in the center of the header however when i added a animation the entire wrapper move down and to the right. how do i fix this? i added a code snippet as well as a image to see where the wrapper is moved
$(document).ready(function(){
$('.header-text-box').addClass('text-animation');
});
/*--#00b300*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
background-color: #fff;
color:#333333;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.clearfix{zoom: 1}
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.row{
max-width: 1240px;
margin: 0 auto;
}
.row-small{
max-width: 100%;
margin: 0 auto;
}
section{
padding: 80px 0;
}
h1,
h2{
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
h2{
font-size: 250%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
}
h2:after{
display: block;
height: 2px;
background-color: #00919b;
content: " ";
width: 180px;
margin: 0 auto;
margin-top: 20px;
}
/* --------------------------------------------------- HEADER -------------------------------*/
header{
height: 100vh;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 34%, rgba(31, 31, 31, 0.69) 190%);
}
.header-text-box{
width: 1140px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.header-text-box h1{
border: 5px solid #333333;
padding: 5px;
font-size: 450%;
font-weight: 400;
color: #333333;
}
.header-text-box h3{
font-size: 150%;
font-weight: 300;
color: #00919b;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-100px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.text-animation{
-webkit-animation-name: text-animation;
animation-name: text-animation;
display:block !important;
}
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="css/grid.css">
<link rel="stylesheet" type = "text/css" href="css/animate.css">
<link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type = "text/css" href="css/main.css">
<link rel="stylesheet" type = "text/css" href="css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
<title>Carlos Elizondo</title>
</head>
<body>
<header>
<nav>
</nav>
<div class="header-text-box anim">
<h3>Hi. My name is </h3>
<h1>Carlos Elizondo</h1>
<h3>I am an aspiring web developer and current graduate</h3>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "js/jquery.waypoints.min.js"></script>
<script src= "js/wow.min.js"></script>
<script>new WOW().init();</script>
<script src = "js/portfolio.js"></script>
</body>
</html>
There were few errors with positioning. The main problem was that you positioned .header-text-box div absolutely and added left: 50% property to it, which caused that basically the div was constantly moved off the left margin of the document by 50% of the parent element length.
I have just deleted that property and centered it horizontally and vertically with flex.
Jsfiddle link
Edit: Centering some content with following code:
left: 50%;
transform: translateY(-50%);
Is quite handy when you want to center element with minimal width, e.g. a straight, vertical line. But in such cases as yours, it doesn't work properly because it just moves the element by 50% away of the left margin of the parent element, without taking element's width into account. You can easily notice it on my attached image:
That's why you should use flexbox. However, it had some problems with compability with older browsers though, but currently the most of the modern browsers supports it and it's quite easy to implement.

Why the jquery is not working?

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.

Categories