I'm trying to use this npm package, react-selectable-fast (See the demo to get a better understanding of what I am talking about). When a user selects something, there is the dotted lined box which shows where on the screen you've drawn the selection-box.
In the example code, they seem to give their selection box an outline like so:
.selectable-selectbox {
z-index: 9000;
position: absolute;
cursor: default;
background: none;
border: 1px dashed grey;
}
I have copied their stylesheet to have the same kind of selection box outline. But it doesn't start at the right point. My selection box is drawn way higher. What might be the reason? Is there anything in the React/JS code I need to consider?
Related
I was trying to complete a simple task on Javascript.info and I'm getting my ass beaten by an "a" tag. The task is to simply place (and remove) a tooltip above the element on hover and I have no problem with the roof or the house, but when I try to place the box above the link, it breaks and I can't solve it for my life.
I'm asking for help here because the solution on the site uses position:fixed while I'm trying to use position:absolute and simply mimicking the solution won't help me learning anything. The problem is all on line 77 and 78, when I try to assign tooltip.style.left and tooltip.style.top.
If I try to assign it usign a literal (for example, "-58px"), it works. Otherwise, it just defaults to whatever value the tooltip on "house" would have. I tried to see what is going on with some tactical alerts and it drove me insane. It shows me that if I use a computed value, it defaults and if I use a literal, it will work normally.
I'd like someone to explain what is going on and possibly some insight (pointing out if I got wrong how position:absolute works, how element size properties works or something on this nature)
The code (I only made the part that is inside of the script tag on line 64, the rest is from the authors of the task):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* the tooltip should work after page scroll too */
}
.tooltip {
position: fixed;
z-index: 100;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#house {
margin-top: 50px;
width: 400px;
border: 1px solid brown;
}
#roof {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 20px solid brown;
margin-top: -20px;
}
p {
text-align: justify;
margin: 10px 3px;
}
</style>
</head>
<body>
<div data-tooltip="Here is the house interior" id="house">
<div data-tooltip="Here is the roof" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p>
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
<p>Soon they met a man. Hover over me</p>
</div>
<script>
house.onmouseover= function(event){
let target= event.target.closest('[data-tooltip]');
let tooltip= document.createElement('div');
tooltip.textContent= target.dataset.tooltip;
tooltip.classList.add("tooltip");
target.append(tooltip);
if(!tooltip.parentElement.style.position){
tooltip.parentElement.style.position= 'relative';
}
tooltip.style.position= 'absolute';
tooltip.style.top= "-"+(tooltip.offsetHeight+5)+"px";
tooltip.style.left= -target.clientLeft+(target.offsetWidth-tooltip.offsetWidth)/2+"px";
//alert("-"+(tooltip.offsetHeight+5)+"px");
//alert(tooltip.style.top);
}
house.onmouseout= function(event){
let target= event.target.closest('[data-tooltip]');
tooltips= target.querySelectorAll('.tooltip');
for(tooltip of tooltips){
tooltip.remove();
}
}
</script>
</body>
</html>
Thanks already :)
when I try to place the box above the link, it breaks
This is because the tooltip box is positioned to appear under the mouse. Hovering over the link generates a regenerative feedback loop of
Create and append the tooltip element to the <a> element
The mouse is over the tooltip element
Fire mouseout on the a element in preparation of firing mouseover on the tooltip.
mouseout handling removes the tooltip element
The mouse is now over the a element,
Fire mouseover on the a element and repeat from step 1.
The roof and interior mouseover events don't trigger the loop because the tooltip box is outside the target element with the data-tooltip attribute.
You could try
Moving the tooltip box so it cannot appear under the mouse, or
Think of creative ways of using mousenter and mouseleave events on the anchor element that don't fire when hovering over the tooltip because it is a child of the anchor element, or
Turn off pointer events from tooltip elements:
.tooltip {
pointer-events: none;
}
Additional listeners used to verify the problem:
house.addEventListener("mouseover", e=>console.log("over"));
house.addEventListener("mouseout", e=>console.log("out"));
The additional delay caused by console.log did result in the tooltip box being rendered and becoming visible in Firefox, but the log output definitely confirms the feed back loop in action.
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
I'm trying to figure out what is the right term for it so I can research more into and learn.
I encountered this tab, where you click on one the heading the blue line and a pointer pop up to point towards the tab content... (for example when you click on Books, and then click on Articles, etc etc..
Here is the example..
http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm
I want to know how you can create that. Or what is it ? so I can start researching into it.
Thanks in advanced, I know I'm suppose to search for it first, But i dont know where to start.
Cheers
Look for CSS3 shapes, for the actual pointy-thing.
There are plugins in ever major framework for creating tabs, or you can create a custom one with some jQuery. You'll need .on('click, ...) and .fadeIn/.fadeOut
For the tab-view use the CSS position: absolute on each tab-content inside a container with position: relative.
(community wiki because I didn't actually do any work)
The one from the page you posted uses a simple image for an <li>element which has the class .current on click (jQuery).
That image is positioned with a background-position: center bottom; and overlays the horiz. azure line.
Demo: http://jsfiddle.net/trevordixon/hvBpF/
Each tab is a <li>, and the currently selected tab has a class current. You'll see they have the following CSS rule:
.tab-features .tabs-list .current {
background: url("images/feature-tab-arrow.gif") no-repeat center 27px;
}
So the tab that has the current class has a 27px tall arrow image positioned just below the bottom of the tab. They could have also done something like this instead of using a background image:
.tab-features .tabs-list .current:after {
content: "";
width: 0;
height: 0;
/* These borders make it a triangle */
border-left: 14px solid transparent;
border-top: 14px solid #0088aa;
border-right: 14px solid transparent;
}
So to implement something like this, find a good tabs script or plugin, and style the currently selected tab like that.
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.
Consider the following HTML:
<p>This is a potentially large paragraph of text, which <span>may get
wrapped onto several lines when displayed in the browser.
I would like to be able to draw a minimal</span> box round the span</p>
I would like to draw a minimal border round the span.
That is:
If the span is rendered on a single line, the border is equivalent to setting a CSS style of border: 1px solid black;
If the span is rendered on multiple lines, the border is drawn around the outermost edges of the span, not between the lines which it crosses. This is equivalent to setting a CSS background color on the span, and drawing the line around the edges of the highlighted area.
I am fairly confident this cannot be done with raw CSS alone (in the second case). Solutions involving javascript libraries, or those which are Firefox-specific, are acceptable.
This is a mock-up of how the second scenario should look:
Consider adding an outline, not border http://jsfiddle.net/tarabyte/z9THQ/
span {
outline: 2px solid black;
}
Firefox draws outline between lines. There is a workarond: http://jsfiddle.net/z9THQ/2/
.wrapped {
outline: 2px solid black;
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
<p>
This is a potentially large paragraph of text, which
<span class="wrapped"><span>
may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
</span></span>
box round the span
</p>