bHello I have a question regarding jQuery mobile css.
I have a page and inside that page I have header,content and footer. Now inside the content I have a grid that has a bunch of textfields:
<div data-role="page" id="calculator">
<div data-role="header" data-id="header">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<!-- below is the grid -->
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-c" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1cut" value=""></div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-c" style="height:65px">Onderhoud:<input type="text" name="m1onderhoud" id="m1onderhoud" value=""></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-c" style="height:65px">Aankomen:<input type="text" name="m1bulk" id="m1bulk" value=""></div></div>
</div>
</div><!-- /content -->
<div id="footer" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>Omhoog</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
Now, normally the grid seperates in 3 pieces of 33/33/33 (%), but I changed it too 100% each, so that it would stack on top of each other. I did that with the following css:
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
width:100%;
}
Now, that worked as it should, but the problem I have now is that I want to have a navbar inside the header (as you can see in the code) but it also stacks up and has a width of 100%. When I remove the css for the grid it works perfectly (25/25/25/25) but then again the grid is 33/33/33 instead of 100 each, does anyone know why this css causes this conflict and how to solve it, its weird because I only edit the grid while it affects the navbar aswell?
My question is if you want your divs to fill 100% why bother altering jQuery Mobile's css? You can just do a 3 divs and set width 100%.
I'd suggest you that you revert the css modification you did on jQuery Mobile's css and add custom css for your divs.
Update
I tried your problem in jsfiddle and everything works fine after changing the css too http://jsfiddle.net/jEYNy/
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
width:100%;
}
instead of changing your jQuery Mobile's css, add your changed code as custom css and import it into your code and see how it behaves.
Related
I have always found replies to my questions here even before I asked them. Right now I am facing a problem regarding the responsive adaption of a site I created (www.cichlidae.com) that led me to post this question after several years of just reading.
In my site, when a break-point is reached, a left side menu bar seen in all pages hides. I would like this bar to be displayed over the content on demand, when a mobile device is used. I was able to make the top menu bar adapt responsively to display and the #bar to hide.
For trying to display the left bar menu (with a div labelled “bar”) I used the following CSS code:
#bar {
display:none;
}
#bar ~ .display_bar:focus {
display:block;
}
I set #bar first as that is the order in which the code for #bar loads once the page is loaded (I tried .display_bar:focus ~#bar as well). I created an icon displayed in mobile view to activate the display switch:
<div class=\"display_bar\">Some graphic</div>
I have tried all combinations and browsers, validated CSS and HTML, but the bar just won’t show when the icon is clicked on. I have tried with a single <p> tag with a class name instead of #bar but it ignores it as well. One of the example of pages could be seen in the URL:
http://www.cichlidae.com/index_catalog.php
What could I be doing wrong? I need the left bar to show on demand when in mobile view, preferably just with CSS. Thanks so much for any help you could provide me.
The relevant HTML code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>All cichlid species - Cichlid ..</title>
<link rel="stylesheet" type="text/css" href="design/styles/indexstyle.css" title="Cichlid ...">
...
</head>
<body>
<!-- left frame -->
<div id="bar">
<img src="design/graphics/logos/logo_menu.jpg" width="200" height="165" alt="Cichlid Room Companion"><br><br>
...
<div style="padding-left:10px;">
<h3>Catalog</h3>
Classification<br>
....
</div>
</div>
<!-- right frame -->
<div id="main">
<div id="canvas" style="max-width:800px">
<!-- Menu bar -->
<ul id="menu" class="r-hide">
<li>Home
<div class="dropdown_3columns">
<h2>Welcome ...</h2>
</div>
</li>
</ul>
<div class="r-only">
<div id="r-navigation-menu">
<input type="checkbox" id="r-navigation-button">
<ul class="r-menu-items">
<h2>News</h2>
<li>What's new</li>
....
</ul>
<label for="r-navigation-button" id="r-navigation-label">
<div class="r-drop-icon">
<img src="design/graphics/icons/menu-hamburger.png" class="icon" width="32" height="32" alt="">
...
</div>
</label>
</div>
<div class="display_bar" tabindex="-1"><img src="design/graphics/icons/menu-collapse.png" class="icon" width="32" height="32" alt=""></div>
</div>
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I am working on a site using Zurb Foundation. The content will be rendered differently based on the size of the screen. If the content is being viewed on a phone, the navigation structure will use a off-canvas nav item for example. To demonstrate, here is a fiddle: http://jsfiddle.net/LFUvM/5/.
In my example, you can see that there is
Content Goes Here
My problem is, I don't want to write the actual content three times in my HTML. Some of my content is quite large. Is there a way to a) share the content across all three views b) still use the off-canvas nav option?
THank you!
I made an example using <section role="main"></section> after <a class="exit-off-canvas" href="#"></a>
You can take a look at it here
If it's possible to restructure the HTML a bit you can achieve this with the following setup:
<div class="off-canvas-wrap show-for-small-only">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
</div>
</div>
<div>
<h1 class="show-for-small-only">Phone</h1>
<h1 class="show-for-medium-only">Medium</h1>
<h1 class="show-for-large-only">Large</h1>
Content Goes here
</div>
And here's the working jsFiddle.
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}
I'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.
I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)
Some trivial example:
<header>
<nav>
<ul>
<li> blarg </li>
</ul>
</nav>
</header>
<div id="main" role="main" class="container_12">
....
....
</div>
<footer>
<p>Thanks!</p>
</footer>
Hope this helps.