Develop Reference

Modify javascript to open in a new window (window.location.href)

I'm creating a site for a client who needs to use a zip code to search for a provider but the search is on a provider search website that's not within our domain. I need to modify this script to be able to force it to open in a new window.
<script type="text/javascript">
$(document).ready(function () {
var submitVetSearchD = function () {
submitVetSearch($('#zip'));
}
function submitVetSearchM() {
submitVetSearch($('#zipM'));
}
function submitVetSearchF() {
submitVetSearch($('#zipF'));
}
function submitVetSearch(ele) {
var zipval = ele.val();
var url = 'https://www.fakesearchresultswebsite.com/';
if (zipval !== "") {
return window.location.href = url + '?zip=' + zipval;
}
}
$("#zip").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchD();
}
});
$('#large-header-vet-search').click(submitVetSearchD);
$("#zipM").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchM();
}
});
$('#mob-vet-search').click(submitVetSearchM);
$("#zipF").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchF();
}
});
$('#footer-vet-search').click(submitVetSearchF);
$("a[rel^='prettyPhoto']").prettyPhoto();
//top menu size
$(window).resize(function () {
setTopMenuHeight();
});
setTopMenuHeight();
var smallHeader = false;
var menuBig = true;
$(document).scroll(function () {
var ele = $("#top-menu-height");
var menuBigNew = !(ele.is(":visible") && $(window).scrollTop() > 200);
if (menuBig != menuBigNew && smallHeader) {
menuBig = menuBigNew;
$("#navtop").toggleClass("small-page-header");
$(".fixed-top").toggleClass("pos-fix");
$("#page-header").toggleClass("fixed-header");
$("#title-area").toggleClass("title-area-small");
$("#logo1").finish();
$("#logo2").finish();
$("#top-menu").finish();
if (menuBig) {
$("#logo2").toggle();
$("#logo1").toggle(1000);
} else {
$("#logo1").toggle();
$("#logo2").toggle(1000);
}
//$("#top-menu").fadeToggle();
}
});
//$('body').on('open.fndtn.reveal', function(){
// $('body').css('overflow', 'hidden');
//});
//$('body').on('closed.fndtn.reveal', function(){
// $('body').css('overflow', 'visible');
//});
});
function setTopMenuHeight() {
var ele = $("#top-menu-height");
var height = $("#page-header").height();
ele.height(height);
}
</script>

Replace
return window.location.href = url + '?zip=' + zipval;
with
var newWin = window.open(url + '?zip=' + zipval);
return true;
Declare newWin in the global scope, it will reference the new window.
Reference: http://www.w3schools.com/jsref/met_win_open.asp

Property undefined on production server but works on development

We've been implementing a lightbox into our wordpress theme and it works perfectly on our development server which is on the same server as our live site and the build is exactly the same to my knowledge as the build for the development site was just taken from a live site backup, but for some reason on some pages i am getting the following error but on others i'm not as if the JS isn't getting loaded before this JS file but i don't understand why it works perfectly every time on the dev server:
Uncaught TypeError: Cannot read property 'imageUrl' of undefined
jQuery(document).ready(function( $ ) {
var WHLightbox = {
settings: {
overlay: $('.portfolio-tile--overlay'),
imageCell: $('.cell-image, .portfolio-tile--image')
},
data: {
images: []
},
init: function() {
this.events();
this.buildImageData();
},
events: function() {
var self = this;
this.settings.imageCell.on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
// set up the overlay
//self._positionOverlay();
self._openOverlay();
self._preventScrolling();
// create the image slide
self._createImageSlide($(this));
});
$('.portfolio-tile--overlay--close').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self._closeOverlay();
});
$('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.portfolio-tile--overlay--controls--prev').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showPrev();
});
$('.portfolio-tile--overlay--controls--next, .portfolio-tile--overlay').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showNext();
});
},
// public functions
showPrev: function() {
var index = this.currentImageIndex();
if(index === 0) {
index = this.data.images.length;
}
this._createImageSlide(false, index-1);
},
showNext: function() {
var index = this.currentImageIndex();
if(index === this.data.images.length-1) {
// set to -1 because it adds 1 in the _createImageSlide call
index = -1;
}
this._createImageSlide(false, index+1);
},
currentImageIndex: function() {
if(this.settings.overlay.hasClass('open')) {
var imageUrl = $('.portfolio-tile--main-image').attr('src');
for(var i=0; i<this.data.images.length; i++) {
if(this.data.images[i].imageUrl === imageUrl) {
return i;
}
}
} else {
return false;
}
},
// image data
buildImageData: function() {
var self = this,
i = 0;
this.settings.imageCell.each(function() {
self.data.images[i] = {
imageUrl: self._getImagePath($(this))
}
i++;
});
},
// slide
_createImageSlide: function($el, index) {
var imagePath;
if(!$el) {
imagePath = this.data.images[index].imageUrl;
} else {
imagePath = this._getImagePath($el);
}
this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
},
_getImagePath: function($el) {
var imagePath,
spanEl = $el.find('span.js-cell-image-background'),
imgEl = $el.find('img.cell-image__image');
if(spanEl.length) {
imagePath = spanEl.css('backgroundImage');
imagePath = imagePath.replace(/url\(["]*/,'').replace(/["]*\)/,'');
} else if(imgEl.length) {
imagePath = imgEl.attr('src');
}
return imagePath;
},
// overlay
//_positionOverlay: function() {
// this.settings.overlay.css({
// position the overlay to current scroll position
// top: $(window).scrollTop()
// });
//},
_openOverlay: function() {
this.settings.overlay.addClass('open');
},
_preventScrolling: function() {
$('html, body').addClass('no-scroll');
},
_reInitScrolling: function() {
$('html, body').removeClass('no-scroll');
},
_closeOverlay: function() {
this.settings.overlay.removeClass('open');
this._reInitScrolling();
}
};
WHLightbox.init();
});

Jquery message only on first row

I'm having a problem: when clicking on edit buttom, the message of the successful/error alert is displayed only on the first row even if i click on the second.
This is the js
var ROUTE = new function () {
var oGlobal = this;
this.sSaveUrl = '';
this.setSaveUrl = function (_sUrl) {
this.sSaveUrl = _sUrl;
}
this.setEventSubmit = function () {
$('[id^="route_update"]').each(function () {
$(this).click(function () {
var oData = $(this).closest('tr').find('input').serializeArray();
var oRow = $(this).closest('tr');
console.log(oData);
oReq = $.post(oGlobal.sSaveUrl, oData, function (data) {
if (data['valid'] != "true") {
//console.log('error');
//Fade in
oRow.closest('#comment').html('Error').css('display', 'block').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
} else {
//console.log('success');
//Fade in
$('#comment').html('Insert Success').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
}
return false;
}, 'json');
return false;
});
});
}
this.init = function () {
this.setEventSubmit();
}
}
What do I wrong?
Thanks in advance

streaming a "favorite/like" of a user on soundcloud not working

Why is this not working? I have sourced how to do this from here
I have now edited this because the sound.play works but the sound.pause doesn't and I don't know why?
Is it because of duplicate function names?
if ($(this).attr('src') == 'Play.png') {
SC.get("/users/user/favorites", function (track) {
SC.get("/users/user/favorites", function (tracks) {
SC.stream("/tracks/" + tracks[0].id, function (sound) {
sound.play();
});
});
});
$("#swap").attr('src', "../Pause.png");
} else {
SC.get("/users/user/favorites", function (track) {
SC.get("/users/user/favorites", function (tracks) {
SC.stream("/tracks/" + tracks[0].id, function (sound) {
sound.pause();
});
});
});
$("#swap").attr('src', "Play.png");
}
});
});

The SC.stream() method takes a path to a single resource, not a list/array. Try this:
SC.get("/users/[user]/favorites", function(tracks){
SC.stream("/tracks/"+tracks[0].id, function(sound){
sound.play();
});
});
Edit:
To answer your updated question, I've updated your code:
window.sound = null;
$('#swap').on('click', function(e){
if ($(this).attr('src') == 'Play.png') {
if (!sound) {
SC.get("/users/user/favorites", function (tracks) {
SC.stream("/tracks/" + tracks[0].id, function (sound) {
window.sound = sound;
sound.play();
});
});
} else { sound.play() }
$(this).attr('src', "Pause.png");
} else {
sound.pause();
$(this).attr('src', "Play.png");
}
});

jQuery Menu Hover, but don't at click

HTML Structure:
<a class="fadeThis" id="paperoff" href="#"><span id="paperon" class="hover">News</span></a>
JAVASCRIPT:
$('.fadeThis > .hover').empty();
$('.fadeThis').each(function () {
var text = $(this).text();
$(this).append(''+text+'');
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
// HERE SOMETHING THAT TELLS TO NOT FADE BACK THE SPAN (ONLY FOR THE CLICKED DIV).
});
});

Your question is not very clear, but do you want someting like this?
var fadeBlock = false;
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
if (!fadeBlock) {
$span.stop().fadeTo(500, 0);
} else { fadeBlock = false;}
}).click (function () {
fadeBlock = true;
});