Using this library Angular File Upload I'm trying to make nested dropzones but running into an issue with dragleave events.
<div class="full-area">
<div class="outer-dropzone">
<ol>
<li>
<div class="container">
<div class="drop-zone-inner"></div>
<div class="align"> </div>
<div class="align"> </div>
</div>
</li>
</ol>
</div>
</div>
What I want to achieve is something along the lines of the follow:
When dragging into the browser window and the .outer-dropzone is entered it changes css (background color yellow for example).
If you drag onto .drop-zone-inner it reverts the .outer-dropzone then changes the drop-zone-inner to a new css background.
Third if you leave .drop-zone-inner it re-applies the .outer-dropzone css change.
The issue I'm having is if I have several items in the .drop-zone-inner field (i.e text and image etc). It causes flashing in where it tries to unapply the drop-zone-inner and repply the outer-dropzone.
I've tried a lot of different setups and layout, but I'm not sure the best way to actually approach this.
Edit: Basically I'm trying to accomplish something similar to Dropboxs dropzone highlights
Related
I'm working on a project that uses a masonry layout to display a list of multiple boxes with variable heights. But in this project, I use a filter that when clicked, filters all the boxes based o a class, and hides the one which doesn't have that class. The problem is that when I hide some boxes the whole structure of the layout brakes, and I cant simply remove the boxes because the filter can be deactivated and all the boxes appear again, or his class argument can also change, modifying the visible boxes again.
The Masonry script and CSS that I'm using it's this this, above is the structure that I'm using for my boxes:
<div class="masonry-root">
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
</div>
Simply hide the elements didn't work.
Removing and hiding the elements and then calling the script again also didn't work.
If anyone is having trouble with this, I fond a better way to deal with my problem.
Use the Mansory Dessanto plugin solved my problem completely. The structure of the code got simpler and you can add, hide, and remove blocks on the grid and it will organize it again.
<div class="grid">
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content gray"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
</div>
With this structure I do all the layout preparation with a single function, like this:
// inicialize the plugin layout
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
// a simple event could trigger the next part
// hidding the selected element
// (remove has the same efect but the elemnte would not appear again if
// necessary)
$('.content.gray').hide();
// executing again the plugin
$('.grid').masonry();
jquery mobile newbie -- I inherited this project.
I have quite a few 'pages' in my jquery mobile app. On each page I have a nav panel. Each page is set up much like this:
<div data-role="page" id="help_manual" data-theme="d">
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
Home
User main menu
</div>
</div>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->
<h3>User Manual</h3>
</div>
<div data-role="content">
BLAH BLAH CONTENT
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Back to main menu
</div>
</div>
This all works well and good.
Then you make another page. ... Then another... Then another... Suddenly you've got a few dozen pages all with their own 'menus'. They all work, but there is a LOT of redundant code, given all the menus are identical.
Now I want to make a change to all of the menus.... and instead of modifying one 'navigation panel' I have to make the change a few dozen error-prone times.
I have tried simply taking the 'panel' code and moving it outside the 'page' div... but that results in, effectively, a 'new' 'page' when the button is clicked. Other attempts at moving the various parts of this code around are similarly broken.
An include could remove the 'list' from the 'core' of the control group... unfortunately, that still leaves a lot of redundant code and I've got one fun tweak: This page needs to be able to work offline. The purpose of this app is to be able to go offline, collect data 'in the field', and come back and upload it. So a SSI isn't an good option.
Help?
Here is a JsFiddle with multiple pages and the panel written only once.
You should write your panel once outside the page. (If you have one file per page, just write the panel outside the index page as a sibling of the page) :
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
...
</div>
<div data-role="page" id="help_manual" data-theme="d">
...
</div>
Doing so and as it becomes an external panel. You should then initialise it manually.
$('#navpanel_help_manual').panel();
The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
How do I create buttons on Impress.js slides - buttons which allow me to go to other parts of the presentation.
I'm aware that there is code for next/previous steps but I would like to go to a completely different location/step.
Also, is there a way of overlaying hte button on top of an existing image.
Thanks
Nicole
Option 1: You can use normal html links and anchors.
(Note: In the following html, I've stripped out a lot of stuff to make the principle as clear as possible, so cutting and pasting as is probably won't work, but trust me, the idea does :) )
<div class="step" step="0" data-x="0" data-y="0">
<h1>This is the first slide</h1>
<p>Here comes some text.</p>
<p>Jump to Last-Slide</p>
</div>
<div class="step" step="1" data-x="1200" data-y="0">
<h1>This is the second slide</h1>
</div>
<div class="step" step="3" id="LastSlide" data-x="-800" data-y="0" data-z="r2000" data-rotate-y="90">
<h1>Last Slide</h1>
<p>How did I get here?</p>
</div>
The key pieces here are the link in the 1st slide (you can replace this with a button, image or whatever you want): Last-Slide
and then defining that id in the target slide: <div class="step" step="3" id="LastSlide"... >
Note: After jumping to the target slide, you history is lost, i.e. page-up takes you to whatever slide is logically before the target slide in the presentation. So if you want to go back to where you came from, either place additional links/buttons in the target slide, or use the 'back' button on your browser.
Option 2: Use the impress.js api instead of hyperlinks: impress().goto("LastSlide")
I'm using context to print blocks into a region. However, I'd like to have the region print wrapper DIVs around the blocks of the given area. I know this is possible with region.tpl.php in Drupal 7. I can't seem to figure out the best way in Drupal 6.
<div class="{region classes i.e. sidebarleft}">
<div class="{block 1}"></div>
<div class="{block 2}"></div>
<div class="{block 3}"></div>
<div class="{block 4}"></div>
</div>
However, currently it prints like this:
<a id="context-block-region-right" class="context-block-region">Right Sidebar</a>
// the previous anchor tags is hidden
<div id="block-block-82" class="clear-block block block-block">
<h2>Community Navigation Block</h2>
<div class="content">
<div id="community-landing-navigation-menu">
<div class="joinCommunityBox">
<div class="community-landing-pagePanelWrapperSideBar">
<div class="community-landing-pagePanelWrapperSideBar">
<a id="context-block-block-82" class="context-block editable edit-community_contexts"></a>
</div>
</div>
I wish it would print a region wrapper tag around ALL of that...
Also, I want to keep my page.tpl.php clean of extra wrapper tags. It would be better if we could preprocess regions to print a wrapper tag.
I figured it out... The answer is actually borrowed from zen. If you click the link below, several 'preprocess functions' are rendering a new region template. Then, blocks are collected into that region, and printed.
http://www.drupal.org/node/223440#comment-5304866
It works great, and is going to go production soon.
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.