Is it possible to search for text using your browser's Ctrl+F function across three span tags if the middle tag is set to hidden? For example:
<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text.</span>
If .hiddenText is set to display:none, the web browser will show "Trying text." If you search using Ctrl+F in a web browser, however, you will stop matching the string after "Trying ". You can highlight the whole phrase "Trying text" and press Ctrl+F, which will pop the phrase into your search box, but clicking the find-next-match button will yield no results.
Is there any way of making that whole phrase searchable? For an example, check out: http://jsfiddle.net/surrealmind/qo2ens33/.
This works
http://jsfiddle.net/qo2ens33/2/
HTML
<span class="visibleText">Trying</span>
<div class="hiddenText"><span>to search</span></div>
<span class="visibleText">text</span>
CSS
.hiddenText{
width:0px;
height:0px;
overflow:hidden;
display:inline-block;
}
This works too
http://jsfiddle.net/ctwheels/qo2ens33/5/
HTML
<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text</span>
CSS
.hiddenText {
position:absolute;
opacity:0;
width:0px;
}
Not sure if this is what you're looking for
Ok, I think this is what you're looking for... You can't (as far as I know) search for two separate spans together, so what I've done is I've added the visible spans together
http://jsfiddle.net/ctwheels/qo2ens33/6/
Using this code:
JS
var numberOfElements = $(".visibleText").length;
for (var i = 1; i < numberOfElements; i++) {
$(".visibleText:eq(0)").append(" " + $(".visibleText:eq(1)").text());
$(".visibleText:eq(1)").remove();
}
With this you can find "Trying to search text." but not "Trying text.":
.hiddenText{
position: absolute;
top: -10000cm;
left: -10000cm;
}
Demo
This isn't exactly what you want but it does accomplish "hidden text". I think the positioning could be tweaked to fit your purpose.
.parent {
height: 2em;
width: 400px;
background: white;
position: relative;
}
.hiddenText {
width: 100%;
overflow: visible;
display: inline-block;
position: absolute;
color: transparent;
bottom: 0;
left: 0;
cursor: default;
}
.hiddenText::selection {
background: rgba(0,0,0,0);
}
http://jsfiddle.net/nbzv9thL/
Related
EDIT:
I came across this code:
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'attribute_pa_'.$name;
if( $taxonomy == 'attribute_pa_staat' )
$label = $label . ' info<i class="fa fa-question"></i> ' );
return $label;
}
But it doesn't work (yet) how can I make it work?
See the page I'm trying this on here:
https://dev.pctoppers.nl/product/dell-latitude-e5550-refurbished/
End of edit
I'm trying to create an icon with a specific ID so I can link a popup to it.
I want to do this with a ::after pseudo element (if possible). We have products with different grades that we want to add an extra explanation to.
This is the code I've tried:
[data-value="a-grade"]::after {
content:"\f05a\f05a";
font-family: "Font Awesome 6 Duotone"!important;
padding:0px!important;
margin:0px!important;}
This unfortunately doesn't work and puts the icon behind the text instead of on-top of the small window its in. See screenshot below
The most ideal look would be this:
The blue circle being the icon.
Is there any way of achieving this? Keep in mind that it needs its own #ID so I can link a popup.
Thanks in advance!
With CSS property position (absolute and relative) you can make it.
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
/* Top right text */
.top-right {
font-size:2rem;
position: absolute;
top: -5px;
right: -5px;
background: red;
border-radius:40px;
height:10px;
width:10px;
}
<div class="w">
<div class="top-right">*</div>
<div class="txt">text</div>
</div>
Update with pseudo element
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
[data-value="a-grade"]::after {
content:"!";
font-family: "Font Awesome 6 Duotone"!important;
font-size:2rem;
position: absolute;
top: -15px;
right: -5px;
}
<div class="w" >
<div classs="top-right" data-value="a-grade"></div>
<div class="txt">text</div>
</div>
I use this solution to add a tooltip to my webpage. The application is an MVC ASP.NET application with Razor pages. I want the text of the tooltip to have line breaks (<br/>). This can be done by adding the HTML <br /> in the text. This works well, however, I have a function (see below) at the top of my page that renders a string that is added to my span-element with the <br>-tags.
private static string GetEmployeeList(ProjectSchedule ps)
{
if (ps.Employees.Count > 0)
{
string empList = string.Empty;
foreach (var employee in ps.Employees)
{
empList += employee.Name + "<br/>";
}
return empList;
}
return string.Empty;
}
The result of the function is something like: "Name 1<br/>Name 2<br/>Name 3<br/>".
The piece of code rendering the tooltip looks like:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">#GetEmployeeList(item)</span>
</div>
The problem is that the <br/> is not working, when the tooltips shows I see the hardcoded <br/> as part of the string while I expected the result looks something like:
Name 1
Name 2
Name 3
The styling used:
.data-tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.data-tooltip .data-tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.data-tooltip .data-tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.data-tooltip:hover .data-tooltiptext {
visibility: visible;
opacity: 1;
}
Result:
Does someone have an idea how to solve this? TIA.
You have recognized the right problem in your answer, but that is not the correct solution. Your solution has the danger that if the names contain any HTML, that will be rendered as well, which opens you up to HTML and script injection attacks.
Generally you should avoid using #Html.Raw and shouldn't generate HTML outside the template. All HTML generation should instead happen directly in the template:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">
#foreach (var employee in item.Employees)
{#employee.Name<br/>}
</span>
</div>
After all, the solution was simple (as always).
#Shashank Gb got me thinking. First I used the developer tools, but there the outputted string showed ad "Name 1 <br/> Name 2<br/>"
So nothing wrong there I would say. However, when I used "View page-source" I saw that the <br/> was rendered to <br;>
The solution for me was to use #Html.Raw, this prevented the conversion of the HTML <br/>-tag:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">#Html.Raw(#GetEmployeeList(item))</span>
</div>
Thx for the help.
I tried something with div tag as follows,
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??
Your code doesn't work as you expect it to due to the way element.style works.
Check this MDN link on element.style: https://developer.mozilla.org/en/DOM/element.style
Since the style property has the same (and highest) priority in the
CSS cascade as an inline style declaration via the style attribute, it
is useful for setting style on one specific element.
However, it is not useful for learning about the element's style in
general, since it represents only the CSS declarations set in the
element's inline style attribute, not those that come from style
rules elsewhere, such as style rules in the section, or
external style sheets.
So when you first run your code and even if your element.style.hidden is declared in the external CSS sheet, the style declaration remains empty and you need to perform additional checks.
if (!list.style.visibility || list.style.visibility === 'hidden') {...}
You can take a look at the fiddle to see it work: http://jsfiddle.net/Kk6TJ/1/
Also:
It's best to use triple equal === to perform strict comparison without converting variable type.
You don't need curly braces in your event handlers. If you were hoping that they would create scope - they don't! Only functions in JavaScript have scope.
list.style.visibility=='hidden' is a false statement on first click
try this
{if(list.style.visibility=='hidden' || list.style.visibility='')
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
This is because your if..else are not in order. Re-ordering of decision statement corrected the behavior, Now first click is showing the menu items.
Also, If you run your script and watch it in firebug console you'll see your javascript code is throwing warning on first click.
I've updated your code -
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<script type="text/javascript">
function Clickme()
{
var list = document.getElementById('list');
if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
Styles defined in style tags and css files are not in the element.style.property property, they are available if the element has its style set inline <element style="property:value;"> or explicitly element.style.property = value;
To get styles for an element defined in style tags/sheets use window.getComputedStyle(element, null).getPropertyValue(property);`
So you can either inline the styles on list, use getComputedStyle getPropertyValue or use the fact that list.style.visibility is going to be empty on the first click.
Go for something like this -
if(list.style.visibility=="visible")
{
list.style.visibility="hidden";
}
else
{
list.style.visibility="visible"
}
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.