Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
Related
I am using Shopify "Streamline Theme" with quick product view and I recently added infinite scroll to products on each collection using Ajaxinate.js.
When I open a collection page it loads with some products which is supposed to do, The products already there work fine with quick view and quick add to cart and also.
The Infinite scroll works fine and it loads new product fine but the problem is raised when the new products loaded through AJAX call doesn't have work with the quick view function.
I have tried to create a callback function to activate the quick view with no success, using the theme initialisation code with no success.
function callBack(){
theme.init();
theme.initQuickShop();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "scroll",
loadingText: 'Loading...',
callback: callBack
});
});
Edit -------
My problem, is that when the page is loaded only the initial loaded products quickview elements are loaded in the DOM. When the scroll more button is clicked, the newly loaded products are loaded without their respective quickview elements. Hence why the quickview does't work for them. The theme.js file comes with this initialisation code:
theme.reinitProductGridItem = function($scope) {
if (AOS) {
AOS.refreshHard();
}
if (theme.settings.currenciesEnabled) {
theme.currencySwitcher.ajaxrefresh();
}
// Reload quick shop buttons
theme.initQuickShop(true);
// Refresh reviews app
if (window.SPR) {
SPR.initDomEls();SPR.loadBadges();
}
// Re-register product templates in quick view modals.
// Will not double-register.
sections.register('product-template', theme.Product, $scope);
// Re-hook up collapsible box triggers
theme.collapsibles.init();
};
I have tried to integrate this into a callback but no success, the quickview modal doesn't seem to load for the newly loaded products:
function callBack(){
ReloadSmartWishlist();
var $container = $('#CollectionSection');
theme.reinitProductGridItem($container);
// I have tried the following init qith no success:
// theme.init();
// theme.initQuickShop(true);
// theme.initQuickShop();
// sections.register('product-template', theme.Product, $container);
// AOS.refreshHard();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "click",
loadingText: 'Loading...',
offset: 0,
callback: callBack
});
});
I am missing something but what? :/
Note for other things like loading products images with the callback and the wishlist app, it works as intended...
When you load elements via AJAX and if the events are not attached to a parent element that is not removed from the DOM, those elements will not have an attached event to them.
The term used here is event delegation.
Here is an example of non-delegated event:
document.querySelectorAll('a').addEventListener('click', function(){
// Do something
})
Since you are attaching the event to the existing "a" elements if you add new 'a' via AJAX those elements will not have the event since Javascript already attached all the events and it will not reattach them if you don't specifically recall them again.
Here is an example of a delegated event:
document.querySelector('body').addEventListener('click', function(target){
let target = event.target;
if (target.tagName === 'A'){
// Do something here
}
})
Where we attach the event to the body tag ( where it's a better idea to attach it to a closer none-modified parent element of the ajax items ) and once we click we check if our target tag is an "a" and do something then.
So long story short, you will need to delegate the quick cart link so that it works after you load the items via AJAX.
Drip is correct you need to delegate your event, but for people like me it's hard to completely understand how to do that.
I'm not sure how your quickview is structured, but if you open it with a .click function and can use jquery use the [.on() function][1].
For example: I use a quickview that opens on a button click. My button is attached to my product-grid-item.liquid with this bit of code:
<div class="quick-view-button">
<a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a>
</div>
My quickview function originally looked like this:
function quickView() {
$(".quick-view").click(function () {
//all of the quickview code
What happens is exactly like you described. The event listeners only loaded on the first product load but nothing after an AJAX load.
Using jquery's .on() binds the event listener to the element meaning when it's loaded in later it'll still have the event. Here's an example of what my code looks like after using .on()
function quickView() {
$('body').on('click','.quick-view',function(){
I really hope this helps you or someone else with this problem.
[1]: http://api.jquery.com/on/
I am using the Alloy Diagram Builder to create and display network topology.
I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.
http://alloyui.com/examples/diagram-builder/real-world/
I have tried these but it does not work.
// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");
// unbind
$(".aui-diagram-node").each(function(){
$(this).unbind();
});
I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.
Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.
So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.
Yes it's a kludge but it just may work.
To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:
/*
* Readonly the diagram
*/
function ReadonlyDiagram(diagram) {
function detachRecursively(node) {
node.get('children').each(detachRecursively);
// You may also want to set the cursor to the default since it will
// change based on which elements the mouse is over.
// node.setStyle('cursor', 'auto');
// You may want to detach specific events such as 'click' or
// 'mousedown' if you do not want to disable all events.
node.detach();
};
diagram.on('render', function (event) {
detachRecursively(diagram.get('boundingBox'));
});
}
Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:
YUI().use('aui-diagram-builder', function (y) {
var diagram = new y.DiagramBuilder(
{
availableFields: data,
boundingBox: '#' + containerId,
fields: nodes,
srcNode: '#' + builderId
}).render();
diagram.connectAll(connections);
if (callBackDiagram !== undefined) callBackDiagram(diagram);
if(isReadonly === true) ReadonlyDiagram(diagram);
});
});
Reference
As the title says. I want to make a list of div elements inside a div. I want to be able to scroll the list up and down, and when the list is not scrolling anymore, i want to be able to click the listed elements do to something. I cant figure out how to do this.
the touchmove event executes whenever the user touches the div, even if the div its scrolling. THen i cant figure out how to make let the program know that the div isnt scrolling anymore, so the next touch on the elements will trigger a non scrollable event.....
EDIT:
what i have so far is this... However this is a quick "fix" and its not working as intended. For example if you scroll quickly up and down, then the div will think you pressed on one of the elements..
exerciseWrapper is the elements inside the scrolling div. Each element is wrapped around exerciseWrapper.
$('.exerciseWrapper').on('touchstart',function(){
touchstart=true;
setTimeout(function(){
touchstart=false;
}, 100);
});
$('.exerciseWrapper').on('touchend',function(){
if(touchstart)
{
$('.exerciseWrapper').not(this).css('border-color','black');
$(this).css('border-color','orange');
}
});
Ok so i finally figured this one out.. Reason why i couldnt wrap my minds around the solution on this, was because i couldnt get other events then eventstart and event end to work... At the time of writing i still cant get the other events like eventcancel and eventleave to work. However eventmove works and i solved the problem using this event. eventmove keeps updating the element its linked when you move your finger. Then i had a variable of touchmove to constantly be true if i am scrolling my div (with touchmove event). WHen i stop moving i can clik on selected element again and use a normal eventstart event.. This is my working code:
var touchmove=false;
function AddExercisesEvents()
{
$('#exerciseMenu').on('touchmove',function(){
touchstart=true;
$('h1').text("move");
});
$('.exerciseWrapper').on('touchend mouseup',function(event){
event.stopPropagation();
event.preventDefault();
// $('.exerciseWrapper').off();
if(event.handled !== true)
{
touchstart=false;
//ENTERING editExercise Menu..!
if(!touchstart)
{
//insert magic here
alert($(this).attr('id'));
}
}
return false;
});
}
One thing I don't understand is how did Minima.pl (http://minima.pl/pl) implement that feature within Isotope library where clicking on a thumbnail opens up a bigger gallery of images (a single clickable image, clicking on it makes it cycle through the rest of the images in a gallery) while resorting the Isotope items?
Here is how far I got -> http://tinyurl.com/cr5kzml
Anyone have any ideas on what I'm missing, how do I get this working?
Well, I am author of minima.pl website ;).
The part which takes care of repositioning of tiles after enlarging clicked one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
It also takes care of scrolling browser window to top of clicked tile.
I am triggering the above action after loading clicked tile content (by AJAX). The trick is to trigger it simultaneously with enlarging the clicked tile.
I will be glad to answer any additional questions.
Actually, this is simple to achieve. Normally, a click on an Isotope .item can, for example, maximise it, another click minimises it. If you want interactivity inside a clicked-on Isotope .item, you simply don't attach the minimisation function to it. Instead, clicking on another Isotope .item minimises the previously selected = maximised item. By keeping track of the previously selected .item, clicks inside the maximised .item won't close it. Basic logic for an example that allows maximising and minimising only by clicking on a "header" zone inside each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponding to .item divs width relationships
}
});
// $container.isotope('shuffle'); // randomise for every new visitor
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks
var $previousSelected = $('.selected'); // necessary for switching
if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected
}
$container.isotope('reLayout'); // comment out to mimick old masonry behaviour
});
});
The actual interactivity inside each Isotope .item can then be coded however you like; hardcoded or dynamic...
By click on a thumbnail a ajax function return the same gallery except a bigger replacement for the thumbnail. Then let isotope rearrange the gallery. You can find an example here: http://www.maxmedia.com or http://www.phpdevpad.de (my own site).
As stated in the title i want to remove the mousewheel capability of the dijit.form.Slider since it sometimes triggers the slider when scrolling the page and the cursor hits the slider.
But it seems that the onmousewheel events are connected in the dojo source and we cannot replace or modify the dojo files.
Anyone knows a short solution (optimally a declarative one)?
Thanks
The quickest way to do this would be to clobber the _mouseWheeled method of the slider widget.
Declarative example:
<div dojoType="dijit.form.VerticalSlider" name="vertical1" id="slider2" ... >
<script type="dojo/method" event="_mouseWheeled"></script>
...
</div>
Programmatic example, single instance:
dijit.byId('mySlider')._mouseWheeled = function() {};
Programmatic, ALL instances:
dojo.extend(dijit.form.HorizontalSlider, {
_mouseWheeled: function() {}
});
(This will cover both Horizontal and Vertical sliders since VerticalSlider inherits from HorizontalSlider.)