Develop Reference

Function not being called in javascript

I have the following code:
function isVisible(selector) {
$(selector).is(':visible');
}
var isMapVisible;
var initialWindowWidth = window.innerWidth;
/* Window Resize Helper */
function handleWindowResize() {
isMapVisible = isVisible('.search__map');
if (window.innerWidth > 768) {
var windowHeight = window.innerHeight,
searchResultsHeight = windowHeight - $('.search__results').position().top,
searchMapHeight = windowHeight - $('.search__map').position().top;
$('.search__results').height(searchResultsHeight);
$('.search__map').height(searchMapHeight);
if (initialWindowWidth < 769) {
/*
This is a hack to trigger the map to show up if initial windowWidth causes the map to hide.
it only triggers once.
*/
resizeMap();
map.setZoom(map.getZoom() - 1);
initialWindowWidth = 1000;
}
} else {
$('.search__results').height('auto');
}
}
And in the function handleWindowResize(), I had a variable that I set globally as isMapVisible. and is calling another function isVisible(). I found out that when I replace that line of code with isMapVisible = $('.search__map').is(':visible'), I am able to get the correct result, but if my code is as copied above, I would get undefined. Any idea why?

That is because you are not returning anything in your function:
function isVisible(selector) {
return $(selector).is(':visible');
}

Unable to call a jQuery function from within .resize()

Here is my code:
function centerAlign(image, parent) {
image.load(function() {
var imageWidth = image.width();
var parentWidth = parent.width();
if(imageWidth != 0) {
var trim = (parentWidth - imageWidth) / 2;
image.css("marginLeft", trim);
}
});
}
$(window).resize(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
$(document).ready(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
It runs the function on page load however not on window resize. Any thoughts?

Found the solution, I was calling load within resize. Guessing as it's already loaded it wont run on resize. Changed to:
function centerAlign(image, parent) {
var imageWidth = image.width();
var parentWidth = parent.width();
if(imageWidth != 0) {
var trim = (parentWidth - imageWidth) / 2;
image.css("marginLeft", trim);
}
}
$(window).resize(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
$(document).ready(function() {
$(".swiper-slide img").load(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
});
Now I'm only calling load within ready() and not within resize(). Hope this helps anyone else.

position() being treated as a function

I am working on a slider, here is the code for it:
$(document).ready(function() {
// MAKE SLIDER WIDTH EQUAL TO ALL SLIDES WIDTH
var totalWidth = 0;
$('.slide').each(function() {
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".slider_wrap").outerWidth();
function slideMove($targetSlide) {
if ($targetSlide.length) {
var newPosition = $targetSlide.position().left;
if (newPosition <= maxScrollPosition ) {
$targetSlide.addClass('slide--active');
$targetSlide.siblings().removeClass("slide--active");
$(".slider").animate({
left : - newPosition
});
}
else {
$(".slider").animate({
left : - maxScrollPosition
});
};
};
};
$(".slide").width(totalWidth);
$(".slide:first").addClass("slide--active");
$(".next_post").click(function(){
var $targetItem = $(".slide--active").prev();
slideMove('.slide');
});
$(".prev_post").click(function(){
var $targetItem = $(".slide--active").next();
slideMove('.slide');
});
});
While I would expect this to work, I am getting an error that says: TypeError: $targetSlide.position is undefined. From the if statement in the function slideMove. Why doesn't this work? I am still learning jQuery so sorry if it is an obvious answer.

change this
slideMove('.slide');
to this
slideMove($('.slide'));
In your method slideMove you are expecting a JQUERY DOM ELEMENT where as you are giving it just a STRING which is class name of that particular DOM element

YO! you change it to this
...
$('.next_post').click(function(){
var $targetItem = $('.slide--active').prev();
slideMove($('.slide'));
});
$('.prev_post').click(function(){
var $targetItem = $('.slide--active').next();
slideMove($('.slide'));
});
...

(jQuery to Vanilla Javascript) fixed floating element

I am not a big fan of jQuery because it can cause a bigger load time on the page load(even if it's small), so I refrain from using jQuery as much as possible.
I am trying to convert this jQuery code to plain javascript, could someone lead me in the correct direction?
Non-working non-jquery javascript
window.onload = function()
{
var scrolledElement = document.querySelector('#comment');
var top = scrolledElement.offsetTop;
window.scroll(function()
{
var y = window.pageYOffset;
if (y >= top)
{
scrolledElement.classList.add('fixed');
} else {
scrolledElement.classList.remove('fixed');
}
});
});
and this is the actual code for jQuery.
$(document).ready(function () {
var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#comment').addClass('fixed');
} else {
$('#comment').removeClass('fixed');
}
});
});
Here is what I have so far in jsfiddle. http://jsfiddle.net/knjQh/29/

Update your JS to attach a event on scroll
window.onload = function () {
var scrolledElement = document.querySelector('#comment');
var top = scrolledElement.offsetTop;
var listener = function () {
var y = window.pageYOffset;
if (y >= top) {
scrolledElement.classList.add('fixed');
} else {
scrolledElement.classList.remove('fixed');
}
};
window.addEventListener('scroll', listener, false);
}
Check
http://jsfiddle.net/raunakkathuria/knjQh/33/

JavaScript make value of variable public

Here is excerpt from my larger JavaScript file:
function dashboardConfig()
{
$(window).on('resize', function () {
var viewport = {
width : $(this).width(),
height : $(this).height()
};
el.siteContainer.css(
{
marginTop : (viewport.height - 652) / 2
});
el.dashboardSlide.css(
{
marginLeft : (viewport.width - 1024) / 2,
marginRight : (viewport.width - 1024) / 2
});
//Calculate how many nav elements
el.navElements.each(function(i)
{
el.dashboard.css(
{
width : viewport.width * (i + 1)
});
$(this).click(function()
{
//HERE IS THE VARIABLE I WOULD LIKE TO USE
var dashboardSlidePosition = viewport.width * i;
el.navElements.removeClass('active');
$(this).addClass('active');
el.dashboard.animate(
{
left : -dashboardSlidePosition
},500, function()
{
el.dashboard.css(
{
left : -dashboardSlidePosition
});
});
});
});
//I WANT TO PERFORM ANOTHER FUNCTION HERE AND HAVE IT USE THE VALUE OF dashboardSlidePosition
}).trigger('resize');
}
I want to know how I can pass the value of the variable, dashboardSlidePosition, to another function. Please can anyone explain how?
Many thanks in advance.

You can declare it at the outer edge of your scope. Make sure to give it an initial value so that you don't try to use it before it has been set properly.
function dashboardConfig()
{
var dashboardSlidePosition = null;
function anotherFunction() {
if (dashboardSlidePosition != null) {
// ...
}
}
$(this).click(function()
{
dashboardSlidePosition = viewport.width * i;
}
}

Put it into the proper scope:
function dashboardConfig()
{
var dashboardSlidePosition = 0;
Next, remove var when redefining it.
Now you can use it because it's in the scope of the function.