jquery cycle 2 pager doubles items - jquery-cycle2

There is a similar question on here, but the solution doesn't work, and I can't comment on it, so I need to post a new question.
<div class="cycle-slideshow"
data-cycle-caption-plugin=caption2
data-cycle-pager="#cycle-pager"
data-cycle-overlay-fx-sel=">div"
>
<div class="cycle-overlay"></div>
<img src="/sites/default/files/images/banner_imag_1.jpg" title="Collaboratively administrate turnkey channels whereas virtual e-tailers." alt='Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources.' />
<img src="/sites/default/files/images/blue-sky-basin-vail_0.png" title="What if world-leading organizations teamed-up to develop and scale technology and business solutions to global poverty?" alt="Efficiently unleash cross-media information without cross-media value." />
</div>
<div id="cycle-pager"></div>
Instead of two pager items, I'm getting four. Any insight would be very appreciated.
Thanks!

This probably happened because you have inserted library for pagination. All you need is delete the line:
<script src="js/cycle/jquery.cycle2.pager.js"></script>

Related

Drupal 8 - Broken default image link in view

I'm new to Drupal and I've been given a project to fix a couple of bugs on...
I've got a view with several fields, it displays OK when there is a picture but when there is no picture (and thus the need to display a default picture), then a broken image link appears...For some reason the path points to a different directory...
This works:
<div class="item-header"> <div class="views-field views-field-field-selection-photos"> ... <div class="content">
<div class="field field--name-field-photo field--type-image field--label-hidden field--item"> <img src="/sites/default/files/somepicture.jpeg?itok=sJ6SOjXo" width="445" height="334"/>
This does not, due to the path pointing to ../sites instead of /sites:
<div class="item-header">
<div class="views-field views-field-field-selection-photos"><div class="field-content"><img src="../sites/default/files/structures/photos/defaultpic.jpg" width="100%" />
I've been looking at theming fields but that seems overkill, I wonder if there's a nice and clean way to sort this out rather than override a template or anything else that would seem a bit too much...
Thanks

Web Scraping with python and scrapy

I'm trying to scrap a site with this types of div:
<div class="mindatath">Density:</div>
<div class="mindatam2">
3.98 - 4.1 g/cm
<sup>3</sup>
(Measured) 3.997 g/cm
<sup>3</sup>
(Calculated)
</div>
</div>
Ok, I need the value in mindatam2 div. But exist a lot of divs with this class. How can I relate the two divs to I know what the value to extract?
I try with Scrapy to show all divs values:
response.xpath('//div[#class="mindatam2"]/text()').extract()
If all your densities have similar format, you can use regex
For example
response.xpath('//div[#class="mindatam2"]/text()').re(r'([\d\.\-\s]+)g/cm')

Refresh Only template Grails

I have a list.gsp which loads a template .
Actually the template contains which loads the data from the domain class.
Every 10 seconds I want to refresh the template only, so that it gets latest data from the db. How can i do this?
There are several ways to solve this but all of them require Ajax. I'll give one example:
Suppose the following HTML:
<div class="content">
... other content here
<div id="template">
<g:render template="someTemplate" ... />
</div>
... other content here
</div>
Then this javascript:
setInterval(refreshTemplateEveryTenSeconds, 10000);
function refreshTemplateEveryTenSeconds() {
$('#template').load("/some/server/resource");
}
See the jquery load docs for more info on this.
Obviously, if you're not using jQuery then modify to do the ajax call as your technology would suggest. But this gives you a general idea of how you might approach the problem.

Incorporating slideshow / carousel into custom tumblr theme

Got a very particular problem here:
I've been developing a tumblr-hosted site locally, using the API to pull in posts without having to copy and paste the project into tumblr a million times. I decided I liked the API better and would just use that in production, but now that it's time to deploy I realize that I have to go back to the custom theme, {block:Posts} method.
I have the post feeding into a Cycle2 slideshow, with 3 slides containing 3 posts each for a total of 9 playlists viewable without going back to the archive. This method works perfectly with the api, but is getting messed up in the custom theme. Here's my current code:
<div class="cycle-slideshow">
{block:Posts}
{block:Text}
<div class="slide-wrapper">
<div class="post">
{block:Post1}
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
{/block:Post1}
</div>
<!--two more posts before end of slide... -->
</div>
{/block:Text}
{/block:Posts}
</div> <!--end of slide wrapper - 2 more of these before end of slideshow div..
I also tried scrapping the post numbers, but still no dice. In tumblr's docs, they say that
Example: {block:Post5}I'm the fifth post!{/block:Post5} will only be rendered on the fifth post being displayed.
I'm wondering if "being displayed" refers to the html visibility of the post, and if so, if that's interfering with the cycle plugin? The results are one ill-formatted post per slide, and then after cycling through 2 blank slides, the next oldest post takes its place. I'll be pleasantly surprised if anybody has ever had a similar problem but I would kill for some advice. Here's the development site for reference (and the second carousel is working because it's still hooked up to the api). thanks!!
Generally speaking, the following code is what you'd want to have 3 slideshows with 3 posts each.
Note that in the Additional Settings on the Customize screen, you'd have to set the post count to 9 per page in order for this to work properly. I wrapped it in an Index Page block, otherwise this is going to look nasty on a Permalink Page.
{block:IndexPage}
{block:Posts}
{block:Post1}<div class="cycle-slideshow">{/block:Post1}
{block:Post4}<div class="cycle-slideshow">{/block:Post4}
{block:Post7}<div class="cycle-slideshow">{/block:Post7}
<div class="slide-wrapper">
{block:Text}
<div class="post">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
</div>
{/block:Text}
{block:Photo}
...
{/block:Photo}
...
</div>
{block:Post3}</div>{/block:Post3}
{block:Post6}</div>{/block:Post6}
{block:Post9}</div>{/block:Post9}
{/block:Posts}
{/block:IndexPage}
However, if you're wanting 3 slideshows with the post types split between the slideshows, the code would look more like the following.
Note that in this scenario, if you were to have 4 texts posts out of 9, all 4 text posts would end up in the Text slideshow. You'd have to use Javascript or CSS to remove or hide the additional posts if you're very strict about your 3.
{block:IndexPage}
<div class="cycle-slideshow">
{block:Posts}
{block:Text}
<div class="slide-wrapper">
<div class="post">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
</div>
</div>
{/block:Text}
{/block:Posts}
</div>
<div class="cycle-slideshow">
{block:Posts}
{block:Photo}
<div class="slide-wrapper">
...
</div>
{/block:Photo}
{/block:Posts}
</div>
{/block:IndexPage}
If you need me to clarify anything, let me know.

Have separate template for each tab without having separate URL - Django

I'm trying to develop a reporting system using Django. I have to display reports about various categories of data.I have put each category as a tab-tab1,tab2, etc. Is it possible to have different template for each tab without having to change the url.
I have tried template inheritance but that requires have separate url for each tab.
My concern is that if the number of tabs grow, then the number of urls will also increase.
Any suggestions please?
Thanks in Advance.
Why is it a problem for the number of URLs to increase?
Presumably you don't need separate URLconf entries for each tab, you can just capture the tab name in the URL and send it on to the view:
url(r'^reports/(?P<tab_name>\w+)/$', views.reports, name='reports')
...
def reports(request, tab_name):
... do something depending on tab_name ...
You can just use {% include %} tag and include different templates.
And I think it's better to have unique URL for each tab, it least with hashtag.
You can use a library like jquery tabs to create the tabs, then load each template individually either through include as suggested by #DrTyrsa or by a custom template tag (which would be my personal preference).
Here is an example (from the excellent bootstrap framework from twitter):
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="pill-content">
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>