This question already has answers here:
Using external images for CSS custom cursors
(5 answers)
Closed 6 years ago.
Second example work, the hand did show up, but why the first div doesn't work?
div {
cursor: url('http://i.imgur.com/EuDeZWn.png'), auto;
}
span {
cursor: url('http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif'), auto;
}
<div>
target
</div>
<br>
<br>
<span>
target 2
</span>
From MDN:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
You image is 237 x 173, which is significantly larger.
Related
This question already has answers here:
How to detect Adblock on my website?
(46 answers)
Closed 3 years ago.
With some simple javascript, how can I detect if the client user is using an Adblocker?
Adblockers detect scripts called ads.js or scripts with similar names and then block them so that they don't run. They also detect id's and classes that have suspicious names and simply remove them from the DOM. So here is one simple trick (explanation below) that can help you detect if your user is using an adblocker or not:
<div id="randomDiv">
<div class="adBanner">
</div>
</div>
This HTML simply places a random div on your page with only one child, an empty div that has a class of adBanner. Now an adblocker would think of the child div as an advertisement, and it would remove it.
Using CSS, we can give the .adBanner class a fixed height and a fixed width, so that it renders something on the screen.
.adBanner {
height: 2px;
width: 2px;
visibility: hidden;
}
This CSS simply gives our fake "adBanner" element a fixed width and height that we can check for later, and hides it from the user.
Now using jQuery, we can check for the height or the width of the element. We do this because if the adblocker were to remove this element from the DOM, then the height would not exist.
if ($("#randomDiv").height() > 1) {
console.log("No Adblocker!!");
}
else {
console.log("An adblocker was detected!!");
}
I'm sure there are other ways to do this, but this is just one of the ways.
Hope this helps!!!
This question already has answers here:
Is it possible to apply CSS to half of a character?
(20 answers)
CSS Display One Character in 2 Colors [duplicate]
(2 answers)
Closed 5 years ago.
If I have : <p>A</p>
Is there any way in html or css or Javascript which I am able to paint half of "A" white and the other black or any other color.
Thanks
You can try it with gradients as Robbie suggested. There is only one down side of this. You won't be able to use text-shadow property (except with another hack - make duplicate of text and give it the shadow property)
Edited on request...
p {
font-size: 12px;
background: -webkit-linear-gradient(#000, #DDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Source code can be found here https://css-tricks.com/snippets/css/gradient-text/
This question already has answers here:
Hide div element when screen size is smaller than a specific size
(9 answers)
Remove element for certain screen sizes
(4 answers)
Closed 5 years ago.
how can i remove all content of a div if the webpage is only X px width
i am searching for something like this
<div if(min-width:1000)
{content=''}>
<img>
<script>
....
</script>
</div>
Thank you for your answers
You can use media query to achieve this.
#media screen and (max-width: 1000px){
div{
display: none;
}
}
The above css snippet will hide the div if the width is less the 1000px.
This question already has an answer here:
Making image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
(1 answer)
Closed 9 years ago.
I have a following scenario but i dont know how to add the text followed by image and text followed by image and so on. Please refer the image below and that is an input text with values
How do i achieve this using jquery and css?
If possible show it in js fiddle
Thanks in advance
Try this:
HTML:
<input type="text" name="whatever" id="funkystyling" />
CSS:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
Example:
http://jsfiddle.net/markom/5Ayx7/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery growing and shrinking textarea
I want to achieve an effect where a text <input> will grow vertically when the text overflows. So instead of the beginning text being scrolled off, a new line starts, and the <input> grows vertically.
How could I achieve this using Javascript/jQuery/CSS/HTML/etc?
You probably can use an autogrowing textarea styled as an input - DEMO
textarea {
height: 20px;
line-height: 20px;
resize: none;
}
There are numerous plugins exists to achieve the same effect - I used this for the demo.
A pure Javascript way:
<textarea onkeyup="while(this.scrollTop > 0) {this.rows++;}"></textarea>