In my web app I have a layer with a static HTML content that displays a text.
When I do a search on a page (ctrl+F) and type some text that is contained in the layer mentioned above the text is highlighted.
Is it possible to make content not react on search at all?
Or I would remove search function from the page where my app opens if I could.
It's tricky but you could write the text of your layer as the CSS content property of a layer pseudoelement. In this way the search functionality is not able to detect the text, and the text itself can't be highlighted.
e.g.
Html
<div id="layer" data-text="this text won't be found"></div>
Css
#layer:before {
content: attr(data-text);
}
Also the image solution is fine but this would require an extra request and the text couldn't be zoomable everywhere using default browser functionality. Other solution requiring Flash (or also Silverlight or Java Applets) should be avoided, especially due to the lackness of the player plugin for some platforms.
Example fiddle (with CSS attr()) : http://jsfiddle.net/EbTNd/
The only option not to reveal on search is to make that an image or an external media like Flash. It is a generic browser feature (Ctrl + F) which displays that text, if it exists on the screen will be highlighted.
You can prevent searching in your page. It is somewhat limited but you can check if it fits.
window.onkeydown = function(e){
if(e.ctrlKey && e.keyCode == 'F'.charCodeAt(0)){
e.preventDefault();
// Comment out this last one...
alert('Ctrl+F');
}
}
See fiddle: http://jsfiddle.net/ozrentk/g4wrd/
One work-around is to use the CSS content declaration to inject the text on your page.
See answer for similar question here
If all you want is for the highlighted text to be the same color as the surrounding text, you can change the highlight color in many browsers. Assuming the normal text is black on white,
::-moz-selection {
background: white;
color: black;
}
::-webkit-selection {
background: white;
color: black;
}​
::selection {
background: white;
color: black;
}
will hide the highlight, while keeping the normal select-functionality.
See also Changing the text selection color using CSS?
Try to render the text with SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
http://www.w3schools.com/svg/svg_text.asp
Edit:
After further probing it seems that to prevent search you have to put the SVG in separate file:
<object height="30" width="500" data="text1.svg" type="image/svg+xml">
<embed src="text1.svg" type="image/svg+xml">
</object>
Disable-CTRL-F-jQuery-plugin
How to use:
Include jQuery and disableFind.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="disableFind.js"></script>
Call the disableFind() function on the element(s) you want to make unsearchable.
$('p').disableFind(); // make all paragraphs unsearchable
$('.unsearchable').disableFind(); // make all elements with "unsearchable" class unsearchable
$(body).disableFind(); // make all text on page unsearchable
Related
I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link
Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!
I'm afraid not!
I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.
Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.
But a cross-over
you can use blank rectangles to not let them be shown but it's not really guaranteed.
:root {
--hiderColor: red;
}
#hider {
width: 640px;
height: 55px;
margin-top: -50px;
background: var(--hiderColor);
position: absolute;
z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>
It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!
By the way, I used the red colour so you know how it works you, can change the colour;
And a note: the widths of the div and iframe must be one and the same
Good luck!
External iframe means you have no control on what's inside.
I had that problem for something I made for a class, I used
div.a {
display: none;
}
I haven't tried it, but you should be able to use
<p style="color:black">(Link Here)</p>
To recolor the text. Again, I haven't done much restyling of links, but these should work.
In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}
I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****
It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).
You could try adding this rule to the "red" class.
font-weight: initial;
I was wondering if there is a way using css or javascript that allows for a semi-transparent div element to appear visually on top of all other elements, but hyperlinks and other interactive elements under it can still be clicked? Just a whimsical idea to give my website the ability to darken or lighten the look of the website.
EDIT
I know that z-index moves objects from the background to the foreground but they also block interactive objects...
Such behavior possible via poiner-events:none (non-standard and not supported by IE).
Originally being an SVG feature, it's supported for any SVG element (IE 9+):
<svg poiner-events="none">
<rect width="100%" height="100%" fill="black" fill-opacity="0.5" />
</svg>
But for the effect you mentioned I would recommend to use opacity on body and some background on html:
body {
opacity: 0.5;
}
html {
background: black;
}
create another div element on top of existing div, and have it's z-index more than the existing one. Hope this should help.
My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.
You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/
I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?
Thanks.
For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.
Here's the css to make a form field look like plain text until it is hovered or focused:
.inContextEdit
{
border: solid 1px transparent;
margin: -2px -3px;
padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
border-color: #ccc;
}
Then, some JavaScript for IE7:
function focusInput(el)
{
el.className += " focus";
}
function blurInput(el)
{
el.className = el.className.replace(/ *focus\b/g, "");
}
And here is the markup you would use:
<input name="PageTitleInput"
value="Page title"
class="inContextEdit"
onfocus="focusInput(this);"
onblur="blurInput(this);" />
This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.
Will need both front end and back end tools.
I assume you are talking about an in place editor.. jquery has quite a few plugins for it.
If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.