I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
Related
How can I load a external html page in a div?
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<!--Load nav.html here-->
</div>
...
I have tried with following code but it doesn't function.
$( "#myPanel" ).load( "nav.html" );
See: http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html
The panel is expecting some markup as content, not a whole HTML page.
This will load Your navigation listview inside the panel:
$(document).on('panelcreate', '#myPanel', function () {
$(this).children(".ui-panel-inner").load("nav.html ul", function() {
$(this).enhanceWithin().trigger("updatelayout");
});
});
The full-width listview is requiring some additional CSS:
/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
margin-right: -10px;
}
EDIT:
To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.
In one word, instead of <!--Load nav.html here--> write <div>...</div>.
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
I have a jquerymobile fieldset that looks like this:
<fieldset data-role="controlgroup" data-type="horizontal" id="myid">
I want to set a custom width for the fieldset but don't know how to do it.
How can I do this? (preferably without an external plugin)
Thanks
Solution
Here's an example of how to di it with fieldset containing select boxes: http://jsfiddle.net/Gajotres/xFPFH/
CSS used is:
.ui-controlgroup-controls {
width:100% !important;
}
.ui-select {
width:33% !important;
}
EDIT :
Here's an example for radio buttons: http://jsfiddle.net/yUZy8/. When you multiply number of radio button widths it must be equal or greater of .ui-controlgroup-controls width.
More info
If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.
In my html the content should be centered on screen and his width should never be greater then 950px.
Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.
The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.
When I open on a browser the css has this media query:
#media (min-width: 1200px)
that makes my div always fit the entire screen.
How can I fix this?
Basically what I want to do is something like this:
The orange line is the container (or body) and the blues are the rows
Thanks for any help.
EDIT
Just something I found that maybe help someone to help me
If I comment out this line:
#import "twitter/bootstrap/responsive";
my div.content keeps the 950px width but my html loses its responsive behavior, which I don't want
EDIT 2
The html markup:
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>
but on the browser it creates this things:
body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px
Just to clarify, this is not a problem on twitter bootstrap, this is a problem on twitter-bootstrap-rails
The way I found to fix it on development is open the twitter-bootstrap-rails gem with gem-open and change the file: /vendor/toolkit/twitter/bootstrap/responsive.less commenting out these lines:
// LARGE DESKTOP & UP
// ------------------
#media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
You could use the wrapper this will give you a default size of 940px.
<body>
<div class="container">
...
</div>
</body>
But if you are looking to a custom width, you should add some css in your application.css like this:
body .container{
width:980px;
}
Check it out here: Bootstrap - Layout
A nice tutorial for layout: Filling layout with bootstrap
Be sure to wrap your layout with <div class="container">, which will create a fixed layout that is centered. If this doesn't work, then perhaps something else is wrong with your layout. Please update your question with your layout HTML if this is the case.
Documentation: http://twitter.github.com/bootstrap/scaffolding.html#layouts
At the start of your responsive media queries (before ANY of them), set your element to have a "max-width"
body{max-width:1200px;margin:0px auto;}
Your site will still be responsive when you decrease browser width, but if you open up larger than 1200px (many decent widescreen displays) then it will stay as a 1200px container.
To keep it centred as it goes over 1200px add the following to the same container
body{max-width:1200px;margin:0px auto;}
The above adds "auto" margin to the left and right hand side of the element, which means means it becomes centred... (the 0px just means top and bottom are no margin, you could add some if you wanted/needed.
Note you don't have to add all that to body, but it just means it gets it out of the way at a high level....
Apparently it was a bug in the version of twitter-bootstrap gem i was using.
I dropped that project so i cant test in that environment anymore, and in some new project that i tried twitter-bootstrap again and didn't see this error again.
So i guess it is closed.
thanks for everyone
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}