I'm new to this forum and am currently receiving the error Uncaught SyntaxError: expected expression, got keyword 'var' on my she-header.js beginning at console.log and ending at header height shrink. Any help would be much appreciated. I have not tried much, and the support available is not very informative about this problem.
var $j = jQuery.noConflict();
$j( document ).ready( function() {
"use strict";
// She header
sheHeader();
} );
/* ==============================================
HEADER EFFECTS
============================================== */
function sheHeader() {
var header = $j('.she-header-yes'),
container = $j('.she-header-yes .elementor-container, .she-header-yes.e-container'),
header_elementor = $j('.elementor-edit-mode .she-header-yes'),
header_logo = $j('.she-header-yes .elementor-widget-theme-site-logo .elementor-image, .she-header-yes .elementor-widget-image .elementor-image'),
data_settings = header.data('settings');
if ( typeof data_settings != 'undefined' ) {
var responsive_settings = data_settings["transparent_on"];
var width = $j(window).width(),
header_height= header.height(),
logo_width = header_logo.width(),
logo_height = header_logo.height() ;
}
// Check responsive is enabled
if( typeof width != 'undefined' && width) {
if( width >= 1025 ) {
var enabled = "desktop";
}else if (width > 767 && width < 1025 ) {
var enabled = "tablet";
}else if (width <= 767 ) {
var enabled = "mobile";
}
}
console.log($j.inArray(enabled, responsive_settings));
if ($j.inArray(enabled, responsive_settings)!='-1') {
var scroll_distance = data_settings["scroll_distance"];
var transparent_header = data_settings["transparent_header_show"];
var background = data_settings["background"];
var bottom_border_color = data_settings["custom_bottom_border_color"],
bottom_border_view = data_settings["bottom_border"],
bottom_border_width = data_settings["custom_bottom_border_width"];
var shrink_header = data_settings["shrink_header"],
data_height = data_settings["custom_height_header"],
data_height_tablet = data_settings["custom_height_header_tablet"],
data_height_mobile = data_settings["custom_height_header_mobile"];
var shrink_logo = data_settings["shrink_header_logo"],
data_logo_height = data_settings["custom_height_header_logo"],
data_logo_height_tablet = data_settings["custom_height_header_logo_tablet"],
data_logo_height_mobile = data_settings["custom_height_header_logo_mobile"];
var change_logo_color = data_settings["change_logo_color"];
var blur_bg = data_settings["blur_bg"];
var scroll_distance_hide_header = data_settings["scroll_distance_hide_header"];**
// add transparent class
if(transparent_header == "yes" ){
header.addClass('she-header-transparent-yes');
}
// header height shrink
if( typeof data_height != 'undefined' && data_height) {
if( width >= 1025 ) {
var shrink_height = data_height["size"];
}else if (width > 767 && width < 1025 ) {
var shrink_height = data_height_tablet["size"];
if(shrink_height == ''){
shrink_height = data_height["size"];
}
}else if (width <= 767 ) {
var shrink_height = data_height_mobile["size"];
if(shrink_height == ''){
shrink_height = data_height["size"];
}
}
}
// border bottom
if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
}
// hide header on scroll
if( typeof scroll_distance_hide_header != 'undefined' && scroll_distance_hide_header) {
var mywindow = $j(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > scroll_distance_hide_header["size"]) {
if(mywindow.scrollTop() > mypos)
{
header.addClass('headerup');
}else{
header.removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
}
// scroll function
$j(window).on("load scroll",function(e){
var scroll = $j(window).scrollTop();
if (header_elementor) {
header_elementor.css("position", "relative");
}
if (scroll >= scroll_distance["size"]) {
header.removeClass('header').addClass("she-header");
header.css("background-color", background);
header.css("border-bottom", bottom_border);
header.removeClass('she-header-transparent-yes');
if( shrink_header == "yes" ) {
header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
container.css({"min-height": shrink_height, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
}
if( change_logo_color == "yes" ) {
header_logo.addClass("change-logo-color");
}
if( blur_bg == "yes" ) {
header.css({"backdrop-filter": "saturate(180%) blur(20px)", "-webkit-backdrop-filter": "saturate(180%) blur(20px)"});
}
} else {
header.removeClass("she-header").addClass('header');
header.css("background-color", "");
header.css("border-bottom", "");
if(transparent_header == "yes" ){
header.addClass('she-header-transparent-yes');
}
if( shrink_header == "yes" ) {
header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
container.css("min-height", "");
}
if( change_logo_color == "yes" ) {
header_logo.removeClass("change-logo-color");
}
if( blur_bg == "yes" ) {
header.css({"backdrop-filter": "", "-webkit-backdrop-filter": ""});
}
}
});
}
};
I am trying to resize a rectangle in paper.js. I am able to do it for older versions of paperjs (like 0.9.25) but it is not working for the latest version 0.11.8. I am not sure why this is happening, any help would be highly appreciated.
Here is the Sketch link, you may select the version to 0.9.25 where it works and 0.11.8 where it doesnt work.
Sketch
Here is my code:
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 1
};
project.currentStyle = {
fillColor: 'green',
strokeColor: 'black'
};
var rect_a = new Path.Rectangle(new Point(50, 50), 50);
var segment, path, hitType;
var clickPos = null;
var movePath = false;
var minHeight = 1;
var minWidth = 1;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult)
return;
hitType = hitResult.type;
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
}
}
movePath = hitResult.type == 'fill';
if (movePath) {
project.activeLayer.addChild(hitResult.item);
}
clickPos = checkHitPosition(event);
}
function onMouseMove(event) {
changeCursor(event);
project.activeLayer.selected = false;
if (event.item)
event.item.selected = true;
}
function onMouseDrag(event) {
if (hitType == "stroke" || hitType == "segment") {
resizeRectangle(path, event);
} else {
path.position += event.delta;
}
}
function resizeRectangle(path, event) {
switch(clickPos) {
case "SE" :
resizeBottom(path, event);
resizeRight(path, event);
break;
case "NE" :
resizeTop(path, event);
resizeRight(path, event);
break;
case "SW" :
resizeBottom(path, event);
resizeLeft(path, event);
break;
case "NW" :
resizeTop(path, event);
resizeLeft(path, event);
break;
case "S" :
resizeBottom(path, event);
break;
case "N" :
resizeTop(path, event);
break;
case "E" :
resizeRight(path, event);
break;
case "W" :
resizeLeft(path, event);
break;
}
}
function resizeTop(path, event) {
if(path.bounds.height >= minHeight) {
var adj = Math.min(event.delta.y, path.bounds.height-minHeight);
path.bounds.top += adj;
}
}
function resizeBottom(path, event) {
if(path.bounds.height >= minHeight) {
path.bounds.bottom += event.delta.y;
}
}
function resizeLeft(path, event) {
if(path.bounds.width >= minWidth) {
path.bounds.left += event.delta.x;
}
}
function resizeRight(path, event) {
if(path.bounds.width >= minWidth) {
path.bounds.right += event.delta.x;
}
}
function checkHitPosition(event) {
var hitResult = project.hitTest(event.point, hitOptions);
var clickPosition = null;
if (hitResult) {
if (hitResult.type == 'stroke' || hitResult.type == 'segment') {
var bounds = hitResult.item.bounds;
var point = hitResult.point;
if (bounds.top == point.y) {
clickPosition = "N";
}
if (bounds.bottom == point.y) {
clickPosition = "S";
}
if (bounds.left == point.x) {
clickPosition = "W";
}
if (bounds.right == point.x) {
clickPosition = "E";
}
if (bounds.top == point.y && bounds.left == point.x) {
clickPosition = "NW";
}
if (bounds.top == point.y && bounds.right == point.x) {
clickPosition = "NE";
}
if (bounds.bottom == point.y && bounds.left == point.x) {
clickPosition = "SW";
}
if (bounds.bottom == point.y && bounds.right == point.x) {
clickPosition = "SE";
}
} else {
clickPosition = "C";
}
}
return clickPosition;
};
function changeCursor(event) {
var hitPosition = checkHitPosition(event);
if(hitPosition == null ) {
document.body.style.cursor = "auto";
} else {
if (hitPosition == "C") {
document.body.style.cursor = "all-scroll";
} else {
document.body.style.cursor = hitPosition + "-resize";
}
}
}
helloworld,
If you want to resize/scale your path, I recommend using the Path.scalemethod (http://paperjs.org/reference/item/#scale-hor-ver).
To apply this on your example, replace your current resizing methods with:
function resizeTop(path, event) {
if(path.bounds.height >= minHeight) {
var relH = (event.point.y - (path.bounds.bottomCenter.y)) / path.bounds.height;
path.scale(1, -relH, path.bounds.bottomCenter)
}
}
function resizeBottom(path, event) {
if(path.bounds.height >= minHeight) {
var relH = (event.point.y - (path.bounds.topCenter.y)) / path.bounds.height;
path.scale(1, relH, path.bounds.topCenter)
}
}
function resizeLeft(path, event) {
if(path.bounds.width >= minWidth) {
var relW = (event.point.x - (path.bounds.rightCenter.x)) / path.bounds.width;
path.scale(-relW, 1, path.bounds.rightCenter)
}
}
function resizeRight(path, event) {
if(path.bounds.width >= minWidth) {
var relW = (event.point.x - (path.bounds.leftCenter.x)) / path.bounds.width;
path.scale(relW, 1, path.bounds.leftCenter)
}
}
Have a nice day!
-- edit --
I remade your sketch and replaced the code, sketch, which works with every version.
I've installed Nivo Slider using the code from the demo included in the free download.
All of the images I am including in the slider are 800 pixels wide.
However, they are being resized to 1440 pixels wide. Extra code is being inserted:
<img src="images/bar.jpg" data-thumb="images/bar.jpg" alt="" title="" style="display: none; width: 1440px;">
I have searched the CSS and JS and can find no mention of 1440.
Where is this width being set?
Nivo Slider is responsive by default, if you want to limit the sliders width, use the below class in your CSS
.slider-wrapper.theme-default {
width: 800px; /* Desired width */
}
The above will work if you are using default theme of nivo slider, if you are using some other theme, than simply change the .theme-default to theme specific class which is assigned to the slider wrapper.
Use my custom nivo script code
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
(function($) {
var NivoSlider = function(element, options) {
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
var vars = {
currentSlide : 0,
currentImage : '',
totalSlides : 0,
randAnim : '',
running : false,
paused : false,
stop : false
};
var slider = $(element);
slider.data('nivo:vars', vars);
slider.css('position', 'relative');
slider.addClass('nivoSlider');
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if (!child.is('img')) {
if (child.is('a')) {
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
var childWidth = child.width();
if (childWidth == 0)
childWidth = child.attr('width');
var childHeight = child.height();
if (childHeight == 0)
childHeight = child.attr('height');
if (childWidth > slider.width()) {
slider.width(childWidth);
}
if (childHeight > slider.height()) {
slider.height(childHeight);
}
if (link != '') {
link.css('display', 'none');
}
child.css('display', 'none');
vars.totalSlides++;
});
if (settings.startSlide > 0) {
if (settings.startSlide >= vars.totalSlides)
settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}
if ($(kids[vars.currentSlide]).is('img')) {
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
if ($(kids[vars.currentSlide]).is('a')) {
$(kids[vars.currentSlide]).css('display', 'block');
}
slider.css({
'background' : 'url("' + vars.currentImage.attr('src') + '") no-repeat',
'background-size' : settings.backgroundSize
});
slider.append($('<div class="nivo-caption"><p></p></div>').css({
display : 'none',
opacity : settings.captionOpacity
}));
var processCaption = function(settings) {
var nivoCaption = $('.nivo-caption', slider);
if (vars.currentImage.attr('title') != '') {
var title = vars.currentImage.attr('title');
if (title.substr(0, 1) == '#')
title = $(title).html();
if (nivoCaption.css('display') == 'block') {
nivoCaption.find('p').fadeOut(settings.animSpeed, function() {
$(this).html(title);
$(this).fadeIn(settings.animSpeed);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.fadeIn(settings.animSpeed);
} else {
nivoCaption.fadeOut(settings.animSpeed);
}
}
processCaption(settings);
var timer = 0;
if (!settings.manualAdvance && kids.length > 1) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
if (settings.directionNav) {
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + settings.prevText + '</a><a class="nivo-nextNav">' + settings.nextText + '</a></div>');
if (settings.directionNavHide) {
$('.nivo-directionNav', slider).hide();
slider.hover(function() {
$('.nivo-directionNav', slider).show();
}, function() {
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function() {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function() {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
if (settings.controlNav) {
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for (var i = 0; i < kids.length; i++) {
if (settings.controlNavThumbs) {
var child = kids.eq(i);
if (!child.is('img')) {
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) + '" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="' + i + '">' + (i + 1) + '</a>');
}
}
$('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active');
$('.nivo-controlNav a', slider).live('click', function() {
if (vars.running)
return false;
if ($(this).hasClass('active'))
return false;
clearInterval(timer);
timer = '';
slider.css({
'background' : 'url("' + vars.currentImage.attr('src') + '") no-repeat',
'background-size' : settings.backgroundSize
});
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
if (settings.keyboardNav) {
$(window).keypress(function(event) {
if (event.keyCode == '37') {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
}
if (event.keyCode == '39') {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
}
});
}
if (settings.pauseOnHover) {
slider.hover(function() {
vars.paused = true;
clearInterval(timer);
timer = '';
}, function() {
vars.paused = false;
if (timer == '' && !settings.manualAdvance) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
});
}
slider.bind('nivo:animFinished', function() {
vars.running = false;
$(kids).each(function() {
if ($(this).is('a')) {
$(this).css('display', 'none');
}
});
if ($(kids[vars.currentSlide]).is('a')) {
$(kids[vars.currentSlide]).css('display', 'block');
}
if (timer == '' && !vars.paused && !settings.manualAdvance) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
settings.afterChange.call(this);
});
var createSlices = function(slider, settings, vars) {
for (var i = 0; i < settings.slices; i++) {
var sliceWidth = Math.round(slider.width() / settings.slices);
if (i == settings.slices - 1) {
slider.append($('<div class="nivo-slice"></div>').css({
left : (sliceWidth * i) + 'px',
width : (slider.width() - (sliceWidth * i)) + 'px',
height : '0px',
opacity : '0',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%',
'background-size': settings.backgroundSize
}));
} else {
slider.append($('<div class="nivo-slice"></div>').css({
left : (sliceWidth * i) + 'px',
width : sliceWidth + 'px',
height : '0px',
opacity : '0',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%',
'background-size': settings.backgroundSize
}));
}
}
}
var createBoxes = function(slider, settings, vars) {
var boxWidth = Math.round(slider.width() / settings.boxCols);
var boxHeight = Math.round(slider.height() / settings.boxRows);
for (var rows = 0; rows < settings.boxRows; rows++) {
for (var cols = 0; cols < settings.boxCols; cols++) {
if (cols == settings.boxCols - 1) {
slider.append($('<div class="nivo-box"></div>').css({
opacity : 0,
left : (boxWidth * cols) + 'px',
top : (boxHeight * rows) + 'px',
width : (slider.width() - (boxWidth * cols)) + 'px',
height : boxHeight + 'px',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px',
'background-size': settings.backgroundSize
}));
} else {
slider.append($('<div class="nivo-box"></div>').css({
opacity : 0,
left : (boxWidth * cols) + 'px',
top : (boxHeight * rows) + 'px',
width : boxWidth + 'px',
height : boxHeight + 'px',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px',
'background-size': settings.backgroundSize
}));
}
}
}
}
var nivoRun = function(slider, kids, settings, nudge) {
var vars = slider.data('nivo:vars');
if (vars && (vars.currentSlide == vars.totalSlides - 1)) {
settings.lastSlide.call(this);
}
if ((!vars || vars.stop) && !nudge)
return false;
settings.beforeChange.call(this);
if (!nudge) {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
} else {
if (nudge == 'prev') {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
}
if (nudge == 'next') {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
}
}
vars.currentSlide++;
if (vars.currentSlide == vars.totalSlides) {
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if (vars.currentSlide < 0)
vars.currentSlide = (vars.totalSlides - 1);
if ($(kids[vars.currentSlide]).is('img')) {
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
if (settings.controlNav) {
$('.nivo-controlNav a', slider).removeClass('active');
$('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active');
}
processCaption(settings);
$('.nivo-slice', slider).remove();
$('.nivo-box', slider).remove();
if (settings.effect == 'random') {
var anims = new Array('sliceDownRight', 'sliceDownLeft', 'sliceUpRight', 'sliceUpLeft', 'sliceUpDown', 'sliceUpDownLeft', 'fold', 'fade', 'boxRandom', 'boxRain', 'boxRainReverse', 'boxRainGrow', 'boxRainGrowReverse');
vars.randAnim = anims[Math.floor(Math.random() * (anims.length + 1))];
if (vars.randAnim == undefined)
vars.randAnim = 'fade';
}
if (settings.effect.indexOf(',') != -1) {
var anims = settings.effect.split(',');
vars.randAnim = anims[Math.floor(Math.random() * (anims.length))];
if (vars.randAnim == undefined)
vars.randAnim = 'fade';
}
vars.running = true;
if (settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
slice.css({
'top' : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
slice.css({
'bottom' : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var v = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
if (i == 0) {
slice.css('top', '0px');
i++;
} else {
slice.css('bottom', '0px');
i = 0;
}
if (v == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
} else if (settings.effect == 'fold' || vars.randAnim == 'fold') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
$('.nivo-slice', slider).each(function() {
var slice = $(this);
var origWidth = slice.width();
slice.css({
top : '0px',
height : '100%',
width : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
width : origWidth,
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
width : origWidth,
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'fade' || vars.randAnim == 'fade') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : slider.width() + 'px'
});
firstSlice.animate({
opacity : '1.0'
}, (settings.animSpeed * 2), '', function() {
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : '0px',
'opacity' : '1'
});
firstSlice.animate({
width : slider.width() + 'px'
}, (settings.animSpeed * 2), '', function() {
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : '0px',
'opacity' : '1',
'left' : '',
'right' : '0px'
});
firstSlice.animate({
width : slider.width() + 'px'
}, (settings.animSpeed * 2), '', function() {
firstSlice.css({
'left' : '0px',
'right' : ''
});
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom') {
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var boxes = shuffle($('.nivo-box', slider));
boxes.each(function() {
var box = $(this);
if (i == totalBoxes - 1) {
setTimeout(function() {
box.animate({
opacity : '1'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
box.animate({
opacity : '1'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
} else if (settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var rowIndex = 0;
var colIndex = 0;
var box2Darr = new Array();
box2Darr[rowIndex] = new Array();
var boxes = $('.nivo-box', slider);
if (settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
boxes = $('.nivo-box', slider)._reverse();
}
boxes.each(function() {
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if (colIndex == settings.boxCols) {
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = new Array();
}
});
for (var cols = 0; cols < (settings.boxCols * 2); cols++) {
var prevCol = cols;
for (var rows = 0; rows < settings.boxRows; rows++) {
if (prevCol >= 0 && prevCol < settings.boxCols) {
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if (settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
box.width(0).height(0);
}
if (i == totalBoxes - 1) {
setTimeout(function() {
box.animate({
opacity : '1',
width : w,
height : h
}, settings.animSpeed / 1.3, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + time));
} else {
setTimeout(function() {
box.animate({
opacity : '1',
width : w,
height : h
}, settings.animSpeed / 1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
}
var shuffle = function(arr) {
for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
var trace = function(msg) {
if (this.console && typeof console.log != "undefined")
console.log(msg);
}
this.stop = function() {
if (!$(element).data('nivo:vars').stop) {
$(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
}
this.start = function() {
if ($(element).data('nivo:vars').stop) {
$(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
}
settings.afterLoad.call(this);
return this;
};
$.fn.nivoSlider = function(options) {
return this.each(function(key, value) {
var element = $(this);
if (element.data('nivoslider'))
return element.data('nivoslider');
var nivoslider = new NivoSlider(this, options);
element.data('nivoslider', nivoslider);
});
};
$.fn.nivoSlider.defaults = {
backgroundSize:'',
effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
controlNavThumbs : false,
controlNavThumbsFromRel : false,
controlNavThumbsSearch : '.jpg',
controlNavThumbsReplace : '_thumb.jpg',
keyboardNav : true,
pauseOnHover : true,
manualAdvance : false,
captionOpacity : 0.8,
prevText : 'Prev',
nextText : 'Next',
beforeChange : function() {
},
afterChange : function() {
},
slideshowEnd : function() {
},
lastSlide : function() {
},
afterLoad : function() {
}
};
$.fn._reverse = [].reverse;
})(jQuery);
When you initial nivoSlide pass my new parameter backgroundSize:'your width size px your height size px';
Example:
$('#slider').nivoSlider({
backgroundSize:'687px 400px',
effect: 'random',
animSpeed: 500,
pauseTime: 3000,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true});
});
I would like to request the Like Button status of each post (by ID) that is appended by Infinite Scroll.
<li class="post text" id="{PostID}">
The Tumblr Documentation provides this method of checking the status of a Like Button for individual posts:
Tumblr.LikeButton.get_status_by_page(n)
Description: Call this function after requesting a new page of Posts. Takes the page number that was just loaded as an integer.
Finally, here is the Infinite Scroll script (Proto.jp modified by Cody Sherman):
$(document).ready(function() {
var tumblrAutoPager = {
url: "http://proto.jp/",
ver: "0.1.7",
rF: true,
gP: {},
pp: null,
ppId: "",
LN: location.hostname,
init: function() {
if ($("autopagerize_icon") || navigator.userAgent.indexOf('iPhone') != -1) return;
var tAP = tumblrAutoPager;
var p = 1;
var lh = location.href;
var lhp = lh.lastIndexOf("/page/");
var lht = lh.lastIndexOf("/tagged/");
if (lhp != -1) {
p = parseInt(lh.slice(lhp + 6));
tAP.LN = lh.slice(7, lhp);
} else if (lht != -1) {
tAP.LN = lh.slice(7);
if (tAP.LN.slice(tAP.LN.length - 1) == "/") tAP.LN = tAP.LN.slice(0, tAP.LN.length - 1);
} else if ("http://" + tAP.LN + "/" != lh) {
return;
};
var gPFncs = [];
gPFncs[0] = function(aE) {
var r = [];
for (var i = 0, l = aE.length; i < l; i++) {
if (aE[i].className == "autopagerize_page_element") {
r = gCE(aE[i]);
break;
}
}
return r;
};
gPFncs[1] = function(aE) {
var r = [];
for (var i = 0, l = aE.length; i < l; i++) {
var arr = aE[i].className ? aE[i].className.split(" ") : null;
if (arr) {
for (var j = 0; j < arr.length; j++) {
arr[j] == "post" ? r.push(aE[i]) : null;
}
}
}
return r;
};
gPFncs[2] = function(aE) {
var r = [];
var tmpId = tAP.ppId ? [tAP.ppId] : ["posts", "main", "container", "content", "apDiv2", "wrapper", "projects"];
for (var i = 0, l = aE.length; i < l; i++) {
for (var j = 0; j < tmpId.length; j++) {
if (aE[i].id == tmpId[j]) {
r = gCE(aE[i]);
tAP.ppId = aE[i].id;
break;
}
}
}
return r;
};
for (var i = 0; i < gPFncs.length; i++) {
var getElems = gPFncs[i](document.body.getElementsByTagName('*'));
if (getElems.length) {
tAP.gP = gPFncs[i];
tAP.pp = getElems[0].parentNode;
break;
}
}
function gCE(pElem) {
var r = [];
for (var i = 0, l = pElem.childNodes.length; i < l; i++) {
r.push(pElem.childNodes.item(i))
}
return r;
}
if (!tAP.pp) {
return;
}
sendRequest.README = {
license: 'Public Domain',
url: 'http://jsgt.org/lib/ajax/ref.htm',
version: 0.516,
author: 'Toshiro Takahashi'
};
function chkAjaBrowser() {
var A, B = navigator.userAgent;
this.bw = {
safari: ((A = B.split('AppleWebKit/')[1]) ? A.split('(')[0].split('.')[0] : 0) >= 124,
konqueror: ((A = B.split('Konqueror/')[1]) ? A.split(';')[0] : 0) >= 3.3,
mozes: ((A = B.split('Gecko/')[1]) ? A.split(' ')[0] : 0) >= 20011128,
opera: ( !! window.opera) && ((typeof XMLHttpRequest) == 'function'),
msie: ( !! window.ActiveXObject) ? ( !! createHttpRequest()) : false
};
return (this.bw.safari || this.bw.konqueror || this.bw.mozes || this.bw.opera || this.bw.msie)
}
function createHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
} else {
if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP')
} catch (B) {
try {
return new ActiveXObject('Microsoft.XMLHTTP')
} catch (A) {
return null
}
}
} else {
return null
}
}
};
function sendRequest(E, R, C, D, F, G, S, A) {
var Q = C.toUpperCase() == 'GET',
H = createHttpRequest();
if (H == null) {
return null
}
if ((G) ? G : false) {
D += ((D.indexOf('?') == -1) ? '?' : '&') + 't=' + (new Date()).getTime()
}
var P = new chkAjaBrowser(),
L = P.bw.opera,
I = P.bw.safari,
N = P.bw.konqueror,
M = P.bw.mozes;
if (typeof E == 'object') {
var J = E.onload;
var O = E.onbeforsetheader
} else {
var J = E;
var O = null
}
if (L || I || M) {
H.onload = function() {
J(H);
H.abort()
}
} else {
H.onreadystatechange = function() {
if (H.readyState == 4) {
J(H);
H.abort()
}
}
}
R = K(R, D);
if (Q) {
D += ((D.indexOf('?') == -1) ? '?' : (R == '') ? '' : '&') + R
}
H.open(C, D, F, S, A);
if ( !! O) {
O(H)
}
B(H);
H.send(R);
function B(T) {
if (!L || typeof T.setRequestHeader == 'function') {
T.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
}
return T
}
function K(X, V) {
var Z = [];
if (typeof X == 'object') {
for (var W in X) {
Y(W, X[W])
}
} else {
if (typeof X == 'string') {
if (X == '') {
return ''
}
if (X.charAt(0) == '&') {
X = X.substring(1, X.length)
}
var T = X.split('&');
for (var W = 0; W < T.length; W++) {
var U = T[W].split('=');
Y(U[0], U[1])
}
}
}
function Y(b, a) {
Z.push(encodeURIComponent(b) + '=' + encodeURIComponent(a))
}
return Z.join('&')
}
return H
}
function addNextPage(oj) {
if (oj.status == 404) {
tAP.remainFlg = false;
return;
}
var d = document.createElement("div");
d.innerHTML = oj.responseText;
var posts = tAP.gP(d.getElementsByTagName("*"));
if (posts.length < 2) {
tAP.rF = false;
return;
}
d = document.createElement("div");
d.className = "tumblrAutoPager_page_info";
tAP.pp.appendChild(d);
for (var i = 0; i < posts.length; i++) {
tAP.pp.appendChild(posts[i]);
}
var footer = $("footer");
footer ? footer.parentNode.appendChild(footer) : null;
tAP.rF = true;
}
watch_scroll();
function watch_scroll() {
var d = document.compatMode == "BackCompat" ? document.body : document.documentElement;
var r = d.scrollHeight - d.clientHeight - (d.scrollTop || document.body.scrollTop);
if (r < d.clientHeight * 2 && tAP.rF) {
tAP.rF = false;
p++;
sendRequest(addNextPage, "", "GET", "http://" + tAP.LN + "/page/" + p, true);
}
setTimeout(arguments.callee, 200);
};
function $(id) {
return document.getElementById(id)
}
},
switchAutoPage: function() {
this.rF = !this.rF;
var aE = document.getElementsByTagName('*');
for (var i = 0, l = aE.length; i < l; i++) {
if (aE[i].className == "tAP_switch") {
aE[i].firstChild.nodeValue = this.rF ? "AutoPage[OFF]" : "AutoPage[ON]";
}
}
}
};
window.addEventListener ? window.addEventListener('load', tumblrAutoPager.init, false) : window.attachEvent ? window.attachEvent("onload", tumblrAutoPager.init) : window.onload = tumblrAutoPager.init;
});
Any insight is greatly appreciated. Thank you!
This seemed to do the trick!
function addNextPage(oj) {
if (oj.status == 404) {
tAP.remainFlg = false;
return;
}
var d = document.createElement("div");
d.innerHTML = oj.responseText;
var posts = tAP.gP(d.getElementsByTagName("*"));
if (posts.length < 2) {
tAP.rF = false;
return;
}
d = document.createElement("div");
d.className = "tumblrAutoPager_page_info";
tAP.pp.appendChild(d);
for (var i = 0; i < posts.length; i++) {
tAP.pp.appendChild(posts[i]);
}
var footer = $("footer");
footer ? footer.parentNode.appendChild(footer) : null;
tAP.rF = true;
//Get Like Button status of newly appended page
Tumblr.LikeButton.get_status_by_page(p);
}
This is my asp code, can be the same done in Javascript?
HttpCookie cookie = this.Request.Cookies["Votes"];
if (cookie != null)
if (cookie.Values.Get(id.ToString()) == "true") return true;
return false;
function readTheCookie(the_info)
{
// load the cookie into a variable and unescape it
var the_cookie = document.cookie;
var the_cookie = unescape(the_cookie);
// separate the values from the cookie name
var broken_cookie = the_cookie.split("some parameter"); // parameter depends on how the cookie is stored
var the_values = broken_cookie["some index"]; // index of the value that you want
}
These are all the parts of reading a cookie, you can use this snippet to achieve what you want.
document.cookie gives you access to the cookies in JavaScript. You will need to do some parsing to do what you want to do.
using this code
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function GetSetCookie() {
var version = getCookie("version");
if (version != null && version != "") {
if (version == 'full') {
version = 'text';
}
else {
version = 'full';
}
}
else {
version = 'full';
}
setCookie("version", version, 365);
window.top.location.reload();
}
I have found this code in W3schools which works for me
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}