I am trying to draw two google treemaps and keep them in tabs and am getting the error:
A negative value for svg attribute <width> is not allowed
Only one of the treemaps is visible. I am assuming the other one is not able to finish drawing. There is no other description of the error in the console. (Google chrome).
My code:
http://jsfiddle.net/tTqjr/
Solved the problem. The div element on which Google Annotated timeline was being created had display:none property. Just made sure that display:none is changed to display:block before calling the draw function.
Appreciate this wasn't the OP's issue, but I had the same error, and setting display: block; didn't make any difference for me, but I had padding-top: 50px; on the div for the chart, and removing that resolved the issue for me!
I wrapped my two divs in a boostrap row/col pair to solve and togglke them with hide()/show()/toggle() buttons.
From
<div class="row">
<div class="col-md-12" id="chart_div">
</div>
</div>
<div class="row">
<div class="col-md-12" id="chart_div2">
</div>
</div>
to:
<div class="row">
<div class="col-md-12">
<div id="chart_div">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div2">
</div>
</div>
</div>
Related
I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.
How bootstrap normally does it:
How I want it:
The number columns is dynamic so it can exceed 20 for example and be a uneven number.
Code:
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie#iteration} (normally there is more code in here)
</div>
{/foreach}
</div>
I have tried:
order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not.
Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.
If you can't change the markup structure there's no simple way.
One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...
#media(min-width:768px) {
.mh {
flex-direction: column;
max-height:140px;
}
}
Another option is to use CSS columns which order from top to bottom instead of left to right.
.row.columns {
column-count: 2;
column-gap: .1rem;
display:block;
}
.columns > .col-md-6 {
display: inline-block;
width: 100%;
max-width: 100%;
}
The last option is to use flexbox ordering for the specific positions...
<div class="row">
<div class="col-md-6 order-1">
<div class="border p-1">1</div>
</div>
<div class="col-md-6 order-3">
<div class="border p-1">2</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">3</div>
</div>
<div class="col-md-6 order-7">
<div class="border p-1">4</div>
</div>
<div class="col-md-6 order-2">
<div class="border p-1">5</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">6</div>
</div>
<div class="col-md-6 order-4">
<div class="border p-1">7</div>
</div>
<div class="col-md-6 order-8">
<div class="border p-1">8</div>
</div>
</div>
Demo: https://www.codeply.com/go/IczuqP9l7K
I want to make my theme show the photoset like it does with normal photos, but one under another.
I'm using this theme right now http://theme-neptune.tumblr.com/
And this is the code for the Photoset block
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{Photoset-250}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
Im totally new to all this, I need help.
Photoset Photos
You can loop through the photos in a photoset using {block:Photos}:
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-250}">
{/block:Photos}
{/block:Photoset}
This will output each photo as an img element. Below is the markup for the OP's question:
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{block:Photos}
<img src="{PhotoURL-250}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:Photos}
<img src="{PhotoURL-500}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>
No Java errors, Masonry is working, Infinite Scroll is activated in the theme, but don't know why it is not working:
http://prendaoffline.tumblr.com
Any tips?
Your div#pagination must be out of your div#content, like this
<div id="content" class="masonry">
<div class="posts masonry-brick">...</div>
<div class="posts masonry-brick">...</div>
<div class="posts masonry-brick">...</div>
...
</div>
<div id="pagination">
<div id="nextPage"></div>
</div>
It's not necessary the "ยป", keep it empty.
If you have your JS correctly this HTML code should work
I am trying to arrange several dynamically multi-sized DIVs to fit in a container. As per members advice here in stackoverflow, I am trying to get the benefit of jquery masonry to get my job done. But I have problem as described below.
Is their any special tricks when using jquery masonry to solve this problem? I read their documentation, but I surely missed something.
If anybody can help, it'll be highly appreciated.
HTML CODE:
<div class="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
JQUERY MASONRY:
$(function() {
$(window).load(function(){
$('#blockscont').masonry({
itemSelector : '.blocks',
columnWidth : 0
});
});
});
OUTPUT:
I don't see a problem using Masonry for this layout, as long as the container is the correct size you will get the format you want.
I've set up your example in jsFiddle and it seems to work ok.
HTML (same as yours)
<div id="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
Script (simplified for use in jsfiddle)
$(function(){
$('#blockscont').masonry({
itemSelector: '.blocks'
});
});
I've removed the option columnWidth : 0 as it does not seem to make any difference.
CSS
.blocks {
background-color: #D7E4BC;
outline:1px solid white;
}
outline is used, not border, to show the blocks but prevent their size increasing and messing up the layout (in Chrome at least).
There should be no need to apply floats to any element as it is Masonry's job to position the blocks.
Just for posterity (as i came across this while having a similar problem) Gaps in the layout can be cause by incorrectly setting the columnWidth.
If you don't explicitly state the columnWidth it is taken from the width of the first item. My problem came about because my first item was supposed to cross two columns. I got over this by using another item's width to set columnWidth.
$('#m-container').masonry({
itemSelector: '.m-item',
columnWidth: $('.size1')[0]
});