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.
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 am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.
I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.
I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.
Thank you
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.
In your example I think you are mixing creating a tooltip dynamically:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
With initialising a tooltip:
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
OR
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
So to create and then initialise JUST the tooltips:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
For obvious reasons creation must precede initialisation.
See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/
I haven't worked with foundation before so I'm definitely no expert. However, I think I've figured out why your code isn't working.
Working Code
You can get all the links needed and see an example of working code in the CodePen located here: http://codepen.io/SupposedlySam/pen/ybbYMp.
What you need to get Foundation Tooltip plugin working
Foundation.css
Modernizr.js (placed in the head tag or below all other scripts before body close (via Foundation's JavaScript Setup Page)
JQuery.js
Foundation.js
Foundation.tooltip.js (only needed if not using foundation.min.js which includes all plugins)
Weird Stuff Not Really Told To You
The tooltip will appear at the top-left of the body (at origin 0,0) if there isn't enough space for the height of the word plus the height of the tooltip.
If you want your tooltips to stay open when clicking on the word associated to it, a tabIndex must be set on the element.
If you're extending the options of a Foundation plugin you must initialize each element you want the functionality on individually.
You must use " instead of double quotes (") in html attributes and they cannot be escaped with a backslash (\).
if you do not want to initialise foundation on your entire document, you can initialise it on specifice elements, like :
$('.has-tip').foundation();
foundation do not depend on modernizer, it works without any problem without modernizer.
and a codepen to a tooltip without calling document.foundation:
https://codepen.io/faw/pen/vmZjzg
I have a html + css + javascript application.
I want to be able to enable theming.
All my css are replicated in two folders: /theme1/... and /theme2/...
So my html looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme1/file1.css"/>
<link rel="stylesheet" href="theme1/file2.css"/>
....
....
</head>
<body>
.....
</body>
</html>
I want to be able to change using javascript the home folder of the css (theme1 to theme2).
Any ideas?
Here is what you will need to solve the problem:
Get the relevant tags. In this case, any link tag with rel="stylesheet" will probably do, but you can even go so far as to specify "starting with theme1" if you want. This can all be done with document.querySelectorAll("link[rel=stylesheet][href^=theme1]")
Loop through them. A simple for loop will do nicely.
getAttribute("href") gets the string you need.
replace() will allow you to replace the part of the string you want.
setAttribute("href",newattr) will put the attribute back into the tag.
<link id="foo" rel="stylesheet" href="theme1/file1.css"/>
When you want to change the theme:
document.getElementById('foo').href = 'theme1/file2.css';
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here
Today I started to use JQuery. I found this explanation of how to do it.
On that page I also have a complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
I copy paste the code and it does not work. I have to mention that it works if I try it on the page that I have mentioned before (so JavaScripts are switched on in my browser).
I have to idea how to solve this problem because I have no error message and has no previous experience with the jquery. Can anybody help me with that?
ADDED:
I found a feature that can be important. When I load the above mentioned code/page, the auto-complete works as it is expected! If I reload the page, it change its appearance a bit (a space between the input field and top of the page appears) and auto-complete stops to work. Does it tell you something?
It's because it should be: $("#example").autocomplete({ source: data })
It seems the docs you found is outdated. A more up to date version can be found here: http://jqueryui.com/demos/autocomplete/
try .split(",")
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ,");
also attach a sorce
$("#example").autocomplete({
source: data
});