i use bootstrap twitter 2 in my page.
I have a dropdown menu that works without problems except when i load the openlayers.js file.
When i navigate to other pages it works, but when i got access in the page where i load the openlayer.js file it crashes (the style is ok but the dropdown functionality is not working)
I believe that is an openlayers conflict because if i don't load this js file then the menu works without problems.
How can i solce this conflict ?
Thank you in advance!
Related
I have created a bootstrap navigation bar that works perfectly in its own html file. The dropdowns on this file will open and close like they should. I want to include this file onto my other pages so that I don't have to update every single page's navigation bar if I ever change it. I have chosen to do this through using server side includes. My other pages are saved as asp files to allow for server side includes.
When I use
<!-- #include virtual="/navigation.html" -->
the dropdowns in the navigation are able to be expanded, but they will not go back up. Any ideas what may be going wrong?
I figured out the problem. My include files only needed the html code, no links to javascript, css, or opening and closing html,head, or body tags.
-Test link for the problematic webpage-
This webpage is a landing page to a parent website. There are several javascripts that are required to run. Unfortunately, not all work simultaneously. I have tried various combinations but cannot find a way to make the webpage work.
The functions taking place in the webpage are:
Revolutionary Slider
Multiplication calculator
tabs toggler
smooth scroll-to-section menu
back-to-top button
Fancybox (lightbox)
Please help . Thankyou
Errors generated by your page
indicate that jQuery library is not the first script you are loading.
Looking into source show that you are loading jQuery in line 75.
Move this line to very top of your page.
I think this is your primary problem. Your scripts may not necessarily require different jQuery versions.
I started using bootstrap recently, and I saw that this page: components highlighted which section of the page you were on in the sidebar. How do they do this?
This can be done with scrollspy, a script which is now included in the bootstrap.js file.
All the script does is watch where you are on the page based on where you place an id on a containing tag.
You can also enable scrollspy for a specific element using:
$('body').scrollspy();
Take a look here: http://jsfiddle.net/adamp/LWWCb/3/
This is going to sound like a seriously stupid question. I have a very super simple page that I created that currently just displays a jQuery modal Dialog box. If, when I link to the jquery files, I just link to http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css for example, everything works just fine. When I download those files and link to the local directory, almost everything works fine, but the close button in the top of the dialog doesn't show up. The box is there, and it's clickable, but the X isn't there. Any idea why this happens?
in the CSS there are references to images like:
background-image: url(images/ui-icons_cd0a0a_256x240.png);
Did you also download the images and placed them in the correct directory?
just get the whole package of jQueryUI http://jqueryui.com/download/
Do you have the images stored locally as well? You should probably download the whole jQuery UI package from here http://jqueryui.com/ instead of trying to find the individual files from the CDN.
I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?
found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).
I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.