hope you can help me, again :)
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag'n'drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can't seem to figure out, how to get it working.
thnx in advance,
dg
In order to edit external stylesheets with JS you'll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities - this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style="...") and then when the page is submitted, enumerate each element's style property to extract the values and use them to build a POST request. Then create the new file on the server.
you want to use jquery... it uses css to select groups of elements and allows you to manipulate the css style on the elements you have selected
lets say you have an div element with the class awesomeDiv:
<div class="awesomeDiv">some content</div>
you can select it using jquery with the following line:
$(".awesomeDiv")
and you can change the css like so:
$(".awesomeDiv").css({'background-color': '#000000', 'width': '250px'});
Related
I use ngx-skeleton-loader and I want to modify add color. but I can't
Here image regarding the issue
On the developer tool, you see the styles action in the styles action bar
.loader[_ngcontent-gaw-c19]
(angular generate the unique id (_ngcontent-gaw-c19 ) this _ngcontent- static id given by angular at a one-time particular div.
and -gaw- is dynamic and this change every time when a page refresh, then I want to modify the existing CSS how can I do it.
There is no way you can add CSS only by _ngcontent. You should use instead another selector. Sorry about that :(
I have a <ul></ul>class in which an element.style{} is getting applied from a .js file. Can I know how to know the exact .js file from which it is getting applied and the line of code? Below is the ss attached.
Check for some file name with flexslider or jquery.flexslider.js. If you have it then css is coming from their only search with .slides or with translate3d. If you don't have any then
the only possible way is with cleaver search. 1st search with ".slides" within your project. If you found any normal class not any library thats the place where it is coming. If you found any file like slider, carousel or owl or any other js file just delete the content of those file and refresh the page if the css is still their look for other file. If nothing happen look with parent class or ID.
If you use an IDE you can do a search for the styles applied in question in the javascript files, the IDE will highlight all the occurrences of the keywords that you use to search for. If the JavaScript file has been minified it can make it impossible because you won't have any idea what is what without a lot of analysis work. If you have the original source code just do a search it will allow you to do analysis really quick.
In Microsoft Edge if you click inspect element the CSS of element will appear on the right side of the screen. You can see which CSS style are being applied and use the checkmark interface to apply or remove the style. This will tell exactly where the CSS is coming from. If you want to know where the JavaScript is coming from I will use the search feature in my text editor to find the specific functions, or remove script tag temporary until I locate it.
I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely
Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.
I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.