I have a mouseover function that changes the background-color of the span of an li element, but the background-color change only changes the background of the span text and not the entire length column. How can I extend the background-color to the entire length of the column without changing the li element's background-color. I do not want to change the li element's background-color because the li element may contain children ul and li elements who's background color I do not want to change.
JSFiddle: https://jsfiddle.net/8d965kbd/
HTML:
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH BELOW HIGHTLIGHT)</span>
<ul>
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH ABOVE HIGHTLIGHT)</span>
</li>
</ul>
</li>
jQuery:
$(function(){
$(document).on({
mouseenter: function () {
$(this).css('background-color', 'green');
},
mouseleave: function () {
$(this).css('background-color', 'white');
}
}, ".text");
});
May be something like this : https://jsfiddle.net/vtoe5eqx/1/
display:inline-block; //add it to the text class
You can add display:block; onto the span.
https://jsfiddle.net/8d965kbd/3/
Instead of using <span> use <div> instead, the reason is that <span> is just an inline-block element while <div> is a block element.
Meaning <span> width is default to auto which will only base its width on the content while <div> will set its width to 100% regardless of the content, that's why when you apply a background-color change for <span>, it only fills up only by its width.
Update: You can also use other block elements as an alternative aside from <div> such as <p> <h1> ~ <h6>
Related
how can i change the attribute of the <span> within the selected/hovered list item? whenever i hover over one <li> item, only background-color seems to change but not the <span> text itself. i have multiple <li> items similar to the one below. if anything, i would have expected all <span> texts to change when hovering over the <li> element.
$(document).ready(function() {
$('li').hover(function() {
$(this).attr('background-color', '#E07A5F');
$('span').attr('font-size', '.2em');
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>exercises <span>ready</span></li>
It's because background-color would only serve as an attribute but have no affect on your visual styles. You'd either have to toggle a CSS class or inject an inline style via css():
$(this).css('background-color', '#E07A5F');
The same applies for the span(s) you're planning on changing:
$('span').css('font-size', '.2em');
To change the span deriving from the hovered list item, you would do what #Taplar suggested below by using find(), which would target all span descendants:
$(this).find('span').css('font-size', '.2em');
.attr() creates an attribute, so your code would result in this:
<li background-color="#E07A5F" font-size=".2em">
Where what you want is:
<li style="background-color:#E07A5F; font-size=.2em">
So you should be using the .css() method.
$(document).ready(function() {
$('li').hover(function() {
$(this).css('background-color', '#E07A5F');
$('span').css('font-size', '.2em');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>exercises <span>ready</span></li>
</ul>
But, really, you should avoid inline styles as they generally result in duplication of code, don't scale well, and are hard to maintain. Instead, add or remove CSS classes:
$(document).ready(function() {
$('li').hover(function() {
$(this).addClass("bColor");
$('span').addClass("size");
});
})
.bColor { background-color:#E07A5F; }
.size { font-size:.2em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>exercises <span>ready</span></li>
</ul>
I am trying to have a li element and a div be "inline", but right now the div text keeps being put right below the li element. I'm using display: inline block and jQuery as below:
$('#list').append(
'<div class="spanish">\
<li>'+new_task+'</li>\
<div>Test</div>\
</div>');
.spanish {
display:inline-block;
}
As #ValeriySiestov mentioned, div is a block element, and li is a block element as well.
One way to fix your problem is to change the structure of the html you are appending, so it is a span element within the li element.
Note that list elements (i.e. uls or ols) can only have lis as their children, but lis can have anything as their children. Reference: Can I use a div inside a list item?
Assuming you have an unordered list with id #list, you can append a new list item to it like so:
var new_task = "walk the dog"
var li_string = `<li>${new_task}: <span>Test</span></li>`
$('#list').append(li_string);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>make bed</li>
<li>brush teeth</li>
</ul>
Note the variable new_task is being interpolated within the string of html being appended to the list using template literals.
Template literals syntax:
string text ${expression} string text
div - is a block (display: block) element by default. It stretches to 100% of parent's width
li - is an item of the list (display: list-item) and also stretches to 100% of parent's width
If you want to change this behaviour, you need to add to div and li another display value, like this
.spanish div, .spanish li {
display: inline;
}
or
.spanish div, .spanish li {
display: inline-block;
}
In your code, you use inslide , this is not actualy right, this is not critical, it will work, but must be inside
It seems from you code. You want to print div below li. There are few things to note:
Li should always come inside UL or OL tag. You current code is semantically wrong.
There can be only Li come as sibling of Li. No any other tag (You are using div)
For position use css.
Please check below answer if its helpful to you.
$( document ).ready(function() {
var new_task = "<div class='row'>row</div>";
$('#list').append(
'<div class="spanish">\
<ul>\
<li>'+new_task+'<div class="sub-row">Test</div></li>\
</ul>\
</div>');
});
.row {
display: inline;
clear:both:
widht:100%
}
.sub-row {
display:inline;
clear:both;
margin-left:2px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>
I have a contenteditable element, I want elements inside to apply a style when the caret is inside them.
In this example the style changes on :hover:
div{
caret-color: red;
}
span:hover {
font-weight:bold;
}
<div contenteditable="true">
<span>Sub element one</span>
text node
<span>sub element two</span>
</div>
Here you can see the caret as I have styled it in red, but I've hovered over the other span:
Is there any way to apply a style like this, but when the caret is inside the element? So that the text in the span around the red line is bold?
The solution would look like this:
A CSS solution would be ideal, but I would consider JS solutions if that's not possible.
With CSS?
No, there is not css selector for that.
With JavaScript?
Yes, you can do this with JavaScript using the .getSelection() function.
With the .getSelection() you can get the current position of the caret and the element the caret is on.
window.getSelection().focusNode.parentElement // Returns DOM node
window.getSelection()
Returns a Selection object representing the range of text selected by the user
or the current position of the caret.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
So using this information you can create a function which styles the element the caret is on
var ctl = document.getElementById('contenteditable');
var selection;
function styleNode() {
// Get selection / caret position
selection = window.getSelection();
// Check if type is Caret and not Range (selection)
if(selection.type === 'Caret') {
// Remove styles
[...selection.focusNode.parentElement.parentElement.getElementsByTagName( "span" )].forEach( child => child.style.fontWeight = "normal" );
// Only style <span> elements
if(selection.focusNode.parentElement.tagName === 'SPAN') {
// Set style on element where caret is
selection.focusNode.parentElement.style.fontWeight = "bold";
}
}
}
// Removes styles on focusout
const reset = () => [...ctl.getElementsByTagName( "span" )].forEach( child => child.style.fontWeight = "normal" );
ctl.addEventListener("keyup", styleNode);
ctl.addEventListener("click", styleNode);
ctl.addEventListener("focusout", reset);
<div contenteditable id="contenteditable">
<span>This is</span> some editable <span>content</span>
</div>
I think a different approach is needed. Since editing requires clicking the element, I would just set up a click event handler on the sub-elements to style them.
// Get reference to the contenteditable element
var container = document.querySelector("[contenteditable='true']");
// Set up a click event handler for the container
container.addEventListener("click", function(evt){
// Loop over child elements and remove the active class
Array.prototype.slice.call(container.querySelectorAll("*")).forEach(function(el){
el.classList.remove("active");
});
// Apply the active class to the clicked element
evt.target.classList.add("active");
});
.active {
font-weight:bold;
}
<div contenteditable="true">
<span>Sub element one</span>
text node
<span>sub element two</span>
</div>
The event listener selectionchange is quite useful to detect the change of the caret position (due to mouse or keyboard). It detects should also work on mobiles when swiping on the spacebar to move the caret.
sel = window.getSelection()
document.addEventListener("selectionchange", e => {
(x=document.querySelector('.caretover')) && x.classList.remove('caretover')
if (sel.focusNode.parentNode.tagName == 'SPAN')
sel.focusNode.parentNode.classList.add('caretover')
})
.caretover {
font-weight: bold;
}
<div contenteditable>
<span>Sub element one</span>
text node
<span>sub element two</span>
</div>
<span id="english">Yes</span>
<span id="spanish">Sí</span>
How can I hover over any of these and change background color to yellow on both. I can't use onmouseout() because the background color changes dynamically due to other scripts.
I'm aware that I can add a class skipping the use of jQuery -although it's a valid choice if all else fails- by using something like:
document.getElementById(id).className += " yellow";
and the css would be:
.yellow {
background-color: yellow
}
My previous solution that included onmouseout() was:
function chbg(color, id1, id2) {
document.getElementById(id1).style.backgroundColor = color;
document.getElementById(id2).style.backgroundColor = color;
}
and the HTML:
<span id="english" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Yes</span>
<span id="spanish" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Sí</span>
Use JQuery hover function instead.
Try this:
$(document).ready(function(){
$("span").hover(
function(){
$('span').css('background', 'yellow');
},
function(){
$('span').css('background', 'white');
});
});
JSFiddle Demo #1 (With Class)
JSFiddle Demo #2 (Without Class)
UPDATE #1
Use toggleClass() function instead.
$(document).ready(function(){
$("span").hover(function(){
$('span').toggleClass('highlight');
});
});
JSFiddle Demo
UPDATE #2
Assign a class to all the span that needs to be highlighted. For example: class="highlight". Using toggleClass() to toggle a class from CSS will add another class now. This way only span with .highlight change color.
JSFiddle Demo
This can be done with only CSS, by adjusting your HTML a bit:
<span id="bghover">
<span>Yes</span>
<span>Sí</span>
</span>
And for the CSS:
#bghover span
{
background-color: white;
}
#bghover:hover span
{
background-color: yellow;
}
So you wrap the two spans into a span or div with id bghover, which is only used as a trigger for CSS :hover. If there's no hover, all spans within #bghover are white, if there is a hover (similar to onmouseover), all spans within #bghover are white.
I have a href link "Open Menu", and this link have color gray.
I want to use jQuery, for, when I click in this "Open Menu", I want change the color to #FFF.
Im trying to do this with my code below but its not working, I was searching how to do this, but I am having more difficulties because of my icon font element .
Do you see where Im doing wrong?
html:
<li class="show_menu">Open Menu
<p id="menu_toggle" > <span class="change_color" >
<i class="fa fa-bars"></i></span>
</p>
Css:
#menu ul .show_menu span >i .change_color{color:#fff;}
jQuery:
$(function() {
$("#menu ul .show_menu span >i").click(function() {
$(this).addClass(".change_color");
});
});
You don't need to specify the dot . for class name that you want to add when using .addClass():
$(function() {
$("#menu ul .show_menu span >i").click(function() {
$(this).addClass("change_color");
});
});
Also do not leave space between i and .change_color in your CSS since space will target the descendants with class change_color of i elements instead:
#menu ul .show_menu span >i.change_color{color:#fff;}