I'm using css to creat columns with result query inside divs, but when I'm trying print the lasts divs every break, how to avoid this?
css:
.div-em-colunas {
-webkit-column-count:4; /* Chrome, Safari, Opera */
-moz-column-count:4; /* Firefox */
column-count:4; /* padrão */
html
<div class="div-em-colunas" >
<div align="center" style="border-style: ridge;height:90px;"><b><?=$linha['user']?></b></br><?=$linha['name']?>
</div>
</div>
image:
You need to use the page break inside property on any element you don't want to be page broken.
page-break-inside: avoid;
See the MDN documentation for more details on how to create a print stylesheet. https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
Related
I've spent about a week or so on this, and there's very little documentation online so I figured I'd come on here to see if anyone could potentially help out. So the top level summary is that I'm trying to use an external library (neovis.js) to visualize a neo4j graph database in a Salesforce Lightning web component. I've already explored d3.js (which is compatible with Salesforces locker service) and a few other visualization libraries, but neovis.js would be the most viable option for my use case. I've made some slight modifications shown in the code below to avoid using Document.getElementById in the neovis.js library to select the element and append the canvas to the page.
However, once the canvas is drawn to the page, none of the canvas elements (nodes and edges) are shown on the screen. Here's the weird part though, I can still hover over where the nodes should be on the canvas, and the popup which displays specific information for each node appears on screen with the correct information for each node. I am not super familiar with how the canvas element works, but it seems to me as if some css property is not being applied because of Salesforce's locker service, which causes to elements to be rendered invisibly.
I've gone through a good chunk of the neovis.js library (which is just a library built on top of vis.js), and I've looked for places where perhaps styles aren't being applied to the canvas element; however up to now I've had no luck.
Here's the code I've used so far:
index.html
<template>
<lightning-card title="Neovis" icon-name="custom:custom19">
<div class="slds-m-around_medium">
<div id="neovisContainerViz" class="neoVizClass" lwc:dom="manual" style="height: 700px; width: 400px;">
</div>
</div>
</lightning-card>
</template>
index.js
drawNeovis() {
const config = {
container_id: "",
server_url: "bolt://neo4j.het.io:7687", //This is a publicly available neo4j database that I'm using for testing purposes.
server_user: "",
server_password: "",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (node:Disease {name: 'lung cancer'}) RETURN node"
}
const parent = this.template.querySelector('div.neoVizClass');
const container = document.createElement('DIV');
container.className = 'neoViz';
parent.appendChild(container);
const viz = new NeoVis.default(config);
viz._container = container; //This is a property inside of the NeoVis library. This property is normally set by using the document.getElementById method, however I've replaced it with my predefined container to get around the Salesforce Locker Service.
viz.render();
}
Here is exactly what is rendered onto the Salesforce App page:
<div class="slds-card__body">
<slot>
<div class="slds-m-around_medium">
<div id="neovisContainerViz-67" class="neoVizClass" style="height: 700px; width: 400px;">
<div class="neovis">
<div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
<canvas width="200" height="200" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
</canvas>
<div class="vis-tooltip" style="left: 5px; top: 5px; visibility: hidden;">
<strong>
license:
</strong>
CC BY 3.0
<br>
<strong>identifier:</strong>
DOID:1324
<br>
<strong>name:</strong>
lung cancer
<br>
<strong>source:</strong>
Disease Ontology
<br>
<strong>url:</strong>
http://purl.obolibrary.org/obo/DOID_1324
<br>
</div>
</div>
</div>
</div>
</div>
</slot>
</div>
The canvas and the tooltip are appended to the DOM, AND the tooltip dynamically updates when I hover over where the canvas elements should be displayed. However none of the nodes or edges are visible on the screen.
All in all, I am not very familiar with how the canvas element actually functions, and am hoping that someone can give me some tips on how to trouble shoot this issue and get the elements on the canvas to display.
Thank you all!
I was able to finally figure this out incase anyone else is running into similar issues. I wouldn't say this is the preferred answer, but it works (for now). Basically I injected an iframe into Salesforce, and inside of the iframe I injected the neovis.js library and generated the graph, works perfectly now.
Is it possible to detect the existence of the Browser's Quicktime plugin withOUT using Javascript?
I know how to test for Quicktime using Javascript, but not without.
My logic says that Javascript can be enabled/disabled by the user and the existence of the Quicktime plugin is determined by the programmers for each Browser. Therefore, each should an independent statistic ... even for Apple's iOS which has Quicktime built in.
Thanks,
I am really throwing away my question. However, I thought some of you might be curious why ...
I honestly do not know if it is possible to detect the existence of the Browser's Quicktime plugin withOUT using Javascript. I do know, for example, that Quicktime is built into Apple's current OS and probably many prior ones.
Nevertheless, I have come across the expression "Progressive Enhancement". As a direct result, I have discovered the works of others that result in my being okay with detection of Quicktime using Javascript.
The following illustrates what I mean:
The way-back-when driving force was to avoid document.write in the display of media players for .mp3, .m4a and the like.
The new approach places the media player, the no-js message, and the no-qt message in the html markup.
The default case is to show just the no-js message in the html markup. Using the "Progressive Enhancement" paradigm, if Javascript is enabled, then Javascript is used to first hide the no-js message. Depending on the presence of Quicktime, we then show the media player and hide the no-qt message, or vice versa. As a result, we progress from a "vanilla" text message about no Javascript to showing a media player if Quicktime is present.
For example, my html markup presents:
<section class="mediaWrapper">
<div class="mediaplayer">
<audio name="aMedia" class="aMedia" controls preload="auto"
src="audio/My Love Song Forever.mp3">
</div>
<div class="nojs">
Turn on Javascript to hear an awesome Love Song
</div>
<div class="noqt">
<a href="http://www.apple.com/quicktime/download/"
title="Get Quicktime"
onclick="window.open(this.href); return false">
Install Quicktime
</a>
to hear an awesome Love Song
</div>
</section> <!-- mediaWrapper -->
In my <head> is this <style>:
/* default settings for the html markup */
.mediaWrapper {
display: block;
position: relative;
text-align: center;
}
.mediaplayer {
display: none;
}
.nojs {
display: block;
font-size: 110%; /* for the no-js alert text */
color: #360;
font-weight: bold;
/*
text-align: center; // inherited from .mediaWrapper
*/
}
.noqt {
display: none;
font-size: 110%; /* for the no-qt alert text */
color: #360;
font-weight: bold;
/*
text-align: center; // inherited from .mediaWrapper
*/
}
Also in the <head> is this <script>:
$(document).ready (function() {
$('.nojs').hide(); // we're here, already!
if (QuicktimeIsPresent)
{
$('.mediaplayer').show();
$('.noqt').hide();
}
else
{
$('.mediaplayer').hide();
$('.noqt').show();
}
}); // $(document).ready
As already stated, the html markup (via the above <style>) shows just the vanilla no-js message. Via Progressive Enhancement, if Javascript is enabled, then the above <script> is seen. So, Javascript is used to first hide the no-js message. Depending on the presence of Quicktime, we then show the media player and hide the no-qt message, or vice versa.
I am trying to get a jQuery-ui div under the class ui.state.alert to fade into the page as it loads so that users notice it. I have added the fadeTo in a js file but when the page loads, the alert just appears, with no fade effect at all. I have even made sure the 'slow' attribute is added. Here is the html code.
<div class="ui-widget">
<div class='ui-state-error ui-corner-all' id="serviceAlert" style="opacity: .1">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:
.3em;"></span><strong style="color: #1F1F1F">Alert!</strong> Sign Up Services are
currently under construction. Please check back later for further updates.</p>
</div>
</div>
And here is my jQuery file:
$(document).ready(function() {
$('#serviceAlert').fadeTo(1,'slow');
});
I have added the following scripts to my header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/JavaScript" src="jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js"></script>
<script type="text/JavaScript" src="js/script.js"></script>
The first Parameter of fadeTo is the duration, here you have to define a number in ms oder slow etc. Your animation is currently only running for 1 ms (thats a bit short (-: ).
.fadeTo( duration, opacity [, complete ] )
You've done it the other way around.
Example:
$('#serviceAlert').fadeTo(1000, 1); //fades in 1sec to opacity 1
Behold: a footer template:
<!-- Templates -->
<script type="text/template" id="templateFooter">
<div data-role="navbar">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</script>
In every mobile page I have:
<div data-role="footer" data-position="fixed">footer</div>
The way I'm currently loading the template is:
$(function() {
$('div[data-role=footer]').html($('#templateFooter').html());
$.mobile.activePage.trigger('create');
});
This works, but I don't really like using $(function(), but I need to load it if any page shows, so pageinit or pageshow does not help. I'll be using knockout.js going forward, if that is of any help.
Is there a better way to do this?
function getTemplateFooter() {
//return footer text here
}
$("div:jqmData(role='page')").live("pagebeforecreate",function() {
// get the footer of the page
// if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
var $content =$(this).page().find('div:jqmData(role="content")');
$content.after(getTemplateFooter());
}
there is also a pageshow event, that one fires even if the user navigates to the page, through a back button press etc... it bubbles up to the page div
I use it for pages where lots of dynamic data could change between subsequent visits, or even when the user just presses back
Does jQuery UI support showing the number inside the Progressbar, like this:
Not to drudge up an old thread, but I was attempting this earlier tonight and used the following in my CSS:
.progressBarClass{
height:20px;
width:300px;
margin:0 auto;
}
.progressBarClassspan {
width:300px;
position:absolute;
text-align:center;
font-weight:bold;
}
And have the following in my HTML:
<script type="text/javascript">
$(function() {
$( ".progressBarClass" ).progressbar({
value: 50
});
});
</script>
<div class="progressBarClass"><span>50%</span></div>
Does the trick for me, although I need to come up with a better method to allow for percentages on the .ui-progressbar class instead of fixed values.
If it isn't any official way, you can add it. Just inspect the generated code with FireBug on Mozzila, get the id/class of the container and add the numbers in there yourself.
I never used jQuery UI's progressbar so I can't do that right now, but I'm sure it's not hard...