I got a problem with my website.
On the left I have a sidebar, and next to it I have the container.
At the moment I have found this javascript function:
$(document).ready(function(){
$("#sidebar").height( $(document).height() );
});
This script makes sure that my sidebar is 100%. Also if I resize the screen, the sidebar automatically changes height.
The problem is that I have a dashboard in my container with moving divs, who can change size and are stackable underneath each other. (example: http://demo.webdeveloperplus.com/drag-drop-panels/)
If I stack these divs underneath each other, the sidebar does not change height automatically. How can I make sure that the sidebar is also changing height when I stack these divs in the container? Do I need to loop the script?
Hope someone can help me with this.
(ps. I do not have a footer in my website so the sidebar has to keep on the height of the document. (background))
Ok, this is a two part answer. Part one is that you will need to get the height of the viewport for the browser. Part two is that you will need to re-do this function whenever the window resizes. after some testing (in IE 9, Chrome and FF) I've found this to work well:
function getClientHeight() {
var retval = 0;
if (typeof (window.innerHeight) == 'number') {
retval = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
retval = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
retval = document.body.clientHeight;
}
return retval;
}
$(document).ready(function () {
$(window).resize(function (event) {
$("#sidebar").height(getClientHeight());
});
$("#sidebar").height(getClientHeight());
});
I Fixed the problem now. I used another way to set the height of the sidebar always 100%.
For people who want to know how I fixed this:
I gave the #sidebar style: position: fixed; and putted the divs inside the sidebar outside of the div and made a new div #sidebarcontent. Then gave the #sidebarcontent style position: absolute; and placed them on the right place. I tested this for cross browser and it worked even on IE6.
Related
How to change the logo height on docusaurus? I've tried various things but no luck
Changing the css to navbar__brand and set the height on the image it self
I have been struggling with the same issue. Here's what seems to work for me.
In your src/css/custom.css file:
.navbar__logo img {
height: 160%;
margin-top: -10px;
}
I also set the navbar-height as I wanted it a little bigger. This is in the same src/css/custom.css file.
:root {
...
--ifm-navbar-height: 80px;
}
You can play around with the height and/or margin-top and it should work. Seems ok for scaling with the page as well.
There may be a better way, but was not able to find it documented. Setting the height/width in the navbar.logo object of docusaurus.config.json did not work, or messed up the image scaling.
In the docusaurus.config.js file, locate the navbar section. There should be a logo field that specifies the logo image file.
Add a height field to the logo object and set it to the desired height of the logo, in pixels.
module.exports = {
navbar: {
logo: {
src: '/img/logo.png',
height: 40,
},
// ...
},
// ...
};
Try this out , It should work
I'm having some issues exporting my Charts to PDF.
I have this div
<div id="chart-area">
<button type="button" id="btnPrint_" onClick="Print1()">Print</button>
<?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?>
<canvas id="myChart" width="800" height="400"></canvas>
<div id="legend"></div>
</div>
and I'm creating my chart using ChartJS
$( document ).ready(function(){
var helpers = Chart.helpers;
var canvas = document.getElementById('myChart');
var data = {
labels: unique_dates,
datasets: [
{
label: "Ticket Count",
fillColor: "rgba(107, 110, 111, 0.6)",
strokeColor: "rgba(107, 110, 111, 0.6)",
highlightFill: "rgba(107, 110, 111, 0.6)",
highlightStroke: "rgba(151,137,200,1)",
data: ticket_count
},
{
label: "Subsidy Count",
fillColor: "rgba(8, 126, 210,0.5)",
strokeColor: "rgba(8, 126, 210,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: subsidy_count
}
]
}
var bar = new Chart(canvas.getContext('2d')).Bar(data, {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
animation: true,
});
//
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();
document.getElementById('legend').appendChild(legendHolder.firstChild);
});
When I click the btnPrint_ Button I want to export my chart as PDF
like this
function Print1() {
var title = $("#title").text();
var doc = new jsPDF('l', 'mm',[210, 297]);
html2canvas($("#myChart"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png',1.0);
doc.text(130,15,title+" GT Log");
doc.addImage(imgData, 'PNG',20,30,0,130);
doc.addHTML(canvas);
doc.save(title+'gt_log.pdf');
}
});
}
The problem is that my chart is totally blurry in the pdf file.
Any idea how to fix this?
it's the first time that I'm using ChartJS and jsPDF so probably I'm doing something wrong.
Thanks!
The resolution comes from the Canvas size. The more you increase your Canvas (width and height), the better will be the resolution when downloading your PDF.
However, you probably don't want to increase the canvas size too much, so, one trick you could use is to create a hidden Canvas, with a higher width and height, use it to print the chart and create the PDF, getting a better PDF quality.
Here is a fiddle demonstrating this, with an option to download a PDF created from the original canvas/chart, and another option to download a new PDF from the hidden canvas/chart. You can see how the quality increase quite a bit when comparing both results.
https://jsfiddle.net/crabbly/kL68ey5z/
I don't think this is the best solution, however, it is the only way I could come up to increase the quality of my PDF chart files. I'm currently playing around both libraries, specially how jsPDF treats the w and h arguments when creating the docs.
Also, Chart.js does come with a built in function to extract an image form the chart (.toBase64Image()), however, the quality seems to be worse when I tested.
Since a few versions Chart.js has the parameter devicePixelRatio.
By default, the canvas is rendered in the DPI number by monitor, so 96 or Retina - not ideal for a printout, but perfect for the screen.
If you increase this value, more pixels are created. Expand the value so that you can export the chart in print quality as a Base64 image. The value does not affect the display of the chart on the monitor.
In my case, I set the value to 1.5.
options:{
devicePixelRatio: 1.5
}
Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
Works wonderfully ...
I've been working on a project trying to produce graphs with chartjs and then printing them using Chrome's print to PDF functionality, and I found that the chartjs graphs look poor. After reading various threads both on stackoverflow and github I developed one solution that worked well enough for me.
In my particular case I need the graphs at a fixed size and I can't have them be responsive because I need them to fit within the printed page correctly. I use style tags to set the size:
<canvas style="width: 300px; height: 300px" />
I've found that if you set responsive: false in the chart and then use the style tags like that, Chartjs won't mess with the size of the chart. Using any other method like setting width or height (not the style width or height) or using css classes will not set it properly. Chartjs only seems to work when I set the element's inline style tag for this.
Anyway, the trick that worked for me in getting better PDF output was to have Chartjs render a larger chart and then scaling it down to a smaller size so it fits on my page correctly.
Let's say for some reason we want a 300x300 pixel chart and that it looks poor when we print it to PDF. We need to have Chartjs draw this chart into a larger chart and then resize it down to 300x300. In my own project I am having Chartjs draw it 2x as large. So for this example I would make a canvas element that is 600x600 as follows:
<canvas style="width: 600px; height: 600px;" class="graph" />
At the same time I have a "graph" css class with height and width set to 300px. The chart will not render at 300px because of the inline style however.
You can then make the chart as you normally would, but immediately after the line of code that makes the chart, you remove the inline style tag from the chart. I found that when you do this, chartjs will draw the chart to the larger
600x600 size but then the chart instantly gets resized to 300x300. Here is an example of what the code looks like:
var ctx = canvas.getContext('2d'); var mychart = new Chart( ctx ,{ ....
}); canvas.removeAttribute("style");
The canvas.removeAttribute removes the inline style tag, so then the css class
takes effect and instantly causes the canvas to re-render at the smaller size. There is no flash or any indication that this has happened, yet I've found that you get a much higher quality looking chart.
There is one other issue with this. You will have to design your chart for the larger 600x600 size for example in order to get it to look right. When you draw the chart at a larger size, the lines and fonts don't get resized so everything looks really tiny. I had to set my chart manually to the larger size to design it and figure out good fonts and line sizes for the graph first, and then do the resize trick here.
I have also found that simply using the smaller sized chart and making thicker lines or larger fonts does not seem to have the same effect as sizing everything up first, and then rendering it as a smaller size.
I have a standard component defined something like:
export default Ember.Component.extend({
hideIfEmptyChange: function() {
var thingOfInterest = ...;
var otherThingOfInterest = ...;
...
// Perform some logic
...
// Perform some logic using thingOfInterest
// Perform exactly the same logic using otherThingOfInterest
}.observes('hideIfEmpty.#each')
});
I want to move the logic for the last two pieces into their own function to prevent writing out the same code twice just for two different variables.
I could write an action on my component and use this.send('myAction',...) - but would it be best practice to have this as an action if it isn't going to be used (or even usable) from the component's template? If you shouldn't do it this way then how should you?
My other thought was mixin's - but the code here will be completely specific to the component, so again this doesn't feel 100% right.
Edit
The component is used here to observe an array of widgets, which are displayed in a sidebar. To start with the sidebar is hidden away as there are no widgets. When a widget is added the sidebar then slides out using a css3 transition between a bootstrap class I added (col-md-0) and something like col-md-2, at the same time the main column shrinks from something like col-md-10 to col-md-8. Because of the nature of it coming out from zero width the widgets inside squish around during the animation and so need to be hidden during it. So the generic piece of code will be:
function(element, classes) {
var lowWidth = 50;
// Transition looks awful if columns start from small width, so hide inner content until css3 transition complete if starting from low width
if ($(element).width() < lowWidth) {
$('div', element).hide();
$(element).toggleClass(classes);
$(element).on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
$('div', element).fadeIn(250);
$(this).off(e);
});
}
else {
$(element).toggleClass(classes);
}
}
My component here is in block form and actually has the sidebar within it in the template.
{{#hideable-cols hideIfEmpty=rightSidebarWidgets leftId="det-main" leftMinClass="col-md-8" leftMaxClass="col-md-10" rightId="det-sidebar-right" rightMinClass="col-md-0" rightMaxClass="col-md-2"}}
<div id="det-main" class="col-md-10 resizes">
{{outlet}}
</div>
<div id="det-sidebar-right" class="det-sidebar resizes col-md-0">
{{widget-area widgets=rightSidebarWidgets saveObjectFromWidget="saveObjectFromWidget" removeWidget="removeRightWidget"}}
</div>
{{/hideable-cols}}
The only other way to do what I wanted would have been if I could have set 'inner' components to only be able to react to changes in the array of widgets AFTER the parent block component is happy/done. I've used something similar in knockout js but couldn't see this kind of feature in Ember, so my workaround was to hide the div where the widgets are added, do the transition and show the div again afterward.
http://jsbin.com/qoyudape/4/edit
Every time you click update, item gets inserted. I would like to blink item red for one second after insertion, like on stackoverflow when linking to answer, it blinks orange for a second https://stackoverflow.com/a/22645880/1175593
How do I do that ?
Only CSS doesn't work, because I want the effect only on newly added items, and not on initial load
I don't know CSS, but this, Using CSS for fade-in effect on page load, seems to be just fine...
http://jsbin.com/qoyudape/6/edit
note, the render stuff I did isn't necessary, you could have just as easily done it without it...
http://jsbin.com/qoyudape/8/edit
or when the item is inserted into the page, you can do time sensitive animation
App.BlinkingFooView = Em.View.extend({
didInsertElement: function(){
if(this.get('controller.b') % 2 === 0){
this.$().addClass('mod')
}
}
});
http://jsbin.com/qoyudape/11/edit
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.