The scroll buttons in my script wont work

The scroll buttons in my script wont work - javascript

`<!DOCTYPE html>
Sideways Scrolling List
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
}
li {
list-style: none;
padding: 10px;
margin-right: 10px;
background: #ccc;
font-weight: bold;
}
button {
padding: 10px;
margin: 10px;
background: #444;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Sideways Scrolling List</h1>
<html>
<head>
<title>Scrolling List of Items</title>
<script>
function ScrollLeft() {
var list = document.getElementById("list");
list.scrollBy(10, 0);
}
function ScrollRight() {
var list = document.getElementById("list");
list.scrollBy(-10, 0);
}
</script>
<style>
.scroll-container {
overflow: auto;
white-space: nowrap;
background-color: #f5f5f5;
padding: 15px;
border-radius: 10px;
}
.scroll-list {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.2em;
color: #444;
}
.scroll-list li {
display: inline-block;
padding: 10px 20px;
margin: 0 0 10px 0;
background-color: #fff;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.scroll-list li:hover {
background-color: #f5f5f5;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="scroll-container">
<ul class="scroll-list" id="list">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
</ul>
</div>
<button onclick="scrollLeft()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
<script>
function scrollLeft() {
document.querySelector("ul").scrollLeft = 0;
}
function scrollRight() {
document.querySelector("ul").scrollLeft = document.querySelector("ul").scrollWidth;
}
</script>
</body>
</html>
</body>
`
scroll left and right buttons dont work, ive tried using this, window.scrollBy(), ___.scrollLeft and literally nothing works
I expected my sideways list too move left and right onclick
any help as too why this doesnt work would be appreciated, also if there are any methods that do this that are supported by most/all browsers that would be nice, than you

EDIT ::
I do not know why but the following works ; and i fixed some html "bad practices" ( i noticed there were two html tags in the previous answer i posted ), and it works with the 'ul' tag
<!DOCTYPE html>
<html>
<head>
<title>Scrolling List of Items</title>
<style>
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
}
li {
list-style: none;
padding: 10px;
margin-right: 10px;
background: #ccc;
font-weight: bold;
}
button {
padding: 10px;
margin: 10px;
background: #444;
color: #fff;
font-weight: bold;
}
</style>
<script>
function scrollLeftenant() {
document.querySelector("ul").scrollLeft = 0;
}
function scrollRight() {
document.querySelector("ul").scrollLeft = document.querySelector("ul").scrollWidth;
}
</script>
</head>
<body>
<h1>Sideways Scrolling List</h1>
<div class="scroll-container">
<ul class="scroll-list" id="list">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
</ul>
</div>
<button onclick="scrollLeftenant()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
</body>
</html>
i had to rename the function from scrollLeft to scrollLeftenant, well the exact name does not matter as long as it is not scrollLeft, it will work, this is probably due to "scrollLeft" probably being used somewhere internally by javascript or something else is overriding it, sooo dont use the name "scrollLeft" for your function names or varibles

Related

Setting Floating UI shift on multiple elements

I want to use Floating UI to prevent dropdown menus from going off the left/right edge of the screen. The example code is as follows:
HTML:
<ul class="menu">
<li class="menu__item">
Item 1
<ul class="submenu">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
<li>Item 1.5</li>
</ul>
</li>
<li class="menu__item">
Item 2
<ul class="submenu">
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul>
</li>
<li class="menu__item">
Item 3
<ul class="submenu">
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
<li>Item 3.4</li>
<li>Item 3.5</li>
</ul>
</li>
<li class="menu__item">
Item 4
<ul class="submenu">
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
<li>Item 4.4</li>
<li>Item 4.5</li>
</ul>
</li>
<li class="menu__item">
Item 5
<ul class="submenu">
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
<li>Item 5.4</li>
<li>Item 5.5</li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
display: flex;
}
a {
color: inherit;
text-decoration: none;
}
.menu {
display: flex;
gap: 5px;
justify-content: space-around;
color: white;
}
.menu > li {
position: relative;
background: blue;
padding: 0 30px;
height: 40px;
}
.submenu {
display: none;
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
background: red;
}
.menu > li:hover .submenu {
display: flex;
}
.submenu li {
padding: 10px 20px;
}
.submenu a {
white-space: nowrap;
}
JS:
import { autoUpdate, computePosition, shift } from "https://cdn.skypack.dev/#floating-ui/dom#1.2.0";
const menuItems = document.querySelectorAll('.menu__item');
menuItems.forEach((item) => {
const reference = item.querySelector('.menu__link');
const floating = item.querySelector('.submenu');
computePosition(reference, floating, {
placement: "bottom",
middleware: [shift()]
}).then(({ x, y }) => {
Object.assign(floating.style, {
left: `${x}px`
});
});
});
There's a CodePen here.
However, I'm struggling to understand the documentation and the implementation I have doesn't seem to work. The red dropdowns should be center-aligned under the blue items where possible but Floating UI should adjust the positioning horizontally so that the first dropdown should have its left edge aligned to the left of the screen and the last dropdown should have its right edge aligned to the right of the screen.
Could anyone advise how to get this working and ensure that it maintains the correct positioning even after window resizing?
Many thanks.

How to overflow one section of a modal window using CSS

I've created a modal window with 2 sections: a header and a ul. I use jQuery to open the modal. So far so good. I want to make the ul fit the modal box without overflowing.
I can overflow the .modal. But, i really just to want to overflow the ul, not the entire .modal box.
https://jsfiddle.net/tjL1e0ca/
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
.modal {
display: none;
position: fixed;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>

Add style="overflow-y: auto; height: 100px;" to your ul. This basically adds overflow-y to your ul, except it would only work if you specify a height.
I updated your JSFiddle for you.
Change the height as you wish.
Update: After reading the coments, I realized that you wanted the height of the ul to be adaptive and not set. To fix that, change the height from height: 100px; to height: 50%; (and change the percentage as you wish). That way, the ul will always be 50% of the modal, no matter the height of the modal. Since it didn't seem to work on snippets here, I made a JSFiddle for you.
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
h3 {
cursor: pointer;
}
.list {
overflow-y: auto;
height: 100px;
}
.modal {
display: none;
position: fixed;
z-index: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul class="list">
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>

How to make the inactive tabs unclickable

I have these tabs but is it possible to make the other inactive tabs to be unclickable?
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>

To get the best result you can:
Add the disabled class to the li element
Remove the data-toggle attribute for the a
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 0</li>
<li>Step 1</li>
<li class="disabled"><a href="#step2" >Step 2</a></li>
<li class="disabled"><a href="#step3" >Step 3</a></li>
<li class="disabled"><a href="#step4" >Step 4</a></li>
</ul>
</div>
</div>

You can use :not() CSS selector with pointer-events: none; to disable click event.
li:not(.active) a{
pointer-events: none;
}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>

Simply add this class to the tabs that you want to disable the clicks.
Here is the css.
.avoid-clicks {
pointer-events: none;
}

disable them all and enable the active one
$('li').prop('disabled',true);
$('.active').prop('disabled',false);

To disable the links on the fly using jquery try this:
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Go to google

You can add the following rules to your non-active items to make them unclickable. This was suggested in the following post:
How to disable all div content
.disabled, li:not(.active) {
pointer-events: none;
opacity: 0.4;
}
ul {
display: inline-flex;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
height: 1em;
line-height: 1em;
}
li {
width: 14%;
height: 2em;
margin: 0.1%;
line-height: 2em;
background-color: #FFF;
border: thin solid #777;
text-align: center;
}
li a {
display: block;
width: 100%:
height: 100%;
text-decoration: none;
}
li a, li a:active, li:visited {
color: #48A;
}
li a:hover {
color: #5AC;
text-decoration: underline;
}
.active {
background-color: #FFF;
font-weight: bold;
border: thin solid #DDD;
}
.disabled, li:not(.active) {
background-color: #AAA;
pointer-events: none;
opacity: 0.4;
}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>

jQueryUI Sorting issue when width of all list items is not equal

I have an issue while sorting the list items when width if all the <li> is not equal. In the example below I try to place "Item 6" just after "Item 4" to no avail.
$('#sort').sortable({
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

Actually you still can put Item 6 after Item 4 (eg. put Item 6 before Item 4 first then move it after Item 4). It's just a bit difficult. Adding grid option makes it easier. Try to run this snippet:
$('#sort').sortable({
grid: [ 10, 10 ]
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

How to make “See all category” link button to display rest of the text with jquery 1.11 and above

I have an issue on the dropdown text.
Below snippet using jquery 1.11.1
$(".more").toggle(function(){
$(this).text("Less category").siblings(".complete").show();
}, function(){
$(this).text(" All category").siblings(".complete").hide();
});
.complete{
display:none;
}
.more{
background:black;
color:red;
font-size:13px;
padding:3px;
cursor:pointer;
}
li{
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>
Below snippet using jquery 1.8.3
$(".more").toggle(function(){
$(this).text("Less category").siblings(".complete").show();
}, function(){
$(this).text(" All category").siblings(".complete").hide();
});
.complete{
display:none;
}
.more{
background:black;
color:red;
font-size:13px;
padding:3px;
cursor:pointer;
}
li{
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>
Problem is, "See all category" text will disappear if I use jquery 1.9.1 and above.
If I use jquery 1.8.3 and lower "See all category will appear and work just fine.
Can anyone help, thanks anyway :)

You need to use the click handler as this variant of toggle is removed in jQuery 1.9
$(".more").click(function() {
$(this).text(function(i, text) {
return text == 'Less category' ? 'All category' : 'Less category';
}).siblings(".complete").toggle();
});
.complete {
display: none;
}
.more {
background: black;
color: red;
font-size: 13px;
padding: 3px;
cursor: pointer;
}
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>

Develop Reference

JavaScript is the programming language of the Web.

The scroll buttons in my script wont work - javascript

Related

Setting Floating UI shift on multiple elements

How to overflow one section of a modal window using CSS

How to make the inactive tabs unclickable

jQueryUI Sorting issue when width of all list items is not equal

How to make “See all category” link button to display rest of the text with jquery 1.11 and above

Categories

Resources