I would like to use JavaScript to clean up text that’s being copied from my site.
I use snippets like this:
body {
vertical-align: middle; ➊
}
Where ➊ indicates comment later on. I want readers to copy this snippet and use it – so I need to delete that Unicode marker. How can I access text that’s being copied and make changes to it?
I considered deleting marker(s) from snippet when user clicks (mousedown) on it, so she could select the text, copy it and then I would restore markers but it seems a really long way to do it.
Just put the unicode markers in span tags, and put display none on them when the user clicks
body {
vertical-align: middle; <span class="marker">➊</span>
}
And then do this in jQuery
$('.code')
.mousedown(function() {
$(this).find('.marker').css('display','none');
})
.mouseleave(function() {
$(this).find('.marker').css('display','inline');
});
As a bonus, you could then apply the following style to the .marker elements:
.marker
{
position:absolute;
right:0;
}
You could turn the unicode marker into an image, as images are ignored when copying plain text.
just set the markers in comment? so it doesn't do any harm when being used after copying
There is an oncopy handler, but I doubt it is widely supported. There are also selection event handlers like onselectstart (again, different for different browsers) and various attributes to make a part of the text unselectable, like -moz-user-select: none (yet again, not cross-browser). You are probably better of using absolutely positioned markers or making the marker unaccessible through z-index.
Related
Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?
Example:
CSS:
.navigation input {
padding: 0;
margin: 0 30em;
}
HTML
<div class="navigation">
Some text: <input type="text" name="one" />
More text: <input type="text" name="two" />
<!-- The next input, I want it to be as browser-default -->
<div class="child">
<input type="text" name="three">
</div>
</div>
Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.
Here I'm using an input element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to reset it to its defaults.
Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?
Thanks in advance for any comments!
in your case you can use that :
.navigation input {
all: initial;
}
it will revert all attibutes of your input to initial value.
source :
http://www.w3schools.com/cssref/css3_pr_all.asp
CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:
.navigation input {
all: revert;
}
Still its browser support is not very impressive for the time of writing...
If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.
Few Examples
Meyer Web
HTML5 Doctor (CSS Reset With HTML5 Elements Included)
If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example
div {
color: red;
font-family: Arial;
}
div p {
/* Here it will inherit the parents child unless and
until you re specify properties with different values */
}
You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)
On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to
.navigation > input
But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.
The QUICK answer is to use the following CSS to revert your select HTML element back to the browsers default UA style sheet, or whatever is set in the body element:
.navigation input {
all:revert;
}
What Are your Trying to Default to?
Every browser by default comes with a default UA style sheet that applies styles to all HTML elements. HTML is unstyled by default. But as you add more styles to your web pages, through selectivity and cascade you write over many of these native default styles. Often that is ok, as you improve upon the browser's styles or alter them to fit your page design.
But know that the browser's default UA style sheet is usually the default. For example, the element "blockquote" is usually interpreted by most browser style sheets with a standard set of CSS formatting values close to the following:
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
However, this formatting is not always consistent between browsers. Each browser designs the HTML elements differently. That means each browser's default is not YOUR default or what you would like or expect. You want consistency, right?
To solve that problem, some people have started creating "reset css sheets" with custom values to layer over the browser's default styles and align all the browsers to the same formats. These sheets do this before applying custom CSS on top of that for specific web projects.This creates a "universal custom style" that overrides the browsers default styles, so all your projects, all your web pages, and all versions of browser start out with a base-level look-and-feel.
But there are problems with this.
Bootstrap, the popular 3rd party CSS vendor solution, creates its own "reboot" sheet to reset HTML elements and override the browser's sheets. But these "reset" styles are incomplete, so add more complexity as to what is the default. In doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of Bootstrap's reboot "blockquote" style shift, which changes default critical margins like so:
From the Bootstrap 4.0 reboot sheet:
blockquote {
margin: 0 0 1rem;/* top, right-left, bottom */
}
This Bootstrap fix that comes in all Bootstrap downloads fails as it strips the critical left-margin formatting that defines blocked quotes in scientific journals and adds one at the bottom. Bad design! In addition, older browsers don't know what "rem" is, so this solution would fail in a wide range of legacy browsers. It isn't just the custom styles in Bootstrap that's the issue. It is the overall CSS design that fails. Too many legacy browsers will fail to accept these Bootstrap proprietary styles, too many elements are missing from their sheets, its extremely difficult to erase them, and its often too difficult to go back to the browser's try default style sheet.
So, now that you understand all the variable involved, how do you manage all this? To try and return to a "default" you really need to understand how best to manage all these CSS systems in a way that is easy, comprehensive, and complete.
A Better Solution
In general, it is always better to consider the browser's default UA style sheet as the default, uncorrupted by any custom CSS you add later to the page. Then, because each browser is different, its best to use a comprehensive "reset" sheet that truly affects all HTML elements and works in a wider range of old and new browsers so it alters everyone's HTML. When done correctly, such sheets layer over the browser's default sheet correctly, but also apply custom CSS to the body element such that when you later use all:revert, the default goes back to the browser's default CSS style sheet, but includes some critical layout and font styles applied in the body element that affect the overall style and which do not get erased in your "reset" sheet.
Why? Because reverting back to defaults also includes whatever text or other inheriting CSS properties you added to the parent body tag. This allows you to not just honor the browser's default styles, but shift all the browser's to use the same body element text inheritance styles.
So, what I recommend when building CSS systems in web page design is the following:
Avoid Bootstrap, or at least turn off its "reboot" system as it is not complete and fails in too many legacy browsers.
Write or install your own HTML reset CSS system that changes all HTML design to a clean universal design all known browsers can share. This way they all start out looking the same, and the body element carries some critical text inheriting features you can revert back to.
When needing to revert back to a CSS default style on any element, simply use all:revert, which will reset styles on any element back to either your "reset" style sheet properties inherited from the body tag or go up the tree and back to the browser's default UA style sheet. Again, this will return your element's style properties back to either the browser's default UA style for the element or to the body tag's styles. If your "reset" sheet has carefully applied inheriting text styles to all browsers on the body element, they will be part of your element's default values you can revert to.
Note: Many web browser's do not support all:revert (Like Internet Explorer). So I recommend you combine all:revert with initial and inherit to force resets on some properties in older browsers.
The solution above will force all CSS in most modern browsers built today back to the original browser's defaults on an element-by-element basis. By using your own reset sheet, all the browsers will have the same default style on the body element which all child elements inherit. It means when you revert back an element, its default will include your browser's default styles but also any text-inheriting styles added to the body tag all child elements inherited.
Unfortunately, there's few good "reset" sheets online that do this well, combining your browser's default UA style sheet with your reset sheet. Very few have been carefully designed to reset CSS on elements for every browser known and all known versions, as well. You could write your own. Here is a very good CSS system you can use that does this for you I recommend: Universal CSS Framework
I think some of these should work:
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Valeurs globales */
clear: inherit;
clear: initial;
clear: unset;
sources :
toast rm -rf/*
lmgtfy : "css3+clear" on any search engine
https://developer.mozilla.org/fr/docs/Web/CSS/clear
You can use unset,
say you want to set border color to browser default
.navigation input {
padding: 0;
margin: 0 30em;
border-color: unset;
}
this will unset the style inherited from other classes.
I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.
You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.
I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>
I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?
you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}
Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.
If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...
Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.
I have a PHP page that is bringing in results from a Database and displaying them on a page. Certain images have a red 'ball' to the left of their name to dictate that they have more information to be seen.
For example, there is 30 on one page, 12 of which have a red ball. I need to be able to manipulate the positioning of the first ball and leave the others as they are.
<img class="premium-icon" src="../../images/ball.png" alt="Premium Listing" />
<a href="page.php?cmd=auth&src=book&id=968365&a=CVTYJH5kavEbhwSDs" target="_blank" alt="" title="">
<p><span style="">Result</span></p>
</a>
This is how they are layed out, each image has the same class and I'm unable to stop this.
I'm looking for a pure CSS solution, however a Javascript one would be appreciated.
Thankyou for any help.
EDIT
A little bit more information, all of this is brought in from a Database so I don't know if in the final product the first image will even have a premium-icon. This is all in case that image does, as that image needs to be moved. So, it will always be the first-child as I'm only trying to select the first ever premium-icon.
You can use the first-of-type pseudoclass: http://jsfiddle.net/WAG6e/.
Edit: As BoltClock mentions, :first-of-type ignores the class, so actually you'd need to build your HTML such that the first img is the one you want to style. Then, it's a matter of specifying the tag name:
img:first-of-type {
border: 1px solid red;
}
The pseudo-class that you are looking for is the :first-child. According to w3schools, it works on all major browsers, since you have a <!DOCTYPE> declared.
So, a sample CSS to your problem:
img.premium-icon:first-child {
margin-left: 10px;
}
Remember that if your img isn't the first child on the results container, then the desired pseudo-class will be :first-of-type, but it only works on IE9+.
But, as pointed by #ptriek, :first-of-type can't be used together with class names. Then, you would need to change your HTML.
Personally, what I always do is a class name like .first on the desired element, set on my serverside code, so my CSS will be simple and working on all browsers:
img.premium-icon.first {
...
}
What about img:first-child { ... } ?
$('.premium-icon:first')
use that
Assuming class "premium-icon" is reserved for the relevant pictures, this JS could help:
var a=document.getElementsByClassName("premium-icon");
if (a) if (a.length>0) {manipulate_image(a[0]);}
I have a table inside an html page created by Javascript and hold number inside its cells i want to enlarge the number when the mouse hovers over it using css style.
I'd do something like:
table td:hover {
font-size: 1.1em;
}
This way, you're sure to have a bigger font than what's already there.
look into css :hover selector
this mainly works for anchor tags in most browsers, if you want to do hover for other elements you might want to use javascript
Here's an example: http://jsbin.com/urube4/edit
You can either use the :hover psuedo-selector on the td, or on the span inside, depending on the effect you want.
The first table in the example will only activate the hover on the mouseover of the text, while the second example will activate on the mouseover of the table cell.
As stated, you'll have an issue here with IE6, as it only recognizes :hover on a tags and form elements such as button and input. If you want IE6, you'll need to use JavaScript.
table td:hover {
font-size: 14px; // greater than actual size
}