Take a look at the picture. I have created 3 lists. The items in the list on the left hand side is draggable (jquery-ui v1.8.20). You can drag a picture from the list on the left hand side and drop them on the list in the middle. The lists can contain many pictures so I decided to add a scrollbar using slimScroll.js (v0.5) to get scrolling on those lists.
When I drag an item from the list on the left hand side the item disappears behind the middle list. This has something to do with the implementation of the slimScroll plugin.
Do any of you have similar problems with the slimScroll together with jquery draggable? How did you fix it?
I found the solution to my problem
I added a the <div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></div> outside the other divs that make up the page:
<div id="mainCategorizerContainer">
<div id="documentPageRecords" class="documentPagesRecordsArea ui-widget-header">
<span></span>
</div>
<div id="uncategorizedArea" class="uncategorized-area" >
<div class="uncategorized-document-pages-list-area">
<div id="scroll-content-uncategorizedPagesList" >
<ul id="uncategorizedPagesList" class="gallery ui-helper-reset ui-widget ui-helper-clearfix uncategorizedPages">
</ul>
</div>
</div>
</div>
<div id="categorizedArea" class="categorized-area">
<div class="document-category-list-area">
<div id="scroll-content-documentCategoryList" >
<ul id="documentCategoryList" class="ui-helper-reset">
</ul>
</div>
</div>
<div class="categorized-document-pages-list-area">
<div id="scroll-content-categorizedDocumentPagesList">
<ul id="categorizedDocumentPagesList" class="ui-helper-reset" >
</ul>
</div>
</div>
</div>
<div id="splitDocumentDialog"><span id="splitDocumentDialogContent"></span></div>
<div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></div>
</div>
On the draggable list on the left hand side I added an appendTo option like this
uncategorizedPagesListDraggableOptions = {
cancel: "a.ui-icon",
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move",
appendTo: '#documentPageDraggableHelper'
}
uncategorizedPagesListDraggableOptions = {
cancel: "a.ui-icon",
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move",
appendTo: '#documentPageDraggableHelper'
}
'helper: "clone"' and 'appendTo: "body"' those attributes clone the draggable element and append to body for free dragging over the page
Related
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
Using Angular 1.* and angular-material.
I am having a issue with views that plug into <div ng-view></div> and md-content. If the height of the view is larger than the view port. It creates it's own Y scroll bar, so then I have 2 Y-scroll bars next to each other.
I can do overflow-y: hidden on the md-content. But how can I make it to where the view pushes the viewport horizontally so the outer scroll bar is used only?
<body ng-app="app">
<md-toolbar class='md-medium-tall'>
<div class="main-title">
<img src="./images/yo-small.png">
<p class="top-title">foo</p>
<h5>Bar</h5>
</div>
</md-toolbar>
<div class="menu-container" layout="row">
<md-sidenav
md-is-locked-open="$mdMedia('min-width: 900px')"
class="md-sidenav-left"
md-whiteframe="0">
<md-menu-content>
<md-menu-item>
<md-button href="#ppv">
<md-icon class="material-icons" menu-align-target="">assessment</md-icon>
PPV</md-button>
</md-menu-item>
</md-menu-content>
</md-sidenav>
<md-content>
<div ng-view></div>
</md-content>
</div>
</body>
<div style="height: 1000px; width: 800px ">
<h1>mom</h1>
</div>
UPDATE: I was able to create a hack to fix this. Can anyone see how to make this work as it should?
md-content {
overflow-y: hidden;
}
angular.module('app')
.controller('PPVCtrl', ['$scope', function($scope) {
// fix for angular-material responsive issue
document.body.style.height = "800px";
$scope.$on('$destroy', function() {
document.body.style.height = "100%";
});
}]);
This is actually intended behaviour. The mdContent directive is defined as a block element for scrollable content with its own scrollbar, and should only be used where you want nested scrolling to occur. Common usage is in dialogs, sidebars, and bottom sheet elements.
https://material.angularjs.org/latest/api/directive/mdContent
I have an Ionic app that utilizes AngularJS. In it, there's a modal popup that can sometimes be larger than the viewable area..
so we added overflow: hidden to it's css class..
BUT, there's a feature to this modal where we draw lines on the map when users click and drag. The lines draw fine (it's using canvas) and are all contained within a <div> element.
Is there a way to simply disable click-drag when a click starts inside this <div> tag?
update: Still need help.. essentially I've got a modal that was exhibiting the same behavior as this How to make modal scroll with main page
now I have
<ion-modal-view class="my-modal">
<ion-content style="position:absolute">
<div class="row main-wrapper">
<div class="left-panel-wrapper {{setSize}} col-25" >
<div ng-show="!showMyPlans || loading" class="left-panel {{setSize}} item-animate">
<h3>My Plan Templates</h3>
<p>Select a template from the left or select to start from scratch.</p>
<ion-content scroll='true' class="left-panel-template">
<div ng-repeat="template in templates" ng-class-even="'float-right'" ng-class-odd="'float-left'">
<div class="usemouse graph-bg templates-bg {{setSize}}">
<div data-drag="true" ng-model="templates" jqyoui-draggable="{index:{{$index}}, placeholder: 'keep', deepCopy: true}" data-jqyoui-options="{revert: 'invalid', helper: 'clone', containment: '.my-modal'}">
<svg ng-style="{'position': 'absolute', 'height': '{{rawSmallSize}}px', 'width': '{{rawSmallSize}}px'}" ng-repeat="line in template.lines">
<line ng-attr-x1="{{line.x1*smscale}}" ng-attr-y1="{{line.y1*smscale}}" ng-attr-x2="{{line.x2*smscale}}" ng-attr-y2="{{line.y2*smscale}}"></line>
</svg>
</div>
<div ng-show="template.lines.length == 0" class="usemouse graph-bg templates-bg {{setSize}} templates-blank text-center" style="margin-top:0" on-tap="newBlankPlan();">
<h6 style="margin-top:0" >Blank</h6>
</div>
</div>
</div>
</ion-content>
</div>
We fixed this wiggle issue by removing all the padding from the modal..
<ion-content style="position:absolute; padding-top:0">
<div class="row main-wrapper">
<div class="left-panel-wrapper {{setSize}} col-25" >
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
So I am attempting to create a menu element that shows and hides specific divs on a page, while also changing the text of the menu. After a little searching I have it worked out for the most part (although I know the code is a bit kludgey):
$(document).ready(function(){
$('.section[id="option1"]').click(function(){
$(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
$('.blurb').not('.blurb[id="option1"]').hide();
$('.blurb[id="option1"]').slideToggle();
});
$('.section[id="option2"]').click(function(){
$(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
$('.blurb').not('.blurb[id="option2"]').hide();
$('.blurb[id="option2"]').slideToggle();
});
$('.section[id="option3"]').click(function(){
$(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
$('.blurb').not('.blurb[id="option3"]').hide();
$('.blurb[id="option3"]').slideToggle();
});
$('.section[id="option4"]').click(function(){
$(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
$('.blurb').not('.blurb[id="option4"]').hide();
$('.blurb[id="option4"]').slideToggle();
});
$('.section[id="option5"]').click(function(){
$(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
$('.blurb').not('.blurb[id="option5"]').hide();
$('.blurb[id="option5"]').slideToggle();
});
$('.section[id="option6"]').click(function(){
$(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
$('.blurb').not('.blurb[id="option6"]').hide();
$('.blurb[id="option6"]').slideToggle();
});
});
(full code in action can be viewed here)
This code works for the most part, except that if you already have a certain element (class="blurb") shown, when you click on the menu item (class="section") for another element, the menu indicates that the other element is still open. It seems like there must be a simple way to append or remove the desired text on click, but I can't seem to find a good way of doing it. Would it be worth rewriting the code using something like expander.js?
Here is the effected html
<div class="nav">
<div class="section" id="option1">option1</div>
<div class="section" id="option2">option2</div>
<div class="section" id="option3">option3</div>
<div class="section" id="option4">option4</div>
<div class="section" id="option5">option5</div>
<div class="section" id="option6">option6</div>
</div>
<div class="blurb hidden" id="option1">
<h1>content for option1</h1>
</div>
<div class="blurb hidden" id="option2">
<h1>content for option2</h1>
</div>
<div class="blurb hidden" id="option3">
<h1>content for option3</h1>
</div>
<div class="blurb hidden" id="option4">
<h1>content for option4</h1>
</div>
<div class="blurb hidden" id="option5">
<h1>content for option5</h1>
</div>
<div class="blurb hidden" id="option6">
<h1>content for option6</h1>
</div>
I'm still fairly new to jQuery, so any advice/pointers is greatly appreciated.
I solved your problem using a custom class and :after CSS styles: http://jsfiddle.net/mblase75/sDrZ2/3/
First, some CSS to append the arrows and convert to uppercase without modifying the text directly:
.uppercase {
text-transform: uppercase;
}
.uppercase.arrowed:after {
content: " >>";
}
Add in some changes to your HTML to utilize data- attributes, remove duplicate IDs and add an arrowed class which the JS toggles:
<div class="nav">
<div class="section arrowed" data-blurb="option1">option1</div>
<div class="section arrowed" data-blurb="option2">option2</div>
<div class="section arrowed" data-blurb="option3">option3</div>
<div class="section arrowed" data-blurb="option4">option4</div>
<div class="section arrowed" data-blurb="option5">option5</div>
<div class="section arrowed" data-blurb="option6">option6</div>
</div>
And finally, a rewrite to optimize your JavaScript a lot:
$('.section').click(function () {
$(this).addClass('uppercase').toggleClass('arrowed')
.siblings('.section').removeClass('arrowed');
$('#'+$(this).data('blurb')).slideToggle()
.siblings('.blurb').hide();
});
Note that the arrowed class is toggled, so it needs to be added initially so that it's toggled off on the first click.