I'm creating a website in which I use bootstrap to manage the responsivity of the website. in A section I've create some component in which is written something but because the text is too long I've give it a fixed size with overflow:hidden; I've seen the framework called masonry that let you to give to component different size and clicking on one of this you expand it.
in bootstrap official website I've found this example: Bootstrap and masonry example
but doesn't explain nothing.
how can I use masonry features in a bootstrap website with containers, row and cols?
Related
How to make controls in the bootstrap carousel to change slides only when being clicked on? (I have text in my website and it makes it difficult for users to fill out the application)
According to the documentation (assuming you're using Bootstrap 4) you have to add data-interval="false" to the element you're using for the carousel.
If you're initiating the carousel with JavaScript and want to keep all the options and configs in one place, add interval: false to your configuration.
I have a a select menu in jquery mobile site you can find the work here:
http://www.emadzedan.com/TicketsJOMobile/#checkout
Note: please try to see the (Days) select menu
I tried to make it custom pop up menu but JQuery do not respond and I tried to make it native but the options do not scroll it is shown as in the link the options is long and exceeds the page height.
So I'm stuck at this (error) and I searched the internet for more than 2 days but no one is saying anything about it.
the final and perfect answer is the above to answers but two clear things up:
1)it is actually conflicting with JQuery UI and putting it before JQuery Mobile solve the issue.
but:
if you trying to use JQuery UI Menus (Styles) you need to add the following Styles in your CSS file:
.ui-selectmenu-menu .ui-menu{
height:150px;
}
/* Note to modify the height of the select menu for specific menu use (ID-menu)*/
#year_Traveler4-menu{
height:50px !important;
}
Thanks All
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
I'm trying to keep my Twitter Bootstrap layout from jumbling around when the browser size changes. I essentially want to keep a minimum width.
I've followed the directions on the bootstrap page to not have the fluid container or fluid rows, and I also tried adding a minimum width tag in the body, but for some reason have failed to get it to work correctly - I'm thinking there's got to be an easy solution here that I'm missing.
Thanks in advance
This is Bootstrap's responsive feature.
If you don't want it, don't reference responsive.less.
As SLaks said, the layout resizing is in Bootstrap's responsive code. If you're compiling the LESS files, don't include responsive.less (which in turn includes the other responsive less files in v2.0.3). Incidentally, responsive.less is not included by default.
If you're adding the supplied .css files (i.e., not compiling from LESS), just include bootstrap.css/bootstrap.min.css and not bootstrap-responsive.css/bootstrap-responsive.min.css on your page and it should work.