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.
Related
First of all, I'm sorry for my bad English.
Recently I'm doing project using Spring Boot and
I'm struggling with hiding or showing all the divs created by th:each
<button class="category" onclick="showBar()">BAR</button>
<div id="barList" th:each="m: ${MERCH}" th:if="${m.cat.catId}==1">
<tr>
<p th:text="${m.getMName()}"></p><br>
<p th:text="${#numbers.formatInteger(m.price, 1, 'COMMA')}"></p>
</tr>
</div>
<script>
function showBar() {
$('#barList').hide();
}
</script>
this is part of HTML that I'm struggling with
What I see on devtool in chrome is that first div seems to work(style="display : none;" is created) but other divs come out after doesn't work at all.
How can I hide or show all the divs came out from th:each... T.T
Even if it doesn't use JQuery, it doesn't matter. I just want to hide all.
Again sorry for my bad Enlgish.. Hope you understood..
Thanks!
Fiddle
I need to have my image inside 2 divs, why does it appear and then disappear?
I need it so that it's always on screen.
<div class="ad-container">
<div class="ad-item">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
Panthro,
Check and make sure there is no Javascript and any other code manipulating the classes: ad-container and ad-item.
The snippet of code you provided in the fiddle looks fine to me. There must be other code manipulating those classes.
Remove ad from the class names. JSfiddle blocks the content related to ads similar to AdBlock functionality.
<div class="container">
<div class="item">
<img src="http://joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
JSfiddle
I had the same issue. I was able to solve it by turning off my adblock for the page.
Your CSS must be causing the issue, check it or post what it is here.
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>
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
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.