AddThis toolbox multiple times - addthis

How can I do addthis.toolbox('.addthis_toolbox') multiple times?
I have a list of posts, and each is opened in popup window (jquery ui dialog). So I need to reload AddThis bar for each post.
Now I have:
<div id="addThis_<?=$postID?>" class="addthis_toolbox addthis_default_style" addthis:title="<?=$fullTitle?>" addthis:url="https://<?=$url?>">
<a class="share-button addthis_button_preferred_1"></a>
<a class="share-button addthis_button_preferred_2"></a>
<a class="share-button addthis_button_preferred_3"></a>
<a class="share-button addthis_button_preferred_4"></a>
<a class="share-button addthis_button_twitter" addthis:title="<?=$fullTitle?>" addthis:url="http://lj.is/<?=$postID?>"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
$(function(){
var addthis_config = {
data_track_clickback:true,data_track_addressbar:true,pubid:'...',ui_delay:300
};
var addthis_share = {url:"https://<?=$url?>", title:'<?=$fullTitle?>'};
if (window.addthis) {addthis.toolbox('#addThis_<?=$postID?>'); addthis.button("#addThis_<?=$postID?> .share-button"); addthis.counter("#addThis_<?=$postID?> .addthis_bubble_style");}
else $.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=...&async=1', function(){addthis.init();});
})
</script>
Now first launch is ok. But next - bar is built, but without correct click, anchor title and etc.
You can see that on https://littlejoys.ru/
And additional problem - compact menu has incorrect position when my popup window is scrolled.

You can repeat the div multiple times. But you need to change the URL, title, description using Addthis optional attributes (addthis:url, addthis:title, addthis:description).
<!-- First Post -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/1"
addthis:title="My cool first post"
addthis:description="An Example Description 1">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
<!-- Second Post-->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/2"
addthis:title="My hot second post"
addthis:description="An Example Description 2">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
Therefore you can add it in a loop and it will pick up the correct data.
If Addthis is not getting re-initialized in UI dialog then you need to re-initialize the addthis buttons again using addthis.button(".share-button")
where share-button is the class of the addthis share anchor link.
Check this Addthis article: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript

Related

How to make featherlight gallery work with custom trigger and different markup?

I looked at many featherlight.js posts already, but just could not work out how to make the gallery work without a tags etc.
My example is here: http://jsfiddle.net/pwLnrmoc/5/
HTML Code:
<h3>Gallery with different Markup</h3>
<p>Works fine as "single" featherlight, but not as a gallery. I do not want to introduce a tags to make this work as a gallery. What needs to change in the JS to make this work as a gallery?</p>
<ul class="gallery">
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 1</h3>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" />
</figure>
</div>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 2</h3>
<img src="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" />
</figure>
</div>
<img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 3</h3>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" />
</figure>
</div>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" />
</li>
</ul>
JS Code:
$(document).ready(function(){
$('.openLightbox').click( function(evt) {
const $target = $(evt.currentTarget);
const $figure = $target.siblings('figure');
console.log($figure.length);
// to open in a single slide
$.featherlight($figure);
})
$('.openLightboxGallery').click( function(evt) {
const $target = $(evt.currentTarget);
const $figures = $target.closest('.gallery').find('figure');
console.log($figures.length);
// to open in a gallery
$.featherlightGallery($figures);
})
});
It works fine with the "single" featherlight button, but not with the gallery. I do not know how to set the content filter or target in my case. That's the error: Featherlight: no content filter found (no target specified).
Ideally the way you call featherlight and featherlightGallery should be consistent and work the same way.

Tumblr Redirects to 404 Page

We have had a Tumblr page set up for a year with no issues until this past month.
We have a page redirect in our navigation bar. The redirect goes to our main website, WordBrewery.com. The link listed in the redirect is the main URL - http://www.wordbrewery.com.
Now it is redirecting to our site's 404 page and this is added to the end of the URL:
#_=_
I have tried using this script, but it has done nothing:
<script>
if (window.location.hash == "#_=_")
{
window.location.hash = "";
}
</script>
I have also tried replacing the main URL with a shortened Google version but this has not worked either.
Any help would be greatly appreciated.
EDIT:
The hard code that I am able to edit appears like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
{block:IfShowAvatar}
<img src="{PortraitURL-128}" class="{AvatarShape}" alt="{Title}" />
{/block:IfShowAvatar}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{block:IfShowTitle}<li class="active">{Title}</li>{/block:IfShowTitle}
{block:IfShowArchiveLink}
<li>{lang:Archive}</li>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<li>{lang:Random}</li>
{/block:IfShowRandomLink}
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:IfTagMenuList}
<li class="dropdown">
<a href="#" id="tag-menu" data-toggle="dropdown" aria-expanded="true">
{text:Tag Menu Title} <span class="caret"></span>
</a>
<script>
var list = '{text:Tag Menu List}';
list = list.split(',');
var html = '<ul class="dropdown-menu" role="menu" aria-labelledby="tag-menu">';
for(var i=0; i<list.length; i++) {
html += '<li role="presentation"><a role="menuitem" tabindex="-1" href="/tagged/' + list[i] + '">#' + list[i] + '</a></li>';
}
html += '</ul>';
document.write(html);
</script>
</li>
{/block:IfTagMenuList}
{block:IfShowSearch}
<li><a class="icon-search search-overlay-show"></a></li>
{/block:IfShowSearch}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am unsure of how to get rid of the string Tumblr adds to redirected URLs but alternatively you can hard code the link to avoid utilising Tumblr's redirect.
Beneath {block:HasPages} add <li>WordBrewery.com</li>

Fancybox is repeating pictures

i have created a gallery using fancy-box but i have a problem that when i open all items (all projects) it works properly as each item will show its own pictures (only three picture) as shown in this picture
(have only three thumbnails) but when i open a specific category (villas category) pictures for all villas will shown as this picture
(6 thumbnails included for two projects)
and if i press all project again i will have the same problem and the picture for all items will be shown (9 thumbnails for 3 items)
so i think the problem is with the java script and here below is the html code and java script code
sorry i am new to programming and i need your help, i appreciate your efforts
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(function ($) {
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeOut(0)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-group", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
</script>
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
</div>
<div class="row"> </div>
<div class="col">
<div class="galleryWrap">
<ul id="projects">
<li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive" id="img1"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div>
<div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive" id="img2"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div>
<div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" id="img3" border="0"></a></li>
<div class="hidden"> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div>
</div>
</div>
</ul>
</div>
</div>
<footer>©Copyright Qyas Engineering Consultancy All Rights Reserved. </footer>
</div>
I would suggest you to use Isotope + fancybox combination, see this example:
http://codepen.io/fancyapps/pen/EZKYPN
Because then your code could be simplified to something like this:
// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
var visibleLinks = $('.fancybox:visible');
$.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );
return false;
});

routing with redirect and automatic child route transition with unexpected behavior

I have a routing related question.
App.Router.map(function(){
this.resource('whiteBoards',function(){
this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
this.resource('image');
this.resource('video');
});
});
this.resource('dummy');
});
App.WhiteBoardsRoute = Ember.Route.extend({
model: function(){
return this.store.find('whiteBoard');
}
});
App.ImageRoute = Ember.Route.extend({
model: function(){
return this.store.find('image');
}
});
If I click all navigational links manually all things works as expected.
my templates:
<script type="text/x-handlebars" data-template-name="application">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="/index.html">Routing Test</a>
</div>
<ul class="nav navbar-nav">
<li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
<li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>
</ul>
</div>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoards">
<ul class="nav nav-tabs whiteBoards">
{{#each whiteBoard in controller.content}}
<li>
{{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoard">
<div class="whiteBoard">
<H3>WhiteBoard {{controller.content.name}}</H3>
</div>
<ul class="nav nav-tabs">
<li>
{{#link-to 'image'}}Images{{/link-to}}
</li>
<li>
{{#link-to 'video'}}Videos{{/link-to}}
</li>
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="image">
<div class="imagelist">
<H3>Images</H3>
<ul>
{{#each img in controller.content}}
<li>{{img.name}}</li>
{{/each}}
</ul>
</div>
</script>
The problem occurs if I try to activate the image route (as default child route) in combination with a whiteBoard navigation click.
This mean If I select a whiteBoard a list of images should also be shown (here only a simplified image list).
To achieve this I insert:
App.WhiteBoardIndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('image');
}
});
The first time it works as expected (the selected whiteBoard is shown and the image list).
If I try to navigate to another whiteBoard the problems begins.
After inserting WhiteBoardIndexRoute I can't navigate to another whiteBoard.
What is the problem ?
I'm working with ember.js verion 1.0
I known that I can implement the display of the image list using the renderTemplate method in the WhiteBoardRoute but I think that it should be possible to use the "default child route concept".

jQuery mobile multipage submit

I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>