Just have switched to Foundation 4.
I want to put texture background pattern for body and another texture background for container with all elements. Can't find out how to create this one in proper way.
In pure html+css i would create container element. But in Foundation4 it will have 100% width and overlap body background.
<div class="container">
<div class="row">
...
</div>
<div class="row">
...
</div>
</div>
If i add .row class to container i got desired result, but offensive horizontal scroll adds on mobile.
...
How to build this simple layout in F4?
I could style all .row elements, but it will use personal background for every element, which is undesired.
Take a look at the answer I gave about CSS and background elements here: How to use background images in Foundation
Related
I am using the Zurb Foundation framework and am trying to center text.
If I just use the .text-center class:
<h1 class="text-center">My Heading</h1> The text is center.
However, when I place it inside a column, the text is moved slightly to the right:
<div class="row">
<div class="small-2 small-centered columns text-center">
<h1>My Heading</h1>
</div>
</div>
I want to ask what is the correct way of centering the text inside columns?
its should work fine with your code , but if you can provide screenshot to see what do u mean by its move to the right will be nice.
anyway check this solution may work , and the issue could be from additional custom css added if u have one .
CSS :
.row h1 { margin: 0 auto; padding : 0px }
Try this Fiddle
The problem was that the word inside the heading is too long for my mobile device so I added the style property:
word-wrap: break-word;
Not sure if this is the correct way to handle such cases but it is a possible solution.
Foundation 5 provides grid system and I would like to use it to arrange my web page. But the problem is I dont know how to set the height of each column. now it's just as large as the content needs, but it's really ugly.
I've tried the solution Set height with zurb-foundation grid, but it doesnot work. It is a nested grid of 8 columns which is splited into two 6-columns. I just want these two 6-columns to be the same tall but a different background color.
My code is :
<div class="row">
<div class="small-8 columns"> 8
<div class="row" >
<div class="small-6 columns" id="d8">
more and more people want to learn some HTML and CSS.
</div>
<div class="small-6 columns" id="d9">
more and more people want to learn some HTML and CSS. Joining the
designers and programmers are new audiences who need to know
a little bit of code at work (update a content management system
or e-commerce store) and those who want to make their personal
blogs more attractive. Many books teaching HTML and CSS are dry
and only written for those who want to become programmers, which
is why this book takes an entirely new approach. </div>
</div>
</div>
</div>
</div>
and the JS from the link is:
<script>
$(window).load(function()({
//equalize function
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
//call the equalize height function
equalHeight($("div.small-6"));
});
</script>
In fact it is easy to set the height. Finally I use
.div[id]
{
height:85px !important;
}
and it works.
I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!
Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html
Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg
You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.
You can try this solution. First you need to have a layout something like this:
<div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>
And then have this script to move the first image on top:
$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
I am using Twitter Bootstrap's modals throughout a web application. I am also using Mustache templates to generate the information to display inside the modals. The problem is that I find myself creating new modals for nearly every single form that is rendered to the screen and I feel that this violates DRY. I am considering creating a global modal object that is defined in the 'window' object and can be accessed throughout my application. When I want to display a new form I just render the form into the global modal object and then show it. Can anyone give me some advice on how to better handle numerous forms with modals?
I think you have the right idea. If you have a lot of modals, creating new ones can get repetitive. I've done something similar to what you proposed: create a single modal object that can be reused for a variety of modals.
In the past I used jQuery dialog, but the principle is entirely the same. Create a JavaScript module with some boilerplate HTML, that you can use to display any number of forms (essentially HTML content).
I'll try to propose a very basic implementation without knowing too much about your application.
HTML based from the Bootstrap example here:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dynamicHeader">
<!-- Our header will go here -->
</h3>
</div>
<div class="modal-body" id="dynamicBody">
<!-- Our body will go here -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Notice the unique id's I've added to the h3 and the div.modal-body. We'll use those in JavaScript to dynamically inject each form's title and content.
JavaScript:
var ModalManager = (function() {
// cache some DOM references
var $dynamicHeader = $('#dynamicHeader');
var $dynamicBody = $('#dynamicBody');
var $myModal = $('#myModal');
var launch = function(header, body) {
$dynamicHeader.html(header);
$dynamicBody.html(body);
$myModal.modal(/* options here */);
};
return {
launch: launch
/* expose more API methods here! */
};
}());
Here is an example usage!
HTML w/ JavaScript:
<div id="form1">
<div class="formHeader">
Form One
</div>
<div class="formBody">
<p>Html and stuff</p>
</div>
</div>
<script type="text/javascript">
// Using a closure to protect globals
// This would probably go in your click handler to launch a given modal
(function() {
var headerHtml = $('form1 .formHeader').html();
var bodyHtml = $('form1 .formBody').html();
ModalManager.launch(headerHtml, bodyHtml );
}());
</script>
Finally, I wrapped all of that up in a jsFiddle which demonstrates the ability to launch two different forms.
Link: jsFiddle
I used jQuery as it should be included with the Bootstrap code for the modal. It will pull out the header and body HTML that are specific to each form, and populate your common modal HTML in the DOM. Then when you launch the modal it will display what looks like a different modal, but you've centralized the common aspects so you're not repeating them anymore!
There's a lot more you can do but that's basically the gist. My own implementation exposed means to configure the buttons dynamically, for example. Depending on what you want configurable, you can add an options parameter that passes on to the modal() function, or has other properties specific to your application that ModalManager can handle. You can definitely use templating to carry out some of these features, it's just not essential to the example I've setup.
I hope that helps!
I'm not quite sure what you are asking. Mustache does have looping functionality, so you could pass in an array of modals, and Mustache should generate all of the code.
I actually just created a video showing how to build a Mustache template for Twitter Bootstrap's Alert component, and implement it via PHP and JavaScript. It also features the looping functionality I spoke of. Maybe that will help? Here is the link: http://mikemclin.net/mustache-templates-for-php-and-javascript/
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.