I have a simple list : example : http://www.w3schools.com/html/html_lists.asp
I am using Mozilla Firefox (version 3.6 but I think version does not matter). When I click (single) on the bullet, the list item gets selected(highlighted).
Is there a way to disable this highlighting (without removing the highlighting forever using -moz-selection)?
This behavior is not seen in Chrome or IE.
Another example : (with list-style-image) : http://www.sendesignz.com/Demo/jQuery/expanding_list_item/expanding.html
Is there a way in plain javascript or jQuery or css to disable this auto selection in FF?
It's functionality implemented by Firefox as you could tell, while I don't know of any true way to remove the functionality there is a CSS workaround you can do.
Wrap all contents of the <li> in a <span>, and then using margin, padding and absolute positioning to position the span over the list item.
HTML
<ul>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ul>
CSS
li span{
margin-left: -50px;
padding-left: 50px;
position: absolute;
}
You can use the mozilla css parameter
CSS
li {-moz-user-select: none;}
The selection seems to be related to the mousedown event. You can block it by stopping the event. For exemple in jQuery :
elt.mousedown(function(event){ return false; });
Related
I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer
Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.scroll {
overflow: hidden;}
Add this class to your css
<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api
You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.
I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.
This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.
Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422
What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.
Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.
just add the position: sticky; in bootstrap-select.css to the below class
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: sticky;
}
Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/
I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.
You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.
Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.
It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)
It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.
If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}
HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.