Consider I've a sample layout in bootstrap 3:
<div class="row">
<div class="col-md-6">
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
</div>
<div class="col-md-6">
<img class="main-img" src="some/link.jpg" style="width: 100%; height: auto" />
</div>
</div>
How can I make images with filler class to auto-scale to gain the same height as the image with main-img class.
I want to reach the following effect:
________ ____________
|.filler | |
|________|auto-scale |
|.filler |width: 100% |
|________|____________|
Is that event possible only with css?
EDIT:
I meant a height not, width (my bad);
Basically you didn't pay enough attention to the Bootstrap HTML markup which is quite important for it to remain "smart" and responsive.
.filler,
.main-img {
width: 100%;
height: auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid">
<div class="col-md-6">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-md-6">
<img class="main-img" src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" />
</div>
After the lil' talk we had in the comments, decided to back what i said with some code. Done with jQuery, as it was faster (for me). If you don't already have jQuery in your project, you should probably rewrite it in javascript. Not fully tested, but I don't see any reason why it shouldn't work cross-browser, cross-platforms:
document.initPictures = function() {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
'display': 'flex',
'flex-direction': 'column',
'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
$(this).remove();
})
};
document.resizePictures = function() {
if ($('#theContainer').outerWidth() > 768) {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height()
});
} else {
$('.resizeMe').css({
'height': $('.resizeMe').outerWidth()
});
}
};
$(window).resize(function() {
document.resizePictures();
});
document.initPictures();
.main-img {
width: 100%;
height: auto
}
#theContainer {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid" id="theContainer">
<div class="col-sm-6 resizeMe">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-sm-6">
<img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
</div>
NOTE: if anyone could explain to me why $('#theContainer .col-sm-6').eq(1).height() is 6px smaller at page load than afterwards, I'd be really happy.
Related
I'm new to react and fairly new to programming in general.
I'm using react and want a box to expand on click while the 3 other boxes hide simultaneously. Right now I've just gotten it to add a class of 'hidee' (named that way because 'hide' is actually a feature) on click and send an alert.
Wanting the expanded area to be almost full window size as it will house content.. and then would add a nav bar to the top of that. Below is the concept and my current code is in a sandbox below that.
Here's my code so far for this component and corresponding css and html. Code Sandbox
import React, { Component } from 'react';
// onclick= (this.expand)
//outside of render:
// expand =(e) => {
// e.target (targets the one they clicked on)
// hide every other element of the class add a class to e.target to increase width and height
// add div to top with nav
// }
class AdminPanel extends Component {
constructor(){
super();
}
expand = (event) => {
event.preventDefault();
var elements = document.querySelectorAll('.title');
debugger;
for (var i=0; i<elements.length; i++){
elements[i].classList.add('hidee');
//hide everything except the one we clicked on
//if event.target != elements[i] then add a class of hidee
//add a class to event.target called expand
//make a css file and put in hidee and expand classes and put the css in
//import that css file at the top of this file
}
alert('hi');
}
render(){
return (
<div class="box">
<div class="container">
<div class="row">
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Thought Archives</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Create New</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span><h2>Your Community</h2></span>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default AdminPanel;
/* css for AdminPanel.js*/
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
body{
background: #f2f2f2;
font-family: 'Josefin Sans', sans-serif;
}
h3{
font-family: 'Josefin Sans', sans-serif;
}
.box{
padding:60px 0px;
}
.card-img-top {
height: 100px;
width: 30%;
}
.box-part{
background:#FFF;
border-radius:10px;
padding:60px 10px;
margin:30px 0px;
}
.box-part:hover{
background:#4183D7;
}
.box-part:hover .fa ,
.box-part:hover .title ,
.box-part:hover .text ,
.box-part:hover a{
color:#FFF;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.text{
margin:20px 0px;
}
.fa{
color:#4183D7;
}
/* end css for adminPanel.js*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Update the state of the component in the expand function using setState, When the state changes to true, the render method gets the new state.
constructor(){
super();
this.expand = this.expand.bind(this);
this.state = {
hide: !this.state.hide
};
}
expand = (event) => {
event.preventDefault();
this.setState({
hide: true
});
alert('hi');
}
{ this.state.hide ?
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
: null }
if I were your, I'd definitely split the div's with the class of title into a separate component and have an initial data with everything each div needs.
If you make that, then you just have to loop through your source of data and render the elements your them to be rendered. As a result, you can show/hide the navbar.
I've created a sandbox in which you can see how to control the state of your component and render whatever you want accordingly.
Assume that each div is called card
Hope that could help!
You can do it easily as below :
class AdminPanel extends React.Component {
state = {
//Create sections obj in state to maintain your section's class
sections : {
thoughtArchives: {
key: 1,
class: 'hidee',
//add extra data if you want for further use
},
incomingRequests: {
key: 2,
class: 'hidee'
},
createNew: {
key: 3,
class: 'hidee'
},
yourCommunity: {
key: 4,
class: 'hidee'
}
}
}
constructor(props) {
super(props);
}
expand = (sectionKey) => {
//get the prevState
this.setState(prevState => {
//if key matches with section to expand add expand class or add hidee class
for (let k in prevState.sections) {
prevState.sections[k].class = prevState.sections[k].key === sectionKey ? 'expand' : 'hidee'
}
//return sections to update state
return prevState
})
}
render() {
let {sections} = this.state;
return (<div className="box">
<div className="container">
<div className="row">
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
{/* Append expand/hidee class & attach onCLick listener and pass key of section to expand function*/}
<div className={"title " + sections.thoughtArchives.class} onClick={this.expand.bind(this, sections.thoughtArchives.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Thought Archives</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.incomingRequests.class} onClick={this.expand.bind(this, sections.incomingRequests.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Incoming Requests</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.createNew.class} onClick={this.expand.bind(this, sections.createNew.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Create New</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.yourCommunity.class} onClick={this.expand.bind(this, sections.yourCommunity.key)}>
<img className="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Your Community</h2>
</span>
</div>
</div>
</div>
</div>
</div>
</div>)
}
}
export default AdminPanel;
I'm trying to center a form on the screen using Materialize. I tried everything, but I can not do it for all resolutions and also be responsive. In certain resolutions it works perfect, but when you add or remove controls (), in some resolutions it looks good, in others it goes wrong. Some help? Thank you!
Code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.card {
margin: 1rem 0 1rem 0 !important;
}
.card .card-title {
background-color: #26a69a;
}
.card-title span {
display: block;
text-align: center;
padding: 5px;
}
.card-content {
padding: 30px;
}
.valign {
width: 100%;
}
.valign-wrapper {
width: 100%;
background: url("http://vunature.com/wp-content/uploads/2016/10/trees-woods-tree-nature-path-forest-landscape-amazing-pictures-of-wallpapers.jpg") no-repeat;
}
.circle {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<header class="navbar-fixed">
<nav class="top-nav">
<div class="nav-wrapper grey darken-3">
<a class="brand-logo center" href="#">Logo</a>
<ul class="right">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</nav>
</header>
<div class="valign-wrapper">
<div class="valign">
<div class="container">
<div class="card">
<div class="card-title white-text">
<span>Register</span>
</div>
<div class="card-content">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text
</p>
<form action="#" enctype="multipart/form-data" id="externalRegisterForm" method="post" novalidate="novalidate">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none" />
</ul>
</div>
<div>
<section style="position: absolute; left: 50%; transform: translateX(-50%); display: none;">
<input type="submit" class="btn" value="Sign In">
<input type="submit" class="btn" value="x">
</section>
<img class="circle" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" width="128" height="128" alt="">
</div>
<div class="row">
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre de usuario es obligatorio." id="UserName" name="UserName" type="text" />
<label for="UserName" class="active">Username</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre(s) es obligatorio." id="Name" name="Name" type="text" />
<label for="Name" class="active">Name</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Apellido(s) es obligatorio." id="LastName" name="LastName" type="text" />
<label for="LastName" class="active">Last name</label>
</div>
<div class="input-field col s12">
<input class="validate" data-val="true" data-val-required="El campo Email es obligatorio." id="Email" name="Email" type="text" />
<label for="Email" class="active">Email</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In" form="externalRegisterForm" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<script type="text/javascript">
$(function() {
$('.button-collapse').sideNav();
});
</script>
</body>
</html>
EDIT
https://image.ibb.co/h7ESBk/1.jpg
See the white line below. It is a resolution of 1366x768. If you add more input, it looks "normal" and responsive. But if you delete an input you can see how the white background is larger.
Based on the feedback you gave in the comments, I think all you need is to add min-height: calc(100vh - 64px); to .valign-wrapper.
That will fill the whole page. You may have to modify the background property as well to make sure the image fills up the whole element, I couldn't load the image so I couldn't test that. The vertical alignment is already working.
Before:
After:
These UI libraries have been offering a 'grid' solution to this for some time now. However, I find vanilla CSS flexbox (whether hard coded or scripted with JS in the browser) to be super easy for centering both ways.
As for breakpoints, you will need them. I went thru all this on this here project https://github.com/rhroyston/firebase-v4-auth. Feel free to copy& paste as you need. Snippet below.
//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
//IT'S A DESKTOP
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
//IT'S A TABLET
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
// assuming device is a phone
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (window.innerWidth >= 840) {
//device is a desktop
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (window.innerWidth >= 480) {
//device is a tablet
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
}
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
starting to build angular-meteor app
added urigo:angular-meteor
added urigo:angular-ui-router
created routes:
angular.module("app").config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'client/views/index.ng.html',
controller: 'DropDownCtrl'
});
$urlRouterProvider.otherwise("/home");
}]);
created index.ng.html:
<html>
<head>
<title>hello</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/ej.widgets.all.min.css" rel="stylesheet" />
<link href="../css/default.css" rel="stylesheet" />
<link href="../css/default-responsive.css" rel="stylesheet" />
<link href="../css/responsive-css/ej.responsive.css" rel="stylesheet" />
<script src="../js/jsrender.min.js"></script>
<script src="../js/jquery.globalize.min.js"></script>
<script src="../js/jsondata.min.js"></script>
<script src="../js/ej.web.all.min.js"></script>
<script src="../js/jsondata.min.js"></script>
<script src="http://cdn.syncfusion.com/12.2/js/ej.widget.angular.min.js"></script>
<!--<script src="client/js//properties.js" type="text/javascript"></script>-->
</head>
<body ng-app="app">
<div ng-controller="DropDownCtrl">
<h1>Welcome to Meteor!</h1>
<div class="row">
<div class="cols-sample-area">
<div class="frame" style="width: 50%; height: 27px">
<span>Select a section</span>
<div>
<div id="control" style="float: left; width: 45%">
<input id="bookSelect" ej-dropdownlist e-datasource="dataList" e-value="value" />
<h6><span style="font-style: italic; font-weight: normal; position: absolute; margin-top: 4px;">Note:Two Way Angular Support</span></h6>
</div>
</div>
<div id="binding" style="float: right; margin: auto; width: 45%">
<input type="text" id="dropValue" class="input ejinputtext" ng-model="value" />
</div>
</div>
</div>
</div>
}
</div>
<style type="text/css" class="cssStyles">
.control {
margin-left: 20px;
}
.ctrllabel {
padding-bottom: 3px;
}
#dropValue {
text-indent: 10px;
}
#control #bookSelect_input_wrapper {
width: 70%;
}
.input {
height: 26px;
text-indent: 10px;
width: 67%;
}
</style>
</body>
</html>
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="cols-sample-area">-->
<!--<div id="Grid" ej-grid e-datasource="obj" e-selectedrowindex="selectedRow"-->
<!--e-allowgrouping="true" e-pagesettings-pagesize="4" e-pagesettings-currentpage="page"-->
<!--e-allowsorting="true" e-allowpaging="true" e-actionbegin="actionBegin">-->
<!--<div e-columns>-->
<!--<div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>-->
<!--<div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>-->
<!--<div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div>-->
<!--<div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div>-->
<!--<div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div>-->
<!--<div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div id="sampleProperties">-->
<!--<div class="prop-grid">-->
<!--<div class="row">-->
<!--<div class="col-md-3">-->
<!--Selected Row-->
<!--</div>-->
<!--<div class="col-md-3">-->
<!--<input type="text" id="selectedRow" name="name" class="e-ejinputtext" value="" ej-numerictextbox e-value="selectedRow" e-maxvalue="3" e-minValue ="-1" e-width="100px" />-->
<!--</div>-->
<!--</div>-->
<!--<div class="row">-->
<!--<div class="col-md-3">-->
<!--Current Page-->
<!--</div>-->
<!--<div class="col-md-3">-->
<!--<input type="text" name="name" class="e-ejinputtext" value="" ej-numerictextbox e-value="page" e-maxvalue="4" e-minValue ="1" e-width="100px" />-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
When loaded, browser console shows no errors, however, absolutely nothing shows up on the page.
When viewing the page source, I see all libraries being loaded, but the document body has nothing in it.
The main angular module - app.js is located under client/lib, and is being loaded properly.
Here is its content:
angular.module('app',['angular-meteor','ui.router',
'ejangular']);
What can I ajust to have the contents of index.ng.html show up on the page?
try to rename index.ng.html to index.html. I think I had the same problem and that was the solution.
Another option is to fork the tutorial project: https://github.com/Urigo/meteor-angular-socially , and use this as a skeleton for your application.
I think the best way to do angular-meteor is now to use the npm modules. It has the benefit of not needing to rely on Urigo for angular updates.
Remove the angular packages,
meteor npm install --save angular
meteor npm install --save angular-meteor
meteor npm install --save angular-ui-router
This is the code I use at the top of the controller:
'use strict';
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
As #oshai said, rename *.ng.html to be just *.html as well
I've created a scrollable pop-up that uses a jQuery plugin to hold the buttons in place at the top of the window as a user scrolls. This works except for one small problem...the white background that I have placed on the div containing the buttons (in order to prevent seeing the content scrolling beneath the buttons) is extending beyond the right edge of the pop-up. I've tried this in both Chrome and Firefox and they both do the same thing. Is there a CSS solution to this problem?
Here's my fiddle - http://jsfiddle.net/donnapep/NhmvH/2/
HTML
<div class="overlay"></div>
<div class="wrapper container modal-content">
<div>
<h1>Weather Settings</h1>
<div class="sticky-wrapper">
<div class="btn-toolbar sticky-buttons">
<button id="save" class="btn btn-primary" type="button">Save</button>
<button id="cancel" class="btn btn-primary" type="button">Cancel</button>
<button id="help" class="btn btn-primary" type="button">Help</button>
</div>
</div>
</div>
<form role="form">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="layout">Layout</label>
<div class="radio">
<input type="radio" name="layout" value="current" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/three-day.html">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="current-and-three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current-and-three-day.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-horizontal.png" class="img-thumbnail">
</div>
</div>
</div>
</div>
</form>
CSS
.overlay {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.wrapper {
z-index: 2;
width: 90%;
height: 500px;
margin: 20px auto 0;
overflow: auto;
}
.sticky-buttons {
z-index: 10;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #fff;
}
Javascript
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Thx.
http://jsfiddle.net/4eAeA/
Looking at the docs for that plugin you can use getWidthFrom as an option argument.
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21,
getWidthFrom : $(".wrapper")
});
});
#donnapep, a downside I saw from that plugin is that it does not keep the width in check on resize.
You will also need something like this :
var _stickybuttons = $(".sticky-buttons");
$(window).resize(function () {
_stickybuttons.sticky('update');
});
I changed your jquery to:
$(document).ready(function () {
$(".sticky-wrapper").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Some position:absolute; to
.wrapper.container.modal-content
so that it does not extend to the right
and
width:100%;
z-index:20;
in .sticky-wrapper
Fiddle:
http://jsfiddle.net/NhmvH/9/
It moves to left now but you get the idea.
Dont know if by changing your plugin its easier but anyway I hope it helps a bit.
Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:
(source: gyazo.com)
But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:
(source: gyazo.com)
What is causing that? very interesting..
I am using twitter bootstrap framework.
Code:
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
</div>
</div>
<br />
</body>
CSS
.name-col {
color: #d3d3d3;
}
.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}
.field2 {
margin-top: 50px;
}
.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}
.tag_webdesign {
background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}
.work1 {
float: left;
}
Live preview:
http://justxp.plutohost.net/themetheory/portfolio.html
What is causing that problem?
Thanks
Add this rule to your CSS
.field1 {
margin-bottom: 30px;
overflow: hidden;
}
This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.
Find the end </div> that pairs with the <div class="works">
Add above that end </div>:
<div style="clear:both"></div>
Should look like this.................
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
</div>
</div>
<br />
</body>
What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054
In essence, add this to your CSS:
/* For modern browsers */
.field1:before,
.field1:after {
content:"";
display:table;
}
.field1:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
zoom:1;
}
If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.