Hi I'm using twitter bootstrap popover functionality with seyhunak / twitter-bootstrap-rails gem.
I have the following code in my view:
<ul class="nav nav-pills subnav">
<li>
<a class="label-with-popover" data-content="popover content" data-title="popover title">Home Valuations:</a>
</li>
</ul>
The following in my page.js.coffe
jQuery ->
$('.label-with-popover').popover()
The popover appears but looks like so:
Bootstrap popover displays weird with extra vertical line through it: does anyone know how I can fix this?
Let me know if you need more info.
You've got a bunch of collisions between Bootstrap CSS and the CSS you wrote for your project. In the future, you should consider using a namespace for your own general-purpose classes like .arrow, or your CSS will interfere with third-party libraries (like Bootstrap) which use such common class names.
Here's an edit to your fiddle: http://jsfiddle.net/5rT9t/1/
I removed the margin declaration on .content, the padding values on .arrow, and, strictly for demo, added a container div to offset the popover so you could see the whole thing.
Related
I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.
I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.
Here is a fiddle:
https://jsfiddle.net/k8g3qydw/1/
I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0"
to the body tag and added the class .scrollspy to the parent element of my <ul> like so:
<div class="scrollspy board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="nav-item active">
So, I am pretty confused as to what to do!
Any help is much appreciated!
There are multiple mistakes in your code.
You should use one method to add Bootstrap ScrollSpy to your page, not both:
via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});
ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.
Navbar links should point to "resolvable id targets" instead of <a name="service">. You should use <a id="service">.
And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.
Here is a working JSFiddle
Well, I am trying create a web layout that I already have in mind. I have a header where I can create a set of tabs using jqueryUI. This is very easy and I already have it, I will show you a screenshot.
The html is there:
<div id="header"><div id="headerMenu"><!--headermenu is the tabs div --!>
<ul >
<li>edition</li>
<li>export</li>
<li>settings</li>
</ul>
<div id="tabs-edition">
<p>Text</p>
</div>
<div id="tabs-export">
<p>Text</p>
</div>
<div id="tabs-settings">
<p>Text.</p>
</div>
</div></div>
I want that this looks in another way, The tabs pane filling the entire main header (removing the white spacing), remove the rounded corners and customizing the css and color.
I know css enough for this changes, but I have serious dudes if there are a convection, a method, a general way to customize the jquery ui styles, (I suppose that developers in general not use the defaults styles and they have to changes).
Anybody can guide me about this topic?
You could use Themeroller to create specific changes you need and get the css required for it. It would probably be easier than trying to make changes by hand.
Themeroller is a part of the Jquery UI project.
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you
From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.
Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki
There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application
So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/
Trying: Kendo UI Mendu demo with custom theme (Kendo UI Custom Themes or modified theme CSS)
I've customized the Bootstrap theme, and encountered a glitch in IE 8 when mousing over a menu item, only when using the custom theme CSS.
Customized Bootstrap theme example: http://jsbin.com/ovufef/1/edit (Glitch in IE 8)
Original Bootstrap theme example: http://jsbin.com/urinev/1/edit (works as expected)
Kendo UI Menu:
<ul id="menu">
<li>
Stores
<ul>
<li>
<div style="padding: 50px;">
<h2>Around the Globe</h2>
</div>
</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
View the CSS in the jsBins, they are too long to include here since they are Kendo themes.
Basically the glitch is when you mouse over an item, it does not drop the sub item down immediately, you must move your mouse over where the sub item would display, and wiggle around until it weirdly and magically appears.
I'm unsure what is causing the IE8 glitch in my custom theme. The styles are so simliar, I can't figure out what's causing it. I have done a file diff on the CSS, and seems to me (after looking at the diff a few times) to be only background color, gradient, border color, etc changes.
If anyone could help me fix the custom CSS, it would be much appreciated.
Notes:
Bootstrap is just theme name, nothing to do with Twitter Bootstrap... just looks similar.
I hate IE with a passion, this was not my choice (and for the most part Kendo works fine in IE)
jsBin used because IE8 does not work in jsFiddle
Update: viewing jSBin in new window, glitch is not produced but does reproduce in web app with custom theme used. More research needed, will update or answer soon
Something happens in that jsBin iframe - if you open the bin in a new window - it works.
#Bundyo was correct, the issue does not happen in the jsBin new window. However, it was still reproducing on a site I was developing. I eventually figured out it was my gradient syntax for IE most likely causing the problem.
Changed to:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#00ffffff, GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#00ffffff, GradientType=0);
Originally I had startColorstr='#80ffffff', endColorstr='#00ffffff' with the single quotes, which may have been an issue.
fixed jsBin for reference: http://jsbin.com/ovufef/12/edit
I am currently building my personal portfolio and, not having a lot of practical knowledge in javascript, but having gone through a lot a tutorials, I decided to try to implement something I saw elsewhere: A detachable navigation.
Using this site, http://code.stephenmorley.org/javascript/detachable-navigation/, as a reference I set about creating my detaching navigation; however, something went horribly wrong.
For one, the header will automatically align to the left rather than returning to its default position.
Second, although you can't yet see it implemented, I wanted the social icons to show up in the navigation once they were scrolled past using an animation. That bit of code was so convoluted that I scrapped it.
Any pointers would be greatly appreciated.
Why not just use Bootstrap? It has this built in already: http://twitter.github.com/bootstrap/components.html#navbar
Download bootstrap: http://twitter.github.com/bootstrap/assets/bootstrap.zip
Add the bootsrap Javascript and CSS to your page.
In your HTML, add the following DIV:
You can change the div to fit your needs.
<div class="navbar navbar-fixed-top">
<li class="active">
Home
</li>
<li>Link</li>
<li>Link</li>
</div>