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
Related
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'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;
}
My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.
Note : I don't want to use any kind of Plugin, to do changes only in html (title)tooltip.
Html
<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>
CSS
.sam{
width:200px;
margin-left:120px;
margin-top:25px;
}
.sam[title] {
position:fixed;
top:100px;
left:50px;
}
Here I have attached the link that i have tried
JsFiddle Link
This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.
By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]
As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.
First, make your tooltip in CSS. For example:
#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
}
After that, you'll need to put it in HTML using a DIV.
<div id="tooltipbox">yourcontent</div>
Next you'll need to make a small jquery script.
$(document).ready(function(){
function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
$(myToolTip).hide();
$(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
$(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
}
toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}
Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.
The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.
In this sentence, chicken is bold.
Chicken is the object with a unique class of ".chickentooloject".
Next you make a unique tool tip div.
<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.
Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.
toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);
The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.
I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.
You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.
I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>
I have a link within a div:
<div>
</div>
This div make's a box, like a button, and when i mouseover it in Internet Explorer 8 works fine showing the hand cursor, but in firefox doesn't.
Can some body help me.
Thanks.
What CSS are you using? The following should work both for IE8 and Firefox:
cursor: pointer;
More details here.
If I understand your problem correctly, the simplest fix to the problem would be to specify that the div cursor your CSS file:
div_button_id {
cursor: pointer;
}
See: http://www.w3schools.com/CSS/pr_class_cursor.asp
Title and description of your question are contradictory. I'm guessing you've encountered IE bug:
a {zoom:1; cursor:pointer;}
If you have any other elements in <a>, apply above rule to them.
You might also want to set a {display:block}.
The hand cursor is shown for the a element, which is of zero size here. Try to resize the a element to a suitable size, maybe with:
<div>
</div>
Not this users exact problem, but I was just having this issue and realized it is essential to have a href, as in my case I was overriding the link click via jquery. So adding href="#" did the trick.