I am trying to write one vertical menu like in this website . On hover the vertical menu should shift marginally to the right side and should display the sub menu.
I have been failed to accomplish this.
Please help me :(
<html>
<head>
<title></title>
<style>
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
Here's the solution, I used JQuery:
HTML:
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS:
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
JQuery:
$(document).ready(function(){
$(".one").mouseenter(function(){
$(".apear").show(500);
});
$(".apear").mouseleave(function(){
$(".apear").hide(500);
});
});
Here is a fiddle
Related
I wrote a toggle burger menu. I want to tell this code to hide <div class="line1"></div> and <div class="line3"></div> when the .menu is clicked.
How can I do this?
$(function(){
$('.menu').click(function(){
$('.sidebar').toggle();
});
});
.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
position:relative;
}
.menu > div {
background-color:black;
width:22px;
height:1px;
}
.line1 {
top:12px;
position:absolute;
}
.line2 {
top:16px;
}
.line3 {
top:22px;
}
.sidebar {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidebar">
Sidebar
</div>
If you want to make it hide and then show, use .toggle(), like this:
$(function(){
$('.menu').click(function(){
$('.sidebar').toggle();
$(".line1").toggle();
$(".line3").toggle();
});
});
.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
position:relative;
}
.menu > div {
background-color:black;
width:22px;
height:1px;
}
.line1 {
top:12px;
position:absolute;
}
.line2 {
top:16px;
}
.line3 {
top:22px;
}
.sidebar {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidebar">
Sidebar
</div>
Use jQuery .hide()
If you want to show it again, use .show() the same way you used .hide()
Go to the following links to learn more
Hide: http://api.jquery.com/hide/
Show: http://api.jquery.com/show/
I updated your snippet below:
$(function(){
$('.menu').click(function(){
$('.sidebar').toggle();
$(".line1").hide();
$(".line3").hide();
});
});
.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
position:relative;
}
.menu > div {
background-color:black;
width:22px;
height:1px;
}
.line1 {
top:12px;
position:absolute;
}
.line2 {
top:16px;
}
.line3 {
top:22px;
}
.sidebar {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidebar">
Sidebar
</div>
Or you can use .toggle()
http://api.jquery.com/toggle/
$(function(){
$('.menu').click(function(){
$('.sidebar').toggle();
$(".line1").toggle();
$(".line3").toggle();
});
});
.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
position:relative;
}
.menu > div {
background-color:black;
width:22px;
height:1px;
}
.line1 {
top:12px;
position:absolute;
}
.line2 {
top:16px;
}
.line3 {
top:22px;
}
.sidebar {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidebar">
Sidebar
</div>
I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>
I have an image, bg, embedded in a div using CSS just above the footer. The idea is when the mouse moves left or right, the image moves along with it. The Javascript above /body is what causes this to work. It works well, but the nav links are now unclickable and the content divs are opaque where you can see the bg image through them. When I remove the #bg div, everything works fine. Any ideas how to fix it? HTML and CSS are below. I got this from tutorial here: panning.
<!DOCTYPE HTML>
<html>
<head>
<title>portfolio</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/web.css">
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="site">
<header>
<nav>
<ul>
<li>HOME</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>PORTFOLIO</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CODE</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<div id="left_col1">
<a href="../photo_collection_blom/index.html" target="blank"><img src="img/10.png" alt="image" width="280"
height="170" class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col1">
<a href="../non_profit/index.html" target="blank"><img src="img/vpf.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col1">
<a href="../cd/index.html" target="blank"><img src="img/cd.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col2">
<img src="img/zen.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="mid_col2">
<a href="../practicum/index.html" target="blank"><img src="img/practicum.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col2">
<a href="../dropdown_nav/index.html" target="blank"><img src="img/navs.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col3">
<a href="http://centralpaintstore.com" target="blank"><img src="img/cps.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col3">
<img src="img/88.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="right_col3">
<img src="img/99.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="bg"></div>
<footer>
<p>lorem ipsum</p>
</footer>
</div>
<!-- close site -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
$('#bg').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('#bg').css('backgroundPosition', mousePos + '% 0');
});
});
</script>
</body>
</html>
CSS:
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
html {
background:url(../img/background.gif);
height:100%;
}
body {
height:100%;
z-index:100;
}
#site {
width:1200px;
min-height:100%;
margin:auto;
position:relative;
z-index:100;
}
header {
background:url(../img/background_design.jpg);
height:63px;
padding-top:25px;
z-index:100;
}
nav {
width:500px;
padding:10px;
margin:auto;
font-family:helvetica, arial, sans-serif;
font-size:1.2em;
color:#dcd8cf;
z-index:100;
}
nav ul {
word-spacing:20px;
}
li {
display:inline;
margin:auto;
}
a:link {
color:#dcd8cf;
}
/* unvisited link */
a:visited {
color:#e25d33;
}
/* visited link */
a:hover {
color:#e25d33;
}
/* mouse over link */
a:active {
color:#e25d33;
}
/* selected link */
p {
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:1.2em;
margin:10px 5px 20px 5px;
}
#site p a:link {
color:#ed1b24;
}
#site p a:visited {
color:#ed1b24;
}
#site p a:hover {
text-decoration:underline;
}
#site p a:active {
color:#ed1b24;
}
h3 {
font-family:helvetica, arial, sans-serif;
font-size:1.5em;
color:#000;
margin:20px;
}
#bg {
background:url(../img/boston_skyline4.png) no-repeat 0 0 scroll;
height:auto;
left:0;
min-height:100%;
min-width:1024px;
overflow:hidden;
position:fixed;
top:0;
width:100%;
z-index:1;
}
#left_col1, #left_col2, #left_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-left:120px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
.clearfix {
height:20px;
clear:both;
}
#mid_col1, #mid_col2, #mid_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#right_col1, #right_col2, #right_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#left_col1, #mid_col1, #right_col1 {
margin-top:20px;
}
#left_col3, #mid_col3, #right_col3 {
margin-bottom:20px;
}
footer {
background:url(../img/footer.gif);
margin:auto;
position:absolute;
bottom:0;
width:1200px;
height:55px;
}
footer p {
font-family:helvetica, arial, sans-serif;
color:#e0dfdf;
font-size:.9em;
margin:auto;
padding-top:1.5em;
padding-left:1.5em;
}
The <div id="bg"> tag is sitting on top of everything else in the <div id="body" wrapper. Z-index won't work on your floated columns, so you'll have to wrap your columns in another div or move the <div id="bg"> tag outside of the <div id="body" tag.
Here's a fiddle of the first solution: http://jsfiddle.net/hjeAT/3/
And the second: http://jsfiddle.net/hjeAT/4/
i think the z-index of <div id="bg"> changed when run. you should check the z-index when the nav links are unclickable. may be you can change the z-index in your javascript. i have another advise that you'd better remove the z-index in the css of the * selector as follows
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
Here is one solution:
Just delete <div id="bg"></div> and
CSS:
body {
height:100%;
background:url(../img/boston_skyline4.jpg) no-repeat 0 0 scroll;
}
script:
You can change the mousemove event target.
<script>
$(document).ready(function () {
$('body').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('body').css('backgroundPosition', mousePos + '% 0');
});
});
</script>
okay guys, I found a small piece of code on stackoverflow which is for a slidehsow using javascript. But for some reason it doesn't work on my PC. This is the original Post:
Looking for a fullwidth slider
it works there but for some reason it doesn't work for me!!
what am I doing wrong?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.clear { clear:both; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:20px 0; height:100px; position:relative; }
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; text-align:center; color:#fff; font-size:24pt; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }
.slider-nav { margin: 0 auto; width:100px; clear:both; }
.slider-nav li { float:left; margin:0 5px; }
-->
</style>
<script type="text/javascript">
$('.slider .slide:first').addClass('active').fadeIn(200);
function rotate(index) {
$('.slider .slide.active').removeClass('active').fadeOut(200, function() {
$('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
});
}
$('.slider-nav li a').click(function() {
var index = $(this).parent().index('li');
rotate(index);
return false;
});
setInterval(function() {
var $next = $('.slider .slide.active').next();
if ($next.length == 0)
$next = $('.slider .slide:first');
rotate($next.index());
}, 2000);
</script>
</head>
<body>
<div class="header wrapper">
<h1>Site header</h1>
</div>
<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<ul class="slider-nav">
<li><a href="#" >1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
<li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
<div class="wrapper">
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
</div>
</div>
<div class="footer">
<div class="wrapper">© www.mysite.com </div>
</div>
</body>
</html>
You seem to reference a javascript library (maybe jquery) in your code, but no trace of the library inclusion.
You are using jQuery code but where is your reference to the jQuery library?
I'm trying to make a horizontal scroll anchoring inside a DIV. Seems to work if I just animate the whole body tag but doesnt seem to work in a DIV for me.
Heres the javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
});
});
</script>
and heres the Html
<body>
<div id="wrapper">
<div id="wrappercontent">
<div id="section1" class="section">
<img src="images/big_head.png" />
</div>
<div id="section2" class="section">
<img src="images/whatis.png" />
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>
blahblahblabh
</p>
</div>
</div>
<div id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
</body>
and heres the stylesheet
*{
margin:0;
padding:0;
}
body{
background:#f0efe4;
letter-spacing:-1px;
font-family:Georgia;
font-size: 34px;
font-style: italic;
width:12000px;
}
#wrapper{
width:1000px;
height:700px;
overflow:scroll;
}
#wrappercontent{
height:auto;
width:12000px;
}
#nav{
z-index:1;
position:fixed;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
Its behaving weirdly. Please help
You just need to account for the current scroll position in your calculation:
scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left
Demo: http://jsfiddle.net/brianpeiris/h6hvq/