I making infinite scroll box by clicking two arrow ! I do each scroll by adding/subtracting 15px . I detected the scroll left min and max value for making infinite scroll by adding existed element , but its scroll range is not going to 15.It is scrolling to the whole div width . How can I make it scrolling to 15 (px) after I added element (not its element width) ?
$("#left").click(function(){
var left = $("#round").scrollLeft() - 15;
if(left == -15) {
$("#round div:last-of-type").remove().prependTo("#round");
}
$("#round").scrollLeft(left);
});
$("#right").click(function(){
var left = $("#round").scrollLeft() + 15;
if(left == 315) {
$("#round div:first-of-type").remove().appendTo("#round");
}
$("#round").scrollLeft(left);
});
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
#round {
max-width:500px;
max-height:100px;
width:500px;
height:100px;
border:1px solid #bbb;
overflow:auto;
display: -webkit-inline-box;
position:relative;
}
#round div{
width:200px;
height:inherit;
}
#one {
background:red;
}
#two {
background:pink;
}
#three {
background:green;
}
#four {
background:#393939;
}
span {
position:fixed;
border:1px solid #bbb;
padding:10px;
background:rgba(255,255,255,.5);
color:#eee;
top:30px;
cursor:pointer;
}
#left {
left:10px;
}
#right {
left:475px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="round">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<span id='left'><</span>
<span id='right'>></span>
</div>
You may modify your code like this. When you reach the left==-15 you consider adding the width of the new element you add in the left and then you scroll. You do the same in the right but you remove instead of adding :
$("#left").click(function() {
var left = $("#round").scrollLeft() - 15;
if (left == -15) {
$("#round div:last-of-type").remove().prependTo("#round");
left = $("#round").scrollLeft() + $("#round div").width() - 15;
}
$("#round").scrollLeft(left);
});
$("#right").click(function() {
var left = $("#round").scrollLeft() + 15;
if (left == 315) {
$("#round div:first-of-type").remove().appendTo("#round");
left = $("#round").scrollLeft() - $("#round div").width() + 15;
}
$("#round").scrollLeft(left);
});
::-webkit-scrollbar {
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
#round {
max-width: 500px;
max-height: 100px;
width: 500px;
height: 100px;
border: 1px solid #bbb;
overflow: auto;
display: -webkit-inline-box;
position: relative;
}
#round div {
width: 200px;
height: inherit;
}
#one {
background: red;
}
#two {
background: pink;
}
#three {
background: green;
}
#four {
background: #393939;
}
span {
position: fixed;
border: 1px solid #bbb;
padding: 10px;
background: rgba(255, 255, 255, .5);
color: #eee;
top: 30px;
cursor: pointer;
}
#left {
left: 10px;
}
#right {
left: 475px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="round">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<span id='left'><</span>
<span id='right'>></span>
</div>
Related
I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.
It looks as follows:
Over text:
I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.
I wonder if this is even possible? and if so, help is appreciated.
HTML:
<h1 class="contact-intro">Feeling Left <br> in the dark?</h1>
<span class="cursor"></span>
CSS:
/*The text "Feeling left in the dark?*/
.contact-intro {
text-align: left;
justify-content: center;
margin: auto;
margin-left: 28.55%;
margin-top: 3%;
display: inline-block;
text-transform: uppercase;
color: black;
font-size: 7em;
z-index: 500;
}
/*The Cursor*/
#media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 80px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 1;
}
.cursor.cursor-dot {
background: orangered; /* This defines the color of the cursor */
mix-blend-mode: difference;
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
JQUERY:
//text inversion
$(() => {
$('body').prepend('<div class="cursor cursor-dot" style="left: 0px; top: 0px;">');
$(window).mousemove(function (e) {
$('.cursor').css({
left: e.pageX,
top: e.pageY
});
});
$(window).mousemove(function (e) {
$('a').on('mouseenter', function () {
$('.cursor').addClass('active');
});
});
$(window).mousemove(function (e) {
$('a').on('mouseleave', function () {
$('.cursor').removeClass('active');
});
});
});
This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.
const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cur.style.top = e.y - height / 2 + 'px';
cur.style.left = e.x - width / 2 + 'px';
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#txt {
position: relative;
color: black;
background-color: transparent;
z-index: 300;
font-size: 3rem;
padding: 1rem;
}
#cur {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
background-color: red;
z-index: 200;
}
<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>
Currently, I'm helping to build a website for a family member as part of a modeling club they have.
The website is at http://testindyamps.weebly.com/ .
It's a website on a host that utilizes various templates for themes (I haven't had much help so far from people on said site).
I'm not 100% sure if this ist he best place to post the question, but I thought I'd give it a shot.
The main issue is that it's utilizing a sidebar navigation where when you click the menus, it expands downward to show the subpages. In this case, not all the subpages are showing. (For example, clicking on "Articles" and then "Books" shows only the first few of a dozen or so pages.
I've tried editing the JS code itself, which so far has had no affect. I've tried editing some of the CSS, however, it doesn't seem to have an affect either.
If it helps, I can share osme of the CSS code or JS code for the site itself. Any help would be appreciated.
Thank you.
UPDATE: Added the code as requested.
Update 2: Added HTML: fixed to correct URL (using a test site instead of the "actual" site for the navigation).
jQuery(function($) {
// Mobile sidebars
$.fn.expandableSidebar = function(expandedClass) {
var $me = this;
$me.on('click', function() {
if(!$me.hasClass(expandedClass)) {
$me.addClass(expandedClass);
} else {
$me.removeClass(expandedClass);
}
});
}
// Interval loop
$.fn.intervalLoop = function(condition, action, duration, limit) {
var counter = 0;
var looper = setInterval(function(){
if (counter >= limit || $.fn.checkIfElementExists(condition)) {
clearInterval(looper);
} else {
action();
counter++;
}
}, duration);
}
// Check if element exists
$.fn.checkIfElementExists = function(selector) {
return $(selector).length;
}
// Check if desktop display
$.fn.isDesktop = function() {
return $(window).width() > 1024;
}
var briskController = {
init: function(opts) {
var base = this;
base._addClasses();
setTimeout(function(){
base._attachEvents();
}, 1000);
},
_addClasses: function() {
var base = this;
// Add fade in class to nav + logo + banner
$('body').addClass('fade-in');
// Keep subnav open if submenu item is active
$('.sidebar-nav .active').parents('.has-submenu').children('.dropdown').addClass('open');
// Add placeholder text to inputs
$('.wsite-form-sublabel').each(function(){
var sublabel = $(this).text();
$(this).prev('.wsite-form-input').attr('placeholder', sublabel);
});
},
_cloneLogin: function() {
var loginDetach = $('#member-login').clone(true);
$('.mobile-nav .wsite-menu-default > li:last-child').after(loginDetach);
},
_stickyNav: function() {
var sticky,
collapse,
uncollapse,
desktopsticky = $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor), body.nav-position-top-right.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length,
mobilesticky = $('body.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length;
var stickyInit = function() {
if (!$.fn.isDesktop() || desktopsticky) {
// Add sticky desktop nav
sticky = new Waypoint.Sticky({
element: $('.header')[0]
});
}
if ($.fn.isDesktop() && desktopsticky) {
// Collapse header on scroll
collapse = new Waypoint({
element: $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)')[0],
handler: function(direction) {
$('body').addClass('collapse');
},
offset: -10
});
uncollapse = new Waypoint({
element: $('body.nav-position-top'),
handler: function(direction) {
$('body').removeClass('collapse');
},
offset: -5
});
}
}
stickyInit();
$(window).resize(function() {
if (sticky) { sticky.destroy() }
if (collapse) { collapse.destroy() }
if (uncollapse) { uncollapse.destroy() }
stickyInit();
});
},
_sidebarNav: function() {
// Fixed sidebar nav unless menu height exceeds viewport height
var sidebarCheck = function() {
if ($.fn.isDesktop() && $('body').hasClass('sticky-nav-on') && $('.header .container').height() + $('.header .contact').height() <= $(window).height() - 45) {
$('body.nav-position-sidebar .header').addClass('stuck');
}
else {
$('body.nav-position-sidebar .header').removeClass('stuck');
}
}
sidebarCheck();
$(window).resize(function() {
sidebarCheck();
});
},
_sidebarCart: function(){
$('#wsite-mini-cart').addClass('cart-init');
$('.wsite-nav-cart a').click(function() {
$('.cart-init').toggleClass('cart-visible');
});
$('.wrapper, .header').click(function() {
$('.cart-init').removeClass('cart-visible');
});
},
_attachEvents: function() {
var base = this;
// Hamburger nav toggle
$('.hamburger').on('click', function(e) {
e.preventDefault();
$('body').toggleClass('nav-open');
});
// Initialize sticky nav
base._stickyNav();
// Initialize sidebar nav
base._sidebarNav();
// Copy login
$.fn.intervalLoop('.mobile-nav #member-login', base._cloneLogin, 800, 5);
// Subnav toggle
$('li.has-submenu span.icon-caret, .dropdown-link').on('click', function() {
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.dropdown').addClass('open');
}
setTimeout(function(){
base._sidebarNav();
}, 800);
});
// Sidebar Cart Link
$.fn.intervalLoop('.cart-init', base._sidebarCart, 1000, 5);
// Store category dropdown
$('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');
// Search filters dropdown
$('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');
// Init fancybox swipe on mobile
if ('ontouchstart' in window) {
$('body').on('click', 'a.w-fancybox', function() {
base._initSwipeGallery();
});
}
},
_initSwipeGallery: function() {
var base = this;
setTimeout(function(){
var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
var mc = new Hammer(touchGallery);
mc.on("panleft panright", function(ev) {
if (ev.type == "panleft") {
$("a.fancybox-next").trigger("click");
} else if (ev.type == "panright") {
$("a.fancybox-prev").trigger("click");
}
base._initSwipeGallery();
});
}, 500);
}
}
$(document).ready(function(){
briskController.init();
});
});
/* Header */
.header {
position: relative;
width: 100%;
color: #fill;
background: #bg;
border-bottom: 1px solid fade(#fill, 5);
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
z-index: 12;
.hamburger,
.contact,
.desktop-nav,
.sidebar-nav {
display: none;
}
}
body.nav-open {
overflow: hidden;
#media #tablet-up {
overflow: auto;
}
}
body:not(.nav-position-sidebar),
body.nav-position-top,
body.nav-position-top-right {
#media #tablet-up {
.header {
position: relative;
padding: 10px 40px;
border-bottom: none;
.transition(~'padding 280ms ease');
.container {
display: table;
overflow-y: hidden;
width: 100%;
height: 80px;
.transition(~'height 280ms ease');
}
.logo {
display: table-cell;
text-align: left;
vertical-align: middle;
max-height: 80px;
overflow: hidden;
a {
padding: 5px 20px 5px 0;
}
}
.desktop-nav {
display: table-cell;
}
.nav {
li {
display: inline-block;
}
a {
padding: 10px 20px;
}
}
.membership-cart {
display: table-cell;
width: 5%;
text-align: right;
white-space: nowrap;
span {
display: inline-block;
}
}
}
&.collapse {
.header {
padding: 5px 40px;
border-bottom: 1px solid fade(#fill, 5);
.container {
height: 40px;
}
}
}
&.full-width-nav-off .header .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
}
}
body.nav-position-top-right {
.desktop-nav {
text-align: right;
}
}
.stuck {
position: fixed !important;
top: 0;
}
body.nav-position-sidebar {
#media #tablet-up {
.header {
position: absolute;
top: 0;
left: 0;
width: 260px;
min-height: 100vh;
padding: 40px;
border-bottom: none;
display: flex;
flex-direction: row;
> .nav-wrap {
width: 100%;
min-height: calc(~'100vh - 80px');
display: flex;
flex-direction: column;
> .container {
flex: 1 0 auto;
}
}
.sidebar-nav {
display: block;
}
.nav {
li {
display: block;
}
a {
display: block;
padding: 10px 0;
}
}
.logo {
margin: 0 auto 30px;
}
.membership-cart > span {
display: block;
}
}
.contact {
display: block;
}
.wsite-phone {
display: block;
font-size: 15px;
color: fade(#fill, 40);
padding: 40px 0 0;
text-align: left;
&:before {
content: '';
display: block;
width: 60%;
padding-bottom: 40px;
border-top: 1px solid fade(#fill, 20);
}
}
.wrapper {
background: #bg;
padding-left: 260px;
box-sizing: border-box;
}
}
}
.logo {
* {
display: block;
}
a {
color: #primary;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
#wsite-title {
font-family: #font1;
font-size: 30px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.08em;
}
img {
overflow: hidden;
max-width: 300px;
max-height: 70px;
}
.wsite-logo {
overflow: hidden;
max-width: 100%;
max-height: 70px;
}
}
/* Nav */
.nav {
vertical-align: middle;
a {
display: block;
color: #fill;
font-family: #font1;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: lowercase;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
.active {
color: darken(#primary, 10%) !important;
}
#wsite-nav-cart-a {
padding-right: 0;
}
#wsite-nav-cart-num {
position: relative;
display: inline-block;
background: mix(#primary, #bg, 60%);
color: #fill;
min-width: 25px;
padding: 7px 2px;
text-align: center;
border-radius: 100%;
z-index: 2;
#media #tablet-up {
margin: 0 -6px;
}
}
}
.mobile-nav {
display: none;
}
/* Subnav */
#wsite-menus {
> .wsite-menu-wrap {
margin-top: 10px;
}
> .wsite-menu-wrap > .wsite-menu .wsite-menu {
margin: 0 -1px;
}
.wsite-menu {
position: relative;
background: #bg;
.box-shadow(inset 0px 0px 0px 1px fade(#fill, 3));
li a {
padding: 12px 20px;
background: transparent;
color: #fill;
font-family: #font1;
font-size: 14px;
font-weight: normal;
line-height: normal;
text-transform: lowercase;
letter-spacing: 0.05em;
border: none;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
}
.wsite-menu-arrow {
display: none;
}
}
/* Sidebar and Mobile Subnav */
.sidebar-nav,
.mobile-nav {
li {
position: relative;
border-color: fade(#fill, 80);
}
.wsite-menu {
padding-left: 5px;
color: fade(#fill, 50);
border-color: fade(#fill, 50);
a {
color: fade(#fill, 50);
}
}
.wsite-menu-wrap {
display: block !important;
overflow: hidden;
max-height: 0;
.transition(all 600ms ease-in-out);
}
.wsite-menu-wrap li.wsite-nav-current > a.wsite-menu-subitem {
background: rgba(0, 0, 0, 0.95);
border: none;
}
.wsite-menu-wrap .wsite-menu-arrow {
display: none;
}
.dropdown {
display: table;
width: 100%;
&:hover {
.icon-caret {
opacity: 0.6;
background: transparent;
}
}
> .icon-caret,
> .dropdown-link {
display: table-cell !important;
vertical-align: top;
a {
display: inline-block !important;
}
}
.icon-caret {
width: 15px;
cursor: pointer;
.transition(all 200ms ease-in-out);
&:before {
content: '';
position: relative;
display: block;
width: 5px;
height: 5px;
border: solid transparent;
border-width: 0 1px 1px 0;
border-color: inherit;
.transform(~'rotate(45deg)');
}
}
&.open span.icon-caret:before {
top: 5px;
.transform(~'rotate(-135deg)');
}
&.open + .wsite-menu-wrap {
width: 100%;
max-height: 1000px;
}
}
}
.sidebar-nav {
.has-submenu > .dropdown span.icon-caret {
padding: 12px 0 8px 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="no-header-page">
<div class="header">
<div class="nav-wrap">
<div class="container">
<a class="hamburger" aria-label="Menu" href="#"><span></span></a>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
<div class="nav sidebar-nav"><div class="nav-wrap">{menu}</div></div>
<div class="nav membership-cart">{membership}{minicart}</div>
</div>
<div class="nav contact">{phone:text}</div>
</div>
</div>
<div class="wrapper">
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="footer-wrap">
<div class="footer">{footer}</div>
</div>
</div>
<div class="nav mobile-nav">
<a class="hamburger" aria-label="Menu" href="#"><span></span></a>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
The reason not all elements are showing is because of this:
.sidebar-nav .dropdown.open + .wsite-menu-wrap, .mobile-nav .dropdown.open + .wsite-menu-wrap {
width: 100%;
max-height: 1000px;
}
The element is expanded by changing the max-height from 0px to 1000px. The elements in your menu exceed 1000px and they get cut off.
This is actually a pretty comman problem when using CSS transitions to expand elements. CSS transitions only work on height if height is set to an exact value. You can read more about it here: https://css-tricks.com/using-css-transitions-auto-dimensions/
The max-height trick offers a work-around. But it has its draw-back - if the elements expands beyond the value of max-height it gets cut off.
The simplest solution is to simply increase the value of max-height, until all your elements show. This will work, but it' s not ideal if in the future the element expands even more.
More sophisticated (and arguably better) solutions can be found in the css-tricks web page above.
Still, are you sure it's a good idea do display such an enormous amount of of links in an accordion menu? Wouldn't it be better to rethink the navigation, perhaps have a separate page with all the books?
I'm trying to remake hover like on this website:
https://www.samsaraubud.com/
When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor. I tried so many solutions from codepen after typing "mouse follow" but nothing works.
I have button like this:
https://codepen.io/Aventadorrre/pen/mdyPJbv
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
Button
and how to make circle around mouse (following mouse) when i hover button?
Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 3px),
red calc(100% - 2px) calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px; /* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
If you want the circle above the text consider pseudo element and the same trick:
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background-size:0 0;
position:relative;
}
a.cursor::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side,
blue calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px;
background-position:inherit;
}
<a class="cursor" href="#">Button</a>
Updated
It shows full circle even on the boundaries of the button
const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")
btn.onmouseenter = function() {
circle.classList.add("in")
}
btn.onmousemove = function(e) {
const {
top,
left,
width,
height
} = btn.getBoundingClientRect()
const {
clientY,
clientX
} = e
if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
circle.classList.remove("in")
}
circle.style.top = `${clientY - top}px`
circle.style.left = `${clientX - left}px`
};
body {
margin: 20px;
padding: 20px;
}
.button {
padding: 40px 80px;
border: 1px solid grey;
color: blue;
display: inline-block;
position: relative;
}
.circle {
position: absolute;
display: none;
width: 30px;
height: 30px;
border-radius: 50%;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border: 2px solid red;
}
.circle.in {
display: block;
}
<a class="button">
Button
<span class="circle"></span>
</a>
old answer
The answer is extension of the answer by #Temani Afif.
The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button.
var h = document.querySelector(".cursor");
h.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty(
"background-position",
e.clientX - 15 + "px " + (e.clientY - 15) + "px"
);
};
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
no-repeat;
/* Don't repeat*/
background-size: 0px 0px;
/* by default, circle is of 0px */
}
a.cursor:hover {
background-size: 30px 30px;
/* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
You can do that with mousemove event. Catch the event and set the location of cirlce while the mouse moves.
window.addEventListener('mousemove', function(e){
document.getElementById("circle").style.display = "block";
document.getElementById("circle").style.left = e.offsetX + "px";
document.getElementById("circle").style.top = e.offsetY + "px";
});
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
#circle{
width: 30px;
height: 30px;
border: 1px solid red;
border-radius: 50%;
position: fixed;
display: none;
}
Button
<span id="circle"></span>
I've been using a jQuery scroll to enhance my parallax scrolling page. Specifically, this one. JQuery Scroll to Next Section
I am completely new to jQuery, (and have only used some fairly basic JavaScript in the past). I can work out how to change and adapt code found to my needs, but I don't know how to slow the scroller down.
The problem, is that to accommodate all of the content in my page, it needs to be about 17000px high. I only want the scroller to scroll to the bottom of the page then back to the top (without any stops inbetween), but when clicked it currently takes about 1 second to scroll 17000px. This means you can't read any of the text displayed. I want the scrolling animation to max out at about 1000px per second. How would I do this?
HTML
<div class="background fixed"></div>
<div class="trigger-scroll">></div>
<!-- Sections Id'd 1 through 5 -->
<section id="slide-6" class="homeSlide">
<div class="bcg center fixed"
data-0="top:200%; opacity:0;"
data-16000="top:200%; opacity:1;"
data-17000="top:90%;"
data-end="top:90%;">
<div class="hsContainer">
<div class="center middle">
<h2>View my portfolio!</h2>
<img class="portfolio" src="img/r3gamersHome.png"/>
</div>
</div>
</div>
</section>
<section id="slide-7" class="homeSlide scroll-here">
<div class="hsContainer">
<div class="hsContent bottom"
>
<h3>TEST</h3>
</div>
</div>
</section>
Javascript
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 2900;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
var s = skrollr.init();
s.refresh($('.homeSlide'));
$(document).ready(function() {
/* run scroll to section only
if body has class page-scroller */
var pageScroller = $( 'body' ).hasClass( 'page-scroller' );
if ( pageScroller ) {
// begin homepage scroll to section
var $scrollSection = $('.scroll-here');
var $scrollTrigger = $('.trigger-scroll');
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If already scrolled down
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
// end homepage scroll to section
}else{
console.log('page-scroller class was not found in body tag');
}//end if else
});
CSS (probably isn't relevant so i've added only the bare minimum, just in case)
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.hsContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 700px;
position: absolute;
}
.hsContent h2 {
color: #fff8de;
padding: 10px 5px;
font-size: 30px;
}
#media screen and (max-height: 400px) {
.hsContent h2 {
font-size: 25px;
}
}
.hsContent h3 {
color: #fff8de;
padding: 10px 5px;
line-height: 20px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h3 {
font-size: 15px;
padding: 5px 2.5px;
margin-bottom: 2px;
}
}
.hsContent h4 {
color: #fff8de;
padding: 10px 5px;
line-height: 15px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h4 {
font-size: 10px;
}
}
.hsContent p {
width: 400px;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.fixed {
position: fixed;
}
.center{
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.middle {
text-align: center;
margin: 0px;
padding-top: 40px;
width: 100%;
min-width: 300px;
}
#media screen and (max-height: 400px) {
.middle {
padding-top: 15px;
}
}
#slide-6 .bcg {background-color: rgb(208, 208, 208);
top: 100%;
box-shadow: inset 5px 5px 20px black;
}
#slide-6 .hsContent {
top: 0px;
text-align: center;
}
#slide-7 .hsContent {
max-height: 100px;
}
.trigger-scroll {
box-sizing: border-box;
display: inline-block;
border: 1px #f60 solid;
bottom: 20px;
width: 68px;
height: 68px;
position: fixed;
right: 20px;
padding: 16px 20px;
transition: transform 500ms ease-in-out;
z-index: 50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-weight: 700;
text-shadow: 0 1px 0 #fff;
color: #fff;
font-family: verdana;
font-size: 2em;
line-height: 1;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);
}
#media screen and (max-height: 400px) {
.trigger-scroll {
width: 51px;
height: 51px;
font-size: 1.5em;
padding: 12px 15px;
}
}
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
In this section's third line, change 1000:
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
to $(document).height(), like this:
$('html, body').animate({ scrollTop: 0 }, $(document).height());
this will make the animation scroll at about 1000 pixels per second.
I'm trying to make my div element to slide from left to right using animate() jQuery method. Everytime somebody clicks on button it should check the divs left property value. If the value equals to -90% it should slide it from left to right. Otherwise (if it is 0) it should slide it back (left:-90%).
JS:
$("button").click(function() {
if($("div").css('left') == "-90%"){//check if left:-90%, if true slide it to right
$("div").animate({left: "0px"},1000);
}else{
$("div").animate({left: "-90%"},1000);//if left is not -90% slide it to left
}
});;
HTML:
<button>Click Me</button>
<div>
</div>
CSS:
div{
height:100px;
width:90%;
position:absolute;
background-color:#77A3C5;
left:-90%;
}
button{
display:block;
position:absolute;
}
No need to get fancy with percentages, just keep it simple with this:
$("button").click(function() {
if($("div").position().left < 0){
$("div").animate({left: "0px"},1000);
}else{
$("div").animate({left: "-90%"},1000);
}
});
Demo: http://jsbin.com/juxoko/4/
Try this, I tested it.
$("button").click(function() {
$('.parent').hide();
var leftPercentage = $('.child').css('left');
$('.parent').show();
if(leftPercentage == "-90%"){//check if left:-90%, if true slide it to right
$("div.child").animate({left: "0px"},1000);
}else{
$("div").animate({left: "-90%"},1000);//if left is not -90% slide it to left
}
});
div.child{
height:100px;
width:90%;
position:absolute;
background-color:#77A3C5;
left:-90%;
}
button{
display:block;
position:absolute;
z-index:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me</button>
<div class="parent">
<div class="child">Testing</div>
</div>
This is a way you can do it
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
body {
margin: 0;
}
.pushmenu {
/*this is the nav*/
background: #3c3933;
font-family: Arial, Helvetics, sans-serif;
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
}
.pushmenu h3 {
color: #cbbfad;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
margin: 0;
background: #282522;
height: 16px;
}
.pushmenu a {
display: block;
/* drops the nav vertically*/
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #56544e;
border-bottom: 1px solid #312e2a;
padding: 14px;
}
.pushmenu a:hover {
background: #00A287;
}
.pushmenu a:active {
background: #454f5c;
color: #fff;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.pushmenu,
.pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav_list {
background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
cursor: pointer;
height: 27px;
width: 33px;
text-indent: -99999em;
}
nav-list.active {
background-position: -33px top;
}
.buttonset {
background: #00A287;
height: 16px;
padding: 10px 20px 20px;
}
section.content {
font-family: Arial, Helvetica, sans-serif;
padding: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
Home
Nav2
Nav3
Nav4
Nav5
Nav6
Nav7
</nav>
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
<section class="content">
<h1>Slideout Navigation</h1>
<p>
</p>
</section>
<!-- End Content -->
</div>
<!-- End Main -->
</div>
<!-- End Container -->
</body>
$("div").css('left')
will return only in px not in percentage
so change your condition to
if($("div").position().left/$(window).width() * 100 == "90%")
this will return position percentage