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!
Related
I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
I am trying to get an information tag to slide out from behind a circular picture. In order to do this I used a block and circle to create the information field and stuck it behind the image.
The problem I am running into is getting it to slide out smoothly. Since there are two div's, the square slides out and then the circle, causing it to look choppy.
I would like to get it to toggle in and out as if it were one object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I have tried it with the employeeDot inside the employeeBlock which is in the employee div
as well as both the employeeDot and the employeeBlock seperate and in the employee div.
Both methods give similar results
Thanks
EDIT: Thanks for the replies, it's running smoother, but not quite perfect. I think I need to create one item that is shaped like a bullet, and toggle that in and out. Any ideas on how to do that?
The closest I can get is a pill shape, which leaves some of the area uncovered
EDIT: Here is my html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And my CSS:
.pic {
height: 150px;
width: 150px;
border-radius: 75px;
position: absolute;
}
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
You can specify any number of selectors to combine into a single result:
$('.employeeDot, .employeeBlock').toggle('slide');
Multiple Selector
.toggle(); is deprecated, use .slideToggle(); instead.
Slide down:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').slideToggle('fast');
});
});
Slide from side:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').animate({width: 'toggle'});
});
});
The rest of the answers have covered everything, but to get the element to shape like a bullet use:
border-radius: 10px 10px 0 0;
But match the size and sides to your likings.
try this.
$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot, .employeeBlock').toggle('slide');});
I don't have much experience with jQuery.
I have 4 li elements and a draggable block. When I drag from green to blue, first I need my dragging block to stand behind blue and not go out from the borders of the container, meaning that my draggable element must be always snap into the container.
When my draggable element stand behind blue, the background color must be changed from brown to red.
Can anybody help me? Because I don't really know how to do this. All what I have at this moment is: JSFiddle
HTML
<div id="container" class="ui-widget-header">
<div id="draggable" class="ui-widget-content"></div>
<ul id="menu">
<li id="menuElement1"></li>
<li id="menuElement2"></li>
<li id="menuElement3"></li>
<li id="menuElement4"></li>
</ul>
</div>
CSS
body {
background-color: brown;
}
#container {
position: relative;
}
#menu,
#draggable {
position: absolute;
top: 0;
left: 0;
}
#draggable {
width: 100px;
height: 150px;
}
#menu {
margin-left: -40px;
}
ul li {
display: block;
float: left;
padding: 50px;
}
#menuElement1 {
background-color: green;
}
#menuElement2 {
background-color: blue;
}
#menuElement3 {
background-color: black;
}
#menuElement4 {
background-color: red;
}
#container {
height: 150px;
width: 100%;
background-color: gray;
JQuery
$(function() {
$( "#draggable" ).draggable({ snap: ".ui-widget-header" });
});
Here's an updated fiddle
You'd do well to read this article on Droppable from the jQuery docs. Basically you were half way there, you need to make an element (the blue box, with id #menuElement2) droppable to provide a target for a draggable element
$('#menuElement2').droppable({
drop: function( event, ui ) {
//Do something here...
}
});
Within the drop function (this fired when the block is dropped on the target) you need to perform your action.
$('body').css({'background-color': 'red'});
This adds a custom css rule to the body that changes the colour, again check out the jQuery docs - search for 'jQuery css'.
Hope this helps :)
Update: I just updated the fiddle again to make it revert back to brown when you change selection - not sure if you wanted this but it can be easily removed by commenting out the css change within the drag function.
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'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.