IT Blog

  • Blog
  • Technology
    • Technology
    • Architecture
    • CMS
    • CRM
    • Web
    • DotNET
    • Python
    • Database
    • BI
    • Program Language
  • Users
    • Login
    • Register
    • Forgot Password?
  • ENEN
    • 中文中文
    • ENEN
JavaScript
JavaScript

Making web page scroll down automatically

For better reading experience, we can make to page scroll down automatically with JavaScript bellow. function pageScroll() { window.scrollBy(0,1); } setInterval(pageScroll,35); In a page that you are reading, press F12 to reach developer panel, click on Console pane and paste the script above and hit enter key. Now the page is crolling down slowly while you are reading. You could adjust the scroll speed to adapt your reading speed by changing the number of miliseconds in setInterval function call, the larger the number the slower the speed.  335 total views

2022-09-15 0 Comments 68 Views 0 Like IT Team Read more
JavaScript

Form calculation JavaScript component

This is created for project cost calculation in 2008. Note that it does not use jQuery, but using $ symbol. Be careful to use it with jQuery on the same web page. JavaScript component: he.calc.js //TODO: validation logic /* This component is created specifically for Excel like calculation. Author: Albert He Created: 2008-12-01 usage: He.enableTrace = true; // default = false, if true read on developer console default dataType: number default precision: 2 //accept external event handler onSelfChange //value changed by self, arg = the cell object onchange //value changed by any reason, arg = the cell object dataType: 'string' 'number' precision: 3 validation: 100 */ var doc = document; var $ = function(id) { return document.getElementById(id); }; var removeLeadingZero = function(numberString) { return (numberString.indexOf('0') == 0) ? numberString.replace(/^[0]*/, '') : numberString; } var v = function(id) { var value = ''; var elm = $(id); if (!elm) return 0; if (elm.cellInstance) value = elm.cellInstance.value; else { He.log += elm.id + ' has no instance (has not been defined yet).\n'; //this indicates using undefined cell. //alert(elm.id + ' value: ' + elm.value); } if (value == '') value = 0; return eval(value); }; function roundTo(base, precision) { var n = Math.pow(10, precision); return Math.round(base * n) / n; } function numberPrecision(base, precision) { if (precision == 999) return base-0; else if (precision <= 0) return Math.round(base); var s = roundTo(base, precision).toString(); var decimalIndex = s.indexOf("."); if (precision > 0 && decimalIndex < 0) { decimalIndex = s.length; s += '.'; } while (decimalIndex + precision + 1 > s.length) {…

2019-10-13 0 Comments 1481 Views 0 Like IT Team Read more
JavaScript

Switch external image for index page and posts

Issue For article collection site, many articles are copied from other websites. Very often, images were not displayed. Reason Some image servers switching their protocol between http and https. e.g. https://i2.kknews.cc Solution 1. Index page post block html output is from wp_kses_post( $apostrophe_2_post_thumbnail ) So, In content.php file under child theme, replace echo wp_kses_post( $apostrophe_2_post_thumbnail ); with echo str_replace('<img ','<img onerror="imgError(this);" ',wp_kses_post($apostrophe_2_post_thumbnail)); 2. Post page In plugin ad_after function in ad-inserter.php add following code: $content = str_replace('<img ','<img onerror="imgError(this);" ',$content); In Custom CSS & JS add script, this script will be added to both index and post pages: function imgError(image) { image.onerror = ''; if(image.src.startsWith('http:')) image.src=image.src.replace(/^http:\/\//i, 'https://'); if(image.src.startsWith('https:')) image.src=image.src.replace(/^https:\/\//i, 'http://'); } This is improved version of "Fixing image issue in posts".  2,219 total views

2019-04-11 0 Comments 1035 Views 0 Like IT Team Read more
JavaScript

Open and close all links inside a page for testing

For web site testing, we need to open each links on a page and briefly exam the page display. 1. set each link displays for 5 seconds or longer before closing to ensure there is enough time for a link to be fully opened and examined. 2. set open interval of each link to 3 seconds more than the link being closed. This allows js to ensure the previous link is closed before open the next link. var key_start = 0; var win; $.each($('#sitemapTable a'),function(key,value){ if(key >= key_start) setTimeout(function(){ win = window.open(value.href); setTimeout(function(){ win.close(); }, 5000); },(key-key_start)*(8000+Math.floor(Math.random() * 100))); }); Note: 1. tested in Chrome 70.0.3538.102. 2. this script is used in js console.  1,864 total views

2019-02-11 0 Comments 802 Views 0 Like IT Team Read more
JavaScript

Show any data in DataTables in WordPress

There are many way to show data in jQuery DataTables. Here’s a way using shortcode. Create a plugin with shortcode. 1. Create a function Pseudo function: function get_something_shortcode(){ global $wpdb; $sql = "select * from table"; $result = $wpdb->get_results($sql); $str = '<table id="logTable">'; $str .= '<thead><tr><th>column1</th><th>column1</th></tr></thead>'; $str .= '<tbody>'; foreach($result as $row) { $str .= '<tr><td>'.$row->column1.'</td><td>'.$row->column2.'</td></tr>'; } $str.="</tbody></table>"; return $str; } Real function function get_activity_logs_shortcode(){ global $wpdb; $sql = "select DATE_FORMAT(convert_tz(l.visit_date,'+0:00','-5:00'), '%y-%m-%d %h:%i:%s') AS `date`,p.post_title,p.post_type,pu.display_name AS author,(case when l.display_name='unknown' then '-' else l.display_name end) AS user,l.status ,l.user_ip,l.city,l.referer from wp_moove_activity_log l join wp_posts p on p.ID = l.post_id join wp_users pu on pu.ID = p.post_author left join wp_users u on u.ID = l.user_id where p.post_type in ('page','post') and l.user_ip not LIKE '66.249.75.%' AND l.user_ip not LIKE '66.249.69.%' and l.display_name!='太极客' order by l.visit_date desc"; $result = $wpdb->get_results($sql); $str='<table id="logTable" style="font-size:12px">'; $str .= '<thead><tr><th>Date/Time</th><th>Title</th><th>Post type</th><th>Author</th><th>User</th><th>Activity</th><th>Client IP</th><th>Client Location</th><th>Referer</th></tr></thead>'; $str .= '<tbody>'; foreach($result as $row) { $str .= '<tr><td><a href="'.$row->Date.'" nowrap style="font-size:10px;white-space:nowrap">'.$row->date.'</td><td>'.$row->post_title.'</td><td>'.$row->post_type.'</td><td>'.$row->author.'</td><td>'.$row->user.'</td><td>'.$row->status.'</td><td>'.$row->user_ip.'</td><td>'.$row->city.'</td><td>'.$row->referer.'</td></tr>'; } $str.="</tbody></table>"; return $str; } 2. Make it a shortcode add_shortcode('activity_logs','get_activity_logs_shortcode'); Add following code in head section in header.php file of the child theme. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#logTable').DataTable( { "initComplete": function(settings, json) { var obj = $('#memberTable_filter label'); obj.html(obj.html().replace('Search:','搜索: ')); obj = $('.dataTables_length label'); obj.html(obj.html().replace('Show','显示 ').replace('entries',' 行')); }, "pageLength": 50 } ); } ); </script> Note table the table id logTable must be the same in the table and script. 3. Add a page to use the shortcode, then save and display the page. [activity_logs] Done.  4,195 total views,  5 views today

2019-01-08 0 Comments 1323 Views 0 Like IT Team Read more
JavaScript

Moving elements around with jQuery

WordPress paging line is under 'related sites', not right below the article contents. To move it up with two steps: Wrap the line right below the article, in this example is "page view counter", "pvc_stats" class. Prepend paging element ".page-links" to the wrapper. See the code below:  2,002 total views,  5 views today

2018-12-19 0 Comments 829 Views 0 Like IT Team Read more
JavaScript

Fixing jQuery DataTables header non-responsive issue

jQuery DataTables renders table into two parts:  header, <div class="dataTables_scrollHeadInner"><div class="dataTable"> body, <div class="dataTables_scrollBody"> DataTables measures the current screen size and set the fixed width. In this case when resizing the browser, the table header and body are not resized automatically. The solution is to enforce their width to be set in percentage. The following code is the final. Note: file: \WebSites\WebBusinessSuite\Scripts\Main\BusinessSuit.css  9,355 total views,  5 views today

2018-10-24 0 Comments 2646 Views 0 Like IT Team Read more
JavaScript

JQuery get checkbox value

$('#checkbox').val() is always = 'on'. User:  $('#checkbox').is(':checked') to get correct value.  1,857 total views

2018-06-22 0 Comments 784 Views 0 Like IT Team Read more
JavaScript

JQuery set selected option for supporting multi-language

data is retrieved from web API in JSON format. Rendered on translation data completed. i18n.load( serviceLocation + 'api/language.php?page='+filename+'&lang='+i18n.locale, i18n.locale ).done( function() { var select = $("#gender"); select.empty().append('<option value="">'+$$("selectgender")+' *</option>'); select.append('<option value="1">'+$$("male")+'</option>'); select.append('<option value="2">'+$$("female")+'</option>'); select.append('<option value="3">'+$$("other")+'</option>'); Set option from data: function fillData(data){ //$('#gender option:contains("'+data.gender+'")').attr('selected','selected'); $('#gender option[value='+data.gender+']').attr('selected','selected'); } By text: $('#gender option:contains("'+data.gender+'")').attr('selected','selected'); By value: $('#gender option[value='+data.gender+']').attr('selected','selected');    2,050 total views

2018-06-19 0 Comments 780 Views 0 Like IT Team Read more
JavaScript

Changing DataTable cell width

Problem: If only a few columns, the space is too big. $tblContainer.html("<table class='dataTable striped border hovered'></table>"); var reportName = JSON.parse(this.data).ReportName; if (reportName.indexOf("Automation")>-1) { table = $tblContainer.DataTable({ "bSort": false, "createdRow": function (row, data, dataIndex) { if (data[0].indexOf("<b>") > -1) { $(row).addClass('header-lightblue'); } row.cells[0].width = '400px'; //first column if (data.length < 5) { for (var i = 1; i < data.length - 1; i++) { row.cells[i].width = '200px'; } } },    1,914 total views

2018-06-13 0 Comments 761 Views 0 Like IT Team Read more
12
Chinese (Simplified) Chinese (Simplified) Chinese (Traditional) Chinese (Traditional) English English French French German German Japanese Japanese Korean Korean Russian Russian
Newest Hotspots Random
Newest Hotspots Random
Rich editor not working Making web page scroll down automatically Getting data from Dapper result All Unicode Chars How to keep and display contact form 7 data Common Regular Expressions
Automation report and validating Useful sql script for SQL Server developers Query menu in WordPress Recovering user role in WordPress Crawling 51job in Python Generating Test Data with SQL Scripts
Categories
  • Architecture
  • BI
  • C#
  • CSS
  • Database
  • DotNET
  • Hosting
  • HTML
  • JavaScript
  • PHP
  • Program Language
  • Python
  • Security
  • SEO
  • Technology
  • Web
  • Wordpress

COPYRIGHT © 2021 Hostlike IT Blog. All rights reserved.

This site is supported by Hostlike.com