I've found this JS fiddle, which does exactly what I'm looking for. However, I can't seem to figure out how to get it to work when I move the navigation to the side.
var hoverMenu = $('#HiddenMenu'),
hoverSpace = $('#HoverSpace');
hoverSpace.on('mousemove', function(event) {
if(35 - event.clientY < 0) {
hoverMenu.css({top: 35 - event.clientY});
} else {
hoverMenu.css({top: 0});
}
}).on('mouseout', function() {
hoverMenu.css({top: -35});
});
http://jsfiddle.net/PaZHH/1/ <-- this is working example of the clientX/Y event I'm wanting
I can't seem to implement this by using clientX & moving the navigation to the right hand side.
This is where I managed to get too http://jsfiddle.net/PaZHH/102/
Make this changes.
Add absolute positioning to hidden menu:
#HiddenMenu {
background-color: #e00;
position: absolute;
right: -35px;
}
Make the hover space position relative:
#HoverSpace {
position: relative;
background-color: #aeaeae;
overflow: hidden;
width: 45px;
height: 500px;
}
Now, you'll be fine. You can check the result here. It currently works by moving in from right, which is a bit different from you horizontal sample.
Related
I have an article's container div. I made custom scrollbar for it. But to offer a better user experience I want to expand the width of the scrollbar when hovering on the scrollbar. I have tried some CSS methods like using background-clip to make the border work --> How to change -webkit-scrollbar width when hover on it <-- but didn't work. Trying to do this with javascript, but maybe I am not doing it right. Please help me figure this out.
CSS
.articles-container::-webkit-scrollbar-track
{
margin-top: 900px;
margin-bottom: 900px;
}
.articles-container::-webkit-scrollbar
{
width: 20px;
}
.articles-container::-webkit-scrollbar-thumb
{
border-radius: 40px;
background-color: rgba(112,112,112,0.3);
}
.articles-container::-webkit-scrollbar-thumb:vertical:hover
{
background-color: rgba(112,112,112,0.5);
}
.articles-container.more-width::-webkit-scrollbar
{
width: 40px;
}
JAVASCRIPT
document.addEventListener("mousemove", function(e){
let ele = document.getElementById('art-container-id');
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});
Is there any problem with .articles-container.more-width I tried putting an space like .articles-container .more-width but didn't work. How can I solve this any other approaches?
My layout looks almost identical to this codepen.
.parent {
color: white;
padding: 70px;
position: relative;
background-color: #0074d9;
margin-top: 50px;
}
.element {
background-color: lighten(#0074d9, 20);
opacity: .85;
padding: 20px;
color: rgba(255,255,255,.9);
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
The codepen works the right way, so it's been hard to come up with a demonstrable example.
When my cursor is positioned over the fixed "child element" div, I want to be able to scroll the parent but not be able to clickthrough.
The common answer seems to be "pointer-events: none", but that allows click interaction with the page below.
Open to other suggestions or explanations as to why it works in the codepen, but doesn't outside of it.
The solution that worked for me was to use jquery to grab the parent by id and add my deltaY to its scrollTop.
<div
onWheel={(e) => {
const component = $(`#content`);
const contentScrollPosition = component.scrollTop();
component.prop("scrollTop", contentScrollPosition + e.deltaY);
}}
</div>
This allows me to scroll the parent even when my cursor is on the fixed-position div.
Unfortunately, mobile doesn't work well. First, you would need to track the touch event though onTouchStart, End, and Move. Even then, you lose touch scroll momentum which makes it feel too unnatural.
Having a small problem. (Refer to fiddle)
I've got a container in my project that has been rotated 180 deg, with a container inside that has been rotated another 180 back to the original state.
I need to invert the scroll.
How would i go about this?
Dont mind wasting your time with a method, that reverts the basic setup.
The basic setup has to stay.
http://jsfiddle.net/vavxy36s/
Description of fiddle:
"Start" marks the initial string and "end" ofcourse the last one.
If you try scrolling you will realize, that it's inverted as to how one would normally scroll.
.class1 {
height: 200px;
background-color: blue;
color: white;
width: 100px;
overflow-y: scroll;
overflow-x: hidden;
direction: rtl;
-webkit-transform: rotate(180deg);
}
.class2 {
direction: ltr;
-webkit-transform: rotate(180deg);
}
EDIT: Just mousewheel scroll, has to be inverted.
Edit: Your original setup has different behaviors in Chrome and in [IE & Firefox]. In Chrome, the scroll is already inverted, but in FF and IE, the scroll remains normal. My solution reverts it in both cases, but the behaviors remain different across browsers.
You could add these styles:
/* ...
Your original styles
...
*/
.class1 {
overflow: hidden;
position: relative;
}
.class2 {
position: absolute;
bottom: 0;
}
And then, using jQuery, modify the bottom CSS property of .class2:
var scrollPos = 0,
diff = $('.class2').height() - $('.class1').height();
$('.class1').on('mousewheel', function(e) {
scrollPos = Math.min(
0,
Math.max(
-diff,
scrollPos + e.originalEvent.wheelDelta
)
);
$('.class2').css('bottom', scrollPos);
});
JS Fiddle Demo
You could use the mousewheel library to catch and invert the scroll movement.
$(".class1").mousewheel(function(event) {
event.preventDefault();
this.scrollTop -= (event.deltaY * event.deltaFactor * -1);
});
You can view a demo here: http://jsfiddle.net/fduu20df/1/
I use this code to move the item while scrolling the page
$(document).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
$("#profile").offset({top:scrollTop+34});
});
And this code to show and hide it.
$(document).ready(function() {
$(".various[type=profile]").click(function() {
if($("#profile").attr("clicked") == "yes") {
$("#profile").stop().animate({opacity: 0}, 1000);
setTimeout(function(){$("#profile").css("visibility", "hidden")}, 1000);
$("#profile").attr("clicked", "");
}
else {
$("#profile").css("visibility", "visible");
$("#profile").stop().animate({opacity: 1}, 1000);
$("#profile").attr("clicked", "yes");
}
});
});
This is css
#profile {
position: absolute;
top: 34px;
right: 0;
width: 200px;
visibility: hidden;
z-index: 1000;
opacity: 0;
}
The problem is that the item returns to it's initial position (top: 34px, right: 0px) with every click. With using fadeIn/fadeOut I have the same problem.
I think you should just look into jQuery UI. They have code that can already make tags draggable and droppable. They are easy to define too.
$("#profile").draggable();
http://jqueryui.com
There are a couple of things you need to do here.
1: Rather than positioning the element with jQuery, you can just use the CSS property position:fixed to stick it in the upright corner.
#profile {
position: fixed;
top: 34px;
right: 0;
width: 200px;
z-index: 1000;
}
2: There are a some issues with your jQuery code for showing and hiding. First, clicked is not a valid HTML attribute. You should consider using $(element).data('clicked') instead of $(element).attr('clicked') to store its visibility. Next, when you set visibility:hidden, the click event no longer registers on it, so clicking on it won't show it again.
Maybe this is the effect you're looking for?
I have what is for all intents a mouseover tooltip. It lives on multiple page elements (dynamically generated, so I never know how many there will be or what their positions are.)
I've had complaints that on lower-resolution screens, the tooltips on items in the rightmost column of elements run offscreen. Since I don't know the position of the parent item when it's created, I need a way to detect (before the mouseover actually happens) that the tooltip div will partially be offscreen when displayed, and change the css accordingly.
I know what the css needs to be; what I'm having trouble with is the detecting part. I've seen a few questions that are similar, but the solutions all involve using prototype or jquery plugins. I'm limited to core jquery (or just plain javascript) on this project.
Any pointers out there?
Here is a quick demo I put together on jsFiddle: http://jsfiddle.net/2gGrd/
HTML:
<p class="left">Left</p>
<p class="center">Center</p>
<p class="right">Right</p>
CSS:
p {
position: absolute;
top: 50%;
}
.left {
left: 0;
}
.center {
left: 50%;
}
.right {
right: 0;
}
.toolTip {
width: 100px;
height: 25px;
background: red;
color: green;
position: absolute;
}
JavaScript:
var tip;
$('p').hover(function() {
$(this).css('color', 'red');
var xpos = $(this).width() / 2 + $(this).offset().left;
var ypos = $(this).height() / 2 + $(this).offset().top;
tip = createToolTip('thing', xpos, ypos);
$(this).parent().append(tip);
tip.offset({
left: tip.offset().left - tip.width() / 2
});
if (tip.offset().left < 0) tip.offset({
left: 0
});
if (tip.offset().left + tip.width() > $('body').width()) {
tip.offset({
left: $('body').width() - (tip.width())
});
}
}, function() {
$(this).css('color', '');
$(tip).remove();
});
function createToolTip(text, x, y) {
return $('<div />').addClass('toolTip').css('left', x).css('top', y).text(text);
}
It's not perfect code, nor is it the same idea as you have for the tool tips, but hopefully it answers the question about keeping the items on screen.