I'm working on a website based on the Foundation library. I'm creating an About "page" on my website by using a modal, and attempting to equalize the three different panes inside of the modal, like so:
<div id="aboutPage" class="reveal-modal" data-reveal>
<h1>About</h1>
<div class="row" data-equalizer>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>About This Site</h2>
<p>This site is intended to provide a resource for people learning to program in Swift.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>What's Coming Up</h2>
<p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>Using the Help Menu</h2>
<p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
receive a notification badge when the issue has been resolved.</p>
</div>
</div>
<a class="close-reveal-modal" id="x">×</a>
</div>
However, when I viewed the modal, the panels were not equalized. This was also true on several other modals on which I attempted to do the same thing. Despite that, I was able to successfully equalize the panels outside of the modal. Is this a bug/feature related to the modal, and if so, is there any way around it?
Once you have your Reveal Modal opened you will need to recalculate the height of the Equalizer panels.
// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// Force Foundation to recalculate the Equalizer panel heights
Foundation.libs.equalizer.reflow();
});
Here is a working example in codepen.
I hope that helps.
In Foundation 6, I was having the same issue. Here is the solution that ultimately worked for me.
<script>
$(document).foundation();
$('.reveal').on('open.zf.reveal', function() {
//force equalizer to fire AFTER modal has finished opening
Foundation.reInit('equalizer');
});
</script>
Related
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.
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
I am very new to Jquerymobile,html5 and css.Now I am working on jquerymobile project in that i need to display the html code which i am getting from rest service in a page and i am doing by using the following code.
<div data-role="content" style="width:700px">
<div id="html_content">
</div>
</div>
and javascript is
$("#paystub-html").live('pageinit',function(){
$.getJSON(url,function(events){
$(events).each(function(i,item){
$(item.Data).appendTo($("#html_content"));
});
});
});
I can display the html but not fully its not scrolling horizontally.I tried by using overflow tag also but its not solved.
Is there any other way to do that one ? how ?
Thanks in advance.
This situation can be solved with overflow, but you will first need to remove the width from the content to have things handle properly
<div data-role="content">
<div id="html_content" style="overflow-x:scroll">
</div>
</div>
You can test it here
By the way, jQuery mobile standard usage would require you to include your content in a page container.
So I was reading the following article: Create Modal window with CSS3
However, I'm wanting to modify it by adding more than one modal box to my site.
Here is the code to the original modal:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>etc..etc..</p>
</div>
There is no CSS call for the <div id=openModal"
To create multiple modals, my assumption would be to change the div to <div id=openModal2" class="modalDialog2">
The styling is only on the modalDialog box, So for a second modal, I would assume I'd change the class name for that too.
However, every time I do this, it does not open the modal box.
Here is my code:
Box 1
<div id="openModal1" class="modalDialog1">
<div>
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Box 2
<div id="openModal2" class="modalDialog2">
<div>
X
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
What am I doing wrong here?
you don't have to change the class. The role of classes is to apply the same style to different elements, so keeping it modalDialog will do the job.
Demo: http://jsfiddle.net/3Vykc/
I just solved this problem about an hour ago, right before reading this article. I didn't change the class at all, as indicated in the answer above. I simply created a new ID (with some new properties) for the second modal box and it worked fine.
This said, I ran into this article because I'm having a problem with overflow: scroll/auto only in Chrome with some iframed (yuck, but I have no choice, it comes from a third-party credit card vendor I have to use on this project) content for the modal box. Now if anyone has a solution for this one... :)
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb