I'm working on project to provide a bolt-on tool for websites, which makes heavy use of jQuery. Presentation / design is crucial, and I want to replace the standard (ugly) scrollbar applied by the browser to html elements with overflowing content, with something better looking.
There are numerous jQuery plug-ins around that apply custom scrollbars and allow styling via CSS which is great, but all the ones I've tried seem to suffer from the same problem which is this: if the scrollable content contains a form with text fields etc, tabbing between fields does not activate the scrollbar, and in some cases can screw up the custom scrollbar layout altogether.
Two examples of plug-ins I've tried:
http://manos.malihu.gr/jquery-custom-content-scroller
http://baijs.nl/tinyscrollbar/
I've tried others also, but in all demos / examples the content is plain text. I've done a lot of searching on this already, but it seems no-one has tried using these plug-ins with form-based content.
All these plug-ins seem to work in more or less the same way, and I can see exactly what happens and why, but just wondered if anyone else has had this problem and / or found a solution?
This issue can be easily replicated as follows (using the tinyscrollbar plug-in):
Add this to a standard html test page -
CSS:
<style>
#tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; }
#tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
#tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
#tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
#tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
#tinyscrollbartest .disable { display: none; }
</style>
Html:
<div id="tinyscrollbartest">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
</p>Here's a text field: <input type="text"/><p>
...
// lots of content to force scrollbar to appear,
// and to push the next field out of sight ..
...
<p>Here's another field: <input type="text"/></p>
</div>
</div>
</div>
Plug-in reference (assuming jquery libraries etc are referenced also):
<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$('#tinyscrollbartest').tinyscrollbar();
});
</script>
Now click in the first text field so it has focus, hit the tab key to move to the next one and see what happens.
I understand your problem.. But is hard to find a good solution to this. You could try to set a focus event on your form elements. And let this event trigger the scrollbar_update function of tinyscrollbar. You can set the offsetTop of the form element that currently has focus as the methods parameter. I think that would work.
$('formelements').focus(function(){
YourScrollbar.tinyscrollbar_update(this.offsetTop);
});
I had to overwrite the standard tabbing functionality with my own:
$(".scrollable").each(function() {
if (!$(this).data("scrollbar"))
{
$(this).data("scrollbar", new Scrollbar({
holder:$(this)
}));
$(this).find("input").bind("keydown", function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode == 9)
{
e.preventDefault();
var scrollTo = $(this);
if (e.shiftKey)
{
var nextInput = $(this).prevAll("input:not([type=hidden])").first();
scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
}
else
{
var nextInput = $(this).nextAll("input:not([type=hidden])").first();
}
if (nextInput.length)
{
console.log(scrollTo);
$(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
{
nextInput.focus().select();
});
}
}
});
}
});
It's a bit annoying to have to wait for the scroll but I don't see any other option.
Related
I have a jquery function that on hover it shows a hidden div to the side and it works fine. What I wanted to add is when I hover to the showed div ie box2 the div disappears therefore I can't interact with box2 how can I make box 2 stay unhidden when I hover on it then on hover out it fades out again. I can do this easily with vanilla javascript but I need the jquery fade effect so how can I accomplish it with jquery. Any help is appreciated. Thanks in advance.
$("#box1").hover(function(){
$("#box2").fadeIn("slow");
},
function(){
$("#box2").fadeOut();
});
.box1 {
position: absolute;
left: 4%;
width: 20%;
height: 10%;
background-color: black;
}
.box2 {
position: absolute;
left: 24%;
width: 20%;
height: 30%;
background-color: grey;
display:none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
Here are 2 ways to handle it. The one that is commented out will keep box 2 visible until you mouse out of box 2.
The other one (uncommented) will set a short timer and test to see if you're still overing over box 2. I think that's the one you're looking for.
let ontarget = false
$("#box1, #box2").hover(function(e) {
$("#box2").fadeIn("slow");
ontarget = e.target.id == 'box2'
},
function(e) {
// keep open unless mouse out of box 2
//if (e.target.id != 'box1') $("#box2").fadeOut();
// after a short delay (100 ms) test to see if we're still over box2, if so do nothing.
// though if we mouse out it will rerun this if statement to close it like you expect
setTimeout(() => {
if (!ontarget || e.target.id == 'box2') $("#box2").fadeOut();
if (e.target.id == 'box2') ontarget = false
}, 100)
});
.box1 {
position: absolute;
left: 4%;
width: 20%;
height: 10%;
background-color: black;
}
.box2 {
position: absolute;
left: 24%;
width: 20%;
height: 30%;
background-color: grey;
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
You have a couple of options here. First, you could wrap both boxes in a <div>, and just modify the jquery code to show the div on hover.
Another option could be to use the css !important attribute (it is bad habit, however) to add another style rule to show it. This would look as follows:
.box2:hover {
display:block;
}
Feel free to comment with any questions! Good Luck!
I've noticed on the mobile version (iOS) of my website that the main navigation requires links to be tapped twice for the page to redirect. After removing various styles/bits of code I found the cause of the problem, it's my Javascript for a 'sliding line' hover effect.
My basic understanding would be that as the script is still running on mobile, when it's not really needed, it means the navigation is running/expecting a hover effect and once that's run you can then click a link as you intend?
The script works perfect on desktop, so I don't want to change any of the functionality but is there something I can add to prevent this bug on mobile devices? Alternatively, would a javascript 'media query' type thing, stopping the script from running below 1000px be a better solution? If so what would be the best way to implement that?
Thank in advance!
CodePen: https://codepen.io/moy/pen/pZdjMX
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* Header */
.page-head {
background: white;
border-top: 2px solid #ddd;
box-sizing: border-box;
overflow: hidden;
padding: 0 30px;
position: relative;
width: 100%;
}
.page-head__logo {
background-image: none;
float: left;
padding: 0;
text-shadow: none;
width: 200px;
}
/* Nav */
.site-nav {
display: block;
float: right;
text-align: center;
width: auto;
}
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: auto;
left: auto;
width: auto;
}
.site-nav__list li {
background: none;
display: block;
float: left;
margin: 0;
padding-left: 0;
text-transform: uppercase;
}
.site-nav__list a {
box-sizing: border-box;
display: block;
font-weight: 900;
padding: 30px 15px;
transition: color .15s;
text-shadow: none;
}
.site-nav__list a {
color: red;
}
/* Underline */
.site-nav__line {
background: red;
content: "";
display: block;
height: 2px;
position: absolute;
top: -2px;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header class="page-head">
Logo Here
<nav class="site-nav ">
<ul class="site-nav__list">
<li class="site-nav__item ">About</li>
<li class="site-nav__item">Looooonger Title</li>
<li class="site-nav__item">Company</li>
<li class="site-nav__item">About</li>
<li class="site-nav__item">Login</li>
<li class="site-nav__item">Apply</li>
</ul>
</nav>
</header>
</body>
if your problem is you to double click it before redirecting to its page, Try thi
$('.site-nav__list a').click(function(){
$(this).click();
});
the function is when you click the navigation the script will click it again,
If you're sure that the cause of the problem is running that script on mobile screens, you can call sliding script only on desktops with this code:
if ( $(window).width() > 739) {
//Desktop scripts
}
else {
//mobile scripts
}
You can change the screen width of devices you want to script work on them by changing 739. After that your script will run only on screens larger that 739px or what you've choose.
Update
If you want to everything works correct after resizing, You should do a little trick.
Personally, I use this method because it's the only way that makes you sure about bugs and problems. The trick is reloading the page after resizing.
It's not costly in many cases because most of the things cashed and don't need to redownloading. There are lots of methods to do that, but I use the below one because it works good and is simple and short:
window.onresize = function () {
location = location;
}
You just need to add this lines at the end of your script file. After resizing, everything will work well again.
How it works?
When you resize the window, a javascript event will emit. What we done in the last code is overriding the event listener of that event. So when the user resize the window, the location = location; code will execute.
What this line means? the location object is a property of window object and keeping information about current window url. When you change the location of a window, browser page will reload to getting the new window of the new location (more info about location).
What we done here is assigning current location to the location. So browser thinks we had a redirect request and reloads the page. But because the new location is the same object as previous one, the page will reload instead of redirecting to somewhere else.
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?
Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}
The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help
After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS
This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}
Working sample: http://jsfiddle.net/hasYK/
I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>