Automatic images hover effect - javascript

I want to slide these images without hover effect
Because in the smartphone there is no mouse for the hover effect. so I want to slide images automatically i.e. images comes after one another. I have added HTML and CSS file which is fully running**
Please help me to add javascript function
Here is CSS Code
#charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.box{
width: 900px;
height: 400px;
background-color: brown;
margin: 10% auto;
overflow: hidden;
cursor: move;
box-shadow: 2px 2px 10px 1px;
}
.box ul li{
position: relative;
width: 160px;
float: left;
transition: all 0.5s;
}
.box ul:hover li{
width: 40px;
}
.box ul li:hover{
width: 640px;
}
.box ul li img{
width: 900px;
height: 400px;
display: block;
}
.box-set{
position: absolute;
left: 0;
bottom: 0;
width: 640px;
height: auto;
opacity: 0.8;
background-color: black;
}
.box-set>a{
display: block;
padding: 25px;
color: white;
text-decoration: none;
}
.box-set-4{
width: 900px;
}
<html>
<head>
<meta charset="utf-8">
<title>Slider 3D</title>
<link href="./slider.css" rel="stylesheet">
</head>
<body>
<div class="box">
<ul>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
</li>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
</li>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
</li>
<li><div class="box-set box-set-4">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
</li>
</ul>
</div>
</body>
</html>


these code could help you but there is small problem in last slide :
I choose hover class and set it in javascript code for each slides
function doSetTimeout(i) {
setTimeout(function () {
$('li').removeClass('hover');
$("#slide"+i).addClass('hover');
}, i*1000);
}
for (var i = 1; i <= 4; ++i)
doSetTimeout(i);
#charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.box{
width: 900px;
height: 400px;
background-color: brown;
margin: 10% auto;
overflow: hidden;
cursor: move;
box-shadow: 2px 2px 10px 1px;
}
.box ul li{
position: relative;
width: 160px;
float: left;
transition: all 0.5s;
}
.box .hover li{
width: 40px;
}
.box ul .hover{
width: 640px;
}
.box ul li img{
width: 900px;
height: 400px;
display: block;
}
.box-set{
position: absolute;
left: 0;
bottom: 0;
width: 640px;
height: auto;
opacity: 0.8;
background-color: black;
}
.box-set>a{
display: block;
padding: 25px;
color: white;
text-decoration: none;
}
.box-set-4{
width: 900px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Slider 3D</title>
<link href="./slider.css" rel="stylesheet">
</head>
<body>
<div class="box">
<ul>
<li id="slide1"><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
</li>
<li id="slide2"><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
</li>
<li id="slide3"><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
</li>
<li id="slide4"><div class="box-set box-set-4">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
</li>
</ul>
</div>
</body>
</html>


I solve this problem by using the jquery libary.
I hope it will be helpful.
<html>
<head>
<meta charset="utf-8">
<title>Slider 3D</title>
<style type="text/css">
#charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.box{
width: 900px;
height: 400px;
background-color: brown;
margin: 10% auto;
overflow: hidden;
cursor: move;
box-shadow: 2px 2px 10px 1px;
}
.box ul li{
position: relative;
width: 160px;
float: left;
transition: all 0.5s;
overflow: unset !important;
}
.box ul:hover li{
width: 40px;
}
.box ul li:hover{
width: 640px;
}
.box ul li img{
width: 900px;
height: 400px;
display: block;
}
.box-set{
position: absolute;
left: 0;
bottom: 0;
width: 640px;
height: auto;
opacity: 0.8;
background-color: black;
}
.box-set>a{
display: block;
padding: 25px;
color: white;
text-decoration: none;
}
.box-set-4{
width: 900px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
</head>
<body>
<div class="box">
<ul>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm" alt="Image 1"></a>
</li>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/embed7-601057996.jpg" alt="Image 2"></a>
</li>
<li><div class="box-set">Lorem Ipsum</div>
<a hreaf="#"><img src="http://www.apimages.com/Images/ssAP964769062229.jpg" alt="Image 3"></a>
</li>
<li><div class="box-set box-set-4">Lorem Ipsum</div>
<a hreaf="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyzAJ4mD7unUBnqj4-AtFtrxL1ssJ7tGqJt17qIXxAECoeh7ma" alt="Image 4"></a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var tempObj;
setVirtualHover(0);
function setVirtualHover(id){
setTimeout(function(){
const index = id % 4;
for(var i=0; i < 4; i++){
if(i == index){
$("li").eq(i).animate({
width:"640px",
},{ duration: 500, queue: false });
}else{
$("li").eq(i).animate({
width:"40px",
},{ duration: 500, queue: false });
}
}
setVirtualHover(id + 1);
},2000);
}
});
</script>
</body>
</html>

Related

Carousel's image is bigger I expected

Carousel's image is bigger I expected.
My Code
* {
margin: 0;
padding: 0;
}
.menu {
background-color: gray;
width: 500px;
height: 100%;
float: left;
}
.title {
color: white;
font-size: 30px;
margin: 0px 5px;
margin-left: 40px;
text-align: center;
}
.first {
padding-top: 30px;
}
html,
body,
.menu {
height: 100%;
}
body {
margin: 0;
}
.relative {
position: relative;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
li a img {
width: 100%;
height: 100%;
}
.float-right {
width: calc(100% - 500px);
overflow: hidden;
float: right;
}
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="menu" id="menu">
<h2 class="title first">SITE</h2>
<ul class="">
<li><a class="home" href="">Home</a></li>
<li><a class="profile" href="">Detail</a></li>
</ul>
</div>
<div class="imgArea float-right" id="carousel">
<ul>
<li><img src="photo1.jpg" alt=""></li>
<li><img src="photo2.jpg" alt=""></li>
</ul>
</div>
<script src="carousel.js"></script>
when I run this web site,carousel's image is bigger than the original image like yellow arrow in picture.(It does not show image...)
I wanna put carousel in browser remaining of area of and carousel's image's size is adjusted 100% in the area.
So I really cannot understand why carousel's image is zoomed.When I wrote in html like <a href="#"><img src="photo1.jpg" width="100px" height="100px" alt=""> same situation happens.

In the css you have provided:
li a img{
width: 100%;
height: 100%;}
you need to change it too
li a img{
width: 100px;
height: 100px;}
Also as you are already using bootstrap u may want to look into bootstrap's carousel https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-container {
width: 100%;
float: left;
}
.header {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
}
.imgArea {
float: left;
width: 75%;
height: 100%;
}
<body>
<div class="main-container">
<div class="header">SITE</div>
<div class="sidebar" id="menu">
<ul class="sidebar-ul">
<li><a class="home" href="">Home</a>
</li>
<li><a class="profile" href="">Detail</a>
</li>
</ul>
</div>
<div class="imgArea" id="carousel">
<ul class="carousel-ul">
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
</ul>
</div>
</div>
<script src="carousel.js"></script>
</body>
Right now i dont have your carousel.js so i hope this will work.

Fixed & shrinking navbar

I didn't find anything on Google about this without using Bootstrap and in my project I didn't want to. (because I'm a beginner and I decided to start with a vanilla project - only css html and js and mostly because when I started building this I didn't even know what bootstrap was).
So how I can make the white (id: top-mare + logo) navbar fixed and shrinking while scrolling?
HTML
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Best DAVNIC73</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="css/mqueries.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<button onclick="topFunction()" id="myBtn" title="Inapoi la inceputul paginii"><img src="img/arrow-up-01-128.jpg"/></button>
<script src="js/myBtn.js"></script>
<footer class="footer">
<ul>
<li id="nume">SC Best DAVNIC73 SRL</li>
<li><img src="img/location_1.png" class="location"/> Judet Dambovita, Oras Targoviste, Strada, Nr</li>
<li><img src="img/phone.jpg" class="phone"/>074 44 44 444</li>
<li><img src="img/mail.jpg" id="mail"/>bestdavnic73#gmail.com</li>
<li class="copyright">Copyright Ⓒ 2017</li>
</ul>
</footer>
</div>
</div>
</body>
</html>
CSS
html {
box-sizing: border-box;
height: 100%;
font-family: Roboto, Arial;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: auto;
width: 100%;
padding: 0;
padding-bottom: 6vw;
margin: 0;
font-size: 1.1vw;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 0.73vw;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 0.416vw 1.5625vw;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6vw;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 2.8645vw;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
max-width: 100%;
float: left;
margin-left: 12.5vw;
margin-right: 6.77vw;
width:15vw;
height: auto !important;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom: 3.125vw;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display: inline;
}
#top-mare li a {
margin-top: 2.1875vw;
margin-left: 2.083vw;
padding-right: 1.041vw;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1vw;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #F28A00;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 1.041vw;
}
.footer li {
font-size: 0.9vw;
font-weight:bold;
display: inline;
margin-left: 2.604vw;
padding-right: 0.78125vw;
padding-bottom: 0.263vw;
}
.copyright {
float:right;
}
#nume {
font-weight: italic;
}
#myBtn {
display: none;
position: fixed;
bottom: 3.646vw;
left: 3.125vw;
z-index: 99;
border: none;
outline: none;
background-color: #F28A00;
color: white;
cursor: pointer;
padding: 0.78125vw;
border-radius: 10px;
width: 3.33333vw;
height: 3.3333vw;
}
.location {
width: 0.677vw;
height: 0.677vw;
}
.phone {
width: 0.677vw;
height: 0.677vw;
}
#mail {
height: 0.677vw;
width: 0.9375vw;
}

To create shrinking animation I would suggest you to use CSS transition and jQuery addClass.
So, you're going to measure the scroll position from top. When at height wanted, add CSS class holding shrink values to that element.
For example your logo has class 'logo':
<img src="image/logo.jpg" class="logo"/>
Logo CSS:
.logo {
width: 200px;
transition: all .5s ease-in-out;
}
The class you're going to add/remove is called eg. 'shrink'. It holds shrink values (eg you want the shrinking logo to be 125px wide):
.logo.shrink {
width: 125px;
}
Next add shrink class to logo when needed (70px from top in this example).
$(document).on('scroll', function() {
if ($(this).scrollTop > 70) {
$('.logo').addClass('shrink');
} else if ($(this).scrollTop < 70) {
$('.logo').removeClass('shrink');
}
});
I made you an example: https://jsfiddle.net/cr29y1tc/29/

Show <li> dynamically using jQuery hover

I am trying to create a dynamic <ul> such that when I hover of a <li> (the class details), it dynamically creates another <li> (homework for that class) underneath it. I have this working.
However, when I leave the <li> I want the list of homework items to disappear. To accomplish this I decided to remove the <li> of homework items when I leave that <li>. The problem is that if I never hover into that homework list and simply just hover in and out of the class item details, it will not disappear. I am new to jQuery and so I may be missing something simple.
Before any hover
Hover into first class item
When I move the mouse out of the item, I want the items to disappear
But I want to maintain the functionality that when I hover into the homework list, it doesn't disappear:
And when I hover out of the homework list, it disappears (currently does this)
Here is my code:
jQuery.js
$(document).ready(function() {
$(".item").hover(
function(){
$(this).find('.class-item').find('.top').css("background", "#D0D0D0");
$(this).find('.class-item ').find('.bottom').css("background", "#B8B8B8");
$(this).css("border-color", "white");
$(this).css("margin-bottom", "0");
$('#classes li:eq(' + $( "li" ).index(this) + ')').after('<li class="hw"><ul><li class="hw-item">Homework 1</li><li class="hw-item">Homework 2</li></ul></li>');
var parent = $(this);
$(".hw").hover(
function(){
},
function(){
parent.css("margin-bottom", "2%");
$('#classes li:eq(' + ($( "li" ).index(parent) + 1) + ')').remove();
}
);
},
function(){
$(this).find(' .class-item ').find(' .top ').css("background", "#B8B8B8");
$(this).find(' .class-item ').find(' .bottom ').css("background", "#D0D0D0");
$(this).css("border-color", "#888888");
}
);
});
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", monospace;
font-size: 24px;
}
body {
}
#left {
float: left;
height: 100%;
width: 60%;
background: black;
}
#right {
float: left;
height: 100%;
width: 40%;
padding: 1%;
background: black;
}
#classes {
height: 100%;
overflow-y: scroll
}
#classes::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
.item {
height: 150px;
margin-bottom: 2%;
border: 5px solid #888888;
}
.class-item {
height: 100%;
width: 100%;
display: inline-block;
}
.top {
width: 100%;
height: 50%;
text-align: center;
background: #B8B8B8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom {
width: 100%;
height: 50%;
text-align: center;
background: #D0D0D0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hw {
margin-bottom: 2%;
padding: 1%;
width: 100%;
display: inline-block;
}
.hw-item{
margin-bottom: 1%;
padding: 0.25%;
background: #D0D0D0;
border: 3px solid white;
}
h3 {
text-align: center;
}
index.html
<html>
<head>
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div id="left">
<img src="me.jpg"/>
</div>
<div id="right">
<ul id="classes">
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Algorithm Analysis</h3>
</div>
<div class="bottom">
COMPSCI 704
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Programming Language Concepts</h3>
</div>
<div class="bottom">
COMPSCI 431
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Physics 1 with Calculus</h3>
</div>
<div class="bottom">
PHYSICS 209
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Ethics</h3>
</div>
<div class="bottom">
COMPSCI 395
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Architecture</h3>
</div>
<div class="bottom">
COMPSCI 458
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Thanks to the comments on my post, I was able to avoid the javascript and do it solely through css using:
.class-item {
height: 150px;
width: 100%;
display: inline-block;
border: 5px solid #888888;
}
.homework {
padding: 1%;
display: none;
}
.class-item:hover + .homework {
display: block;
}
.homework:hover {
display: block;
}

Mobile Menu Help, Add parent link to dropdown, disable parent link

I've searched for a while for a way to do what I'm trying to accomplish but came up with nothing that could help me or explain it well enough for me to understand. I have this jsfiddle that I'm working on. I'm having some issues getting this to work the way I'm wanting it to. I would like to clone the parent link into the dropdown area and make sure the parent link is disabled (only on mobile) and only displays the dropdown when clicked. I know this can probably be accomplished by using JS since I cannot edit the HTML that is being outputted by the CMS I am working in. I'm sorry, I'm not very keen in JS, still learning. Please tell me if you need any more information. Thank you so much!
HTML
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem calendarnav"><a class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
JS
//This JS was on the page already, maybe you can utilize it in someway.
$(document).ready(function(){
var allPanels = $('.sflistItemContent').hide();
$('.sflistListItem:first > .sflistItemContent').show();
$('.sflistItemTitle').click(function() {
allPanels.slideUp();
$('.expanded').removeClass('expanded');
$(this).next().slideDown();
$(this).addClass('expanded');
return false;
});
$('.menuItem:nth-child(3n)').addClass('calendarnav');
$('.menuItem:nth-child(4n)').addClass('membership');
$('.menuItem:nth-child(5n)').addClass('aboutus');
$('.menuItem:nth-child(6n)').removeClass('calendarnav').addClass('membersonly');
// Form input hide/display default text on focus/blur
$(".sfsearchTxt").focus(function() {
if(this.value == this.defaultValue) {
this.value = "";
}
}).blur(function() {
if(!this.value.length) {
this.value = this.defaultValue;
}
});
});

Ok, I worked on this for about an hour and a half, and it was quite some work. Basically, what I did was copy the parent links and added it to their respective dropdown lists as the first item and gave them a class of "clone". That way, using css and media queries, those options only appear on a mobile layout and disappear when you resize the window back to full desktop view. And you said it yourself, yes it requires some javascript to create the click events that will make the dropdowns appear when their respective parent link is clicked. To do that I used "event.preventDefault();" which stops the link from going to the page where it's supposed to take you and then immediately use show() to make the dropdown appear (it will also put away the dropdown list if you click it again using hide(); ). Lastly, using your css, I deactivated the hover effects on the dropdown menus, but only on mobile layouts. The desktop layout has remained intact. Here's the code:
$(document).ready(function(){
if ($(".menuItem").css("float") == "left") {
$(".content").css("display", "");
}
var showDropDown = function(id) {
if ($(".menuItem").css("float") == "none") {
event.preventDefault();
var id = "#" + id;
var dropdownSelector = $(id).parent().children(".content");
if (dropdownSelector.css("display") == "none") {
dropdownSelector.show();
}
else {
dropdownSelector.hide();
dropdownSelector.css("display", "");
}
}
};
$("#resources").click(function() {showDropDown($("#resources").attr("id"))});
$("#education").click(function() {showDropDown($("#education").attr("id"))});
$("#calendar").click(function() {showDropDown($("#calendar").attr("id"))});
$("#membership").click(function() {showDropDown($("#membership").attr("id"))});
$("#about-us").click(function() {showDropDown($("#about-us").attr("id"))});
$("#members-only").click(function() {showDropDown($("#members-only").attr("id"))});
});
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
.clone {
display:none;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
.menuItem:hover .content {
display: none;
}
.calendarnav:hover .content {
display: none;
}
.clone {
display:block;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a id="resources" class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Resources
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a id="education" class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Education
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem"><a id="calendar" class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li class="clone">Calendar
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a id="membership" class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Membership
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a id="about-us" class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">About Us
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a id="members-only" class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Members Only
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Also here's the jsfiddle where I did my work: http://jsfiddle.net/381nxmuo/

Stop scrolling at some point

im having a problem making an div stop scrolling at a certain point. I've looked at others solutions but i cant make it work on mine. Anybody care to take a look and tell me what i've done wrong?
My code's:
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#header').followTo(250);
#charset "utf-8";
/* CSS Document */
/*Index*/
#index {
background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
background-repeat: no-repeat;
background-position: center 10;
background-attachment: fixed;
}
#venstre {
float: left;
}
#midt {
float: left;
}
#header {
position: fixed;
top: 0;
left: 0;
height: auto;
}
#header a {
list-style-type: none;
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
font-size: 60px;
float: left;
margin-top: 32px;
margin-left: 40px;
margin-right: 650px;
position: relative;
}
#header form {
float: right;
margin-top: 26px;
margin-right: 49px;
}
#righto {
float: right;
}
#lefto {
float: left;
}
#Wrapper {
clear: both;
}
.anker {
width: 67px;
height: 52px;
padding: 10px;
margin-left: 147px;
margin-top: 207px;
float: left;
position: fixed;
}
.anker a {
text-decoration: none;
text-align: center;
}
.anker ul li {
list-style-type: none;
}
.undercirkel {
margin-top: 0;
margin-left: 20px;
list-style-type: none;
}
.undercirkelt {
margin-top: 0;
margin-left: 800px;
list-style-type: none;
}
.box {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
margin-top: 187px;
opacity: 0.4;
z-index: -1;
}
.boxt {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
opacity: 0.4;
z-index: -1;
}
.dropdown {
width: auto;
float: left;
position: fixed;
margin-top: 190px;
}
.dropdown a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
text-align: center;
font-size: 18px;
margin: 2px 0 2px 0;
}
.dropdown a:hover {
color: #282828;
}
.dropdown ul a {
display: block;
}
.dropdown ul {
list-style-type: none;
margin: 0 auto;
}
.drop {
background-color: #393939;
border: #D4D4D4;
}
.drop li:hover {
background-color: #808080;
border: #D4D4D4;
}
.undermenu {
display: none;
}
.undermenu li a {
display: block;
text-decoration: none;
margin-left: 50px;
}
.undermenu li {
clear: both;
background-color: #393939;
}
.dropdown li:hover .undermenu {
display: block;
position: absolute;
}
.dropdown li:hover .undermenu li {
float: left;
font-size: 13px;
}
.dropdown ul li ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#right {
width: 300px;
background-color: #FFFFFF;
float: right;
margin-right: 52px;
margin-top: 200px;
position: fixed;
margin-left: 1250px;
opacity: 0.4;
}
#right img {
padding: 15px;
}
.footer {
clear: both;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rockentusiasterne</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/js.js"></script>
<script>
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 40
});
}
});
};
$('#scrollto-menu-nav').followTo(250);
</script>
</head>
<body id="index">
<div id="header">
<div id="lefto">Rockentusiasterne
</div>
<div id="righto">
<form>
<label>
<img src="../img/search.png">
</label>
<input type="search" name="search" placeholder="Søg">
</input>
</form>
</div>
</div>
<div id="Wrapper">
<div id="left">
<div class="dropdown">
<ul>
<div class="drop">
<li>Forside
</li>
</div>
<div class="drop">
<li>Genrer
<ul class="undermenu">
<li>Rock'n'Roll
</li>
<li>Alternativ musik
</li>
<li>Grunge
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Om os
</li>
</div>
<div class="drop">
<li>Forum
<ul class="undermenu">
<li>Opret bruger
</li>
<li>FAQ
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Kontakt os
</li>
</div>
</ul>
</div>
</div>
<div id="innerwrapper">
<div id="midt">
<div class="anker">
<ul>
<li>
<a href="#1">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="#2">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="3">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="4">
<img src="../img/cirkel.png">
</a>
</li>
</div>
<div class="box">
<a name="1"></a>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="boxt">
<a name="2"></a>
</div>
</div>
<div id="right">
<img src="../img/metallica/Metallica-on-Howard-Stern-Show-Wallpaper.png" width="81" height="60">
</div>
<div class="footer"></div>
</body>
</html>

Unbind the scroll event. Something like
$(window).unbind('scroll');
Hope this helps.

Categories

Resources