I'm using tinyscrollbar.
There is Property contentPosition (Number, The position of the content relative).
I cant' figure out how to change it.
My current js is:
$(document).ready(function() {
if ( $("#contact-page__scrollbar").length > 0 ) {
$("#contact-page__scrollbar").tinyscrollbar( {
axis: 'x'
})
}
});
Sorry, found solution myself
$(document).ready(function() {
if ( $("#contact-page__scrollbar").length > 0 ) {
var $scrollbar6 = $("#contact-page__scrollbar");
$scrollbar6.tinyscrollbar( {axis: 'x'});
var scrollbar6 = $scrollbar6.data("plugin_tinyscrollbar");
var anchorPosition = 92;
scrollbar6.update(anchorPosition);
return false;
}
});
Related
If I have an element styled with scrollbar pseudoclasses (eg in chrome), is it possible to find a css property of that pseudoclass? An example:
<body><div #a></div></body>
<style>
#a::-webkit-scrollbar {
width: 10px
}
</style>
I've tried using getComputedStyle(domNode,'::-webkit-scrollbar').width, but its not returning the correct value.
You can subtract the element's offset by its client size which will give the scroll bar size.
var myDiv = document.getElement...
var verticalScrollBarWidth = myDiv.offsetWidth - myDiv.clientWidth;
var horizontalScrollBarHeight = myDiv.offsetHeight - myDiv.clientHeight;
Here are two properties:
Object.defineProperty(HTMLElement, "verticalScrollBarWidth", {
get: function() {
var tmpWidth = HTMLElement.offsetWidth - HTMLElement.clientWidth;
if (tmpWidth > 0)
return tmpWidth;
return -1;
},
set: undefined
});
Object.defineProperty(HTMLElement, "horizontalScrollBarHeight", {
get: function() {
var tmpHeight = HTMLElement.offsetHeight - HTMLElement.clientHeight;
if (tmpHeight > 0)
return tmpHeight;
return -1;
},
set: undefined
});
Usage:
var myDiv = document.getElement...
var vScrollBarWidth = myDiv.verticalScrollBarWidth;
var hScrollBarWidth = myDiv.horizontalScrollBarHeight;
I am getting the following error when I scroll in ui-grid:
Uncaught TypeError: Cannot read property 'percentage' of undefined
Interestingly I get the same error on the ui-grid tutorial site so it is possible it is just simply a bug.
Here is a plunker that shows the issue.
Here are the grid options I am using:
mc.gridOptions = {
data: mc.people,
enableSorting: true,
onRegisterApi: function( gridApi ) {
mc.gridApi = gridApi;
},
columnDefs: [
{field: 'name'},
{field: 'age'},
{field: 'state', enableSorting: false}
]
};
Any ideas as to what I am doing wrong here? As far as I can tell there is nothing wrong with this.
I would mention this in the comment box, but I need the space and the formatting to explain that you probably need to bring this up to their attention:
First you are using an unstable version, your best bet is to use a stable version that is being used and tested.
The unstable version is throwing a bug in the code below.. please review all my comments in asterisk (******) :
// Scroll the render container viewport when the mousewheel is used
$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
// use wheelDeltaY
var newEvent = GridUtil.normalizeWheelEvent(evt);
var args = { target: $elm };
*****THIS STATEMENT IS TRUE BECAUSE YOU SCROLLED VERTICALLY, ARGS.Y IS SET*****
if (newEvent.deltaY !== 0) {
var scrollYAmount = newEvent.deltaY * -120;
// Get the scroll percentage
var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / rowContainer.getVerticalScrollLength();
// Keep scrollPercentage within the range 0-1.
if (scrollYPercentage < 0) { scrollYPercentage = 0; }
else if (scrollYPercentage > 1) { scrollYPercentage = 1; }
***THIS IS SET***
args.y = { percentage: scrollYPercentage, pixels: scrollYAmount };
}
*****THIS STATEMENT IS FALSE BECAUSE YOU NEVER SCROLLED HORIZONTALLY, ARGS.X IS NOT SET*****
if (newEvent.deltaX !== 0) {
var scrollXAmount = newEvent.deltaX * -120;
// Get the scroll percentage
var scrollLeft = GridUtil.normalizeScrollLeft(containerCtrl.viewport);
var scrollXPercentage = (scrollLeft + scrollXAmount) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
// Keep scrollPercentage within the range 0-1.
if (scrollXPercentage < 0) { scrollXPercentage = 0; }
else if (scrollXPercentage > 1) { scrollXPercentage = 1; }
***THIS DOESNT GET SET SINCE IT WILL NOT REACH THIS POINT***
args.x = { percentage: scrollXPercentage, pixels: scrollXAmount };
}
*****THROWS AN ERROR BECAUSE ARGS.X IS NULL & DOESNT EXIST*****
// Let the parent container scroll if the grid is already at the top/bottom
if ((args.y.percentage !== 0 && args.y.percentage !== 1) || (args.x.percentage !== 0 && args.x.percentage !== 1)) {
evt.preventDefault();
}
uiGridCtrl.fireScrollingEvent(args);
});
I'm a beginner php developer, and have a shockingly poor fluency in Javascript. An ezpublish website I'm working on has this slider in as a default piece of code, but it displays three items. How can I edit it to show only 1 item? The code is:
(function() {
YUI( YUI3_config ).use( 'node', 'event', 'io-ez', function(Y, result) {
Y.on('domready', function(e) {
var offset = 0;
var limit = 1;
var total = {$block.valid_nodes|count()};
var handleRequest = function(e) {
var className = e.target.get('className');
if ( className == 'carousel-next-button' ) {
offset += 1;
if ( offset > total )
offset = 0;
}
if ( className == 'carousel-prev-button' ) {
var diff = total - offset;
if( offset == 0 )
offset = 0;
else
offset -= 1;
}
var colContent = Y.Node.all('#block-3 .col-content');
colContent.each(function(n, e) {
n.addClass('loading');
var height = n.get('region').bottom - n.get('region').top;
n.setStyle('height', height + 'px');
n.set('innerHTML', '');
});
var data = 'http_accept=json&offset=' + offset;
data += '&limit=' + limit;
data += '&block_id={$block.id}';
Y.io.ez( 'ezflow::getvaliditems', { on: { success: _callBack
}, method: 'POST', data: data } );
};
var _callBack = function(id, o) {
if ( o.responseJSON !== undefined ) {
var response = o.responseJSON;
var colContent = Y.Node.all('#block-{$block.id} .col-content');
for(var i = 0; i < colContent.size(); i++) {
var colNode = colContent.item(i);
if ( response.content[i] !== undefined )
colNode.set('innerHTML', response.content[i] );
}
}
};
var prevButton = Y.one('#block-{$block.id} input.carousel-prev-button');
prevButton.on('click', handleRequest);
var nextButton = Y.one('#block-{$block.id} input.carousel-next-button');
nextButton.on('click', handleRequest);
});
});
})();
</script>
A hand with this would be great x
Looks to me like this code loads each item after the user clicks prevButton or nextButton. So the simplest way to force only a single item to display is probably to hide those buttons.
Without the markup it's hard to say what the optimal solution is, but I would try to find out what makes the particular markup you're working with into a carousel (I'd guess a class containing "carousel") and remove that so that it's just a single item without the carousel functionality.
For what it's worth, this question is not specific to eZ Publish or PHP so I'd consider removing those tags.
I'm working on an ASP.NET MVC 4 application. I am using the GetUikit css library which also offers some basic javascript/ jQuery powered stuff. I'm using the Off canvas component which is actually working.
Getuikit: https://github.com/uikit/uikit http://getuikit.com/index.html
Offcanvas Component: http://getuikit.com/docs/offcanvas.html
I can call the offcanvas as advertised via an anchor tag. That's no problem at all. I would want to be able to hide and show the offcanvas area from javascript. I've tracked down the specific Javascript section in the UIKit provided .js file. This section looks like this:
(function($, UI) {
"use strict";
var $win = $(window),
$doc = $(document),
Offcanvas = {
show: function(element) {
element = $(element);
if (!element.length) return;
var doc = $("html"),
bar = element.find(".uk-offcanvas-bar:first"),
rtl = ($.UIkit.langdirection == "right"),
dir = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;
scrollpos = {x: window.scrollX, y: window.scrollY};
element.addClass("uk-active");
doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw
bar.addClass("uk-offcanvas-bar-show").width();
setTimeout(function() {
/*SELF ADDED FOR ARROW*/
var elementArrow = document.getElementById('notification-arrow');
$(elementArrow).css("display", "inline-block");
/*--------------------*/
}, 250);
element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {
var target = $(e.target);
if (!e.type.match(/swipe/)) {
if (!target.hasClass("uk-offcanvas-close")) {
if (target.hasClass("uk-offcanvas-bar")) return;
if (target.parents(".uk-offcanvas-bar:first").length) return;
}
}
e.stopImmediatePropagation();
Offcanvas.hide();
});
$doc.on('keydown.ukoffcanvas', function(e) {
if (e.keyCode === 27) { // ESC
Offcanvas.hide();
}
});
},
hide: function(force) {
var doc = $("html"),
panel = $(".uk-offcanvas.uk-active"),
rtl = ($.UIkit.langdirection == "right"),
bar = panel.find(".uk-offcanvas-bar:first");
if (!panel.length) return;
/*SELF ADDED FOR ARROW*/
$('#notification-arrow').css("display", "none");
/*--------------------*/
if ($.UIkit.support.transition && !force) {
doc.one($.UIkit.support.transition.end, function() {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
window.scrollTo(scrollpos.x, scrollpos.y);
}).css((rtl ? "margin-right" : "margin-left"), "");
setTimeout(function(){
bar.removeClass("uk-offcanvas-bar-show");
}, 50);
} else {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
bar.removeClass("uk-offcanvas-bar-show");
window.scrollTo(scrollpos.x, scrollpos.y);
}
panel.off(".ukoffcanvas");
$doc.off(".ukoffcanvas");
}
}, scrollpos;
var OffcanvasTrigger = function(element, options) {
var $this = this,
$element = $(element);
if($element.data("offcanvas")) return;
this.options = $.extend({
"target": $element.is("a") ? $element.attr("href") : false
}, options);
this.element = $element;
$element.on("click", function(e) {
e.preventDefault();
Offcanvas.show($this.options.target);
});
this.element.data("offcanvas", this);
};
OffcanvasTrigger.offcanvas = Offcanvas;
UI["offcanvas"] = OffcanvasTrigger;
// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {
e.preventDefault();
var ele = $(this);
if (!ele.data("offcanvas")) {
var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
ele.trigger("click");
}
});
})(jQuery, jQuery.UIkit);
I found one similar thread on Stackoverflow (How can I access the inner functions of this script?) which suggested I'd need to use the following method:
jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');
Where #alerts-canvas is the id of my offcanvas area. When I try to call this from javascript I get the following Javascript error: Uncaught TypeError: Cannot read property 'offcanvas' of undefined.
I have no idea what I'm doing wrong, but I really hope this will work because I really need this to work.
I made sure the script is linked (this happens for all pages in the general _Layout page.
Do you guys have any idea what I might be doing wrong?
try
$.UIkit.offcanvas.show('#alerts-canvas');
i'm using wookmark plugin for my project and i need to load more items when the V scroll reach to the bottom.
plugin url : http://www.wookmark.com/jquery-plugin
scroll function that i use :
function _scroll() {
var v = false;
$(document).scroll(function(e) {
var t = document.height - (window.pageYOffset + window.innerHeight);
if ((t <= 20) && ( !v)) {
v = true;
$.ajax({ type:"POST",
data: {type:$("#type").val(),id:$("#pid").val(),lid:$("#lid").val()},
async:true,
cache:false,
url:"fetchMore.php?v=18",
success: function(d) {
var t = d.split('{#}');
if (parseInt($("#lid").val()) != t[1]) {
$("#tiles").append(t[0]);
$("#lid").val(t[1]);
applyLayout();
}
v = false;
} });
}
});
}
and the applylayout function:
function applyLayout() {
$('#tiles').imagesLoaded(function() {
// Destroy the old handler
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
$handler = $('#tiles li');
$handler.wookmark(options);
});
}
Finally my options and sort functions:
function comparatorId(a, b) {
return $(a).attr("id") > $(b).attr("id") ? -1 : 1;
}
function _Animate() {
$('#tiles').imagesLoaded(function() {
options = {
autoResize: true,
container: $('#main'),
offset: 2,
itemWidth: 210,
comparator: comparatorId,
direction: 'right',
fillEmptySpace: false
};
$handler = $('#tiles li');
$handler.wookmark(options);
});
}
The problem is:
when i'm going to load more the items are randomly re-sorting just like there is no comparatorId function ..
is there any solution ?
if there is no solution ..
how can i do a ul li tags like this layout ?
i can put them side by side but i want them to be side by side + under each other
i've solved the problem..
it's just by putting data-id="{ID}" tag for li and remove all class(es)