YUI Carousel nav buttons under the ordered list - javascript

in the YUI Carousel, i want nav button include prev and next buttons showing under the items.by default these buttons placed in upper items and i want placed those after the items (or images)
<div id="container">
<ol id="carousel">
<li>
1111111
</li>
<li>
222222
</li>
<li>
3333333
</li>
<li>
444444
</li>
<li>
5555555
</li>
<li>
66666666
</li>
<li>
7777777
</li>
<li>
8888888
</li>
<li>
999999999
</li>
</ol>
<div class="yui-carousel-nav">
<button id="next" class="yui-carousel-button yui-carousel-next"><span>next</span></button>
<button id="prev" class="yui-carousel-button yui-carousel-prev"><span>prev</span></button>
</div>
</div>
i use above but still navigation appear in above of items

you must use custom navigation buttons for solve this problem, follow this:
use below css in the stylesheed
.yui-carousel .yui-carousel-item-selected {
border: none;
}
.yui-skin-sam .yui-carousel-nav {
position: relative;
top: 0px;
right: 1px;
height: 1px;
background: none;
}
.yui-skin-sam .yui-carousel-button {
display: none;
}
.yui-carousel-nav ul {
display: none;
}
use a think like this for js function call:
(function () {
var carousel;
YAHOO.util.Event.onDOMReady(function (ev) {
var carousel = new YAHOO.widget.Carousel("container", {
isCircular: false,
numVisible: 3,
navigation: { prev: 'prevButton' , next: 'nextButton' }
});
carousel.set("selectedItem", 0);
carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
});
})();
then for custom navigation use a div like this:
......
<li>
999999999
</li>
</ol>
<div>
<button id="prevButton"><</button>
<button id="nextButton">></button>
</div>

see here
http://developer.yahoo.com/yui/carousel/#cssref
i have understand it like this
{ prev: prev_id, next: nextId }

Related

Best way to change navbar dropdown function from CSS-only to Javascript on mobile?

Here is my current CSS-only dropdown menu html:
<div class="main-nav">
<div class="main-nav-container">
<div class="nav-links">
<ul>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
Relevant CSS:
.dropdown{
position: absolute;
display: flex;
top: 100%;
border-top: solid 1px var(--white-3);
left: 0;
z-index: 8;
opacity: 0;
pointer-events: none;
transition: .3s; }
.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
}
On mobile, I want the user to be able to open and close the dropdown by tapping on the "Nav Link". Currently, the user can tap to open, but then has to tap somewhere else to close the dropdown. I figure I need Javascript make it do what I want.
My idea:
Use a media query to remove the hover function on mobile
Use Javascript to add a class to the "Nav Links" on mobile
Using this class, with JS, make the Nav Links toggle the dropdown to display/hide
Is this the best way to do it? If so, how do I add a class to the "Nav Links" with Javascript at a specific screen size?
I would like to just use plain Javascript, no Jquery.
Also, I current want to keep the CSS-only hover approach for desktop. So I want the Javascript function only for the mobile view.
I hope that makes sense to everyone. Thank you!

How to use Media Queries in React?

I have this problem: I'm making header with responsive size, so when the width less than 1199px, user can see hamburger menu. To open/close menu, I'm using React Hooks and it changes display: block / none. But it has to work only when the screen is less than 1199px, but in my case it works every time, and obviously my header has display: none and there's nothing on page (there's only my logo)
Component's code:
const Header = () => {
const [navBar, showNavBar] = useState(false)
const useNavBar = () => {
showNavBar(!navBar)
}
return (
<header class="header-area main-header">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="logo-area">
<a href='#'><img src={logo} alt="logo"/></a>
</div>
</div>
<div class="col-lg-10">
<div onClick={useNavBar} class="custom-navbar">
<span></span>
<span></span>
<span></span>
</div>
<div class="main-menu">
<ul style={navBar === true ? {display: 'block'} : {display: 'none'}}> // problem is here
<li class="active">home</li>
<li>about us</li>
<li>schedule</li>
<li>trainers</li>
<li>blog
<ul class="sub-menu">
<li>Blog Home</li>
<li>Blog Details</li>
</ul>
</li>
<li>contact</li>
<li>pages
<ul class="sub-menu">
<li>Service</li>
<li>Elements</li>
</ul>
</li>
<li class="menu-btn">
book now
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
);
}
SASS code:
.main-menu
ul
float: right
#include desktop()
display: none
float: left
position: absolute
top: 60px
right: 0
z-index: 4
background: $dark
width: 40%
padding: 20px 20px 30px
PS: I don't want to add all of my CSS code, because it's over 200 strings, just explain me how to change display using media queries in my case
Don't use inline style. Change class names with JavaScript.
Set the display in your stylesheet based on the class name and media queries.
<ul className={navBar === true ? "foo" : "bar"}>

Auto collapse sidebar menu list when lost focus

I just want to ask :
how to make the dropdown-menu collpase when the dropdown menu is active?
When the mouse hovers to the sidebar, the active dropdown menu expanded again?
i think i just wondering using hover but it doesnt work when i try it, so i hope someone can help me to solve this?
Simple Concept I Just want :
Mouse:hover to sidebar-icon/burger is clicked => sidebar-expanded => menu list that have:submenu clicked => dropdown-menu displayed => mouseOut from sidebar => icon is-collapsed
Mouse:hover to sidebar-icon again / sidebar:state(active) => dropdown menu is already expanded
well i dont know that you can understand my question or something.. but i hope u can make this auto collapse menu
$(document).ready(function() {
// Sidebar links
$('.sidebar .side-list li a').on('click', function() {
const $this = $(this);
if ($this.parent().hasClass('buka')) {
$this
.parent()
.children('.dropdown-menu')
.slideUp(200, () => {
$this.parent().removeClass('buka');
});
} else {
$this
.parent()
.parent()
.children('li.buka')
.children('.dropdown-menu')
.slideUp(200);
$this
.parent()
.parent()
.children('li.buka')
.children('a')
.removeClass('buka');
$this
.parent()
.parent()
.children('li.buka')
.removeClass('buka');
$this
.parent()
.children('.dropdown-menu')
.slideDown(200, () => {
$this.parent().addClass('buka');
});
}
});
// ٍSidebar Toggle
$('.burger').on('click', e => {
$('.konten').toggleClass('k-kebuka');
$('.sidebar').toggleClass('s-kebuka');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
<div class="sidebar-dalem">
<div class="side-konten">
<ul class="side-list">
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">ICON</span>
<span class="side-judul">MENU</span>
<span class="panah">[>]</span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #2</span>
<span class="panah">[>] ></span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item">
<a class="side-link" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="konten" class="konten">
<div class="konten-navbar sticky-top">
<ul class="navbar-kiri">
<li>
<a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
</li>
<li>
SEARCH ICO
</li>
</ul>
</div>
</div>
In pure CSS, .menu:hover definitely works, but you have to build the entire menu inside of the element that has the :hover pseudo class and also either touching or overlapping:
.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}
ul {
position: absolute;
top: 36px;
left: 8px;
background: #eee;
border: 1px solid black;
display: none;
margin: 0;
width: 14em;
min-height: 8em;
padding: 0.5em;
list-style: none;
}
.popup:hover ul {
display: block;
}
<div>
<div class="popup"><button>Menu</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Certainly, you'd need to style everything properly.
I also seem to remember that JQuery has OnMouseEnter and OnMouseLeave events that work kind of like :hover too.

How to show/hide when hover in/out on specific element

I make a secondary menu and I like it to be displayed when user hover a specific one of the main menu items....
I tried this code but it didn't work...
.second-menu {display:none}
ul li #2:hover + .second-menu {display:block}
<ul>
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
any suggestions?....
only by css or javascript....
If you wish to use CSS, you will have to put your sub menu inside the element that you want to hover.
For the CSS, C.Raf.T's answer is perfect.
If for some reason you want to use javascript you could do something like this
document.getElementById('2').addEventListener('mouseenter', function ()
{
document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
document.getElementById('subMenu').style.display = "none";
});
Note: the above code requires you to add a "subMenu" id to the div containing your menu. If you wish to display serval menus with only one hover event, use a class instead.
But honestly, the CSS answer is the best way to go if all you need is nested sub menus.
If the sub menu has to be outside of the parent, you will need the javascript.
.second-menu{
display:none;
}
li:hover >.second-menu{
display:block;
}
<ul>
<li id="1">first</li>
<li id="2">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="3">third</li>
<ul>
Answer using Javascript,
document.getElementById('hover').onmouseover = function(){
document.getElementById('second-menu').style.display = 'block';
}
document.getElementById('hover').onmouseout = function(){
document.getElementById('second-menu').style.display = 'none';
}
.second-menu{
display:none;
}
<ul id="hover">
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu" id="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
Here is a fiddle
By using pure CSS you have to ensure that your submenu (.second-menu) is a child-node of your hovered HTML-Element. Because CSS unfortunately doesn't know a parent selector.
By using JS you are more flexible. Means placing the submenu wherever you wish.
* { margin: 0; padding: 0; }
.second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; }
ul li#two:hover > .second-menu {display:block}
.relative { position: relative; border: 1px solid black; }
li { display: inline-block; }
<ul class="relative">
<li id="one">first</li>
<li id="two">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="three">third</li>
<ul>

Nested lists - show each ul level on a separate line

I am using jQuery's isotope plugin to filter a list of entries, using the markup below for my listing of possible filters. All top-level list items are initially visible, and if I click a specific filter button then any sub-filters (if any) are then shown.
All of this works great. I am however running into a few issues getting the CSS to display the list correctly. The markup is:
<ul class="filter-list">
<li><button data-filter="*">show all</button></li>
<li>
<button data-filter=".filter1">Filter 1</button>
<ul class="sub-filter">
<li>
<button data-filter=".filter1.filtera">Filter 1,A</button>
<ul class="sub-filter">
<li><button data-filter=".filtera.filteri">Filter 1,A,i</button></li>
<li><button data-filter=".filtera.filterii">Filter 1,A,ii</button></li>
<li><button data-filter=".filtera.filteriii">Filter 1,A,iii</button></li>
</ul>
</li>
<li><button data-filter=".filter1.filterb">Filter 1,B</button></li>
<li>
<button data-filter=".filter1.filterc">Filter 1,C</button>
<ul class="sub-filter">
<li><button data-filter=".filterc.filteri">Filter 1,C,i</button></li>
<li><button data-filter=".filterc.filterii">Filter 1,C,ii</button></li>
</ul>
</li>
<li>
<button data-filter=".filter1.filterd">Filter 1,D</button>
<ul class="sub-filter">
<li><button data-filter=".filterd.filteri">Filter 1,D,i</button></li>
<li><button data-filter=".filterd.filterii">Filter 1,D,ii</button></li>
</ul>
</li>
</ul>
</li>
<li><button data-filter=".filter2">Filter 2</button></li>
<li><button data-filter=".filter3">Filter 3</button></li>
</ul>
The CSS that I have so far is:
ul.filter-list {
display:inline-block;
position: relative;
width: 100%;
margin:0;
padding:0;
}
ul.filter-list ul {
display: none;
position:relative;
}
.filter-list ul.active-filter {
display: block;
position:absolute;
top:50px;
left:0px;
}
ul.filter-list li {
list-style-type: none;
display: inline-block;
}
The expected output that I need is to have each 'level' of the list on a single line, followed by the next 'level' of filters if any for the one that is currently active. Initially, it should look like this:
show all Filter 1 Filter 2 Filter 3
If I click on Filter 1, then the next level of buttons underneath that filter should show on the next line:
show all Filter 1 Filter 2 Filter 3
Filter 1,A Filter 1,B Filter 1,C Filter 1,D
If I were to then click on Filter 1,C, the third level of buttons will need to display on the third line:
show all Filter 1 Filter 2 Filter 3
Filter 1,A Filter 1,B Filter 1,C Filter 1,D
Filter 1,C,i Filter 1,C,ii
One of the biggest issues I still am having is that, since the active lists are absolutely positioned, they are being displayed on top of content that is immediately following this list of filters rather than pushing it down. You can see this behavior in this fiddle. Also, when screen size is reduced, things are not flowing / breaking in the way I would expect them to (as well as having absolutely positioned buttons sitting on top of other absolutely positioned items).
Is there a way to accomplish this using just CSS (perhaps using relative positioning?), or am I going to have to add some inordinate amount of Javascript to what I have? Or should I just take out the nested lists in favor of having multiple 'flat' lists?
You can achieve must of this using just regular CSS and jQuery/Javascript to toggle the items visibility:
$(function() {
$('button').on('click', function() {
// The element to be toggled (show/hide).
var toToggle = $(this).next('.sub-filter');
// Go through its parents until the element
// with class sub-filter and find its
// children with this same class to hide
// them, excluding itself.
$(this).parents('.sub-filter').find('.sub-filter').not(toToggle).hide();
// Toggle the target.
toToggle.toggle();
});
});
* {
box-sizing: border-box;
}
ul.filter-list,
ul.filter-list li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.sub-filter {
/* Giving them the full width and
floating them you guarantee their
place in a new line. */
width: 100%;
float: left;
display: none;
/* Setting their padding to 0 will
keep them aligned to the line above
them. */
padding: 0;
}
ul.filter-list > li,
ul.sub-filter > li {
/* Setting their display to inline
will show them next to each other. */
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filter-list">
<li>
<button data-filter="*">show all</button>
</li>
<li>
<button data-filter=".filter1">Filter 1</button>
<ul class="sub-filter">
<li>
<button data-filter=".filter1.filtera">Filter 1,A</button>
<ul class="sub-filter">
<li>
<button data-filter=".filtera.filteri">Filter 1,A,i</button>
</li>
<li>
<button data-filter=".filtera.filterii">Filter 1,A,ii</button>
</li>
<li>
<button data-filter=".filtera.filteriii">Filter 1,A,iii</button>
</li>
</ul>
</li>
<li>
<button data-filter=".filter1.filterb">Filter 1,B</button>
</li>
<li>
<button data-filter=".filter1.filterc">Filter 1,C</button>
<ul class="sub-filter">
<li>
<button data-filter=".filterc.filteri">Filter 1,C,i</button>
</li>
<li>
<button data-filter=".filterc.filterii">Filter 1,C,ii</button>
</li>
</ul>
</li>
<li>
<button data-filter=".filter1.filterd">Filter 1,D</button>
<ul class="sub-filter">
<li>
<button data-filter=".filterd.filteri">Filter 1,D,i</button>
</li>
<li>
<button data-filter=".filterd.filterii">Filter 1,D,ii</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button data-filter=".filter2">Filter 2</button>
</li>
<li>
<button data-filter=".filter3">Filter 3</button>
</li>
</ul>
Demo jsFiddle

Categories

Resources