I'm trying to make the cursor change on a specific event.. I don't know how to explain it but as an example, I want to change the cursor to progress when it's currently a pointer cursor (hovering links, buttons, else...) and I don't wanna type everything that has a pointer cursor like:
a, input[type='button'], button {
cursor: progress;
}
All I want to do is replace the cursor when it's a pointer to a progress.
Is this even possible? Even if it requires JavaScript or anything! If it IS possible, then please help me, I'll accept an advice, too.
Thanks in advance~
It is unlikely that this is possible. The browser(I've only checked chrome) sets the style value of cursor to "auto" or "default". So even if you check the style of an element using javascript you won't be able to tell which cursor it is using unless you already specified it in your css.
You can test this with this jquery snippet:
javscript:
console.log($('button').css('cursor'));
console.log($('input[type="submit"]').css('cursor'));
console.log($('a').css('cursor'));
html:
<button>TEST</button>
<input type="submit"/>
TEST
Is this what you are looking for?
a:hover,
button:hover,
input[type="button"] {
cursor: wait;
}
Related
I am trying to use my own cursor only for hovering on links. This is why I don't set cursor: none on the whole body. I am trying to get rid of the hand via JS. in the inspector the body cursor says its cursor: none, but the hand still shows over my cursor
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("cursorHov");
document.body.style.cursor = 'none';
});
Actually, you don't even need JavaScript for this. You can just do it in CSS. Like this:
.link:hover {
cursor: none;
}
For HTML:
Try hovering over this!
Now, you just need to create links, and if you want them to have no cursor, then give it a class of link. Of course, you could change the class name. Also, just note that whateverhref.com isn't where you would really want to go, it's just a placeholder.
Changing the cursor property on document.body won't change it when it's hovering something else that uses a different cursor.
Don't use JavaScript for this, use CSS's :hover pseudo-class:
.selector-for-your-link:hover {
/* CSS for your cursor (whatever you currently have for your `.cursorHov` class) */
}
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I really could not find that thing. For some of you it is detail but for me it is important detail.
I have a div:
<div id="hello" onclick="alert('hello')" onmouseover="onroll_right_icon()" onmouseout="onout_right_icon()"></div>
It is working fine as a button but i want that div behaviur like a real button or hiperlink. I mean i want to see a hand cursor when you onmouseover on this. Really appreciate your help
I wouldn't try to solve this with JavaScript. You can use the CSS cursor property:
#hello {
cursor: pointer;
}
Demonstration
I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.
How can I set the focus on a hidden textbox element?
I tried this:
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id); returns null in this case.
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?
If you really need to do this, make the box transparent, not hidden:
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypress events.
I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.
You can add some js if you need a workaround and cannot change the opacity attr.
/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
/* in case your field is fading, cheat a little (check css transition duration) */
setTimeout ( function timeoutFunction () {
/* show the cursor */
jQuery('#your-search-input').focus();
}, 100);
});
Using Apsillers answer, my setup for this same situation involved:
a parent div with position:relative;
a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.