When searching with Ctrl + F in a website I'd like to exclude some text. Is there a way to solve this?
Apparently
Some quick testing shows that text content added via a pseudo-element will not be found. See this fiddle (search "Google" as an example) which uses the following example code (HTML5). I realize you may want to use a tags or something else, and may need to use javascript for functionality, but the point is, you can make small amounts of text, as you seem to require, that is invisible to searching.
HTML
<ul class="hideText">
<li data-cB="Google" data-cA="https://www.google.se"></li>
<li data-cB="GitHub" data-cA="https://github.com"></li>
</ul>
CSS
.hideText {list-style: none}
.hideText li {
width: 200px;
height: 50px;
padding: 2px;
background-color: #ddd;
border: 1px solid #bbb;
border-top-color: #eee;
border-left-color: #eee;
}
.hideText li:before {
content: attr(data-cB);
display: block;
font-size: 1.2em;
font-weight: bold;
}
.hideText li:after{
content: attr(data-cA);
font-size: .8em;
}
I have a feeling this is a little out of the scope of this question but there is a forum post on Mozillazine discussing how Google had overridden the Cmd-F. The post is here
forums.mozillazine.org/viewtopic.php?f=12&t=2011073
And here is a bug report discussing how websites should never be allowed to capture command shortcuts
https://bugzilla.mozilla.org/show_bug.cgi?id=459744
I would suggest that you use images or canvas for the text you don't want people to Cmd-F, as this will get your desired result.
Related
I'm working on a website and the client wanted exactly the mockup. The problem is, the headers and some other divs that I've been using with a background are giving me some problems. And for the first time in my experience, it's not a browser-specific problem.
This is how my sister (I asked her to send me screenshots from another PC...) and I see it:
But, in every Mac, every mobile device, and the PC at my office, I see it like this:
As you can see, only in SOME Windows PCs, there's extra padding in top of the text. If I get rid of the padding-top of the titles, it comes back to "normal", only a pair of pixels thinner.
Here's the html for the title:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And this, is the css of that part of the html:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
I'm open to any solutions... I already use jQuery for some things in this site, so it could be a fix if it really works.
I made sure that the cache is not the problem. And I tested it in my PC in Chrome, Firefox and Edge... everywhere's the same. As I said, I only saw that in my PC and my sister's. Both of us use Windows 10, and in my office I have Windows 10 too. Any ideas of the cause?
Your top have padding and your bottom don't. I made both with the same padding:
.contentHeader{
height: 38px;
line-height: 38px;
padding-left: 11px;
font-size: 20px;
letter-spacing: 1px;
background: skyblue;
padding-top: 10px;
padding-bottom: 10px;
}
.square{
font-size:19px;
background-color: black;
line-height: 19px;
min-height: 19px;
min-width: 19px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
}
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
First, don't use <b>. If you mean to bold the text, use font-weight:bold in CSS.
Putting block-level elements in inline elements (a <div> in a <b>) will cause unexpected positioning. This is probably what's causing this, but we can't say for sure.
Don't alter line-height for positioning purposes. That's solely for text spacing.
Lastly, surround the text in a <span> and use display:inline-block on it (so it obeys vertical paddings). That way, you can position both the square and the text with paddings as well as target it for font-weight:bold.
Try just this and work your way with just paddings and dimensions.
<div class="contentHeader">
<div class="square"></div>
<span class="promotion-text">IN PROMOTION</span>
</div>
toss in some javascript code to read the info, and let it be placed in very bottom footer or some such. it might give details of what is pushing what.
chrome / firefox both have built in or third party apps to install to "right click" and choose inspect. you might find something, some place within the "dom" tree.
=================
honestly not sure what you are talking about... the images you linked to. both show "scrolling" left/right and up/down or at least that is what it seems like. good chance you are going out past "width" and/or "height" of the screen and causing scroll bars to happen per say.
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
I'm working on a project and now have some problem!!
I build a site basically generate content though javascript.
Here is my project site: http://www.makinoworks.com/makinogames/kancolle/
I use [jQuery]+[MixItUp]+[papaparse] to generate content sort in some rules
And also use [BootStrap] to show up Modal/ListGroup etc..
But when website finished, it doesn't display content.
It's strange that HTML current written but nothing display.
Thanks for helping.
If need any more information please tell me!
Add a font-size to the class .list-group-item or .list-group-item span
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
font-size: 10pt;
}
I am at the beginning of researching how to do something and not sure what is the proper name of what I am trying to research and if there is something that can be done in jquery, or a mix of jquery and css. What I am looking for is something similar to a small pop up when you hover over something; similar to hovering over a hyperlink will reveal the full link. But it will be styled to something that looked like a dialog box and instead of hovering over it the user will have to click it to see that dialog box, but it will be displayed similar to hoovering over something. I hope this question is clear and that I am not over thinking this.
You can do this with pure CSS if you wanted
DEMMO jsFiddle
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-left:100px;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.alert {
display: none;
}
span {
display: line-block;
position: absolute;
left: 10px;
top:45px;
}
span:focus ~ .alert {
display: block;
}
I would 2nd SiDiX's recommendation of qTip if you are looking for a jQuery based solution. It has numerous features and is fairly easy to implement.
Since you mentioned you are still in the researching phase, I would suggest a google search on "top jquery tooltip plugins" - you will find many solutions.
Are you talking about tooltip? Check out this plugin called qTip
http://craigsworks.com/projects/qtip/
I believe what you are looking to define is referred to as a 'tooltip'. I like to use PowerTip to implement tooltips. It relies on jQuery, has lots of useful options, and outputs easily styled tooltips.
Checkout Bootstrap and look at what they are calling Tooltip, popover, and modal. That should help clarify.
http://getbootstrap.com/2.3.2/javascript.html#tooltips...
tooltips and popovers by bootstrap...You can put in html in the tooltip if you want.
I was looking for jQ plug-in which gives same result as StackOverflow tags. Found one using Tokeninput. The problem is, it uses ul, li technique and when I use it inside form with another real textboxes, it looks totally different. For example take a look at this picture.
The first is - Tokeninput. And second is standard textbox. What I want to get is exactly same look and feel of textbox or another jQ plug-in that does same thing as Tokeninput but for textboxes (not ul li based).
Here is CSS for horizontal ul that plug-in authors tried to give same look and feel as real textbox.
ul.token-input-list {
overflow: hidden;
height: auto !important;
height: 1%;
width: 400px;
border: 1px solid rgb(240,240,240);
cursor: text;
font-size: 12px;
font-family: Verdana;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
}
Here is something similar, i wrote it a few month ago
It enhances a normal textarea and splits the initial textarea value on the "," character to create the tags.
It may not feet your needs 100%, but its a good starting point and can be easily modified.