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
Related
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
I've recently updated polymer and components, and a weird thing appears.
I have paper-dialog element, and inside, on the left a paper-menu item with multiple paper-item. On the right, a simple div with some content.
When clicking on a paper-item, the content of the div will change.
Since the update, when clicking on a paper-item element, the dialog will automatically close.
After searching, it appears that if I remove the paper-menu element and only left the multiple paper-item, the problem will no longer occurs.
After looking inside the iron-menu-behavior, I found a new function (an override of _activateHandler), which, when commented, will kept previous functionning without closing the dialog.
I keep searching to find any solution, but anyone encountered the same problem?
For information :
<paper-dialog id="dialog" with-backdrop>
<div id="content"></div>
</paper-dialog>
And inside my div is added this :
<div class="content">
<div class="list">
<paper-menu>
<template is="dom-repeat" items="{{menu}}">
<paper-item on-click="_onCategorySelection">
<iron-icon icon="{{item.icon}}" class="icon"></iron-icon>
<span class="text">{{item.text}}</span>
</paper-item>
</template>
</paper-menu>
</div>
<div id="listContent">
<div class="noContent" hidden$="{{content}}">
<div class="noContentText">Pas de catégorie séléctionnée</div>
</div>
<template is="dom-if" if="{{content}}">
<div class="withContent">
<template is="dom-repeat" items="{{content}}" as="widget">
<badge data="{{widget}}" on-click="_onWidgetSelect"></badge>
</template>
</div>
</template>
</div>
</div>
Thanks a lot
Okay, looking at the problem, is seems to be a known issue: https://github.com/PolymerElements/iron-menu-behavior/issues/40
I'll point your JSBIN too there!
EDIT: it is yours! :)
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'm having trouble configuring the search results, linking to that specific result.
I've set the channel search preferences so that {auto_path} links to the relevant template group and template and I have had no trouble with this whatsoever.
The only trouble I am having is that when you click on the title of the result, when you are sent to the page that displays the specific entry, rather than display that specific entry, it shows you the most recent entry posted on that channel.
I’ve also noticed that when you click the result, the url which should display as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/entry
actually renders as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/?/entry
Whats up with the extra ‘?/’ inbetween the template and the entry?
Here is the code for the results page:
{embed="embeds/html-head" page_title="Blog"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
<div id="title">
<h2>{exp:search:total_results} RESULT(S) FOR {exp:search:keywords}</h2>
</div>
</div>
<div id="blog">
<ul>
{exp:search:search_results}
<div class="blog">
<li class="search_results"><strong>{title}</strong> from <em>{channel}</em>
<br/>
{excerpt}
<br/>
</li>
</div>
{/exp:search:search_results}
</ul>
</div>
</div>
{embed="embeds/footer"}
</div>
</body>
</html>
and here is the code for a gallery entry
{embed="embeds/html-head"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
{exp:channel:entries channel="gallery" limit="1" disable="pagination"}
<div id="title">
<h2>Gallery</h2>
</div>
<div id="story_title">
<h2>{title}</h2>
</div>
</div>
<div id="video_main">
<img class="image" src="{image}" alt="{title}">
</div>
<div id="featured" class="main">
<p>{info}</p>
<p class="url">{source}</p>
</div>
{/exp:channel:entries}
{embed="embeds/footer"}
</div>
</body>
</html>
On a category page, when you click an entry and are taken to this page, it displays the specific entry clicked on, so I know that there is nothing wrong with that aspect.
Any suggestions/solutions would be much appreciated, i'm sure it's something minor that i'm just not spotting!
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>