I have some CSS problems. I have a parent with a 400px width, and I want the children (wich is relative to the parent so I can put it in the middle of the parent, and make his z-index bigger) to have a 200 width so that he wont get out of the parent. The children are jquery selectable.
( just the first drawer works in the top, right)
The main css:
.sortableIt { list-style-type: none; position:relative;top:-250px;left:20px;margin: 0; z-index:1000;padding: 0; width: 100px; height:100px }
.sortableIt li { margin: 1px 5px 1px 0; padding: 1px; float: left; width: 35px; height: 35px; text-align: center; }
.sortable { list-style-type: none; margin: 0; padding: 0; /*width: 1200px; */}
.sortable li {/*background-color:yellow;*/ margin: 0px 0px 0px 0; padding: 1px; float: left; width: 360px; height: 72px; text-align: center; }
The html:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<li id="sertar111?" style="z-index:500">
<img id="sertar11" class="sertar" ONCLICK="openS(this)" style="position: relative;z-index: 500;aligh:center;" src="img/sertar1.png">
<ul id="ui items" class="sortableIt" style="visibility:hidden;" >
<li id="asd" class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</li>
</body>
</html>
Related
In the middle of my div scroll-parent you may see borders.
.scroll-parent{
position: relative;
width: 100px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;
}
.scroll-child {
height: 100%;
margin-right: -50px; /* maximum width of scrollbar */
padding-right: 50px; /* maximum width of scrollbar */
overflow-y: scroll;
}
.scroll-parent::before {
content: "";
top: 50%;
position: absolute;
margin-top: -15px;
height: 32px;
z-index: -1;
left: 0;
right: 0;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
}
ul {
list-style: none;
}
ul::before,
ul::after {
content: "";
display: block;
width: 100%;
height: 80px;
}
<div class="scroll-parent">
<div class="scroll-child">
<ul class="datepicker" id="datepicker">
<li class="datepicker-nr">1</li>
<li class="datepicker-nr">2</li>
<li class="datepicker-nr">3</li>
<li class="datepicker-nr">4</li>
<li class="datepicker-nr">5</li>
<li class="datepicker-nr">6</li>
<li class="datepicker-nr">7</li>
<li class="datepicker-nr">8</li>
<li class="datepicker-nr">9</li>
<li class="datepicker-nr">10</li>
<li class="datepicker-nr">11</li>
<li class="datepicker-nr">12</li>
<li class="datepicker-nr">13</li>
<li class="datepicker-nr">14</li>
<li class="datepicker-nr">15</li>
<li class="datepicker-nr">16</li>
<li class="datepicker-nr">17</li>
<li class="datepicker-nr">18</li>
<li class="datepicker-nr">19</li>
<li class="datepicker-nr">20</li>
<li class="datepicker-nr">21</li>
<li class="datepicker-nr">22</li>
<li class="datepicker-nr">23</li>
<li class="datepicker-nr">24</li>
</ul>
</div>
</div>
Whenever the user scrolls, the content within that box in the middle should get a larger font size. How can I do this?
jsfiddle
Use this Jquery Plugin :
iOS 7 Style jQuery 3D Animated Value Selector - Drumjs
https://www.jqueryscript.net/form/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs.html
My hamburger menu doesn't seem to work. When I click on the hamburger icon itself nothing happens. I have used this exact same code before and it works perfectly fine there. The menu items just slide open when I click on the menu. I have a feeling that I'm doing something wrong with giving the javascript code the right Classes/ID's. But I'm not really sure.
Does anyone have a clue of whats wrong?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stefan's menu's - 2</title>
<link href="main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav>
<div id="hamburger-menu">
<div class="icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="menu">
<li><a>Home</a></li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
}
.icon {
width: 35px;
margin: auto;
}
ul#menu > li {
width: 100%;
display: block;
}
ul#menu > li > ul.submenu {
display: none;
border: 1px solid #FF6347;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-color: #f3f3f3;
}
ul#menu a {
display: block;
padding: 1em; /* met 1em word de ruimte tussen de list items 2x zo groot */
font-family: sans-serif;
color: #FF4136;
text-decoration-line: none;
font-weight: bold;
}
.submenu {}
JavaScript:
$(document).ready(function(){
$('.icon').on('click', function () {
$("#menu").slideToggle();
});
$('#menu a').on('click', function() {
$(this).siblings('.submenu').slideToggle();
});
});
I'm working with PHP loops and creating multiple li in one ul.
The problem is, that I need to show every fourth li when I click on one of the three previous li.
At the moment It only works with the first previous li with this:
$('.last_news li').on('click', function(){
$('+ .actu_details',this).toggleClass('expend');
});
Anyone got some clues
$('.last_news li').on('click', function() {
$('+ .actu_details', this).toggleClass('expend');
});
last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>
You can use nextAll() to target following sibling actu_details element then use :first/:eq(0)/.eq(0)/.first() to target first li
$('.last_news li').on('click', function () {
$(this).nextAll('.actu_details:first').toggleClass('expend');
//$(this).nextAll('.actu_details').eq(0).toggleClass('expend');
});
$('.last_news li').on('click', function() {
$(this).nextAll('.actu_details:first').toggleClass('expend');
});
.last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>
Fiddle
In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!
Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}
Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>
I have a drop down menu on the top of my page and I am trying to get that to top of the center on my page. It won't go center and now that drop down effect won't work. if you can solve this problem I'll really appreciate that or you can show me an other cool drop down menu which will work.
<!DOCTYPE html>
<HEAD>
<TITLE> </TITLE>
<LINK href="to.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV ID="header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>HOME
</li>
</li>
<li> dropdown #1
<ul>
<li>dropdown #1 item #1
</li>
<li>dropdown #1 item #2
</li>
<li>dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>dropdown #2 item #1
</li>
<li>dropdown #2 item #2
</li>
<li>dropdown #2 item #3
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
</DIV>
</DIV>
<DIV ID="wrapper">
<DIV ID="content_area">
<p> </p>
<center>
<video width="900" height="550" controls autoplay>
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object>
</video>
</center>
</DIV>
</DIV>
<DIV ID="footer">
Hello and Welcome --------------
</DIV>
</BODY>
</HTML>
CSS:
body {
margin:0;
padding:0;
min-width:525px;
font-family: Arial;
font-size: 17px;
background-image:url('fifa2.jpg');
}
#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
backgroundcolor:
}
#footer {
float: left;
width: 100%;
background-color: #000000;
font-size: 14pt;
font-weight: bold;
text-align: center;
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}
#wrapper {
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}
#left_side {
position: relative;
float: left;
width: 200px;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #66CCCC;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 350px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
video {
margin-top: 250px;
}
Your HTML formatting is wrong. Change it as below
FIDDLE DEMO
<div id="header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>HOME
</li>
<li> dropdown #1
<ul>
<li>dropdown #1 item #1
</li>
<li>dropdown #1 item #2
</li>
<li>dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>dropdown #2 item #1
</li>
<li>dropdown #2 item #2
</li>
<li>dropdown #2 item #3
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<div id="wrapper">
<div id="content_area">
<p></p>
</div>
</div>
<DIV ID="footer">Hello and Welcome --------------</DIV>
I encourage you to use jQuery UI's Menu.
Example (took from the page above):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled">Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li>Delphi
<ul>
<li class="ui-state-disabled">Ada</li>
<li>Saarland</li>
<li>Salzburg an der schönen Donau</li>
</ul>
</li>
<li>Saarland</li>
<li>Salzburg
<ul>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Perch</li>
</ul>
</li>
<li class="ui-state-disabled">Amesville</li>
</ul>
</body>
</html>