Don't use jQuery DOM changes when printing - javascript

Update: CSS solution below.
I'm using the fullpage.js jQuery plugin which unfortunately also affects the printing of the webpage, only displaying the current viewport display and its sibling.
The problem I have is that the print command uses the DOM (obviously), but the plugin has already made inline CSS changes in the DOM. Is there a way to disable the DOM changes for print?
This doesn't work, but here's my idea:
$(document).ready(function() {
if(#media !print) { // PS: Not real code!
$('#fullpage').fullpage();
}
});
------ CSS solution -------
Praveen's reply led me on the right course. The CSS needed to override the fullpage.js inline styles are:
/* Override javascript inline styles */
html,
body {
overflow: visible !important;
height: auto !important;
}
.fullpage-wrapper {
height: auto !important;
transform: none !important;
transition: none !important;
}
.fp-section {
height: auto !important;
}
.fp-slidesContainer {
width: auto !important;
transition: none !important;
transform: none !important;
}
.fp-slides,
.fp-slides * {
position: static !important;
}
.fp-slide {
width: auto !important;
}


Do something like this in your CSS:
Hiding the full page slides:
.fp-slides {
display: none;
}
Or making them static, as this would do the stuff by rendering the contents normally:
.fp-slides, .fp-slides * {
position: static !important;
/* I don't like putting !important,
but there is no other way to override the inline styles without this!*/
}
Else, you can specify the stylesheet to apply for only screen as the media:
<link rel="stylesheet" href="fullpage.css" media="screen" />


You can use a flag and set it true when the printing function is called:
var flag = false;
$(document).ready(function() {
if(flag === false) {
// all your code
}
function toPrint() {
flag = true;
window.print();
}
});

Related

Javascript / Angular, how change column position of html table, when press button?

I have a table, the user can modify the columns order pressing an left arrow button when the user press again the button, the column return to original position. (without any library, pure js, ts, angular)
I want to change the column position when user press a button

its best to get the element ID and inject the class.
*** html ***
<a (click)="showHide()"></a>
<div id="yourid" class="hide"></div>
*** component ***
showHide = false;
showHide():void {
const htmlEl = document.getElementById('yourid') as HTMLElement;
showHide=!showHide;
if(showHide){
htmlEl.classList.remove('hide');
htmlEl.classList.add('show');
} else {
htmlEl.classList.value="hide"
}
}
*** css ***
.hide {
display: none !important;
height: 0 !important ;
visibility: hidden !important;
}
.show {
display: block !important;
height: 100% !important;
visibility: visible !important;
}

Remove CSS properties that were set in a CSS file (not inline CSS) [jQuery]

I have a CSS property that was set in a stylesheet file:
.main-outer-div-filter {
max-height: 230px;
}
I am trying to remove it with jQuery like so:
$('.main-outer-div-filter').css('max-height','');
For some reason, this way doesn't seem to have any affect, it only works if I set the style inline, but not when it is in the CSS file.
Is there any way to use jQuery to reset/remove CSS properties, which were set in a CSS file?
Thank you

With ('max-height', '') you are removing inline css. That would work if you set it inline before. To reset it, use initial value:
$(document).ready(function() {
$('.special').css({
'max-height': 'initial'
});
});
li {
height: 50px;
border: 1px solid black;
max-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Max-height: 20px;</li>
<li class="special">Max-height: initial;</li>
</ul>

You can overwrite a property with inline style using jQuery, as you are doing now, only you need to set this property to something. If you have a max-height set to 230px and want it to reset completely, then use 'max-height', 'none'

I would suggest you to use new class name to override it:
.main-outer-div-filter {
max-height: 230px;
}
.main-outer-div-filter.override {
max-height: initial; /* or none; */
}
and in the js you can set it with:
$('.main-outer-div-filter').addClass('override');

problems positioning a jquery.draggable() div for printing with #media print

I have a web application that has a draggable div I need to print when the user selects print from the web browser.
The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for #media print like so:
#media print {
body * {
visibility: hidden;
}
#plotArea, #plotArea * {
visibility: visible;
}
#plotArea {
/* this positioning ignores .draggable() divs */
position: absolute;
left: 0;
top: 0;
}
}
However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css
//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});
/* css */
#plotArea {
background-color: #FFFFFF;
width: 42em;
height: 54.5em;
float:left;
font-size: 12pt;
overflow:hidden;
}

So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?
What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.
For example;
#media print {
#plotArea {
left: auto !important;
top: auto !important;
}
}

Setting the width of a RichCombo box in CKEditor

I've created a plugin with a RichCombo box. Unfortunately the name of the dropdown is a little too long for the RichCombo and it gets cut off.
Is there a way to force a wider RichCombo? Likewise, is there a way to force a width of the actual dropdown list (ListBox) itself?

The CSS value you seek is .cke_combopanel { width: 150px; }. It can be found within editor.css.

style your page with:
.cke_combo_text {
width: 130px !important;
}
.cke_combopanel {
width: 370px !important;
}

I got it. I added this to the page containing the ckeditor control:
<style>
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
</style>

How to remove or hide powered by text from Google Translate

Is it possible to hide or remove the Powered by Google Translate on the dropdown in Google Translate?
I have removed the logo part, but couldn't remove the Powered by text.
Here's the code:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

You can add these lines of code in your CSS file:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}

This CSS worked for me:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget {
color: transparent !important;
}
.goog-te-gadget .goog-te-combo {
color: blue !important;
}

Although, previous answers regarding display: none and color: transparent may work. I use this solution to completely erase text from html, if you want lets say style the box itself.
$(window).load(function(){
$(".goog-logo-link").empty();
$('.goog-te-gadget').html($('.goog-te-gadget').children());
})
I use jQuery in this example, however you can switch to JavaScript if you want.

Review image OR To remove powered by TEXT in Google Translate api, You can simply add this css.
.goog-te-gadget {
font-size: 0px;
}

Add the css to your stylesheet
#google_translate_element {
color: transparent;
}
#google_translate_element a {
display: none;
}
The first line will hide the text and the second line will hide the google translate logo.
Test it in all browsers to make sure you do not hide make the dropdown text transparent. If so, add this:
select.google_translate_element {
color: black;
}
to remove the "Powered by" text
div.goog-te-gadget {
color: transparent !important;
}
Note: I am not sure whether it is within the terms and conditions of use that you are allowed to hide the Google logo, but this should work.

If you decrease the height and hide the overflow, you will hide this area on the screen. Maybe not a very good solution, but it can be a good alternative.
<style>
#google_translate_element { height: 26px !important; overflow: hidden !important; }
</style>
You can try using this link. => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate

I am using following to remove google poweredby link or image
#google_translate_element img
{
display: none !important;
}
Try this to remove logo from language translator i am sure

$(window).load(function () {
$(".goog-logo-link").parent().remove();
$(".goog-te-gadget").html(
$(".goog-te-gadget").html().replace(' Powered by ', '')
);
});

.goog-te-gadget {line-height: 2px !important;color: transparent;}

Simply add this..
.goog-logo-link {display:none !important; }
.goog-te-gadget {font-size:0px !important;}

You can do this by making some changes to the "googleTranslateElementInit" function.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'},
'google_translate_element');
var $googleDiv = $("#google_translate_element .skiptranslate");
var $googleDivChild = $("#google_translate_element .skiptranslate div");
$googleDivChild.next().remove();
$googleDiv.contents().filter(function(){
return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
}).remove();
}

Tried the code above and it did work to hide the "Powered by", but it did remove the not the Google Translate section.
What I did and it worked was add below code to the google-language-translators style.css in the css folder within the plugin.
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
color: #444;
**display: none;**
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
See Plugin active on http://sethucurryhouse.com/

Categories

Resources