Tumblr Redirects to 404 Page - redirect

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>

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.

Trouble Toggling between two divs when a link is clicked - Javascript

I'm currently trying to work on a basic JavaScript application.
I ultimately want to have a book that shows basic information on it's cover and with the click of a link, the book will show additional information.
I have two divs; #frontBook which will displays the front of the book which includes basic information about the current Book (i.e. Title, Author, Pages, Read or not) and #insideBook which will display additional info about the book(i.e. what page they're up to, publisher's name, etc.)
I want the #frontBook div to show and #insideBook to be hidden at first. Then once #additional-info link has been clicked, I want #frontBook to be hidden and #insideBook to be shown.
I've added my code below but it does not work. I'm really not sure where I'm going wrong. Please Help!
Thanks in advance.
P.S. I know that JQuery would be recommended for something like this but I just want to make sure I can grasp this concept with JavaScript first.
HTML:
<div id="frontBook">
<div id="book-outline">
<div id="book-content">
<ul id="basic-book-content">
<li><span class="basic-book-details" id="new-title">Title: </span></li>
<li><span class="basic-book-details" id="new-author">Author: </span></li>
<li><span class="basic-book-details" id="new-pages">Pages: </span></li>
<li><span class="basic-book-details" id="new-read">Read?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="additional-info" onclick="toggle_book();">Additional Info
<i style="color:white;" class="far fa-caret-square-right" ></i>
</a>
</li>
</ul>
</div>
<!-- closes #book-content-->
</div>
</div>
<div id="insideBook" style="display:none">
<div id="inside-book-outline">
<div id="inside-book-content">
<ul id="additional-book-content">
<li><span class="additional-book-details" id="new-editor"> Editor's Name: </span></li>
<li><span class="additional-book-details" id="new-publisher">Publisher's Name: </span></li>
<li><span class="additional-book-details" id="new-pub-comp">Publsiher Company's Name: </span></li>
<li><span class="additional-book-details" id="new-page-at">Page Up to:</span></li>
<li><span class="additional-book-details" id="new-line-at">Line Up to:</span></li>
<li><span class="additional-book-details" id="new-genre">Genre:</span></li>
<li><span class="additional-book-details" id="new-in-series">In Series?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="less-info" onclick="toggle_book();">
<i style="color:white;" class="far fa-caret-square-right"></i>Less Info
</a>
</li>
</ul>
</div>
<!-- closes #inside-book-content-->
</div>
</div>
JavaScript:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
}
Well you seemed to have missed two things.
1) You're if statement logic is backwards it should be:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
2) You don't have a onclick attribute for the <a> tag in the insideBook to toggle it back

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;
});

zurb foundation orbital bug?

dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.

protractor by.repeater how to find sibling elements

I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>
My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});