I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>
Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}
Related
`
/* Button */
.button {
margin: 1em 0em;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1A718A;
position:relative;
}
.button h3{
position:relative;
top:3.4em;
left:.5em;
color: white;
font-weight: 400!important;
font-size:.9em!important;
z-index: 1;
}
.circle:hover {
position:relative;
top:1em;
left:3em;
}
<div class="button">
<div class="text"><h3>- View <span>Work</span></h3></div>
<div class="circle"></div>
</div> <!--button-->
`How do I create this hover button Using HTML, css and javascript.
The circle moves to the right(no effects) whilst the view turns grey and the work turns white(inverse).
Also a code newbie :)
Default State
Hover state
Thankyou
Recreation
HTML
We want to animate an element and its text "- View Work", so the simplest HTML we can have is:
<p>- View Work</p>
Styling
Default style
We can then style it as much as necessary. To place the line in the middle, we can trick a little by setting line-height to the element's height with a bit of JavaScript:
const p = document.querySelector('p');
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
<p>- View Work</p>
With flashlight-effect
Now we want to add the circle, in which the text's color is different.
We could probably use mix-blend-mode in some way, however I don't understand it well enough to make it work with it.
Because of that, we fall back to using pseudo-elements (more specifically, ::after).
The pseudo-element needs to ...:
... have the same text in a different color, and have the texts overlap
... be big enough to fit the revealing circle in all its positions inside
... clip out the rest not inside the revealing circle
The first two bullet points are as simple as styling the pseudo-element and the parent mostly the same way.
To get the text, we can again use JavaScript by setting a custom data-attribute (e.g. data-text) to have the text. The pseudo-element can then display the text with content: attr(data-text).
For the revealing circle, we give the pseudo-element a background-color. Then, we use clip-path to cut out what should be "revealed".
And on hover, we transition between two different positions of the revealing circle.
const p = document.querySelector('p');
p.dataset.text = p.innerText;
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
}
p, p::after {
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
p::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
background-color: #1A718A;
clip-path: circle(3rem at 70px 55px);
transition: clip-path 0.15s;;
pointer-events: none;
}
p:hover::after {
clip-path: circle(3rem at 155px 100px);
}
<p>- View Work</p>
End note
This sample-code only works for one-liners, and requires the element to have a fixed size.
The effect can also be achieved by using mostly JavaScript, where one could mock-up such
a pseudo-element with actual HTML-elements, and then overlay said element over the original.
I am using the odometer.js library and I want to add a '$' right before the display of numbers. (EX: $123,435) Does anyone know how to go about this to get it to work? I have tried adding tags and inserting it in the options section of the javascrip which is in correlation with the library, but it still will not work. I have also tried :before and :after pseudos but that is not very dynamic.
<div class="odometer" id="odometer"></div>
.odometer {
color: rgba(250,250,250,.75);
font-size: 50px;
margin-top: 100px;
background-color: #2ecc71;
text-align: center;
padding-top: 10px;
position:fixed; top: -50px; width:100%; border: 0px solid black !important;
}
.odometer:before {
content: "$";
}
This should do the trick:
.odometer-inside:before {
content: "$";
}
DEMO: https://jsfiddle.net/lmgonzalves/tuqhmok1/1/
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");