Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.
Link to functional popover directive plunker from angular ui site.
Link to non-functional replication of popover directive that I put together.
Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.
For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).
It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.
Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).
Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview
Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.
Or, alternatively, using the CDN version of the bootstrap css also fixes the issues:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
Related
I am new to bootstrap and hence i am working with the help W3schools.com. Now i am modifying a website that have been already made with bootstrap version 3. I have created another html for testing and verifying my code in bootstrap. In the test html, i have included bootstrap.min.css downloaded from here.
I was trying to do input grouping as in w3schools tutorial and it works in my test html and hence i decided to do it in my official website. But when i included the same code in official website the alignment differs and its not working.
When i look into the css folder of official website, instead of bootstrap.min.css it was given that style.min.css. I have asked the former developer of the same site and he said that bootstrap used is version3.
I didn't understand what really differ? what is style.min.css and bootstrap.min.css
Can any one please clarify me?
Jslint says everything is fine, and I am able to add the external libs. Also code works fine in the IDE/browser, not in Jsfiddle
using Jsfiddle I am trying to debug Isotope toggle size and layout in JS fiddle, but I am unable to get the external libs to render.
Can you help, and correct me?
- if the issue is the order of libs, or what options I selected, is it the semi-colon infront of the JS, I thought this is normally good/safe coding in JS..
Here is the code in JsFiddle, it works in the IDE not JsFiddle
I am using the following font awesome, bootstrap, isotope, ba-bounce, jquery 1.11.2 (JSfiddle only shows 1.11.0)
I'm not sure where you were trying to load your resources from, but you need to provide a URL to the css or js file you want to include. These are usually easy to find hosted on a cdn. I have reconstructed your fiddle using cdn links to the external resources:
jsfiddle: http://jsfiddle.net/voveson/popzfey4/5/
Hi i would like to use bootstrap themes inside some websites that i am developing, however after looking at the documentation and searching online i have found it somewhat troubling that there is no explicit how to guide start to finish with using bootstrap themes, like found here. Furthermore i would like to download multiple themes into my project directory, extract them into the appropriate folders e.g. (css,img,js,ect...) and utilize them inside of my html files like so:
<div class="customized-bootstrap-item">myItem</div>
I am having a bit of trouble trying to do this because it seems there is no universality among the themes(e.g. each one may vary in how they work) and i don't want to hack together some dirty code if there is a proper way of doing it. So my question is , is there a proper way of adding themes into your existing project purely for aesthetics and customizing them by exchanging the appearance between one them and other themes, and if so how?
Can you guys point me towards some tutorials? I need to know more about how linking these js and css files will affect other aspects of the themes, and how the html tags can be used properly in a uniform way across many themes, as i won't settle likely on just one theme.
edit:
After trying some of the suggestions i managed to figure out at least some of the problems i was having by including the css style of the specific theme that i want to use as a stylesheet link in the head section of the html page that i want to apply it to, which seems pretty straight forward anyway. However i'm still a little bit perplexed on how to get all of those cool elements that i see in the themes, especially the dashboard themes into my custom html page. A good example of a theme that i am looking at is found here. If you guys could give me a bit of insight on how to get those elements on the page (i.e. dashboards, panels, UI elements etc...) that would be great. I may be mistaken but i don't think they are normal bootstrap classes, although i'm fairly new to bootstrap so i'm not 100% sure on that.
The definitions for all of these classes are located in a .css file, likely called 'bootstrap.css'. In the html page where you want to use bootstrap, add
<link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" />inside your . This will import all of bootstrap's css. If you need to use other themes, simply add that .css file into whatever folder has your css, then link to it in an html page.
This is a great resource you can use to generate a theme http://www.lavishbootstrap.com/ then linking this to your existing site is quite easy: you simply include the <link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" /> line in your code.
If you have downloaded from lavish it will include lavish-bootstrap.css. Don't forget to include jquery.js and bootstrap.js or the dropdowns etc. will not be functional.
For a test case, I created a test project with the exact same code from Hero Demo and then removed the responsive CSS code.
Why is it that dropdowns do not work unless responsive is also included? I do not wish to use responsive in my project.
There must be something else wrong in your usage. Here's a very basic fiddle (markup copied directly from the linked demo) using just jquery.js, bootstrap-dropdown.js, bootstrap.css.
Make sure you've loaded the scripts before calling $('.dropdown-toggle').dropdown();, and that you're using the proper selector according to the way you've structured your dropdown!
As #crowjonah mentions in a comment above, dropdowns are not dependent on responsive.css. You should verify that you have jquery.js included in your page before bootstrap.js. I have a page that is not including bootstrap-responsive.css and the dropdowns work just fine. Also you should not need to include $('.dropdown-toggle').dropdown() if you are using the correct css tags as described in the demo. The only features that are opt-in are the tooltips and popovers.
Hope this helps, but if not please update your question with more code example of how you have bootstrap implemented.
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).