I am trying to create a horizontal scroll on mouse wheel. when I scrolled content1 to content got stuck and when I move the up the scroll it worked properly.
please check on the link and give the solution as soon as possible.
here is the stackblitz demo link
Please help me with what can I do that.
#ViewChild('horizon') horizon: ElementRef;
#ViewChild('horizon1') horizon1: ElementRef;
#ViewChild('horizon2') horizon2: ElementRef;
#ViewChild('horizon3') horizon3: ElementRef;
#ViewChild('horizon4') horizon4: ElementRef;
#ViewChild('scrollPoint') scrollPoint: ElementRef;
#HostListener('mousewheel', ['$event'])
onMousewheel(event) {
const element = this.scrollPoint.nativeElement;
const viewportOffset = element.getBoundingClientRect();
const top = viewportOffset.top;
if (top <= 150 && this.horizon.nativeElement.scrollLeft < this.horizon1.nativeElement.offsetWidth < this.horizon2.nativeElement.offsetWidth < this.horizon3.nativeElement.offsetWidth < this.horizon4.nativeElement.offsetWidth && event.wheelDelta < 0) {
event.preventDefault();
this.horizon.nativeElement.scrollLeft += event.deltaY;
} else if (top >= 50 && this.horizon.nativeElement.scrollLeft > 0 && event.wheelDelta > 0) {
event.preventDefault();
this.horizon.nativeElement.scrollLeft += event.deltaY;
}
}
.content {
height: 100vh;
}
.home-8-sub-cont2 {
overflow-x: scroll;
white-space: nowrap;
}
.container1 {
width: 100%;
display: inline-block;
text-align: center;
}
.home-8-sub-cont2::-webkit-scrollbar {
width: 0 !important;
}
.home-8-sub-cont2 {
overflow: -moz-scrollbars-none;
}
.home-8-sub-cont2 {
-ms-overflow-style: none;
}
<ng-container style="background-color: yellow">
<div class="content" #scrollPoint>
<div #horizon class="home-8-sub-cont2">
<div class="container1" #horizon1>
<div class="title mt-50"><span>Content!</span> Content1</div>
</div>
<div class="container1" #horizon2>
<div class="title"><span>Content!</span> Content2</div>
</div>
<div class="container1" #horizon3>
<div class="title"><span>Content!</span> Content3</div>
</div>
<div class="container1" #horizon4>
<div class="title"><span>Content!</span> Content4</div>
</div>
</div>
</div>
</ng-container>
Related
when you click on one of the 'cButton' elements, the active style will be applied to it but if you hold the mouse button down and then hover over another cButton while still holding, the style will not be applied to it.
I know a way to do it in Javascript but i am trying to do it using pure css.
body{
display: flex;
justify-content: space-evenly;
}
.cButton{
width: 100px;
aspect-ratio: 1;
background: red;
}
.cButton:active{
background: blue;
}
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
I am afraid that that is impossible in pure css. Because you will need a mouse down hover which is not available in css to my knowledge.
Unfortunately, you can't do this in pure CSS. However, here is some JavaScript code that works:
window.onload = function() {
document.querySelectorAll(".cButton").forEach(function(ele) {
ele.onmousedown = function() {
ele.classList.add("down")
}
ele.onmouseover = function(e) {
if (e.buttons == 1 && e.button == 0) {
ele.classList.add("down");
}
}
ele.onmouseup = function() {
ele.classList.remove("down")
}
ele.onmouseout = function() {
ele.classList.remove("down")
}
});
}
body {
display: flex;
justify-content: space-evenly;
}
.cButton {
width: 100px;
aspect-ratio: 1;
background: red;
}
.cButton.down {
background: blue;
}
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I'm currently trying to implement a horizontal scroll. It works, but I'm trying to make some changes:
Since the web-app is a one screener and solely consists of this horizontal scroll, I'd like to convert vertical scroll to horizontal scroll. But how? What's the approach?
I've tried the following js library, but this one solely works if overflow is set to visible, which kind of breaks my app.
My horizontal scroll:
<div class="scroll-container align-self-center d-flex">
<div class="cart-container align-self-center" *ngFor="let cart of carts; let i = index">
<div class="cart-item cursor-hover position-relative" [ngStyle]="{'background-image': 'url(' + cart.image + ')'}" [class.cart-item-even]="i % 2 !== 0"
(mouseenter)="changeBackgroundColor(i)">
<h1 class="hover-title">{{cart.title}}</h1>
</div>
</div>
</div>
CSS:
.cart-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 22.5vw;
height: 65vh;
}
.cart-item-even {
height: 55vh;
width: 20vw;
}
.cart-container {
display: inline-block;
}
.scroll-container {
padding: 0 15vw 0 15vw;
box-sizing: border-box;
overflow: auto;
white-space: nowrap;
}
//ts
scroll = () => {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('main-content').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('main-content').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('main-content').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('main-content').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
// document.getElementById('main-content').attachEvent("onmousewheel", scrollHorizontally);
}
}
ngOnInit(): void {
this.scroll();
}
For an horizontal scrolling you can do whatever you want inside a div like that :
.mydiv {
overflow-x: scroll;
display: -webkit-box;
}
I hope this gonna help you :)
At the xs width I need column two to display on top followed by column one then three. I've tried using push and pull to achieve this but it hasn't worked for me, what happens it the columns are pushed outside the container to the right and left.
Heres my code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 one"></div>
<div class="col-xs-12 col-sm-4 two"></div>
<div class="col-xs-12 col-sm-4 three"></div>
</div>
</div>
.one{
background-color: red;
height: 50px;
}
.two{
background-color: green;
height: 50px;
}
.three{
background-color: blue;
height: 50px;
}
Use flexbox.
.row {
display: flex;
flex-direction: column;
}
.one {
background-color: red;
height: 50px;
order: 2;
}
.two {
background-color: green;
height: 50px;
order: 1;
}
.three {
background-color: blue;
height: 50px;
order: 3;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 one"></div>
<div class="col-xs-12 col-sm-4 two"></div>
<div class="col-xs-12 col-sm-4 three"></div>
</div>
</div>
You can achieve that with .col-xx-pull- and .col-xx-push- built-in grid classes. Think mobile first and place the "2" col first in your html and then use pull-push:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-4 two">2</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 one">1</div>
<div class="col-xs-12 col-sm-4 three">3</div>
</div>
</div>
.one {
background-color: red;
height: 50px;
}
.two {
background-color: green;
height: 50px;
}
.three {
background-color: blue;
height: 50px;
}
jsfiddle
The push and pull classes are not used for ordering.
You can achieve your desired result in a multiple of ways:
Javascript/jQuery. Check out the methods insertBefore and insertAfter.
use flexbox. Using flexbox gives you access to the property "order".
My pick would be Flexbox.
For more info on this check https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've made the following element swapping function for you which should be used as a jQuery function in case you don't want to use flexbox.
(function ($) {
$.fn.swapElements = function (opties) {
//Variables
var settings = $.extend({
targetResolution: 768, //Trigger swapping of elements on this resolution
changeWith: '', //Which element should be swapped $('#object2')
changeSpeed: 30,
resize: true //Check for resize event
}, opties);
var a = this;
var b = settings.changeWith;
var tmp = $('<span>').hide();
var doSwap = function () {
var windowWidth = $(window).width();
var firstElement = $('#' + a.attr('id') + ', #' + settings.changeWith.attr('id')).first().eq(0).attr('id');
if (windowWidth <= settings.targetResolution && firstElement === a.attr('id')) {
a.before(tmp);
b.before(a);
tmp.replaceWith(b);
} else if (windowWidth > settings.targetResolution && firstElement === b.attr('id')) {
b.before(tmp);
a.before(b);
tmp.replaceWith(a);
}
}
$(document).ready(function () {
doSwap();
});
if (settings.resize) {
//Check on resize
$(window).resize(function () {
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function () {
doSwap();
}, settings.changeSpeed));
});
}
return this;
};
}(jQuery));
Which can be used like this:
$('#el1').swapElements({
changeWith: $('#el2'),
// changeSpeed: 30,
// targetResolution: 768,
// resize: true
});
I am trying to implement angular material designs sidenav and I've got it to work correctly but I wanted to create a sidenav as shown below,
and on mouse over expands to this
I tried using two sidenav bars and on mouseover show one and hide the other but that din't work as expected.Would be glad if you could help me out here.
EDIT
index.html
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="small" md-is-locked-open="$mdMedia('gt-sm')" ng-mouseover="hoverIn()" ng-mouseout="hoverOut()">
</md-sidenav>
<md-sidenav flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
</md-content>
</div>
</div>
app.js
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope,$mdSidenav){
$scope.edit = true;
$scope.hoverEdit = false;
$scope.toggleSidenav = function(menuId) {
$scope.hoverEdit = true;
$mdSidenav(menuId).toggle();
};
$scope.hoverIn = function(){
$scope.hoverEdit = true;
$scope.edit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = false;
$scope.edit = true;
};
}]);
main.css
md-sidenav.md-locked-open.rightnav,
md-sidenav.md-locked-open-remove.md-closed.rightnav,
md-sidenav.md-locked-open.md-closed.rightnav,
md-sidenav.md-locked-open.md-closed.rightnav
{
min-width: 200px !important;
width: auto !important;
max-width: 700px !important;
background-color: #10123B;
border-left: 2px solid #38ddcc;
height : 100%;
position: absolute;
}
md-sidenav.md-locked-open,
md-sidenav.md-locked-open-remove.md-closed,
md-sidenav.md-locked-open.md-closed,
md-sidenav.md-locked-open.md-closed.md-sidenav-left
{
min-width: 50px !important;
width: auto !important;
max-width: 700px !important;
background-color: #10123B;
border-left: 2px solid #38ddcc;
height : 100%;
position: absolute;
}
I am Completed the AngularJS Sidenav as the Above Image...
And the Codes are Given Below...
index.html:
<div ng-controller="mainCtrl">
<md-toolbar layout="column" ><span flex="flex">
<div class="md-toolbar-tools">
</div>
</md-toolbar>
<md-content>
<div layout="row" >
<div ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()" >
<md-sidenav style="position: fixed;" layout="column" ng-class="myClass " md-component-id="small" md-is-locked-open=true >
<md-toolbar md-whiteframe="3" >
<div class="md-toolbar-tools">
<img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="40" />
</div>
</md-toolbar>
</md-sidenav>
<md-sidenav flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" style="position: fixed;" ng-hide=true md-is-locked-open=true>
<md-toolbar md-whiteframe="3">
<div class="md-toolbar-tools">
<img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="50" />
<h5 style="color: #fff;">ARAVINTHAN MENU</h5>
<md-button ng-click="toggleClass()" class="cmn-toggle-switch cmn-toggle-switch__htra ">
Toggle
</button>
</div>
</md-toolbar>
</md-sidenav>
</div>
<md-content flex>
</md-content>
</div>
</md-content>
</div>
Style.css :
/*CSS Styles for the Sidenav Bar */
.rightnav
{
min-width: 200px !important;
width: 280px !important;
max-width: 700px !important;
height: 100%;
position: fixed;
box-sizing: border-box;
z-index: 60;
bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.md-sidenav-opened
{
min-width: 200px !important;
width: 280px !important;
max-width: 700px !important;
border: 1px solid #ddd;
}
.md-sidenav-left
{
min-width: 55px !important;
width: 55px !important;
max-width: 700px !important;
overflow-x:hidden;
}
App.js
//JS Code for Side Nav here
angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl',['$scope', '$mdSidenav', function($scope,$mdSidenav)
{
$scope.myClass = "md-sidenav-left md-whiteframe-z2";
$scope.option1 = "md-sidenav-opened md-whiteframe-z2";
$scope.toggleFlag= true;
$scope.edit = true;
$scope.hoverEdit = false;
$scope.size = "5";
$scope.toggleClass = function() {
if( $scope.myClass == "md-sidenav-left md-whiteframe-z2" )
{
$scope.myClass = "md-sidenav-opened md-whiteframe-z2";
$scope.toggleFlag = false;
$scope.size = "25";
}
else
{
$scope.myClass = "md-sidenav-left md-whiteframe-z2";
$scope.toggleFlag = true;
$scope.size = "5";
}
}
$scope.toggleSidenav = function(menuId) {
$scope.hoverEdit = true;
};
$scope.hoverIn = function(){
if($scope.toggleFlag)
{
$scope.hoverEdit = true;
$scope.edit = false;
}
};
$scope.hoverOut = function(){
if($scope.toggleFlag)
{
$scope.hoverEdit = false;
$scope.edit = true;
}
};
}]);
The Codepen Example - Codepen