Develop Reference

how can disable navigation button after reached on the last slide in javascript

the function is as under, want to stop or disable up arrow when slider is at last record and disable down arrow when slider is at first record.
upArrow.onclick = function(){
if(x > "-900"){
x = x - 300;
slide.style.top = x + "px";
}
downArrow.onclick = function(){
if(x < 0){
x = x + 300;
slide.style.top = x + "px";
}
}

You can disable the arrow by changing its pointer events and color when it reaches the desired value, for example:
upArrow.onclick = function(){
if(x < 0){
x = x + 300;
slide.style.top = x + "px";
downArrow.style.pointerEvents = "";
downArrow.style.backgroundColor = "";
if (x == 0) {
upArrow.style.pointerEvents = "none";
upArrow.style.backgroundColor = "grey";
}
}
}
downArrow.onclick = function(){
if(x > -900){
x = x - 300;
slide.style.top = x + "px";
upArrow.style.pointerEvents = "";
upArrow.style.backgroundColor = "";
if (x == -900) {
downArrow.style.pointerEvents = "none";
downArrow.style.backgroundColor = "grey";
}
}
}
Note: I did a little rewrite to the code to what I see more meaningful.

How to adapt script to work with parallax

I've got the following script
$(document).ready(function() {
window.onresize = resize;
var sizes = [2880, 1920, 1000, 600];
function resize() {
//console.log('si');
var img = $('img.resizable');
var width = $(window).innerWidth();
img.each(function(index, element) {
var name = element.src.split('/');
name = name[name.length - 1];
var setto = 0;
for (var i = sizes.length; i >= 0; i--) {
//console.log(i,width,setto, sizes[i]);
if (width <= sizes[i]) {
setto = sizes[i];
break;
}
}
setto = width >= sizes[0] ? sizes[0] : setto;
$(element).attr('src', 'images/' + setto + '/' + name);
});
}
resize();
});
It works with IMG tags: <img src="images/August-Vision-Night.png" class="resizable" alt=""/>
I'm trying to adapt it to work with a parallax background image. Instead of changing src it needs to change data-image-src
<div id="contentsection_1_container" class="parallax-window parallax-resizable" data-parallax="scroll" data-image-src="images/texture-clouds.png">
I attempted the following code; however, it didn't work at all. I'm new to this, so I have no clue how to actually fix the script.
$(document).ready(function() {
window.onresize = resize;
var sizes = [2880, 1920, 1000, 600];
function resize() {
//console.log('si');
var img = $('.parallax-resizable');
var width = $(window).innerWidth();
img.each(function(index, element) {
var name = element.data-image-src.split('/');
name = name[name.length - 1];
var setto = 0;
for (var i = sizes.length; i >= 0; i--) {
//console.log(i,width,setto, sizes[i]);
if (width <= sizes[i]) {
setto = sizes[i];
break;
}
}
setto = width >= sizes[0] ? sizes[0] : setto;
$(element).attr('data-image-src', 'images/' + setto + '/' + name);
});
}
resize();
});

Scroll then snap to top not unsnapping

I'm trying to create snap to top divs that cover the entire page and I have it working, it's just that after they snap to the top they don't unsnap and stay fixed to the top. I'm using the answer given by mu is too short from this previous question scroll then snap to top but I can't get it to unsnap.
Here's a jsbin of the code.
var h = 0;
var notif;
var notif2;
var init;
var docked = false;
function getSize() {
h = window.innerHeight;
notif = document.getElementById("notif");
notif2 = document.getElementById("notif2");
var fl = document.getElementById("floater");
init = notif.scrollTop;
notif.style.top = "" + h + "px";
var h2 = h / 2;
fl.style.marginTop = "" + h2 + "px";
notif.style.height = "" + h + "px";
var twoh = 3 * h2;
notif2.style.top = "" + h + "px";
notif2.style.height = "" + h + "px";
}
window.onscroll = function() {
if (!docked && (notif.offsetTop - document.body.scrollTop < 0)) {
console.log("in loop");
notif.style.top = 0;
notif.style.position = 'fixed';
notif2.style.marginTop = "" + h + "px";
docked = true;
} else if (docked && document.body.scrollTop <= init) {
notif.style.position = 'block';
while (notif.style.top <= h) {
var ab = Math.abs(notif.offsetTop)
var ab2 = Math.abs(document.body.scrollTop);
notif.style.top = init + 'px';
}
if (notif.style.top == h || notif.style.top == h - 1) {
docked = false;
}
}
};
<body onload="getSize()">
<div class="contain">
<div id="floater">
<h1 class="white">Hello, World</h1>
Link 1 Link 2
</div>
</div>
<div class="announcements" id="notif">
Please cover the previous text on the page. If this works i will be really excited.
</div>
<div class="announcements2" id="notif2">
Cover the white page.
</div>
</body>

Save the values used before you set these, and reset them when you "un-dock". Simply setting "docked" to show that you're un-docked is not enough.
This code is an example of how to do that from your staring point.
Here's how I saved it and got something like the behaviour you mention
var h = 0;
var notif;
var notif2;
var init;
var docked = false;
// holding space for reset values
var holdNotifyStyleTop;
var holdNotifyOffsetTop;
var holdNotif2StyleMarginTop;
function getSize() {
h = window.innerHeight;
notif = document.getElementById("notif");
notif2 = document.getElementById("notif2");
var fl = document.getElementById("floater");
init = notif.offsetTop;
notif.style.top = ""+h+"px";
var h2 = h/2;
fl.style.marginTop = ""+h2+"px";
notif.style.height = ""+h+"px";
var twoh = 3*h2;
notif2.style.top=""+h+"px";
notif2.style.height = ""+h+"px";
}
window.onscroll = function () {
if (!docked && (notif.offsetTop - document.body.scrollTop < 0)) {
console.log("--- DOCKING ---");
// save current values
holdNotifyStyleTop = notif.style.top;
holdNotifyOffsetTop = notif.offsetTop;
holdNotif2StyleMarginTop = notif2.style.marginTop;
notif.style.top = 0;
notif.style.position = 'fixed';
notif2.style.marginTop=""+h+"px";
docked = true;
} else if (docked && document.body.scrollTop <= init) {
console.log("--- Un-DOCKING ---");
notif.style.top = holdNotifyStyleTop;
notif.style.position = 'relative';
notif2.style.marginTop=holdNotif2StyleMarginTop;
notif.offsetTop = holdNotifyOffsetTop;
docked = false;
}
};

"Cannot read property ... of undefined" in jQuery 1.11.0 -- how can I satisfy jQuery's requirement?

I was (trying to) load jQuery 1.9.1 un-minified from CDN: "Uncaught TypeError: Cannot call method 'call' of undefined jquery-1.9.1.js:648". So I updated the reference, and am apparently getting an equivalent error, now for minified:
Uncaught TypeError: Cannot call method 'call' of undefined jquery-1.11.0.min.js:2
n.extend.each jquery-1.11.0.min.js:2
(anonymous function) site.js:26
j jquery-1.11.0.min.js:2
k.fireWith jquery-1.11.0.min.js:2
n.extend.ready jquery-1.11.0.min.js:2
K jquery-1.11.0.min.js:2
The page is at http://ccachicago.pragmatometer.com; the first SCRIPT tag is:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
(The page is POSH plus CSS styling and a light touch of JavaScript dust; it's simple by modern webapp standards...)
--EDIT--
Regarding my code, the page has, as its only script contents:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/js/site.js"></script>
<script>
function slideshow()
{
var width = (jQuery(window).width() - 70) * .8;
var factor = width / 1024;
var height = 420 * factor;
jQuery('#slideshow').attr('height', height + 'px');
jQuery('#slideshow').attr('width', width + 'px');
};
slideshow();
jQuery(window).resize(slideshow);
</script>
The site.js file has:
/**
* Override jQuery.fn.init to guard against XSS attacks.
*
* See http://bugs.jquery.com/ticket/9521
*/
(function () {
var jquery_init = jQuery.fn.init;
jQuery.fn.init = function (selector, context, rootjQuery) {
// If the string contains a "#" before a "= 0) {
var bracket_position = selector.indexOf(' hash_position) {
throw 'Syntax error, unrecognized expression: ' + selector;
}
}
}
return jquery_init.call(this, selector, context, rootjQuery);
};
jQuery.fn.init.prototype = jquery_init.prototype;
})();
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
sfHover = function()
{
var sfEls =
document.getElementById('nav').getElementsByTagName('li');
for(var index = 0; index
/**
* Override jQuery.fn.init to guard against XSS attacks.
*
* See http://bugs.jquery.com/ticket/9521
*/
(function () {
var jquery_init = jQuery.fn.init;
jQuery.fn.init = function (selector, context, rootjQuery) {
// If the string contains a "#" before a "<", treat it as invalid HTML.
if (selector && typeof selector === 'string') {
var hash_position = selector.indexOf('#');
if (hash_position >= 0) {
var bracket_position = selector.indexOf('<');
if (bracket_position > hash_position) {
throw 'Syntax error, unrecognized expression: ' + selector;
}
}
}
return jquery_init.call(this, selector, context, rootjQuery);
};
jQuery.fn.init.prototype = jquery_init.prototype;
})();
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
sfHover = function()
{
var sfEls =
document.getElementById('nav').getElementsByTagName('li');
for(var index = 0; index < sfEls.length; index++)
{
sfEls[i].onmouseover = function()
{
this.className += " sfhover";
}
sfEls[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(
" sfhover\\b"), "");
}
}
}
if (window.attachEvent)
{
window.attachEvent("onload", sfHover);
}

You have incorrect syntxis
What do you whant to do with ?
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
maybe code below is what you want ? ( find elements, i think it is better use complex selector, and apply function to each element )
jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation').each(function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
});

The offending line is: site.js line 26
if should be something like
jQuery.each(jQuery('h1').add('h2'), function(index, element) { ... })
not
jQuery.each(jQuery('h1').add('h2')).function(index, element) { ... }

Gallery images visible based on screen size

I need a photography gallery to display in 3 rows, each row showing different number of images. Not all images have the same width. When the screen resizes I want more images to show, but in the same ratio (grow to 3/5/4, 4/6/5, etc...). The ratio should be like this (brackets represent an image):
[][]
[][][][]
[][][]
Visual example here.
It was partly working except for the offset. I tried to write an offset loop, and now it's not working at all. Here is the code:
<script>
jQuery(document).ready(function() {
jQuery('.gallery').wrap('<div class="gal-wrapper" />');
resizeGallery("#gallery-1",2);
resizeGallery("#gallery-2",4);
resizeGallery("#gallery-3",3);
});
jQuery(window).resize(function() {
resizeGallery("#gallery-1",2);
resizeGallery("#gallery-2",4);
resizeGallery("#gallery-3",3);
});
function resizeGallery(gall, initpos){
var x = 0;
var y = 0;
var accum_width = 0;
var final_width = accum_width;
var offset = initpos;
var wW = jQuery(window).width()-jQuery("#nav").width();
while(accum_width < wW){
var new_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
if((accum_width + new_width) > wW){
break;
}else{
accum_width += new_width+4;
}
x++;
}
/* worked partly to this point... onto the offset! */
while(y < offset){
var subtract_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
final_width -= subtract_width+4;
y++;
x--;
}
jQuery(gall).parent().width(final_width);
}
</script>
Here is a jsfiddle example.

Your working JS fiddle
In case That fiddle link doesn't work...
jQuery(document).ready(function() {
jQuery('.gallery').wrap('<div class="gal-wrapper" />');
var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
resizeGallery("#gallery-3", picCount-1);
resizeGallery("#gallery-1", picCount-2);
});
jQuery(window).resize(function() {
var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
resizeGallery("#gallery-3", picCount-1);
resizeGallery("#gallery-1", picCount-2);
});
function resizeGallery(gall, picCount) {
var x = 0;
var y = 0;
var accum_width = 0;
var wW = jQuery(window).width() - jQuery("#nav").width();
while (accum_width < wW && x < picCount) {
var new_width = jQuery(gall).find("img.attachment-medium:eq(" + x + ")").width();
if ((accum_width + new_width) > wW) {
break;
} else {
accum_width += new_width + 4;
}
x++;
}
jQuery(gall).parent().width(accum_width);
return x;
}