http://jsfiddle.net/manking/6wd5fg74/
Trying to use the data set from a fullcalendar to open modal window with an external link. Just pops up a blank modal window. I am sure that I am not coding the script just right .
I want to have a list of external links that can use the same json data in the fullcalendar and open the modal window.
<div class="menu">
Example
<a class="fc-day-grid-event fc-event fc-start fc-end fc-draggable" href="load_page.cfm?method=get-page-content&page=12" data-toggle="modal" id="0DE2162E-155D-6942-02BED53F1B281FE2"><div class="fc-content"><span class="fc-time">8a</span> <span class="fc-title">My Birthday</span></div></a></div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true,
events: [{
"id": "0DE2162E-155D-6942-02BED53F1B281FE2",
"url": "load_page.cfm?method=get-page-content&page=10",
"title": "test",
"description": "<p><span style=\"color:rgb(0, 0, 0); font-family:arial,helvetica,sans; font-size:11px; line-height:14px; text-align:justify\">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></p>",
"start": "2015-05-19T08:00",
"end": "2015-05-19T08:59",
"allday": false
},{
"id": "0A2C0875-155D-6942-02D0F17291318096",
"url": "load_page.cfm?method=get-page-content&page=12",
"title": "My Birthday",
"description": ",<p>Happy Birthday</p>",
"start": "2015-05-13T08:00",
"end": "2015-05-13T08:59",
"allday": false
}],
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
return false;
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
});
jQuery( 'div.menu a' )
.click( function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
return false;
});
});//]]>
</script>
<div class="menu">
Example
<a class="fc-day-grid-event fc-event fc-start fc-end fc-draggable" href="load_page.cfm?method=get-page-content&page=12" data-toggle="modal" id="0DE2162E-155D-6942-02BED53F1B281FE2"><div class="fc-content"><span class="fc-time">8a</span> <span class="fc-title">My Birthday</span></div></a></div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
</div>
</div>
</div>
</div>
<div id='calendar'></div>
See http://fiddle.jshell.net/manking/6wd5fg74/ for code answer. This is how to use external links and in calendar links to access modal window.
Related
I am building a page with fixed Navigation bar and Footer (for log information). Both the content and the Footer can scroll if needed. Thanks to some thinkering and all who answered my previous question I managed to create the code at the end of the question (with Bootstrap 4 and jQuery).
The problem I see is that the footer still shrinks if I resize the textarea by hand. I'd expect to see a scrollbar appear on the main content, but not the footer to shrink.
I've also added a couple of lines on the main content and noticed that it overflows (the text goes out the beige part. If I resize the textarea it goes back inside (that is, the text has the beige background again).
What am I doing wrong?
JFiddle here: Fiddle
See previous question here:enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
footer {
background: lightgreen;
height: 100px;
}
textarea {
height: calc(100% - 147px);
}
</style>
</head>
<body>
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-0 bg-primary">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown-item-template" href="/">Editor</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col">
<div class="row h-100">
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
<div class="row">
Execute external commands:<br />
<button id="testbtn" class="btn btn-primary">TEST</button>
<button id="btnclear" class="btn btn-primary">Clear Console</button>
</div>
<div class="row flex-grow-1" style="background-color: beige;">
<textarea class="w-100">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?</textarea>
ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />
</div>
</div>
<div class="col-2">
<div class="row">
<li>
<ul>aa</ul>>
<ul>aa</ul>>
</li>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid overflow-auto">
<div class="row">
<div id="data" class="col p-1">test<br/>to<br/> fill<br/> the<br/> console<br/> log<br/></div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"
integrity="sha512-8vfyGnaOX2EeMypNMptU+MwwK206Jk1I/tMQV4NkhOz+W8glENoMhGyU6n/6VgQUhQcJH8NqQgHhMtZjJJBv3A=="
crossorigin="anonymous"></script>
</body>
</html>
If you resize one flex element, the others also resizes. To prevent resizing the footer add the classes "flex-shrink-0" and "flex-grow-0" and set the flex-basis of the footer to 100px.
<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
footer {
background: lightgreen;
height: 100px;
flex-basis: 100px;
}
to make the overflowing part beige you can replace
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
and
<div class="row flex-grow-1" style="background-color: beige;">
with
<div class="col-10 d-flex flex-column" style="background-color: bisque; position: absolute;">
and
<div class="row flex-grow-1" style="background-color: beige; position: relative;">
footer {
background: lightgreen;
min-height: 4rem;
max-height: 4rem;
}
it will work fine :)
Here is the codepen : https://codepen.io/VincentBlouin/pen/zVJbaR
You can see that the nodes at the left like "1.2 left" start to wrap but they should only do so at their ".child-label" max-width:500px. I don't know why but most importantly, how to prevent it. If you remove some of the long lorem ipsum text (it's contenteditable) you'll see that the left bubbles like "1.2" get back their normal shape.
The code uses Vue.js, Vuetify.js and Material Design because it's easier for me but I think the problem is more related to flex css.
Thank you.
Vue.use(Vuetify)
let Child = {
name:'child',
props: ["child", "direction"],
data: function () {
return {
count: 0,
isLeft: null
}
},
mounted:function(){
this.isLeft = this.direction === "left";
},
template: '#child-template'
};
let tree = new Vue({
el: '#tree',
components:{
'child': Child
},
data: {
root : {
label: 'center',
isRoot: true,
leftChildren:[
{
label:'1 left',
children:[
{
label: '1.1 left'
},
{
label:'1.2 left',
children: [{
label: '1.2.1 left',
children:[{
label:'1.2.1.1 left'
},
{
label:'1.2.1.2 left',
children:[{
label:"left 1.2.1.2.1 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus"
,children:[{
label:"1.2.1.2.1.0 left"
},{
label:"1.2.1.2.1.1 left At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus",
children:[{
label:'1.2.1.2.1.1.1 left At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus'
},{
label: '1.2.1.2.1.1.2 left'
}]
},{
label:'1.2.1.2.1.2 left'
},{
label:'1.2.1.2.1.3 left'
}]}]
},
{
label:'1.2.1.3 left'
}]
}]
},{
label:'1.3 left'
}]
}],
children:[
{
label:'1 right'
},
{
label:'2 right',
children:[
{
label:"2.1 right"
},
{
label:"2.2 right little bit larger"
}
]
}
]
}
}
});
#tree {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.child-label{
max-width:500px;
}
.vh-center {
display: flex;
align-items: center;
justify-content: center;
}
.v-center {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.16/vuetify.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.16/vuetify.min.js"></script>
<div id="tree" class="vh-center">
<v-layout row class="vh-center ma-5 pa-5">
<v-flex grow class="left-branch">
<v-layout row class="vh-center" v-for="child in root.leftChildren">
<v-flex grow>
<Child :child="child" direction="left"></Child>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow class="vh-center">
<Child :child="root" direction="center"></Child>
</v-flex>
<v-flex grow class="right-branch">
<v-layout v-for="child in root.children">
<v-flex grow>
<Child :child="child" direction="right"></Child>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</div>
<script type="text/x-template" id="child-template">
<v-layout row class='child-container'>
<v-flex class="flex-child-container" :class="{
'v-center': !child.isRoot,
'vh-center' : child.isRoot
}">
<v-spacer v-if="isLeft"></v-spacer>
<div>
<child :child="grandChild" :direction="direction" v-for="grandChild in child.children" v-if="isLeft && child.children && !child.isRoot"></child>
</div>
<div :class="{
'vh-center':child.isRoot, 'v-center' :!child.isRoot,
'left':!isLeft && !child.isRoot,
'pl-2': 'isLeft',
'pr-2': '!isLeft',
'left':!isLeft && !child.isRoot
}">
<div class="child">
<div contenteditable="true" class="pt-1 pb-1 child-label" :class="{'font-weight-bold':child.isRoot}">
{{child.label}}
</div>
</div>
</div>
<div>
<child :child="grandChild" :diection="direction" v-for="grandChild in child.children" v-if="!isLeft && child.children && !child.isRoot"></child>
</div>
</v-flex>
</v-layout>
</script>
I don't know if I get exactly what you need, but I assume you don't want the text "1.2.1.2 left" to break in two lines. Try to apply "white-space: nowrap" to them and see if it helps (:
I'm trying to create a layout like this:
http://jsfiddle.net/LLbnhb9v/
Basically, A and C are sidebar items, and B is the main content:
My markup is as follows:
<div class="container">
<div class="col-sm-2">
A
</div>
<div class="col-sm-8">
B
</div>
<div class="col-sm-2">
C
</div>
</div>
This works for the mobile, but on the desktop C is positioned below B. How can I make B (the main content) "span" across multiple rows without any insane css tricks?
You need to have the pink section have the pull-right class and the green section to have a clearfix class.
http://jsfiddle.net/LLbnhb9v/19/
<div class="container">
<div class="col-sm-2">
<div class="x a">
short<br>text
</div>
</div>
<div class="col-sm-10 pull-right">
<div class="x b">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="x c">
short<br>text
<div>
</div>
</div>
I also changed the layout a little bit. The first level of divs should only worry about layout. If you add padding and margins and stuff then they can have some issues and not work as expected. I moved the a b c and x classes onto sub elements.
on this page, i'm trying to set a header image and then have the products sit below it, even as you re size the screen.
i have the image positioned how i want it but right now I'm using a margin to have the products sit below it. how would it make it more flexible and dynamic?
#collection-alternate #main {
margin-top: 580px;
}
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 500px;
height: 100%;
top: 0;
left: 0;
margin-top: -100px;
z-index: -1000000;
the goal is to get the positioning like this at all window sizes
For doing something like this, you must never use position: absolute. So, make sure you use some kind of responsive grid system too. For now, you can have this starting level code, coded using Bootstrap.
Snippet
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 235
}
});
/* activate scrollspy menu */
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
/*
A Bootstrap 3.1 affix sidebar template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
body {
padding-top:50px;
}
#masthead {
min-height:250px;
}
#masthead h1 {
font-size: 30px;
line-height: 1;
padding-top:20px;
}
#masthead .well {
margin-top:8%;
}
#media screen and (min-width: 768px) {
#masthead h1 {
font-size: 50px;
}
}
.navbar-bright {
background-color:#111155;
color:#fff;
}
.affix-top,.affix{
position: static;
}
#media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
}
#sidebar li.active {
border:0 #eee solid;
border-right-width:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootply
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Get Started
</li>
<li>
Edit
</li>
<li>
Visualize
</li>
<li>
Prototype
</li>
</ul>
</nav>
</div>
</nav>
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>Bootstrap Sidebar
<p class="lead">With Affix and Scrollspy</p>
</h1>
</div>
<div class="col-md-5">
<div class="well well-lg">
<div class="row">
<div class="col-sm-6">
<img src="//placehold.it/180x100" class="img-responsive">
</div>
<div class="col-sm-6">
Some text here
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
</div><!--/masthead-->
<!--main-->
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>Section 0</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div><!--/left-->
<!--right-->
<div class="col-md-9">
<h2 id="sec0">Content</h2>
<p>
At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.</p>
<hr>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!</p>
<h2 id="sec1">Content</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
</div>
<hr>
<h2 id="sec2">Section 2</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
</p>
<div class="row">
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
</div>
<hr>
<h2 id="sec3">Section 3</h2>
<p>
Images are responsive sed #mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut..</p>
<p>
Fos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut..</p>
<h2 id="sec4">Section 4</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.</p>
<hr>
<h4>Edit on Bootply</h4>
<hr>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
Try to use the above snippet both here and full screen and see how you can modify it.
You can use the #media rule for every device's size, for example:
#media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait) {
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 500px;
height: 100%;
top: 0;
left: 0;
margin-top: -100px;
z-index: -1000000;
}
}
#media screen and (max-width:1050px), screen and (max-device-width:1050px) {
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 400px;
height: 100%;
top: 0;
left: 0;
margin-top: -80px;
z-index: -2000000;
}
}
With this you can handle all the devices !
I am bit skeptical about your approach, because this can be achieved with simple layout design, but still there is a way to achieve this, what comes to my mind first is to use vh(viewport height) unit for the margin you are using, this will adapt as per viewport height.
ex:
#collection-alternate #main {
margin-top: 60vh;
}
This is like 60% of viewport height. Along with that you need to take care of header image adjustment, with css properties like background-size to cover or contain, or better use media queries.
For some odd reason when I create a new page with Visual Composer my content doesn't align at all, however when I edit an existing page that came with a template It does. Video Demonstration:
https://www.youtube.com/watch?v=Z1LFcmUs1tg
Your page has the following markup:
<div class="no-container stripe-video-content">
<div class="vc_col-sm-8 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left underline " style="color: #666666">
About Us </h3>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left " style="color: #666666">
Stuff we do best </h3>
<div class="vc_progress_bar wpb_content_element default small"><div class="vc_single_bar bar_grey"><small class="vc_label">Development</small><span style="width: 90%;" class="vc_bar" data-percentage-value="90" data-value="90"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Design</small><span style="width: 80%;" class="vc_bar" data-percentage-value="80" data-value="80"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Marketing</small><span style="width: 70%;" class="vc_bar" data-percentage-value="70" data-value="70"></span></div></div>
</div>
</div>
</div>
which was apparently written by Visual Composer. The problem is coming from the class on the enclosing div: no-container which isn't sufficient to trigger Bootstrap to take care of the responsiveness. Therefore, if you can't figure out how to use VC (I don't use it) to create a div with .container, then you can use jQuery to remove the .no-container and add .container.
That code would be:
<script>
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});
</script>
You would add that code to bottom of the WYSIWYG, in text mode, on the page in question. Bear in mind, however, that if there are any other divs on that page with the same class .no-container, that they will also be affected and that the div you're targeting may then have other layout abberations within it if you add other content and/or elements. When I used my inspector to apply the class, it did come out perfect though.
Also, please be aware that it's best practice to include your scripts by linking to external files. While you may be able to get away with not doing it in this case, if you want to and have the ability to FTP into the site, the code that goes in the WYSIWYG would look like:
<script type="text/javascript" src="{the_file_path}/mycustomscript.js"></script>
where {the_file_path} points to wherever you upload the file. And finally the code in the file would look like this:
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});