I'm building simple web template from scratch.
I use old style jquery to make a hover on navbar to show list <li>, but it is working only on About us column and isn't working on Product column.
What is wrong? How should I do it?
HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Template</title>
<meta name="viewport" content="width=device-width" />
<script src="<?php echo base_url();?>js/jquery-3.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
<script>
$(document).ready(function(){
$("#nav ol li").hover(function(){
$("ol",this).show(); //when onmouseover //ol ใน nav ol li อีกชั้นนึง
},
function(){ //when mouseout
$("ol",this).hide();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="toptext">
<span style="margin-left: 85%"><?php echo anchor("login","เข้าสู่ระบบ");?></span>
<span style="float:right;"><?php echo anchor("register/index","สมัครสมาชิก");?></span>
</div>
<div id="header">
<h1><p></p></h1>
</div>
<div id="nav">
<ol>
<li>Home</li>
<li>About us
<ol>
<li>ประวัติ</li>
<li>xxxxx</li>
<li>xxxxxx</li>
</ol>
<li>Product</li>
<ol>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxxx</li>
</ol>
<li>Contact us</li>
</ol>
</div>
<div id="content">
<div id="left-side">
<p1>Homepage<p1>
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open('search');?>
<h3 style="text-align:center;"> ค้นหาสินค้า </h3>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
CSS
html,body{margin:0px;padding:0px;font-size:1vw;}
body{background:#cceeff;font-family:"verdana"; }
#wrapper{margin:auto;padding:0px;width:75%;}
.toptext{margin-top:1vh;margin-bottom: 1vh;}
.toptext span a{padding:3px;color:#000;text-decoration:none;}
.toptext span a:hover{background:#0052cc;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
color:white;}
#header{margin:0px;padding:0px;width:100%;height:18vh;float:left;
background: #99d6ff;
background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"); /* fallback */
background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"), linear-gradient(#99d6ff, #006bb3); /* W3C */
background-blend-mode: multiply;
}
#header h1{margin:0px;padding:0px;/*border-bottom:1px solid #eee;*/font-size:20px;padding-bottom:10px;}
#nav{margin:0px;padding:0px;width:100%;float:left;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
#nav ol a:hover{background:#f2f2f2;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol ol li{border-bottom:1px;}
#content{float:left;margin-top:2vh;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
#right-side{float:left;margin-left:2vh;width:30%;border: solid 1px grey;background:white;}
#right-side ol{list-style:none;}
#left-side{float:left;width:70%;border: solid 1px grey;background:white;}
#footer{float:left;margin-top:2vh;padding:2vh;width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: #99d6ff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#99d6ff, #006bb3); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99d6ff, #006bb3); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99d6ff, #006bb3); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99d6ff,#006bb3); /* Standard syntax */
}
.searchbox
{
background: #9999ff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
}
.loginbox
{
background: #9999ff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
width: 40%;
}
.loginbox ul li
{
list-style:none;
margin-left:-10px;
}
.search-bar
{
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
width:230;
position:relative;
}
.search-bar .searchbutton
{
position:absolute;
top:23%;
right:5px;
}
.sfield
{
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
Fixed your </li> tags in the code below and also replaced $("ol",this) with $(this).find("ol"). Seems to work: http://codepen.io/8odoros/pen/wzALyq
<li>About us
<ol>
<li>ประวัติ</li>
<li>xxxxx</li>
<li>xxxxxx</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxxx</li>
</ol>
</li>
You can simply do with this css , why use jquery
#nav ol li ol {
display:none;
}
#nav ol li:hover > ol {
display:block;
}
Hello Check the Below Fiddle complete <li> tag end
menuFiddle
<li>Product
<ol>
<li>xxxxx</li>
<li>xxxxx</li>
li>xxxxxx</li>
</ol></li>
Related
I am building currently my web-page on Github (Githug Page), and I am having some troubles with the top-nav menu. As you can see, when you scroll down, the menu disappears, and when you scroll up, it appears again. Nevertheless, I would like to make the behaviour much more simpler, and that is, to make it fixed with respect the header. In other words, I just want the menu to appear on top of the page, like another element more. I do not want the menu to follow the scrolling. Looks simple but I do not end up getting the result.
This is my current main.js.
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1141px', '1680px' ],
large: [ '981px', '1140px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '321px', '480px' ],
xxsmall: [ null, '320px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
The index.html file, where you can see, the important sections are header and header_nav.
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Menu -->
<section id="header_nav">
<nav id="nav">
<div id="navbar">
<ul>
<li><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></li>
</ul>
</div>
</nav>
</section>
<!-- Header -->
<section id="header">
<div class="inner">
<span><img src="/images/car_final_256_header.gif"></span>
<h1>Hi, I'm <strong>Eduardo Alvarado</strong>.</h1>
<h1>A passionate software engineer who develops intelligent<br />
cars during the day and loves to design<br />
game-focus art and applications in his spare-time.</h1>
<br />
<p>Want to contact me? Send me a message at alvaradopinero.eduardo#gmail.com.</p>
<ul class="actions special">
<li>Discover</li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium imp-medium">
<header class="major">
<h2>Background</h2>
</header>
<p align="justify">I am a first year PhD Researcher at <a href='https://www.daimler.com/career/about-us/insights/research-development/'>Daimler AG</a> in Stuttgart, Germany. My research is centered on robust perception for human activity recognition. Prior joininig Daimler, I graduated with a master's degree in <b>Embedded Systems Engineering</b>, with a major in Artificial Intelligence and Autonomous Intelligent Systems from <a href='https://www.uni-freiburg.de/'>Albert-Ludwigs-Universität Freiburg</a>, and with a bachelor's degree in <b>Electronics and Automation Engineering</b> from <a href='https://www.uc3m.es/home'>Universidad Carlos III</a> in Madrid.</p>
</div>
<div class="col-6 col-12-medium">
<span class="image fit"><img src="images/profile_bg_1920_1080.png" alt="" style="padding-top: 12px" /></span>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<ul class="major-icons">
<li><span class="icon solid style4 major fa-laptop-code"></span></li>
<li><span class="icon solid style2 major fa-microchip"></span></li>
<li><span class="icon solid style3 major fa-brain"></span></li>
<li><span class="icon solid style5 major fa-gamepad"></span></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<p align="justify">I have dedicated my academic career to the field of robotics, with special interest in AI-based Perception and Behavior Planning applied to intelligent-mobility. I wrote my master's thesis at <a href='https://www.bosch.com/research/'>Robert Bosch GmbH</a> on DL sensor-fusion architectures for Object Detection and Tracking, under the supervision from <a href='https://scholar.google.com/citations?user=2mv2dDkAAAAJ&hl=en'>Prof. Dr. Joschka Boedecker</a> and <a href='https://scholar.google.com/citations?user=LcARjz0AAAAJ&hl=en'>Prof. Dr. Abnihav Valada</a>. I also worked as development-intern at <a href='https://www.zf.com/mobile/en/homepage/homepage.html'>ZF Friedrichshafen</a> on the design of ROS SW-tools for self-driving vehicles. Additionally, I have been working as research assistant for Autonomous Intelligent Systems at the university, on the development of SLAM algorithms and Autonomous Driving simulations.</p>
<p align="justify">I dedicate my day to day to my other great passion too, game-related development and 2D/3D design. Since I was a child, I have always loved bringing to reality dream worlds, characters and landscapes only possible in one's imagination. Little by little, I try to learn more about design, gameplay and visual programming.</p> </div>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>My work</h2>
</header>
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic02.jpg" alt="" /></span>
<h3>Research and Academic Service</h3>
<p>Publications, preprints, SW/HW proyects and news.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic03.jpg" alt="" /></span>
<h3>Game Development</h3>
<p>Game applications, 2D/3D design and visual programming.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
<h3>Photography</h3>
<p>A small portfolio of my favorite trips and places.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Four -->
<!--
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>Ipsum feugiat consequat?</h2>
</header>
<p>Sed lacus nascetur ac ante amet sapien.</p>
<ul class="actions special">
<li>Sign Up</li>
<li>Learn More</li>
</ul>
</div>
</section>
-->
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><span class="label">CV</span></li>
<li><span class="label">Email</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">Google Scholar</span></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: HTML5 UP</li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
And finally, the respective part of the css.
/* Header */
#header {
padding: 9em 0 9em 0 ;
background-color: #4686a0;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed, fixed;
background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
background-position: top left, center center, center center;
background-size: auto, cover, cover;
overflow: hidden;
position: relative;
text-align: center;
}
#header a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
#header a:hover {
color: #ffffff;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
color: #ffffff;
}
#header header p {
color: #ffffff;
}
#header header.major:after {
background: #ffffff;
}
#header input[type="submit"],
#header input[type="reset"],
#header input[type="button"],
#header button,
#header .button {
box-shadow: inset 0 0 0 1px #ffffff;
color: #ffffff !important;
}
#header input[type="submit"]:hover,
#header input[type="reset"]:hover,
#header input[type="button"]:hover,
#header button:hover,
#header .button:hover {
background-color: rgba(255, 255, 255, 0.125);
}
#header input[type="submit"]:active,
#header input[type="reset"]:active,
#header input[type="button"]:active,
#header button:active,
#header .button:active {
background-color: rgba(255, 255, 255, 0.25);
}
#header input[type="submit"].primary,
#header input[type="reset"].primary,
#header input[type="button"].primary,
#header button.primary,
#header .button.primary {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #ffffff !important;
color: #4686a0 !important;
}
#header input[type="submit"].primary:hover,
#header input[type="reset"].primary:hover,
#header input[type="button"].primary:hover,
#header button.primary:hover,
#header .button.primary:hover {
background-color: rgba(255, 255, 255, 0.125) !important;
color: #ffffff !important;
}
#header input[type="submit"].primary:active,
#header input[type="reset"].primary:active,
#header input[type="button"].primary:active,
#header button.primary:active,
#header .button.primary:active {
background-color: rgba(255, 255, 255, 0.25) !important;
}
#header ul.major-icons li .icon {
border-color: #ffffff;
}
#header .icon.major {
color: #ffffff;
}
#header h1 {
margin: 0;
}
#header p {
margin: 1em 0 0 0;
}
#header .actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 2.5em;
margin-left: 0;
position: relative;
}
#header .actions li:first-child {
padding-left: 0;
}
#header .actions:after {
background: #ffffff;
content: '';
height: 100vh;
left: 50%;
position: absolute;
top: 100%;
width: 1px;
}
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#header .inner .actions {
-moz-transition: -moz-transform 1.25s ease;
-webkit-transition: -webkit-transform 1.25s ease;
-ms-transition: -ms-transform 1.25s ease;
transition: transform 1.25s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
#header:after {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
background-image: linear-gradient(45deg, #4fa49a, #4361c2);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
body.is-preload #header .inner {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
body.is-preload #header .inner .actions {
-moz-transform: translateY(30em);
-webkit-transform: translateY(30em);
-ms-transform: translateY(30em);
transform: translateY(30em);
opacity: 0;
}
body.is-preload #header:after {
opacity: 1;
}
/* Header_nav */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a, #header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button, #header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active > a, #header_nav nav ul li.active > span {
color: #e44c65;
}
#header_nav nav ul li > ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
To summarize, I would like the menu to be only on the top of the page, over the header, nothing more. I would really appreciate your help. I have tried several things but I still not very experimented in web-design, I am sorry.
Thank you very much in advance.
In the styling for #header_nav, set position to absolute instead of fixed. Then remove the following from main.js:
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
This way, the menu will render over the header but not stay at the top of the page when the user scrolls down.
Edit: If you want the menu to render above the header, not on top of it, remove the position line completely.
I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled.
I thought something like this should work:
if ($('.ui-selected').length === 0){
$('#plannername').prop('disabled', true);
}
else{
$('#plannername').prop('disabled', false);
}
But that doesn't work. I created the following:
var count = $('.ui-selected').length;
console.log(count);
That's giving me the correct amount of tabs selected.
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
var count = $('.ui-selected').length;
console.log(count);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
padding-left:100px;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="insert name" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="sign up"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
What you need to do is remove the disabled flag once the action of clicking one of the options has taken place. Essentially, what you should do is set the field to disabled by default, then enable it once a selection has been made:
$(function() {
$('#plannername').prop('disabled', true);
function selectionChange(event, ui) {
('#plannername').prop('disabled', false);
}
}
I've created an updated CodePen showcasing this here.
Hope this helps! :)
How do I move the "logout" to the extreme right of the tabs ?
I dont want to include it as list item and align the items ,with logout button to the extreme right of the nav bar.
Current scenario :
html involved with the nav bar and css of logout button:
#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
display:block;
margin:0 auto;
display: inline-block;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->
Try to add #logout {float:right;}
It will work!
#logout{ float:right; }
You can do it with float: right; In #logout and that will send you right
Define the following rules in the CSS
.main-nav{
float:left;
}
#right {
float: right;
}
And adapt the HTML part as follow:
<div id="right">
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
/*display:block; */
margin:0 auto;
display: inline-block;
/* add This Code */
position: absolute;
right:0;
top: 0;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->
I'm continuing development with my website and I have now reached another problem.
When the nav bar collapses on smaller screens, there appears to be a scroll bar to suggest that there is overflow of the elements.
I tried to use the overflow:hidden property to remove this problem in CSS, but it doesn't appear to work properly.
See the screenshot and the code snippet below to see the problem.
#font-face {
font-family: 'montserratlight';
src: url('montserrat-light-webfont.eot');
src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-light-webfont.woff2') format('woff2'), url('montserrat-light-webfont.woff') format('woff'), url('montserrat-light-webfont.ttf') format('truetype'), url('montserrat-light-webfont.svg#montserratlight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'montserratsemi_bold';
src: url('montserrat-semibold-webfont.eot');
src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff'), url('montserrat-semibold-webfont.ttf') format('truetype'), url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#header {
padding: 10px 0 0 0;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display: none;
}
}
.navbar {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display: inline;
margin: 0 -1px;
}
li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
.active {
font-family: 'montserratsemi_bold';
}
.imageInside {
position: relative;
width: 100%;
/* for IE 6 */
}
h2 {
margin-top: 0px;
margin-bottom: 0px;
}
h2 span {
color: white;
font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#base ul {
margin: 0 auto;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px;
text-align: center;
font-family: "montserratlight";
text-transform: uppercase;
}
<!DOCTYPE html>
<head>
<title>Problems | Stack Overflow</title>
<!-- Tab Title -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id = "header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li><b>The Problem</b></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12" style="margin-top:10px;">
<!-- Image Container as DIV -->
<div class = "imageInside hvr-underline-from-center" >
<h2><span>Logo Issue.</span></h2>
<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div id = "base" class="col-md-12" style="margin-bottom:10px">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li>Copyright Whatever</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<!-- Navigation HTML Markup -->
</div>
</div>
</body>
</html>
How can this scroll bar be removed?
In fact, this question is easier to answer then it seems.
In Bootstrap, there is indeed the overflow - x property enabled by default in the bootstrap.css file.
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
To solve this problem, a simple property change is needed.
Overflow-x:hidden
So no more scroll on the collapsed navbar!
This CSS rule is causing your overflow.
li {
display:inline;
margin:0 -1px;
}
Remove it and simply target your elements with specific selectors. Now you menu will remain aligned on mobile and your hover property regarding the color blue work.
See working example Snippet.
#header {
padding: 10px 0 0 0;
}
#header .logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
}
#header .logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar.navbar-default .navbar-collapse {
text-align: center;
}
.navbar.navbar-default .navbar-brand {
display: none;
}
}
.navbar.navbar-default {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
.navbar.navbar-default .navbar-nav ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
.navbar.navbar-default .navbar-nav li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar.navbar-default .navbar-nav li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
.navbar.navbar-default .navbar-nav .active {
font-family: 'montserratsemi_bold';
}
.navbar.navbar-default .navbar-nav li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1
</li>
<li>Option 2
</li>
<li>Option 3
</li>
<li>Option 4
</li>
<li><b>The Problem</b>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
Hey there I took inspiration from this article for my slideshow. I worked with the source code from the website to make it my own and when I copy/pasted the html & css over to my project html & css files it doesn't seem to load.
I went over my code again and again but still haven't managed to solve the problem. It's working perfectly in the seperate html file but just not in my project file.
I would appreciate any help to solve this issue I'm having.
Screenshots:
Working in seperate file:
http://gyazo.com/712175106aeeb7b636b19937cf2c09c8
Project File where it doesn't appear to load or display:
http://gyazo.com/cc41a9cd0636c71dac6bb71edc4eff1a
Code for my project verision:
HTML
<!DOCTYPE html>
The Dark Lanes
<!-- Page Styling -->
<link href="css/Index.css" rel="stylesheet" type="text/css" />
<!-- Navigation -->
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<!-- Slideshow -->
<link href="css/Slider.css" rel="stylesheet" type="text/css" />
<!-- jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmslideshow.js"></script>
<script type="text/javascript" src="JavaScript/autoplay.js"></script>
<!-- JQuery Plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="JavaScript/modernizr.js"></script>
<!-- Twitter Plugin -->
<script type="text/javascript" src="JavaScript/Twitter.js"></script>
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div id="wrapper">
<!--<header>
<img src="Images/DarkLanes-Logo.png" alt="header"/>
</header> -->
<!-- Navigation -->
<ul id="menu">
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>
Biography
<ul>
<li>Band Profile</li>
<li>Member Profiles</li>
</ul>
</li>
`<li>
Media
<ul>
<li>Images</li>
<li>Videos</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- End of Nav -->
<div class="left">
<h3>The Dark Lanes</h3>
</div>
<div class="right"></div>
<!-- Start of Slideshow -->
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<div class="jms-content">
<h3>Just when I thought...</h3>
<p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes.jpg" alt="image1 />
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<div class="jms-content">
<h3>Holy cannoli!</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/Stage.jpg" alt="image2" />
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<div class="jms-content">
<h3>The Rocker</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="videos.html">View Video!</a>
</div>
<img src="images/Darlanes.jpg" alt="image3" />
</div>
<div class="step" data-color="color-5" data-x="3000">
<div class="jms-content">
<h3>Supercool!</h3>
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes2.jpg" alt="image4" />
</div>
<div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
<div class="jms-content">
<h3>Did you know that...</h3>
<p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes3.jpg" alt="image5" />
</div>
</section>
<div id="content">
<!-- Social Media Plugins -->
<div id="facebook">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTDLmusic%2Fposts%2F634412299948671&width=300&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false&appId=1407117389534500"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:245px; background-color:#373737;">
</iframe>
</div>
<div class="twitter-timeline">
<a class="twitter-timeline" href="https://twitter.com/TheDarkLanes" data-widget-id="422456331014901760">Tweets by #TheDarkLanes</a>
</div>
<!-- End of Social Media Plugins -->
<div class="video">
<iframe width="600" height="480" src="https://www.youtube.com/embed/hEkpJMxci2Y" frameborder="0">
</iframe>
</div>
<!--Social Media Logos -->
<div class="social-mediabg">
<h3>The Dark Lanes</h3>
</div>
<div class="social-media">
<ul>
<li><img src="Images/facebook.png" alt="facebook"/></li>
<li><img src="Images/twitter.png" alt="twitter"/></li>
<li><img src="Images/youtube.png" alt="youtube"/></li>
<li><img src="Images/soundcloud.png" alt="soundcloud"/></li>
</ul>
</div>
</div>
<div id="footer">
<div class="SiteMap">
<ul>
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>Band Profile</li>
<li>Member Profiles</li>
<li>Images</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="copyright">
<div class = "copyright">
<h5>© 2014 - The Dark Lanes. All Rights Reserved.</h5>
</div>
</div>
</div>
</body>
CSS
.jms-slideshow {
position: relative;
width: 100%;
height: 650px;
margin-top: 10px;
margin: 0 auto;
}
.jms-wrapper {
width: 995px;
height: 650px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 0.9);
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);
}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}
.step {
width: 995px;
height: 650px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.jms-content{
margin: 0px 0px 300px 20px;
position: relative;
clear: both;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.step h3{
color: grey;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: grey;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #969696; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 0px;
}
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
z-index: 2000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.jms-arrows{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
content: 'The slideshow functionality is not supported on your device.';
padding: 0px 0px 30px 0px;
text-align: center;
display: block;
}
.jms-wrapper.not-supported .step{
display: none;
position: relative;
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
You should be loading the jQuery before the jmpress plugin :)
jmpress is a jQuery plugin, and therefore wont work if you haven't loaded it before!
<!DOCTYPE html>
<head>
<title>RosePam Solutions Ltd</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<!-- jmpress plugin -->
<script type="text/javascript" src="js/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="js/modernizr.custom.48780.js"></script>
<noscript>
<style>
.step {
width: 100%;
position: relative;
}
.step:not(.active) {
opacity: 1;
filter: alpha(opacity=99);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
.step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
</style>
</noscript>
</head>
<body class="body">
<div class="content">
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<img src="images/The Dark Lanes.jpg" alt="image1 />
<div class="jms-content">
<h3><span>Just when I thought...</span></h3>
<p><span>From fairest creatures we desire increase, that thereby beauty's rose might never die</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<img src="images/Stage.jpg" alt="image2" />
<div class="jms-content">
<h3><span>Holy cannoli!</span></h3>
<p><span>But as the riper should by time decease, his tender heir might bear his memory</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<img src="images/Darlanes.jpg" alt="image3" />
<div class="jms-content">
<h3><span>Supercool!<span></h3>
<p><span>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-5" data-x="3000">
<img src="images/The Dark Lanes3.jpg" alt="image5" />
<div class="jms-content">
<h3><span>Did you know that...</span></h3>
<p><span>Thou that art now the world's fresh ornament and only herald to the gaudy spring</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
</section>
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
});
</script>
</div>
</body>