Changing CSS stylesheet on button click - javascript

I folks, I've had a good look through but nothing seems similar to mine.
I've just finished creating a custom CMS and now want to implement customization capabilities, like templates.
I believe it uses Javascript but, I have a variety of of stylesheets on a server. css.css, css1.css etc with css.css being the main.
Is it possible that on a button click, I could choose a different sheet meaning that in essence, the sheet I would choose became the main style sheet, css.css?
Thanks for any help you can offer.

Yes, you can insert a link element in the head of your page. You can do this using document.createElement, or using JQuery if you use that. If you actually want to toggle the style sheets, you can remove the previous link element, or just replace its href attribute.

Related

Having same <div> on all my sites

I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.

Programmatically add all Css stlyings from external CSS stylesheets to the html's <head> tag

I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.

dynamically add sylesheet to head using javascript

I need to have the old "resize fonts" option at the top of the site I'm building - one link that is the default size, one that makes fonts a size bigger, and one that makes them two sizes bigger. it only needs to affect some nav and body copy, so I'd like to simply make 2 extra stylesheets to just style those elements, and upon clicking one of the links, load an additional stylesheet into the header. when you click the "default" link, it will go back to the original size (with no additional stylesheets loaded).
Is there a way to do this in javascript? This is a Wordpress site.
Alternately, I could use js to add a tag to the body and target the elements that way.
What is the best way to do this?
You should just change the class of the elements. That will change their css to whatever is specified by that class in the stylesheet. Your first option is more complicated than it needs to be. If you use JQuery you can literally make this one line of code.
$("span#applicableId").each(function(){
$(this).class("theOtherClass");
});
You can dynamically add a stylesheet on the fly by using something like below:
function loadNewStyleSheet() {
var style = document.createElement('style');
style.type = 'text/css';
style.src = 'http://path/to/cssfile'
document.body.appendChild(style);
}
I would do this as an include statement in in a php tag. Then just have one php file you include on the top of each page.
php inlude info:
http://php.net/manual/en/function.include.php
then from there I bet there is some code out there you could reuse.
For example maybe this could be of some help? it is a php script that will ajust the css styling of the page and not interfer with other parts.
http://www.phpclasses.org/package/1296-PHP-Resizes-text-on-a-page-using-styles-and-sessions-.html
I guess that it is not possible to add it dynamically to head tag. Of course, you can do that, but this stylesheet won't be loaded. Maybe you should try to get it via ajax and append to a special script tag in your site. If user will choose another option, then you will load another content, clear this script tag and append new content there.

Remove all CSS rules

Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.
check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();
Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?
There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.

Need to make jquery add css to a table which is added through ajax

I have a webpage... http://beta.charmscorp.com/inspect/projects.php - this webpage is in beta and doesn't currently look super professional and is only half working, also, the server internet connection is slow so it takes a bit to load up the elements properly.
Anyways, this page calls other pages through ajax to display in a div. My problem comes from wanting to use jquery to apply css to a table on a page which dynamically loads up in a div. If that sounds confusing, go ahead and go to the link I posted above, click the down arrow in the sidebar, and chose a link... Assets for example. you will see this page load up, and anything on this page won't have jquery applied to it.
From looking at solutions, I see I can add a .live() jquery function, but this seems to apply only to events and selectors. Anything i can do?
ps. this is what I've tried to do:
$("#maintable").live(function(){
$(this).corner();
});
This works on the main page, as you can see, there are rounded corners for the main table. However every table has the same ID, and yet, they don't have rounded corners...
You have an ID problem, it seems. There should never be two elements with the same ID. That said, you need to configure your server-side code so that the markup served to the AJAX request gives these tables a class attribute. Something like class="rounded". Then you can use jQuery to apply the style like this...
$("table.rounded").corner();
Note you will have to make this call each time you "reload" the div with fresh markup, which can be done globally using the ajaxComplete function...
$("table.rounded").ajaxComplete(function() {
$(this).corner();
});
"every table has the same ID"
IDs are supposed to be unique. jQuery sees the first id and quits. Change those "ids" to classes and you'll be good to go.

Categories