I want to make these buttons which enable/disable the css across an entire website I am making. I am trying to make it so when a user clicks the button to disable/enable the css, it does so across all the webpages of the site and not just for the page a user is on.
So far, my code to enable/disable the css is as follows
<script>
$("#text-only").click(function () { jQuery('#mainStyleSheet').remove();});
$("#renable-style").click(function () {$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
</script>
Any ideas?
{$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
instead of
{$('head').html('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
in my opinion you should add a css class to every object that you have made in the webpage.In that class make all the changes.
Related
I'm trying to design a webpage somewhat similar in appearance to Microsoft's. (https://www.microsoft.com)
This includes building a image slideshow, which is why I looked up W3 Schools and found this: https://www.w3schools.com/howto/howto_js_slideshow.asp This is a great example and when writing all of my code in one html document it works, however, as I try to link to an external stylesheet it doesn't work anymore. I could alternatively founder on the js link but I don't think so, as switching to the next picture works. I searched stackoverflow for it already and people suggested adding ?v3 (or sth. like that) to the link, clearing my cache and so on. - so far nothing worked for my. I tried this in Chrome and Firefox.
Here's how I link to my CSS: (it's in the head)
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Here's the js link: (at the end of the body)
<script type="text/javascript" src="js/new script.js?v=3"></script>
Any ideas why this could be? Maybe some other tutorials for this?
I'll include pictures of the working html which's got everything stuffed in it and one of the html with external js and CSS.
Thank you very much!
external - not working
internal - working like a charm
THANKS EVERYONE! - Simple spelling mistake! Sorry to bother you!
This is invalid :
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Between <style> and </style>, there must be CSS code. However link is not CSS code, that's an HTML tag. The correct syntax is just :
<link rel="stylesheet" type="text/css" href="new theme.css">
Then, "new theme.css" has a space in its name, so it will likely be encoded to "new%20theme.css" and you'll get a 404. Don't use spaces within file names.
Finally, open your console to see any errors, especially to check if the CSS file is being fetched successfully.
Don't use any spaces in the names of the files, try using new_theme.css and new_script.js
Reference your CSS like this at the top of your HTML - inbetween the <head> tags.
<link rel="stylesheet" href="new_theme.css">
Also always try either Camel Case - "newTheme.css" or use an underscore "new_theme.css" when naming your files!
That should fix your problem! :)
You should not include the inside the style tag.
It should be inside the tag.
Ex.
<head>
<link rel="stylesheet" type="text/css" href="new%20theme.css">
<head>
Also when you have file names with spaces in between, you need to encode the name.
Example
href="new theme.css"
becomes
href="new%20theme.css"
<link rel="stylesheet" type="text/css" href="newtheme.css">
or
<style type="text/css">
css code here
</style>
open your console to see if it could find your css file
I have an angularJS function, and to make it works, I added some code to the html and body tags: <html lang="en" ng-app="plunker" ng-controller='headController' >, <body ng-controller="MainCtrl"> But after I did it, some css code that I use stopped working, and my background image has gone.
How can I fix it? I don't have much experience with angulatJS, so I will be grateful for an advise.
The code I use should change CSS if I press a button, I'm trying to use this example: http://plnkr.co/edit/jBtP6FfmeRzOYUCnHg3t?p=preview
You just have to replace
<link rel="stylesheet" href="{{stylePath}}">
With
<link rel="stylesheet" ng-href="{{stylePath}}">
Because href is standard html and does not bind with input therefore not registering changes.
I'm looking at a site template.
I find that when the user clicks on a link, it runs a JavaScript with this command to change the site theme:
$('link#theme').attr('href', 'theme2.css');
In jQuery what does this selector mean? What object this command change in my page?
This selects a link element, with the theme id, which is a link to a CSS style sheet.
The attr changes the href, so that it points to a differnt style sheet, forcing the browser to load a new style sheet.
Remember that to include an style sheet to a page you need to use this element:
<link rel="stylesheet" type="text/css" href="theme1.css">
You can add an id so that the selector finds it, and can manipulate it:
<link rel="stylesheet" type="text/css" href="theme1.css" id="theme">
I am no web designer pro so please be gentle
Situation:
I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .
The site is composed of:
index.html
-> contains:
1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth...-plugin/841563)
3- An IFRAME where the other pages are loaded into
tracks.html
-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page
facebook.html
-> contains FB comments box
background.html
Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.
Question:
Are there any ways the audio-player .js code (I'll post the code in next) can be modified so that it handles play requests initialised from pages within the iframe?
Any other suggestions come to minds? (remote window? other?)
Thank you!
this what I've got on the index.html page head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
});
function changeContent() {
document.getElementById('tracks').innerHTML="";
}
</script>
</head>
where, from the same page, links like this one play correctly in the player:
<ul class="fap-my-playlist">
<li>Lounge session - Bar</li>
The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?
You can indeed make something happen in one frame when something happens in another frame using JavaScript. Use the parent object from within the frame. Look here for some examples: http://www.pageresource.com/jscript/jframe1.htm
Also, you mentioned in passing that you might want to do it from another window, as well. This can be accomplished using window.opener.
I wondering how I can select the two stylesheet links I have below in the resize function below. I need to modify the two links href value based on the orientation value, but I'm unsure how to select and populate those inside the conditional statement below, any ideas?
<head>
<link rel="stylesheet" href="css/style.css" type='text/css' media='all' />
<link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
<script type="text/javascript">
$ = jQuery
$(document).ready(function() {
$(window).resize(function() {
var orientation = window.orientation;
if(orientation == 90 || orientation == -90) {
//populate href of stylesheet link here
} else {
//populate href of stylesheet link here
}
});
});
</script>
</head>
Just give your stylesheet and id and change it like so:
$("#id").attr("href", "/somecss.css");
If you use CSS3 you can use css3 Media Queries to change your styles based on the Orientation of the users browser.
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
This will only include this stylesheet if the orientation of the users browser is landscape.
Remember this will only work on CSS3 compatible browsers.
Look at this link :
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
another SO question:
CSS3: Detecting device orientation for iPhone
Its better to put both the css in one file and not to change the css later on.
Css Gets loaded first . and only then your javascript gets executed. So first your default css will be loadeed. then you would change the href tag (using other answer) then next file would be loaded. making an extra call to server. The better idea it to have both(landscape & potrait) css defined in one file.
IMHO 80% of the css for both landscape & potrait would be the same the rest 20% can be configured using the naive css fomr the first link.