Develop Reference

Efficient way for printing only ag-grid data without pagination or any other content

I'm trying to print only ag-grid data such as the print button in Data-Table print
1-I tried ngx-print but it doesn't work with angular 8.
2- I tried the official way from ag-grid-Example
But I think it's not an efficient way also its show pagination and another page content when you print.
I tried print-This plugin with angular by following below steps :
1- install it by npm
2- invoke the .js file inside node angular.json (the file that contains all plugin that you want to use in the system)
but still, it couldn't recognize the .printThis() as a function .
I don't know how could I print the only ag-grid data without another content of the page, Why there is no built-in function for ag-grid such as DataTable plugin ?!!!

2- I tried the official way from ag-grid-Example But I think it's not
an efficient way also its show pagination and another page content
when you print.
But this is already an efficient and expected way to print all data (without grid pagination).
If you wanna hide something else (can't realize what do you mean by without another content of the page)- it would be required to pre-render this data (or at least prepare for browser-print method)
UPDATE
I checked datatable solution, and basically its exactly as I said, they just prepared function which is making datatable content on new window to isolate from everything else and then execute print() method.
Here is a part of their code (just for understanding):
// Construct a table for printing
var html = '<table class="'+dt.table().node().className+'">';
if ( config.header ) {
html += '<thead>'+ addRow( data.header, 'th' ) +'</thead>';
}
html += '<tbody>';
for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
html += addRow( data.body[i], 'td' );
}
html += '</tbody>';
if ( config.footer && data.footer ) {
html += '<tfoot>'+ addRow( data.footer, 'th' ) +'</tfoot>';
}
html += '</table>';
...
// Allow stylesheets time to load
var autoPrint = function () {
if ( config.autoPrint ) {
win.print(); // blocking - so close will not
win.close(); // execute until this is done
}
};
Also, I tried to play with hiding elements which is also possible but in that way it would be required to care about visibility and overlays.

Squarespace - How to display description/custom text on index thumbnail on hover

Basically, I want to be able to show title and some text on hover on all my index thumbnail like this website.
http://www.timboelaars.nl/
However, in the current squarespace template that I am using (I believe it's called York), the markup is only grabbing the page title and therefore displaying the page title on hover. (See the below code block, you can see the page title in there, that's the only thing that the template displays on Hover)
<div class="index-item-text-wrapper">
<h2 class="index-item-title">
<a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a>
</h2>
</div>
There's no field for me to put any HTML so I am seeking help to use javascript to manually inject custom HTML markup to every single thumbnail, then show them on hover.
TL;DR I want to be able to display more than just the title on hover (ideally my own HTML markup so I can customize the style) on my thumbnails but that's not supported by the template.
Here is my website http://shensamuel.com/
I am really weak at Javascript and I've searched for a solution for this problem for quite long. Any help will be much appreciated!
Thanks!

The following Javascript can be used to insert text for each tile on the page. The code would be inserted using the footer code injection area (unless you're using Developer Mode in which case you'd insert it with the rest of your scripts).
<script>
(function() {
var tiles = document.getElementsByClassName('index-section');
var thisTile;
var titleText;
var description;
var parent;
var i, I;
for (i=0, I=tiles.length; i<I; i++) {
thisTile = tiles[i];
titleText = thisTile.getElementsByClassName('index-item-title-text')[0];
parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0];
description = document.createElement('span');
description.className = 'index-item-description-text';
switch(titleText.innerHTML.toLowerCase()) {
case "google shopping":
description.innerHTML = "Some custom text.";
break;
case "hana":
description.innerHTML = "More text that's custom.";
break;
case "wali":
description.innerHTML = "Custom text here.";
break;
case "cypress":
description.innerHTML = "Type anything you want.";
break;
case "ryde":
description.innerHTML = "Just another bit of text.";
break;
default:
description.innerHTML = "";
}
parent.appendChild(description);
}
})();
</script>
Observe the pattern in the code in order to add new tiles or edit existing ones. You will see that the script attempts to match (a lower case version of) the 'title' text and then inserts text based on each title. This allows you to add more in the future by repeating this 'case' pattern. Of course if you ever change the title of a tile you'd have to correspondingly change this Javascript code.
You can then style the description by inserting CSS via the Squarespace CSS Editor (or via your base.less file if using Developer Mode). For example:
.index-item-description-text {
display: block;
font-size: 1.2em;
color: #FFFFFF
}
Note that while there is an alternative method that would use each tile's respective URL to do an AJAX query and obtain meta data about each project (and therefore allow you to use the Squarespace content manager to insert this 'description'), that method seems unnecessarily complex for your case.
Update 8/17/2016: Regarding AJAX and how to disable AJAX loader in Squarespace: Jason Barone has suggested adding this snippet to your Code Injection > Footer to disable the "AJAX" pageloader. He noted that it will disable the smooth, AJAX transitions between pages, but will allow custom Javascript like usual.
<script>
//Credit: Jason Barone, http://jasonbarone.com/
window.Template.Constants.AJAXLOADER = false;
</script>
Also, some templates have an option to disable AJAX within the style editor (image credit: SSSUPERS):
Update 9/28/2016:
It has been reported that the code provided above no longer disable AJAX. However, some newer templates have added an 'Enable AJAX Loading' setting that can be toggled off.

PHP, JavaScript - Is it right to detect screen-width by redirecting header

I am using the following JavaScript to detect the screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of my site. While it has nothing much to do with my questions, but just in case... Yes I am using WordPress. Also I am already using mobiledetect PHP Library.
function getLayoutWidth() {
if (isset($_GET['width'])) {
define( "SCREEN_WIDTH", $_GET['width']);
} else {
echo "<script language='javascript'>\n";
echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width;\n";
echo "</script>\n";
exit();
}
}
Important :
Other techniques are like...... Let's assume if my site is 2MB in size, it will still load 2MB of content and then hide 1.5MB of it on mobile devices by using CSS properties like display:none; Whereas I don't want that template part to load itself, thus not needing to hide anything.
I am not looking to load an entire JavaScript library like jQuery or so to do this because location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; is the only JavaScript in my entire site. Rest everything is pure PHP, HTML and CSS based. I even disabled jQuery of WordPress in the front-end template.
UPDATE :
Since some friends did not get my point although I mentioned clearly that I don't want to load the content into DOM at all, I am giving a bit more clarity here.....
For Example --- #1200px I want only 1 Sidebar to be displayed. #1600px I want 2 Sidebars to be displayed and over 1600px I want 3 Sidebars to be displayed. Please don't suggest Media Queries solutions as I already know it and that is exactly what I don't want to do. I want to avoid loading the content into DOM. Kindly let focus be only and only on questions asked. Also please don't post suggestions as answers. Let others with proper answers do it. Kindly post suggestions in Comment section.
My questions :
Is this a good / correct way to do from SEO stand point? If not why?
My URL is displayed as example.com/my-product-category/my-product-name/?width=1440 How to remove /?width=1343 and display just example.com/my-product-category/my-product-name part?

Simple answer, no, it is not good from a SEO standpoint. Or any other standpoint. Crawlers such as Googles are designed to completely ignore all hidden elements and thus you will lose big time SEO ranking if your content isnt getting fully crawled, and crawlers crawl each site multiple times masquerading as mobile devices to check if the site is mobile friendly as well.
http://www.seonick.net/responsive-design-seo/
Not to mention the trouble of calculating your arbitrary cutoff point of .5mb serves no purpose if the content is merely hidden (since its all getting sent anyway thus saving no bandwidth).
You need to do this in pure CSS using media queries, it is the most compatible way and allows for a fluid design (changes on the go as the window resizes.
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 700px)" href="full.css">
That will use one css file if the window is smaller than 700px and the other if it is over.
Another of my more favorite methods is to use the http://mobiledetect.net/ class. Its small and fast, more accurate and better flexibility. Load that class then just add classes to your body element depending on the visitors browser
<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">
Then style by targeting classes inside body.phone. This method also ensures you know if the browser is mobile BEFORE the DOM starts to process, meaning you can serve compressed versions of images through some simple logic rather than having CSS swap them out or just resize them or omit entire parts of the markup from being sent to the user at all ensure bandwidth is only used for parts of the DOM relevant to the users device.
<body>
This is normal content and will be visible to all devices
<?PHP if (!$detect->isMobile()) { ?>
This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM
<?PHP } ?>
</body>

To set a cookie in javascript
function Cookies(){};
Cookies.prototype.save=function(name,value,days){
if( days ) {
var date = new Date();
date.setTime( date.getTime()+( days*24*60*60*1000 ) );
var expires = "; expires="+date.toGMTString();
var dom = "; domain="+document.domain;
} else { expires = ""; }
var path = "; path=/";
var tmp=[];
if( typeof( value )=='object' ) {
for( p in value ) tmp.push( p+'='+value[ p ] );
value=tmp.join(';');
}
document.cookie = name+"="+value+expires+path;
};
Cookies.prototype.read=function(name){
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for( var i=0; i < ca.length;i++ ) {
var c = ca[i];
while( c.charAt(0)==' ') c = c.substring(1,c.length);
if( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length );
}
return null;
};
Cookies.prototype.erase=function(name){
this.save( name, "", -1 );
};
var cn='jsdim';
var ckie=new Cookies;
ckie.save( cn, JSON.stringify({ width:screen.availWidth, height:screen.availHeight, colour:screen.colorDepth, depth:screen.pixelDepth }), 1 );
In PHP
<?php
if( isset( $_COOKIE['jsdim'] ) ){
$json=json_decode( $_COOKIE['jsdim'] );
if( !defined('SCREEN_WIDTH') ) define( 'SCREEN_WIDTH', $json->width );
if( !defined('SCREEN_HEIGHT') ) define( 'SCREEN_HEIGHT', $json->height );
if( !defined('SCREEN_COLOUR_DEPTH') ) define( 'SCREEN_COLOUR_DEPTH', $json->colour );
if( !defined('SCREEN_PIXEL_DEPTH') ) define( 'SCREEN_PIXEL_DEPTH', $json->depth );
}
?>

I do not think, that screen size/resolution is really what you want to adjust your view templates for mobile devices. Actually you want to know what plattform/device someone is using, think about Nexus 7, which has 1920 × 1200 or Sony Xperia Z5 with 2160 x 3840px.
I would look at user-agent and HTTP headers for the server side code, there are already good libraries for that: e.g. mobiledetect. For the client side the best practice is to use CSS3 Media Queries: Media Queries for Standard Devices

You can retire the $_GET of the URL by the htaccess, I'm using RewriteRule.
Options +FollowSymLinks
RewriteRule ^folder/file.php$ folder/file.php?g=2
#if you want to remove php file extension, don't keep the .php before the $
To remove all php files extension: php.net.
Edit: this is for who doesn't use Wordpress

You can use this plugin:
https://wordpress.org/plugins/mobble/
It adds an is_mobile()-feature.
In your theme you can now use is_mobile() instead of $_GET['width'] > ...
This way you don't need a ?width= in your $_GET

How to add custom Javascript and external src link to a Gravity Form?

I know we can inject custom script into a gravity form using this: http://www.gravityhelp.com/documentation/page/Gform_register_init_scripts
The example uses a jquery script. But is it possible to inject normal javascript code like below?
var addresses = document.getElementsByClassName('classAddress');
i = addresses.length;
while (i--) {
var autocomplete = new google.maps.places.Autocomplete(addresses[i]);
}
Also how can one add a external link to JS to a Gravity Form instance like this:
<script type='text/javascript' src='...'></script>
Not sure where to do this in functions.php or a Gravity Form related php file

Yeh, you can. This is how I did it (prepare for a nutty hacky but working contraption). It's a really ugly, nasty way of doing it but there was a time constraint so I apologize in advance since this is not the WordPress way of doing things.
I made a custom field, mycustomfield ,(which using css i made not visible on the form) and then i just filtered the field and in its place pulled in a php file containing 8 jquery files. So create an empty file called scriptjs.php, and you can put whatever you want in there and it will get pulled into the form and that's that.
<script type='text/javascript' src='...'></script>
Add the code below to functions.php, change the 'plugins_url' in the code to your theme folder or wherever you plan on hosting the scriptsjs.php file. Don't forget to make a custom field, or you can just filter another field that you are not using for example.
add_filter("gform_field_input", "mycustomfield_input", 10, 5);
function mycustomfield_input($input, $field, $value, $lead_id, $form_id){
if($field["type"] == "mycustomfield"){
$input_name = $form_id .'_' . $field["id"];
$tabindex = GFCommon::get_tabindex();
$css = isset( $field['cssClass'] ) ? $field['cssClass'] : '';
$input='';
if(!is_admin()){
$input=file_get_contents(plugins_url('scriptjs.php', __FILE__));
}
}
return $input;
}

WordPress Plugin on Post / Page

I'm setting out to convert an existing jQuery plugin into WordPress plugin. This will be my first WP plugin (please be gentle). I've setup the basic plugin structure and can activate/deactivate the plugin successfully (resulting in adding the necessary JS and CSS files to the site). So far so good.
The tricky part that I don't understand.
What I am trying to accomplish on a post or page:
1 - Target a single element within the post or page (image)
2 - Apply a specific class to that element
3 - Allow user to then supply the plugin settings to that element only
I have no clue how to do this.
Everything I find regarding WordPress plugin development details how to setup a settings panel in the dashboard. Unfortunately, I cannot find anything that details targeting specific elements within a post or page and then applying the plugin settings to those.
On a standard HTML site, the plugin code would look like:
<img src="..." class="myPlugin"/>
// INIT
$(document).ready(function(){
$('.myPlugin').myPlugin({ someOptions });
});
Settings can also be applied like this:
<img src="..." class="myPlugin" data-myPlugin='{ someOptions }' />
Hopefully this is enough code for everyone and I hope someone out there can point me in the right direction.
Thanks!

You can use the filter hook image_send_to_editor. It returns the HTML that's inserted on the post/page when we select an attachment with the Add Media button.
I've seen an interesting usage here, adapted bellow. We're basically rebuilding the HTML using the attachment attributes passed on $attachment.
add_filter('media_send_to_editor', 'media_html_so_22584846', 10, 3 );
function media_html_so_22584846( $html, $attachment_id, $attachment )
{
$post = get_post( $id ); // used to get the post title, but there's a bug in WP, the title is never printed
$url = $attachment['url'];
$align = ! empty( $attachment['align'] ) ? $attachment['align'] : 'none';
$size = ! empty( $attachment['image-size'] ) ? $attachment['image-size'] : 'full';
$alt = ! empty( $attachment['image_alt'] ) ? $attachment['image_alt'] : '';
$rel = ( $url == get_attachment_link( $attachment_id ) );
$new_html = get_image_send_to_editor( $attachment_id, $attachment['post_excerpt'], $post->post_title, $align, $url, $rel, $size, $alt );
return $new_html;
}
You could use the fields Alt and Description to pass your custom options. Another option would be inserting a custom field in the Media Library popup, but it's not an easy task.
And here the array $attachment after inserting the previous image.
And the generated HTML:
[caption id="attachment_662" align="alignright" width="584"]
<a href="http://plugins.dev/del-me/ampi" rel="attachment wp-att-662">
<img src="http://plugins.dev/wp-content/uploads/2013/10/ampi-682x1024.jpg" alt="alt" width="584" height="876" class="size-large wp-image-662" />
</a>
caption[/caption]