I have multiple labels on a bar my web page and I want when I hover on that label, image in other div should change based on the label being hovered.
Any help would be highly appreciared.
Sjain
With jQuery, the popular javascript library, you could do it rather easily:
-- Sample HTML
<label class="target">Hover to Change</label>
<img src="image001.gif" class="sourceImage" />
-- Corresponding jQuery
$("label.target").hover(
function () {
// mousing-over <label class="target"> changes img to 'image002.gif'
$("img.sourceImage").attr("src", "image002.gif");
},
function () {
// mousing-out <label class="target"> changes img to 'image001.gif'
$("img.sourceImage").attr("src", "image001.gif");
}
);
Related
I am using the title attribute to show a tooltip for a number input field. It works well, but this code is intended for mobile use so therefore the tooltip needs to show when the input field is clicked, rather than hovered over.
Here is an example of how the tooltip is currently displayed when hovered over:
<input title ="This should only show when input is clicked" type="number" id="price" value=1.80>
Is it possible to display a title tooltip on click, rather than on hover?
Here is a solution without jQuery:
function showTooltip() {
document.getElementById("price").title = "This should only show when input is clicked";
}
function removeTooltip() {
document.getElementById("price").title = "";
}
<input type="number" id="price" value="1.80" onfocus="showTooltip()" onfocusout="removeTooltip()" />
My solution was to use an info icon image and combine it with the tooltip function from an awesome library called jBox.
HTML
src="https://png.icons8.com/color/1600/info.png" class="myTooltip" title="I am a tooltip!" width="22px" height="auto">
JS
$(document).ready(function () {
new jBox('Tooltip', {
attach: '.myTooltip',
trigger: 'click',
position: {
y: 'bottom'
},
});
});
See this CodePen for a working demo
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
I'm working on a rating stars field for a little form, but I can't change the HTML structure because it's created using Gravity Forms, so I just can "manipulate" it with CSS.
The form is structured as follows:
<ul>
<li>
<input type="radio" value="5">
<label>5/label>
</li>
<li>
<input type="radio" value="4">
<label>4</label>
</li>
<li>
...
</li>
</ul>
I've been using this example but now, with this structure, the [input/label] elements are not siblings of the other [input/label] elements.
How can I make it work without modifying the markup?
Thanks!
If you have to use that html structure, you can't do it without using javascript. I'm assuming you cant edit the current elements either (if you can, do so) so i have including that in the javascript as well, adding attributes as required.
http://codepen.io/partypete25/pen/BjyegJ
Here I've wrapped your list in a div with class .rating
Then i update the inputs and labels with the required attributes to emulate the example you have in your comment. Then i use jquerys replaceWith function to remove the list structure and return only the inputs and labels, wrapped in the .ratings div.
$(".rating ul li").each(function(i){
$("input", this).attr({
"id" : "star"+parseInt(5-i),
"name" : "rating"
});
$("label", this).attr({
"class": "full",
"for" : "star"+parseInt(5-i),
"title" : "Awesome - "+parseInt(5-i)+" stars"
});
});
replaceIt();
function replaceIt() {
$(".rating ul").replaceWith(function() {
return $('input, label', this);
});
}
I want to create a custom "X" close or hide button, image, text that works for a complete element box in wordpress. I've attached a sample image of the "x" on something else. For my site however I need it to control the whole element or (tiles) on my page not just the single box of text.
Sample image
This is a easy task for you, basically on this situation what you have to do is create the "x" graphic with any iconfont or you can use the "X" from any font(like a regular x that you just have to touch your keyboard) then what you have to do is follow this example.
HTML
<div class="yourbox">
<!--- THIS IS THE BOX THAT YOU WANT TO CLOSE, you can use id or clas whatever you want-->
<p> text or content of the box <p>
<a id="close"href=""> X </a>
</div>
CSS
.yourbox{
height:100px;
width:400px;
background-color: red;
}
JS
<script type="text/javascript">
$(function() {
$("#close").click(function () {
$( "#yourbox" ).css( "display", "none" );
});
});
</script>
You could name the function as you want, use class instead of id and basically the code will hie the div after you touch the " X ".
I'm trying to get CSS Switches to work with ASP.NET rendered check-box.
The way that CSS Switcher structured and the ASP.NET check-box rendered make it hard to me to get it work and the problem not only in the span generated around the input it's also the label - which I need for sure - for the check-box, once I remove them from rendered HTML it works.
ASP.NET Check-box adds span and label when rendered as follow:
<span>
<input id="ID" type="checkbox" checked="checked" name="ID"></input>
<label for="ID">Label</label>
</span>
While the switcher needs the input to be wrapped in the following form:
<label class="switch switch-default">
<input type="checkbox" checked><span></span>
</label>
Here is an Example
here is how my check-box coded in my ASP HTML
<div class="col-sm-9">
<label class="switch switch-default"><asp:CheckBox id="chkAdd" runat="server" Text="Add" CssClass=""></asp:CheckBox><span></span></label>
</div>
Is there any workaround this problem?
I have found a solution and wanted to share.
As appears in this jsFiddle example which uses code similar to ASP.NET rendered check-boxes, the problem was with the CSS selectors and how to reach a parent that has a child check-box with checked or unchecked .. that is not applicable still in CSS. I had to add a jQuery function and change the selectors in my CSS to reach this jsFiddle result
$(document).ready(function () {
$('.switch input').each(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
$('.switch input').change(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
});