Is it possible to make it so that when a user copies/pastes something onto their clipboard, it's CSS styles remain?
If you are talking about HTML objects, then you can use this script mentioned here.
This script copies all the styles of a HTML Tag and stores them so that you can use them later on.
So in your case, when you somehow detect the copy event, you can store the style properties of the original object, and when the user pastes, you can apply the stored styles.
The original usege of the script :
var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
.parent() // select it's parent
.appendTo() // append the cloned object to the parent, after the original
// (though this could really be anywhere and ought to be somewhere
// else to show that the styles aren't just inherited again
.css(style); // apply cloned styles
But maybe the easier way would be to add a class like .copied-tag when the user copies an object, then when the user pastes, you can find the .copied-tag class and apply any of the styles you want to copy.
An example:
When user copies:
$("#copied-object").addClass("copied-tag");
And when the user pastes:
originalObject = $(".copied-tag").removeClass("copied-tag");
newObject = $(originalObject)
.clone()
.css("text-shadow", $(originalObject).css("text-shadow"))
.css("color", $(originalObject).css("color"));
$("#container").append(newObject);
Only if the styles are inline like this:
<p style="color:red">some text</p>
and they copy paste it into something that reads html.
Related
I'm working on a project for school where one is able to create HTML elements by using Selection.js (visual selection turns into an HTML element). Currently, the user is able to write CSS in a CodeMirror editor. After the user applies the CSS by clicking a button, the styling is directly inserted onto the created React component trough props.
My main goal is to allow the user to create multiple elements with multiple styling rules, to then (in the end) export the created elements along with their styling.
I've imported JSS, because of the createStyleSheet function that generates styling based up on a JavaScript CSS object (which comes from the CodeMirror input) and because of the fact that the directly injected style trough props is not reusable (because it doesn't contain classes, just properties). The problem with JSS is that it generates styling in the form of .mySpecialClass-0-1 {...}
This is the code that I'm using when the user applies the style (on click).
onStyleInput(e) {
e.preventDefault();
try {
let style= cssToObject(this.codeMirror.getValue(), {camelCase: true});
this.styleSheet = jss.createStyleSheet(style, {link: true}).attach();
console.log(this.styleSheet);
}
catch (exception) {
// console.log("Something went wrong, check your css syntax");
console.log(exception);
}
}
The result I expected from JSS was styling in the form of .mySpecialClass {...}, without the unique id's.
I've been looking trough the JSS API, but there doesn't seem to be an available boolean to toggle the unique id generation.
Is there a better way of achieving my goal?
Thanks in advance!
The easiest way to have JSS classes without ID is, make it as "Global" styles. It is mean, we have global CSS styles which not attached individually to the elements. Rather than just put/set HTML className without really utilizing JSS result. They call it "Global selectors" at "plugin" section at their documentation pages.
You can find documentation here: https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7
I'm working in react and have an element that uses CSS modules for styling, like so:
<div className={styles.book__title}>Title: {book.title}</div>
Because class names are hashed, the compiled output is something like:
<div class="book__title_adsfj4">Title: The Lord of the Rings</div>
I've added an event listener on a button that, when pressed, adds the 'title' class to this element to offer additional styling for that specific class, like so:
<div class="book__title_adsfj4 title">Title: The Lord of the Rings</div>
Is there a way where I can either:
append a class to an element and within my css file not have that class be hashed or
add a class to an element that exactly matches the final compiled hash name?
Thanks.
I wrote about the best way I've found to do this here - https://github.com/css-modules/css-modules/issues/199
Basically, it's just importing those styles from the original css file. Because those styles are all hashed the same, no matter if they are imported within different files, the styling will carry over.
When you have some kind of event that triggers a permanent visual change on your element, that means your element has state! And you'll want to use state in React to handle that change.
In React, state is a dictionary on a component that, whenever it changes, triggers a re-render of that component. You can read up on state here: https://reactjs.org/docs/state-and-lifecycle.html
What you'll want to do is add a variable into your state, something like 'buttonPressed' (or whatever you want to call that event or status), and have it be set to true or false depending on if you want the class to be there. When the button is pressed, you'll call this.setState to modify the variable in state and trigger a re-render.
Then, in your render function, you'll simply check what that variable is in your state, and include the class or not, like so:
<div className={styles.book__title + " " + this.state.buttonPressed ? styles.title : ""}>Title: {book.title}</div>
In gwt how to get a widget's default style(CSS Selector).For example, gwt button has style name "gwt-button" which is referenced in gwt theme css file.
How to got that programmatically.
Is there any,
DOM.getStyleAttribute();
to accomplish this. GWT experts please help.
In your example of button (or any object that is a child of UIObject) can call getStyleName()
UIObject documentation
String com.google.gwt.user.client.ui.UIObject.getStyleName()
Gets all of the object's style names, as a space-separated list. If you wish to retrieve only the primary style name, call getStylePrimaryName().
Now as to why you need this information is the real question. It is my guess that you want to change the styling of an object (add or remove). This would best be done by either of the following methods.
1) Supplying a custom resources file to the object that has your styling
2) creating a class that extends Composite and create a custom UIBinder class with all of your styles within it.
I'm trying to load content from a different file into a div element within the current file using the jQuery load() function. Nothing fancy, just loading it and that's it. However the links that are contained in the loaded file become "disabled", you cannot click them, and pseudo-classes like :hover seem to be left out as well. Is there a solution to this?
$(document).ready(function() {
$("div.content").load("content.html");
});
let's say content.html contains just this line:
xxx
When it is loaded into the <div class="content"> the link is not clickable. It is colored according to the css, however the :hover effect doesn't work, and it behaves like normal text - not a link. This is a problem because the content I'm trying to load has a couple of links, and none of them work after being load()'ed.
I believe your issue is:
You use $('div.content').load('content.html') to send a request for content to (later) be inserted into the DOM.
You then run some code to specify handlers for nodes using $(document).click, $(document).bind etc - but this code runs before the new nodes have been added to the DOM.
New nodes are then added when the .load call completes.
The behaviour that you defined on all the origional nodes isn't being followed on the new nodes.
If that is the issue your're describing - then you need to add all the same bindings to the new nodes once they're created.
i.e. you need to provide a callback to add the bindings to the new elements:
function on_data_loaded() {
$('div.content ...').hover(.....);
// etc.
}
$('div.content').load('content.html', null, onloaded);
(note that's not a particularly clean way of doing it, but it should explain what needs to be done).
I need to create an application in which we are changing the style of the application that is theme of the application based on the button click.
I have download the theme that all contains different CSS file. I need to dynamically declare the CSS for the application to apply that theme.
I have file name Theme1.css, Theme2.css, Theme3.css, Theme4.css, Theme5.css.
when I click on the Theme 1 Button then I need to apply Theme1.css file as source of style. similar like that when I click on the Theme 2 Button then I need to apply Theme2.css file as source of style.
Note : css file contains Style for both application and component of the Application.
Have a Nice DAY....
You would have to use the facility within eclipse/flex builder to compile the CSS into SWF so that the styles can be changed at runtime.
You would also have to maintain the instance variable of the current theme id.
Is this what you are looking for?
public function switchTheme(theme:int):void {
StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
this.currentTheme = theme;
}
You would then assign the click handlers for each button to the switchTheme function - passing the theme id as a parameter.
I think you have to loop all control one by one and set theme on control.
for Eg.
If you set default theme RED and button is red then you change theme to Blue then you set button color to blue using looping of control.
May be this help to you....
Please ask me if you not getting what i am saying...
Thanks.
You need to compile your CSS files as SWF. You can right-click the CSS files in Flash Builder's explorer window and select "Compile CSS to SWF" from the menu.
Then you use the loadStyleDeclarations() method from StyleManager to load the SWF file with your CSS info.
The previous step will only add the new styles to your style subsystem. If you want to clear the old styles, you need the unloadStyleDeclarations() method first.
If you unload the currently active CSS declarations, use false as the second parameter so StyleManager does not invalidate the styles and rebuilds the style declaration chains/cache for the components on stage. This is not only be slow, but will also result on a screen refresh with the default styles before applying the new styles.
You could have something similar to this, and call applyTheme('url/to/theme.swf') with the appropriate URL whenever you want to change the theme:
private var currentThemeURL:String = 'themes/default.swf';
public function applyTheme(themeURL:String):void
{
StyleManager.unloadStyleDeclarations(currentThemeURL, false);
StyleManager.loadStyleDeclarations(themeURL);
currentTheme = themeURL;
}