I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
Related
I am using fullcalendar version 4 nicely. I am adding a print button to it. The docs say I don't need to include any other files (like version 3 needed), and I should be able to handle the printing using media queries.
I've been reading about media queries and have come up with some code to work on the print page of the calendar div.
<div class="portlet-body">
<div class='loader'>
</div>
<div class="row">
<div class="col-md-5">
<a id="print_calendar" class="btn btn-xs default">Print</a>
</div>
<div class="col-md-7">
</div>
<br>
<div id="calendar_full" style="padding-left: 10px; padding-right: 15px;">
</div>
</div>
</div>
I pulled some unnecessary code from the above to simplify this. When the user clicks the print link, I just want calendar_full to print.
I am including calendar_full.php on this index page which has my full calendar scripts. In that file, I have this following CSS. I am new to media print CSS, so this is the point I got to isolate only the calendar_full div.
<style type="text/css">
#media print {
body * {
visibility: hidden;
height: 0;
}
#calendar_full,
#calendar_full * {
visibility: visible;
height: auto;
}
#calendar_full {
position: absolute;
left: 0;
top: 0;
height: 100%
}
}
When print is selected, I see something like this:
The calendar NEVER extends past that height, no matter what view I'm in: list, week, etc. Events naturally are cut off, as it seems, to that viewpoint all the time. I don't know if this is a just a CSS issue or if I need to do something more with the full calendar plugin.
I basically need it to expand the entire print range to encompass all of the calendar div events.
I am generating PDF document using FlyingSaucer with page numbers in running header.
What I am trying to achieve is to be able to change style of counter applied to running element used for header.
Since the CSS is applied by FlyingSaucer I cannot use javascript.
Example html:
<body>
<div id="right-header"/>
<div id="title-page"></div> <!-- page i -->
<div id="toc-page"></div> <!-- page ii -->
<div id="content"> <!-- counter reseted -->
<div id="chapter1">
<!-- page i ( should display 1 instead of i )-->
<!-- page ii ( should display 2 )-->
</div>
<div id="chapter1">
<!-- page iii ( should display 3 )-->
<!-- page iv ( should display 4 )-->
</div>
</div>
</body>
css:
#right-header {
display: block;
text-align: right;
position: running(right-header);
}
#right-header:after {
content: counter(page, lower-roman)
}
#page:right {
#top-right {
content: element(right-header);
}
}
This piece of css correctly applies headers to the whole document after
<div class="right-header"></div>
is placed.
I am trying to start my document with above page styling ( lower-roman )
and after specific place in my document - let's say
I would like to either change content of right-header or replace #page content with different
running element for the rest of the document with styling set to decimal numbers.
I know that FlyingSaucer has limited CSS3 support but I cannot find any solution ( not restricted to only FlyingSaucer) for such problem.
Content of running header can be changed without effect on previous headers as FlyingSaucer allows to reset the counter at any point of the document using css rule.
-fs-page-sequence: start;
and change is visible only after that point.
So my current status is that I have pages numbered with lower-roman i-iv ( for title page, TOC etc. ) and then reset back to i and increment till the end of document. All I need to do is to change
#right-header:after {
content: counter(page, lower-roman)
}
to
.right-header:after {
content: counter(page)
}
or switch displayed running element to the new one.
Another solution I have tried which adds another possibility to solve this problem:
<div id="right-header">
<div id="before"/>
<div id="forcontent"/>
</div>
#forcontent {
display: none <!-- initially not displayed for a few first pages -->
}
#before:after {
content: counter(page, lower-roman)
}
#forcontent:after {
content: counter(page)
}
with this code I think the solution would be to enable #forcontent and disable #before at the beginning of #content.
I have tried working with ~ selector but it doesn't work for changing preceding elements.
Does anybody know how this could be achieved or could point me to different solutions I could try?
While working on something else I found that FlyingSaucer supports css3 named pages (https://www.w3.org/TR/css3-page/#using-named-pages) which allow elements to have different #page definition with another elements set as running headers and footers.
Below is short example how different styling for "introduction" pages can be achieved using this method.
html:
<html>
...
<div id="introduction-right-header-placeholder">...</div>
<div id="content-right-header-placeholder">...</div>
<div class="introduction">
<!-- these pages will have roman letters as page numbers -->
...
</div>
<div class="content">
<!-- these pages will have decimal page numbers -->
...
</div>
...
</html>
css:
#introduction-right-header-placeholder {
text-align: right;
position: running(introduction-right-header);
}
#introduction-right-header-placeholder:after {
content: counter(page, lower-roman)
}
#content-right-header-placeholder {
text-align: right;
position: running(content-right-header);
}
#content-right-header-placeholder:after {
content: counter(page);
}
.introduction {
page: introduction-page;
}
.content{
page: content-page;
}
#page introduction:right {
#top-right {
content: element(introduction-right-header);
}
}
#page content:right {
#top-right {
content: element(content-right-header);
}
}
This example shows how to add differently styled page numbers in FlyingSaucer for right side pages ( I removed left side to reduce amount of code ).
I would like to use the modal window model as described by Keenan Payne, made with HTML5 & CSS3. For that, I simply created two files: modal.html with the HTML Modal template & modal.scss with the styling description
Modal.html
<template name="ModalSuggestion">
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>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>
</template>
and simply invoke it through this simple
{{> iconSuggest}}
{{> ModalSuggestion}}
This should be dead simple and I feel ashamed to ask for help, but the should be on top of any other windows, independently of my app layout? I must have missed something...
Is there anything particular with Meteor that does prevent this from working right away?
Thanks for your help.
CSS
.modalDialog {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 99990;
opacity: 0;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
z-index: 99999;
}'
Is there a particular reason you want to use this technique? It's not clear from your question how it isn't working for you.
An alternative way to implement a modal in meteor:
HTML:
<template name="parentContainer">
{{#if modalOpen}}
{{> modal}}
{{/if}}
<div>Some content inside parent container</div>
<button class="open-modal">Exit</button>
</template>
<template name="modal">
<div class="modal-container">
<div>Are you sure you want to exit?</div>
<button class="confirm">Yes</button>
<button class="cancel">No</button>
</div>
</template>
Javascript:
Template.parentContainer.events({
'click .open-modal' : function() {
Session.set('modalOpen', true);
});
Template.parentContainer.helpers({
modalOpen: function() {
return Session.get('modalOpen');
}
});
Template.modal.events({
'click .confirm' : function() {
Session.set('modalOpen', false);
//closes modal
//do something else
};
'click .cancel' : function() {
Session.set('modalOpen', false);
//just closes modal
};
});
CSS:
I can't really provide specific css because it will depend on the context of the modal, but one option is to position the modal absolutely with a z-index that is higher than anything else on the page:
.modal-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//z-index may be uncessary
z-index: 1; (or higher if necessary)
}
This would be a full width, full height modal that will cover anything else on the page. If you make it transparent or less than full width/height, then it will appear on top of the content behind it.
What is happening here:
The user clicks an element with an event listener attached to it, in this case it is a button with a class of 'open-modal'.
This event listener changes the value of a boolean session variable, in this case it sets the 'modalOpen' session variable to 'true'.
There is a helper function in our parent template that is watching the session variable, and will update the template whenever that variable changes, effectively adding our modal to the DOM. In this case, we're using a 'modalOpen' helper to track the 'modalOpen' session variable, and when it notices it has changed to true, it updates the template with this value. {#if modalOpen}} in the parent template notices that 'modalOpen' has changed, and because it now evaluates to 'true', it will insert our 'modal' template, represented by {{> modal}}.
We close the modal by changing the 'openModal' session variable to 'false'.
Hope that helps, and no need to be ashamed, this stuff is hard to learn. Like anything the more you do it the easier it gets.
it looks like this is a known issue when using Iron Router package... what I do use.
https://github.com/iron-meteor/iron-router/issues/711
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.
Is it possible for asp.nt ascx controls to have their own client side load event, like a window.onload for each, so I can hide the loading divs and show the content div when http transfer is complete.
I have image menus and cycle galleries that seriously need some loading progress don't know how to implement them. The site is http://techlipse.net. Thx in advance.
There are a few ways you can do this. I would take advantage of the fact that the onload event is not triggered until all content on the page is completely loaded. Since it looks like your site is already using jQuery, all of the examples below will use that.
In your user controls, you can have them hidden by default. To do this, place a style attribute in a wrapper tag for your control:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
Inside of your control, you can then have JavaScript code like this (assuming jQuery will be included at the top of the page, which is the way your site is now). This would be placed directly in your control.
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
To explain how this works...
When the browser initially loads the page, the control defaults to being hidden. It will not be rendered at all. jQuery subscribes to the load() event of your page. When the load event triggers, it will then display the control. This only happens once everything is finished loading.
You can also hide any "loading..." <div /> in this load event also.
Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. A "loading" div and a "content" div. The loading div would be shown by default with a generic loading message. The content div would be hidden by default (or just hidden behind an overly like my example below). The onload event removes the loading objects from the page and allows the images to be shown.
This example below displays a loading message over top of the entire page until it is finished loading.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>
You can add a listener to the load event... ( don't tie into the event directly as you might cause a different tie in to not be called )
Try using a JS library to help you listen to events, YUI, jQuery are fun.
http://developer.yahoo.com/yui/event/#start
var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);
YUI Library has a way to listen to when an area is "ready"
http://developer.yahoo.com/yui/event/#onavailable
You could have a listener that waits so see when a div is loaded, and then fire off some ajax to your long running processes.