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>
Related
I need to update one of my pages that contains portraits and bios -to one that has a hover effect with a drop down field that shows the bio. I found code here that does exactly what I need (How to show text on image when hovering?) and I tested it out on another site to make sure it's working correctly. Problem is, when I put it on my page template, all the header and footer coding (color, font, styles, etc.) are overwritten by the code that I've pasted in. I'm not a coder and only know a little bit of the terminology and how it all works (so please be specific with your responses). I am thinking I need the new code to be in some kind of container that keeps the default page/site styles intact but I'm not sure what to put to do that. I'm also not sure if my new hover code is in the right place. The original code on my template is this:
<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->
[[$head-tag]]
<style>
.top {
margin-bottom: -75px;
}
</style>
<body>
[[$gtm]]
<!-- Navigation -->
[[$navigation]]
<!-- PAGE CONTENT -->
<section class="top">
<div class="container">
[[$top-page-info]]
<div class="row body-copy">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
[[*content]]
</div>
</div>
</div><!--end row-->
</div><!--end container-->
</section>
<section class="leaders">
<div class="container">
<div class="row">
[[!getPage?
&elementClass=`modSnippet`
&element=`getResources`
&parents=`14`
&depth=`0`
&pageVarKey=`page`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&showHidden=`1`
&sortby=`{"publishedon":"DESC"}`
&tpl=`LeaderTpl`]]
</div><!--end row-->
</div><!--end container-->
</section>
<!-- PAGE CONTENT END-->
<!-- Footer -->
[[$footer]]
<!-- JS Includes -->
[[$js-includes]]
</body>
</html>
Should I insert the new code in place of the "!getPage?" section (though I'm wondering if deleting some of that is removing code that I need for the default page settings/styles) or should it go below it, just above the line at the end that closes the div and ends the container?
Any help or direction would be greatly appreciated. (And please be specific as I don't really understand all this language.) TIA
It seems as though angular-ui tooltips are easily mangled when used in conjunction with bootstrap's grid. Here is a plunker illustrating the behavior:
http://plnkr.co/edit/gVekao4JCdC5O91RCoiW?p=preview
<!doctype html>
<html ng-app="tooltip_app">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<div class='container'>
<!--Row 1 - bad tooltip -->
<div class="row">
<div class="col-md-2">2 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">bad</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-8">8</div>
</div>
<hr>
<!--Row 2 - good tooltip -->
<div class="row">
<div class="col-md-8">8 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">good</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-2">2</div>
</div>
<hr>
<!--Row 3 - egregious tooltip -->
<div class="row">
<div class="col-md-9">9
<div class="row">
<div class="col-md-2">2 (nested)
<span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">worst</span>
</div>
<div class="col-md-10">10 (nested)</div>
</div>
</div>
<div class="col-md-3">3</div>
</div>
</div> <!--End Container-->
</body>
</html>
Notice how, when the viewport is small, everything works ok, but as you make the viewport more and more wide the tooltips start becoming compressed and misaligned. Is this behavior expected? If so, how can I ensure my tooltips stay aligned with the things they are supposed to be pointing to?
I had this exact same thing happen to me. I would encourage you to double check the bootstrapped portions of your controllers and your CSS for code that is attempting to to align the same elements. By default, these data displaying grids will align things pretty well. Usually bootstrap allows you to place some layout configuration within your controller, AND because we are creatures of habit we will do the same in our CSS. Try to define as much of the layout of the grid as you can within the controller. I checked the documentation and followed the alignment rules to the t, assigning how I wanted everything to look to a variable, $scope.MyDefs and concentrated on definitions within the ui-grid portion of my controller, I could shrink and grow my screen and everything would stay in place. It was a really easy fix that drove me nuts for days on end.
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
Twitter Bootstrap Scaffolding section on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
<div class="span2 well">
Sidebar content
</div>
The Bootstrap docs have an additional style property show-grid that is used to display a background (boxes) on the span* (columns) inside of rows. The CSS looks like this:
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
Demo: http://www.bootply.com/68856
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.