For reasons of learning, I want to implement a tooltip, which follows my cursor within a certain element in my page. For this exercise, I want to use plain Javascript to achieve this task. The canvas should show the current cursor position in a rectangle with a border. Could someone spot the error?
My page looks like this:
In the head I have the CSS declaration
<style>
#tt {
border: 10px green;
position: absolute;
left: -100px; /* initially invisible */
top: 0;
}
</style>
In the HTML body, I have defined my tooltip like this:
<canvas id="tt" width="80" height="15"></canvas>
<br>
<div id="area">
<!-- This is the area where I display my tooltip -->
</div>
Now to the JavaScript part:
I'm catching the "mousemove" event,
document.getElementById("area").addEventListener("mousemove",mouseMove,false);
have the following global definitions:
hcan=document.getElementById("tt");
hctx=hcan.getContext('2d');
and write the tooltip with this code:
var hx=e.clientX;
var hy=e.clientY;
hcan.style.left=hx+"px";
hcan.style.top=hy+"px";
hctx.clearRect(0,0,80,15);
hctx.fillStyle="red";
hctx.fillText(hx+'/'+hy,0,10);
I can see the tooltip text following my mouse cursor, but I can't see the border of the tooltip, which I have defined in my declaration.
Could it be that the border is implicitly erased, when I call clearRect? But this should only clear the interior part of the canvas, not the border, which is just decoration - I think.
Try adding a border-style, otherwise you're defining 10px green none
border: 10px solid green;
should do it.
Related
All elements in the page are assigned to change background color and change border properties if hovered, but the problem is that the element I only want to change is the element directly under the cursor, It seems that when I hover something , all the parents of it is also hovered which is normal because you are also hovering to the parent of an element since its child is nested inside it.
But I found out that firefox screenshot feature can do this thing. It has a feature that lets you screenshot a certain part of the page, and in the selection process , It shows what part of the page is only saved by making a dashed border around it and a white overlay.
I think this has to do something with javascript but I don't know how to
Check if the element is hovered
Check if element is the one under the cursor by checking it's child if it's hovered.
Where to start checking things.
Let's say
<div>
<div> put border on me if hovered </div>
<div> put border on me if hovered
<span> put border on me if hovered and don't put border on parent </span>
</div>
</div>
Css
*:hover { border: 5px dashed white; }
I haven't made the javascript because I am stuck of what to do first
if you want that when you hover over a specific element, its style has changed,I can offer to do this with the help of JS
document.addEventListener('mouseover', function (e) {
e.stopPropagation();
e.target.setAttribute('style', 'border: 5px dashed red');
});
document.addEventListener('mouseout', function (e) {
e.target.removeAttribute('style');
});
You can change the style, in different ways, for example add a specific class. I hope this helps
So You want, when you hover on a particular div, that particular div must have border not the parent one.
So easy task can be achieved my CSS easily. you have to target the div's based on their className.
( Based on your code divs above )
<div>
<div className="parentBorder"> put border on me if hovered </div>
<div>
<span> put border on me if hovered and don't put border on parent </span>
</div>
</div>
The CSS File for this
.parentBorder {
border: none;
}
.parentBorder:hover {
border: 5px solid green;
}
span {
border: none;
}
span:hover {
border: 5px solid blue;
}
This will solve you problem
And by JAvaScript you can do this by initiating the onClick() Function event on the particular div for this task
I want, when something happens (Ex: Click a button), that my image creates a frame around. Something like this:
Image before, without the frame
Image after click, with the frame
Can I do that with CSS?
I don't want to have two links nor two images. I want that "transformation" happens to the original image.
EDIT: I know I don't have any code, but that's because I don't have any function or idea from CSS functions. So you don't need to write code, only to tell me what to use. Hope you understand
You should use javascript onClick event handler and css border property.
Your html image and button tag.
<img src='yourimage.jpg' id='myimg'>
<button onclick="add_frame()">add frame</button>
The javascript
function add_frame(){
document.getElementById('myimg').style.border = "2px solid red";
}
Here is an example using jquery.
Add a class to any image that you want to be able to add a border to (.border-on-click), this should include a transparent border within it's CSS (if you don't do this, your elements will move around the page when the border is toggled and takes up extra space).
In the example below you can toggle the border on and off with a click.
It acts upon the image you clicked only.
Let me know if this wasn't what you wanted.
$(".border-on-click").click( function() {
$(this).toggleClass("framed");
});
img.border-on-click {
border: 4px solid transparent;
transition: all 0.5s ease;
}
img.border-on-click.framed {
border: 4px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="border-on-click" src="https://via.placeholder.com/150">
I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform
Is there an easy way to have an HTML <textarea> alternate its row colors
to improve editing?
I don't mind if the solution is pure CSS or if it requires JavaScript.
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Found this on codepen. Working for me.
If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?
I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.
Additional Solution
However, it seems that using that method, the background doesn't scroll along with each line.
The best technique I can come up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.
Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.
What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.
You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser compatibility, but this should help set you on the right track and get you going.
Here is a link to an example I have created using the above method:
http://jsfiddle.net/HelloJoe/DmPLH/
CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
RESULT:
An example of making every other line in a textarea a different color by using CSS' nth-child syntax
SOURCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:
http://i48.tinypic.com/a3o4sn.jpg
Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.
I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?
Your may be interested in this great resource: Sliding Boxes and captions
DEMO
I've recently used a jquery plugin that does something quite similar.
You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).
The plug-in is called Showcase
Its home page has more info and demo and tutorials
Finally, as an added demo, here's the site where I used it.
HTH
My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.
Markup:
<div id='container'>
<div id='slider'>Some Text</div>
</div>
Styles:
div#container {
height: 100px;
width: 100px;
overflow: hidden;
}
div#slider {
width: 100px;
height: 40px;
margin-top: 100px;
background: black;
}
And your script:
$('#container').hover (
function () {
$('#slider').css('margin-top', '60px'),
$('#slider').css('margin-top', '100px');
);
I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.