I can't figure this thing out for the life of me! I know the html is a little messy but it works for what I wanted to do. The problem here is that I can't click the links once they're wrapped in the div. I deleted the wrap and the links worked, but obviously the page layout gets messed up and the horizontal scroll doesn't work. Any help would be greatly appreciated. I'm sure it's something obvious that I'm just missing but I can't figure it out!
Here's the css
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:950px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('LINK');
background-size:100%;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('LINK');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-99999999999999999999999999999999999999999999999999999999999999999;
}
ul#bio {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:510px;
margin-left:400px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999999999999999999999999999999999999999;
}
ul#music {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-215px;
margin-left:970px;
font-size:40px;
color:#fff;
z-index:999999;
}
ul#lyrics {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:10px;
margin-left:1500px;
font-size:40px;
color:#fff;
z-index:99999999999;
}
ul#dates {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:50px;
margin-left:1100px;
font-size:40px;
color:#fff;
z-index:999999999999999999;
}
ul#gallery3 {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-425px;
margin-left:2000px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999;
}
ul#store {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:160px;
margin-left:2375px;
font-size:40px;
color:#fff;
z-index:99999999999999999999999999999999999;
}
ul#contact {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:120px;
margin-left:2650px;
font-size:40px;
color:#fff;
z-index:9999999999999999999999999999999999999999;
}
ul#gallery li{
display:block;
}
ul#gallery li img{
float:left;
height:100%;
}
#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(LINK) repeat;
text-align:center;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 15px #111;
-webkit-box-shadow:0 0 15px #111;
-moz-box-shadow:0 0 15px #111;
max-width:940px;
}
#content img{
height:90%;
max-width:100%;
}
#media only screen and (min-width: 1280px) {
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:1000px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('{image:pano}');
background-size:100%;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('{image:map}');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-9999999999999999999999999999999999999999999999999999999999;
}
}
And here's the HTML:
<div id="wrap-gallery">
<ul id="gallery">
<ul id="gallery2">
<ul id="bio">
<li>Bio</li>
</ul>
<ul id="music">
<li>Music</li>
</ul>
<ul id="lyrics">
<li>Lyrics</li>
</ul>
<ul id="dates">
<li>Dates</li>
</ul>
<ul id="gallery3">
<li>Gallery</li>
</ul>
<ul id="store">
<li>Store</li>
</ul>
<ul id="contact">
<li>Contact</li>
</ul>
</ul>
</ul>
</div>
and some js:
var moveWin = {
availW: 0,
galW: 0,
moveDis: 0,
init: function(){
this.availW = $(document).width();
this.galW = $('#gallery').width() - this.availW;
this.moveDis = this.galW / this.availW;
$(document).mousemove(function(e){
moveWin.displace(e);
});
},
displace: function(e){
var x = e.pageX * moveWin.moveDis;
$('#gallery').css({left: -x});
$('#status').html(e.pageX);
}
}
jQuery(document).ready(function($) {
moveWin.init();
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#lightbox').length > 0) { // #lightbox exists
$('#content').html('<img src="' + image_href + '" />');
//$('#lightbox').show();
$('#lightbox').fadeIn('2000');
}
else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
});
Thanks again for any help that you can offer!
Related
As the title suggests, I am trying to create a horizontal scrollable <ul> with <li> with width:auto and with prev and next buttons, clearly with overflow:hidden.
Any suggestions on how to manage it with jquery?
This is the code that I have prepared...
JSFiddle
HTML:
<div id="wrapper">
<span class="arrow"><</span>
<span class="arrow">></span>
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>
CSS:
* {
margin:0;
padding:0;
}
#wrapper {
width:calc(100% - 120px);
height:60px;
background-color:#dbdbdb;
padding:0 60px;
margin-top:60px;
font-family:helvetica;
overflow:hidden;
position:relative;
z-index:99;
}
.arrow {
display:block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color:#cccccc;
font-weight:bold;
cursor:pointer;
position:absolute;
top:0;
z-index:101;
}
.arrow:first-of-type {
left:0;
}
.arrow:nth-of-type(2) {
right:0;
}
#nav {
width:auto;
height:60px;
overflow:hidden;
list-style-type:none;
white-space:nowrap;
transition:2.0s;
}
#nav li {
display:inline-block;
height:60px;
line-height:60px;
font-size:13px;
padding:0 30px;
}
You can simply use bxSlider without reinventing the wheel. To make your code work, you just need to add:
$(function () {
$('#nav').bxSlider({
pager: false,
minSlides: 3,
maxSlides: 3,
slideWidth: 150,
slideMargin: 25
});
});
#wrapper {
margin: auto;
}
.bx-viewport {
height: 50px !important;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<div id="wrapper">
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>
Hoping it will be useful for anyone, This what I needed...
(Thank you Praveen Kumar)
JSFiddle
$(".arrow:first-of-type").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '-=200' }, 1000);
}
);
$(".arrow:nth-of-type(2)").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '+=200' }, 1000);
}
);
Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen
I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden
You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();
codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});
This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
I was working on this code and I all the sudden couldn't type in the input boxes. I don't know what caused it but I have tried everything. I posted all of the code below because frankly for all I know it could be anything. (Also on an unrelated note when I try to edit the span tag with the class "createone" in css it won't cooperate with :hover. It lets me change the styling properties of it without the :hover but with it, it doesn't work.)
<!DOCTYPE html>
<html>
<head>
<title>Log in box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div><Br><Br><Br>
<h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
<!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
<div class="loginArea">
<input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
<input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
<button class="login">Log In</button>
<p class="createacc">Don't have an account? <span class="createone">Creat one.</span></p>
<p class="error">Sorry but that username or password is incorrect.</p>
</div>
<div class="newAccArea">
<h1 class="newAccText">Create New Account</h1>
<h2 class="newUsername" id="position">Username:</h2>
<input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<h2 class="confNewPassword" id="position">Confirm Password:</h2>
<input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
<button class="createAccButt">Create Account</button>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#F0F0F0;
}
.successLog {
background-color:#8A8A8A;
height:450px;
width:700px;
z-index:1;
opacity:0;
}
.loginArea {
opacity:1;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
position:relative;
bottom:500px;
opacity:0;
}
.newUsername {
position:relative;
top:80px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newUser {
position:relative;
top:60px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.newPassword {
position:relative;
top:42px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newPass {
position:relative;
top:23px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.confNewPassword {
position:relative;
bottom:50px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.confNewPass {
position:relative;
bottom:70px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.createAccButt {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:77;
left:78;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.createAccButt:hover {
background-color:#A81919;
}
.newAccText {
position:relative;
top:100px;
font-family: 'Oswald', sans-serif;
font-size:30px;
text-align:center;
color:red;
}
/*LOG IN AREA*/
.backarea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
position:relative;
top:67px;
left:230px;
position:fixed;
}
.userInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:50px;
left:35px;
border:1px solid white;
}
.userInput:hover {
border:2px solid #60BF68;
}
.username {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:50px;
left:75px;
}
.passInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:20px;
left:35px;
border:1px solid white;
}
.passInput:hover {
border:2px solid #60BF68;
}
.password {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:80px;
left:75px;
}
.login {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:60;
left:71;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.login:hover {
background-color:#B81414;
border:1px solid black;
}
.createacc {
position:relative;
bottom:73px;
font-family: 'Roboto Condensed', sans-serif;
padding:8
}
.createone {
text-decoration:none;
color:#4548E6;
}
.createone:hover {
color:purple;
}
.error {
color:red;
font-family: 'Merriweather', serif;
font-size:10;
position:relative;
bottom:93px;
text-align:center;
opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
color:#fff;
}
.invis {
opacity:0;
}
/*HTML CLASSES*/
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:10;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:27px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:14px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:255px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:507px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
.welcomeBack {
font-family: 'Oswald', sans-serif;
color:blue;
text-align:center;
}
.logOut {
position:relative;
top:130px;
left:312px;
padding:5px;
border:none;
background-color:red;
color:white;
width:100px;
height:40px;
font-size:20px;
font-family: 'Oswald', sans-serif;
}
.logOut:hover {
background-color:#B51919;
border-top:1px solid #F7A3A3;
border-left:1px solid #F7A3A3;
}
Javascript:
//Username and passwords
var UserandPass = array[(
userResult === "CodeAcademy"
&&
passResult === "fun-coding"
||
userResult === "User_Example"
&&
passResult === "Pass_Example"
||
userResult === "JoshH"
&&
passResult === "Wisconsin"
||
userResult === "Wisconsin21"
&&
passResult === "go_packers")];
$(document).ready(function() {
$('.login').click(function(){
var userResult = $('input[name=userInput]').val();
var passResult = $('input[name=passInput]').val();
if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
$('.backarea').fadeOut('fast');
$('.successLog').fadeTo('fast',1);
}
else {
$('.passInput').css('border-color','red');
$('.userInput').css('border-color','red');
$('.error').fadeTo('fast',1);
$('.error').effect( "bounce",{ times: 3 },"slow" );
};
});
});
$(document.ready(function(){
$('.createone').click(function(){
$('.backarea').fadeOut('fast');
$('.newAccArea').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
$('.dropdownHome').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#dashboard').click(function(){
$('.dropdownDashboard').slideToggle('slow');
$('.dropdownDashboard').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#contactUs').click(function(){
$('.dropdownContactUs').slideToggle('slow');
$('.dropdownContactUs').fadeTo('fast',1);
});
});
I put this in a jsfiddle to have a look.
The issue is you have an element on top your inputs. Using the Chrome dev tools i found .newAccArea. If you remove it or drop the z-index below 0 the inputs work, you'll probably will want to fix it another way but at least you know what's broke!
.newAccArea {
position: relative;
bottom: 500px;
opacity: 0;
z-index: -5; // this for example
}
I have a hidden overflow vertical text scroll. Which is working fine.
But when I add the same div it didnt work. I want to run 2div's on the same page.
<style type="text/css">
#rollerBox {position:relative; width:336px; height:151px; padding-top:13px; border:1px solid #888; background:#eee; font-family:verdana, arial, sans-serif;}
#scroller {width:300px; height:134px; overflow:hidden; margin:0 0 0 17px; position:relative; top:0; border:1px solid #888; background:url(scroll-list/back.gif);}
#innerContainer {position:absolute; left:0; top:0; height:75px; overflow:hidden;}
#scroller ul {margin:0; padding:0; list-style:none; width:300px;}
#scroller ul li {float:left; height:27px; width:300px;}
#scroller ul li a {display:block; float:left; height:26px; line-height:26px; width:300px; font-size:11px; color:#000; font-weight:bold; text-decoration:none; text-indent:30px; border-bottom:1px solid #ccc;}
#scroller ul li a:hover {background:#e60; color:#fff;}
#slideUp {width:302px; height:13px; position:absolute; left:17px; top:0; background:url(scroll-list/top-arrow.gif); overflow:hidden;}
#slideDown {width:302px; height:13px; position:absolute; left:17px; bottom:0; background:url(scroll-list/bottom-arrow.gif); overflow:hidden;}
</style>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/libs/jquery-v1.7.2.js"></script>
<script type="text/javascript">
roller = function() {
total = $('#innerContainer li').length;
$totalImgs = $('#innerContainer li');
thumbHeight = 0;
for (x=0; x<total; x++) {
thumbHeight = thumbHeight + 27;
}
$('#innerContainer') .css({height: thumbHeight + 'px'});
$('#slideUp') .hover(function(e){
$('#innerContainer') .stop();
posTop = -parseInt($('#innerContainer').css("top"))
speed = (posTop) * 4;
slideTop = thumbHeight - 135;
$('#innerContainer') .animate({"top": "0px"}, speed)
},function(){
$('#innerContainer') .stop();
});
$('#slideDown') .hover(function(e){
posTop = parseInt($('#innerContainer').css("top"))
speed = (thumbHeight + posTop) * 4;
slideTop = thumbHeight - 135;
$('#innerContainer') .stop();
$('#innerContainer') .animate({"top": -slideTop + "px"}, speed)
},function(){
$('#innerContainer') .stop();
});
}
</script>
<body id="www-stunicholls-com" onload="roller()">
<div id="rollerBox">
<div id="scroller">
<ul id="innerContainer">
<li>Afghanistan</li>
<li>Akrotiri</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
<li>Angola</li>
<li>Anguilla</li>
<li>Antarctica</li>
<li>Antigua and Barbuda</li>
<li>Argentina</li>
<li>Armenia</li>
<li>Aruba</li>
<li>Ashmore and Cartier Islands</li>
<li>Australia</li>
<li>Austria</li>
<li>Azerbaijan</li>
<li>Bahamas, The</li>
</ul>
</div>
<div id="slideUp">up</div>
<div id="slideDown">dwn</div>
</div>
<div id="rollerBox">
<div id="scroller">
<ul id="innerContainer">
<li>Afghanistan</li>
<li>Akrotiri</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
<li>Angola</li>
<li>Anguilla</li>
<li>Antarctica</li>
<li>Antigua and Barbuda</li>
<li>Argentina</li>
<li>Armenia</li>
<li>Aruba</li>
<li>Ashmore and Cartier Islands</li>
</ul>
</div>
<div id="slideUp1">up</div>
<div id="slideDown1">dwn</div>
</div>
</body>
I was trying to make fiddle but I am not able to make it run there. I apologize.
Need help.
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck