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
Related
Let's say we have a navigation div which contains elements. Below navigation div there is some bar that must expand to the width where it matches one of the navigation elements (3rd one in this case).
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
From this code, main_navigator_progression div must expand its width so it matches BTN 3.
You can see the concept here.
I've written a simple JS code, but it doesn't seem to be neat and doesn't always work:
function initializeProgressorPos() {
document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
Is there any way to create such a function that works even when browser is scaled? What could be wrong with my code? Is there any chance that this can be done with pure css?
As you have floatted the element to the right, first you have to get the width of document, then exclude the width from left of document to the right of element from that amount:
function initializeProgressorPos() {
var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
$("#main_navigator_progression").css({"width": elementRight + "px"});
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
body {
margin: 0;
overflow-y: scroll;
}
#main_navigator {
position: fixed;
background-color: black;
width: 100%;
}
#main_navigator_upper {
position: relative;
display: flex;
flex-direction: row;
}
#main_navigator_logo {
width: 416px;
height: 120px;
background-color: white;
}
#main_navigator_r1 {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
padding: 0;
padding-right: 5%;
text-align: center;
margin-top: 0px;
height: 98px;
list-style-type: none;
}
#main_navigator_r1 li {
flex-grow: 1;
flex-shrink: 1;
/* flex-basis: 0; */
flex-basis: auto; /* new */
}
#main_navigator_l1 {
flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
color: white;
display: block;
height: 100%;
font-family: "nexa_bold";
font-size: 0.9em;
text-decoration: none;
}
#main_navigator_s1 {
display: inline-block;
width: 2px;
height: 35px;
background-color: #B28039;
}
#main_navigator_regbox {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#main_navigator_regbox li {
display: inline-block;
flex-grow: 0.1;
flex-shrink: 0.1;
}
#regbox_signin {
display: block;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
color: #B28039;
font-size: 0.9em;
font-family: "nexa_light";
}
#regbox_signup {
display: block;
white-space: nowrap;
text-decoration: none;
color: white;
font-size: 0.9em;
font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
display: inline-block;
width: 1.4px;
height: 13.5px;
background-color: white;
}
#main_navigator_bottom {
background-color: black;
height: 24px;
}
#main_navigator_progression {
position: relative;
background-color: #B28039;
height: 100%;
width: 416px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
</body>
</html>
This is a proof of concept.
You can use a combination of a custom HTML5 data-* attribute and an ::after pseudo-element on your navigation menu (and a dash of javascript) to indicate which menu item you have most recently selected.
Despite the dash of javascript, most of the work is done using CSS.
Working Example:
var menu = document.querySelector('nav ul');
var menuItems = [... menu.getElementsByTagName('li')];
function selectMenu() {
menu.dataset.selectedMenu = (menuItems.indexOf(this) + 1);
}
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', selectMenu, false);
}
nav ul {
display: flex;
position: relative;
margin: 0;
padding: 0;
}
nav li {
flex: 0 0 60px;
padding: 12px 12px 24px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
list-style-type: none;
cursor: pointer;
}
nav ul::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
background-color: rgba(0, 0, 0, 0.5);
transition: width 0.6s linear;
}
nav ul[data-selected-menu="1"]::after {
width: 80px;
}
nav ul[data-selected-menu="2"]::after {
width: 160px;
}
nav ul[data-selected-menu="3"]::after {
width: 240px;
}
nav ul[data-selected-menu="4"]::after {
width: 320px;
}
nav ul[data-selected-menu="5"]::after {
width: 400px;
}
<nav>
<ul data-selected-menu="1">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
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>
So here is my little HTML page with a playlist of videos:
http://jsfiddle.net/VvR4H/3/
As you can see, in the grey area I have an inline list of playlists, I have three now:
Kangaroo Fighting
Australian Sports
Real Football
Under each playlist are listed videos.
What I want to achieve is a nice horizontal scrolling between my playlists. Right now, when you click on the left or right corner of the grey playlist bar (where the text is half cut), it will slide to the other playlist.
However the sliding is not very nice. I want the Kangaroo Fighting to slide in the middle of the playlist bar when you click on the left corner, could you help me please?
Here is my HTML:
<div class="container">
<ul class="playlists">
<li class="playlist">
<div class="title"> <span class="move-left">Real Foorball</span>
<span>Kangaroo Fighting</span>
<span class="move-right">Australian Sports</span>
</div>
<ul class="videos">
<li class="video">Video 1 C</li>
<li class="video">Video 2 C</li>
<li class="video">Video 3 C</li>
</ul>
</li>
<li class="playlist">
<div class="title"> <span class="move-left">Kangaroo Fighting</span>
<span>Australian Sports</span>
<span class="move-right">Real Football</span>
</div>
<ul class="videos">
<li class="video">Video 1 A</li>
<li class="video">Video 2 A</li>
<li class="video">Video 3 A</li>
</ul>
</li>
<li class="playlist">
<div class="title"> <span class="move-left">Australian Sports</span>
<span>Real Football</span>
<span class="move-right">Kangaroo Fighting</span>
</div>
<ul class="videos">
<li class="video">Video 1 B</li>
<li class="video">Video 2 B</li>
<li class="video">Video 3 B</li>
</ul>
</li>
</ul>
</div>
My CSS:
ul li {
list-style: none;
}
.container {
position: relative;
background: #000;
width: 300px;
height: 500px;
overflow: hidden;
font-family: sans-serif;
}
ul.playlists {
width: 1200px;
padding-left: 0;
margin-top: 0;
position: absolute;
left: -300px;
}
ul.playlists li {
float: left;
width: 300px;
height: 50px;
}
ul.playlists li.playlist .title {
width: 100%;
background: grey;
color: white;
line-height: 50px;
text-align: center;
}
ul.playlists li.playlist .title .move-left, ul.playlists li.playlist .title .move-right {
width: 30px;
line-height: 50px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
ul.playlists li.playlist .title .move-left {
float: left;
direction: rtl;
}
ul.playlists li.playlist .title .move-right {
float: right;
}
ul.videos {
clear: both;
padding-left: 0;
}
ul.videos li {
float: left;
width: 250px;
height: 50px;
padding: 25px;
color: white;
background: blue;
border-top: 1px solid black;
}
And my JavaScript:
$(".move-left").click(function () {
$(this).parent().parent().parent().animate({
"left": "0"
}, 500, "linear", function () {
console.log("yay");
});
});
$(".move-right").click(function () {
$(this).parent().parent().parent().animate({
"left": "-600"
}, 500, "linear", function () {
console.log("yay");
});
});
It is not complete (I didnt do infinity loop), but I guess it has better animation as you requested.
I separated your html into 2 parts. First one is moving slower then second one. So you can se half text of next titles but you dont have to duplicate texts.
http://jsfiddle.net/VvR4H/10/
html
<div class="container">
<div class="title-wrapper">
<div class="title">
<span>Real Foorball</span>
<span>Kengoroo Fighting</span>
<span>Australian Sports</span>
</div>
</div>
<div class="playlist">
<ul class="videos">
<li class="video">Video 1 C</li>
<li class="video">Video 2 C</li>
<li class="video">Video 3 C</li>
</ul>
<ul class="videos">
<li class="video">Video 1 A</li>
<li class="video">Video 2 A</li>
<li class="video">Video 3 A</li>
</ul>
<ul class="videos">
<li class="video">Video 1 B</li>
<li class="video">Video 2 B</li>
<li class="video">Video 3 B</li>
</ul>
</div>
</div>
css
ul li {
list-style: none;
}
.container {
position: relative;
background: #000;
width: 300px;
height: 500px;
font-family: sans-serif;
overflow: hidden;
}
div.title-wrapper {
background: grey;
height: 50px;
}
div.title {
position: absolute;
overflow: hidden;
height: 50px;
left: 75px;
white-space: nowrap;
}
div.playlist {
position: absolute;
overflow: hidden;
top: 50px;
clear: both;
white-space: nowrap;
}
div.title span {
width: 300px;
background: grey;
color: white;
line-height: 50px;
text-align: left;
display: block;
float: left;
margin: 0;
padding: 0;
text-indent: 20px;
}
ul.videos {
float: left;
width: 300px;
margin: 0;
padding: 0;
}
ul.videos li {
display: block;
background: blue;
height: 50px;
padding: 10px 20px;
margin: 1px 0 0 0;
color: white;
}
javascript
$('.title span').css({
'text-indent' : '0',
'text-align' : 'center',
'width' : '150px'
});
var titles = [];
$('.title span').each( function () {
titles.push($(this));
});
var max = titles.length-1;
var left = max;
var right = 1;
$('.title span').click(function () {
console.log($(this).context.innerText + ' left: ' +titles[left].context.innerText + ' right: ' +titles[right].context.innerText)
if($(this).context==titles[left].context) {
left = (left==0) ? max : --left;
right = (right==0) ? max : --right;
$('.title').animate({
"left": "+=150px"
}, 500);
$('.playlist').animate({
"left": "+=300px"
}, 500);
}
if($(this).context==titles[right].context) {
left = (left==max) ? 0 : ++left;
right = (right==max) ? 0 : ++right;
$('.title').animate({
"left": "-=150px"
}, 500);
$('.playlist').animate({
"left": "-=300px"
}, 500);
}
});
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>