Skip to content
Technote
Search for:
Search
Home
Microsoft
EMS MDM
Windows Fundamental
Windows Server
Powershell
Group Policy
Cisco
Web
Linux
Networking
Networking
Cyber Security
Web Coding
CATEGORIES
Microsoft
Microsoft Server and Related exames
READ MORE
Networking
Networking, Cisco, Juniper, security
READ MORE
Coding
Hosting, database, Python, WordPress
READ MORE
Security
Penetration test and defend
READ MORE
Linux
Releash the power of Penguin
READ MORE
Database
There are enough fishes here~
READ MORE
Latest posts
Copy text in Cisco IOS without Exiting from config mode
November 10, 2021
Many network engineers have enough with the “Ctr + C” combo in cisco command prompt. You have to go back to the configuration level after you issue a command like “do sh xxxx” and copy something. In MacOS, the Command + C works just fine! Today, I will share some little trick for Engineers who works in windows environment on daily basis. Step 1. Download the autohotkey from https://www.autohotkey.com/ Step 2. Run it , right click and click “edit this script” Step 3, in the new notepad editor, paste below script to give Alt+s the ability to copy the selected text. and save it: !s:: ;Alt+s to copy Clip0 = %ClipBoardAll% ClipBoard = StringRight x,A_ThisHotKey,1 ; C or X Send ^%x% ; For best compatibility: SendPlay ClipWait 2 ; Wait for text, up to 2s If ErrorLevel ClipBoard = %Clip0% ; Restore original ClipBoard Else ClipBoard = %ClipBoard% ; Convert to text VarSetCapacity(Clip0, 0) return Step 4. right click Autohotkey and click “reload this script” Now enjoy!...
Read more...
jQuery Untick all the checkbox
October 15, 2021
the method we are using today to check/uncheck: checked or click()? The difference between make checked true/false and click is that, true/false does not fire the change event , only change the outlook. If the uncheck need to trigger an action, such as showing some content, the change of true/false of checked will not work. Click: Click() will bind an event handler to the “click” JavaScript event, or trigger that event on an element. // Check $("#checkbox").prop("checked", true); // Uncheck $("#checkbox").prop("checked", false); A scenario The reason I am writing this article is that I came across a Print page in a helpdesk (manageengine Serviedesk) that it check all the ticket info by default, which results in about 4-5 pages. What I really want is only the first page, so I have to untick all other info to make it happen. So the original checkboxes: To make this happen, first I tried to find the ID of the checkbox area, which can be done by right click the checkboxes and choose inspect element: I found the parent div is called selection-container, we want to keep the first checkbox ticked, so I added label:not(:first), the final code will be: /**Untick all the checkbox in the print prview */ jQuery(window).on('load',function() { jQuery( "#selection-container label:not(:first) input:checked" ).click(); }); Then we find out which javascript is loaded into this page, and add this code to that file. This can also be done by inspect the element: Log on the ManageEngine Service desk server, this find can be found under C:\ManageEngine\ServiceDesk\webapps\ROOT\scripts. add below code to the end of spa.js. /**Untick all the checkbox in the print prview */ jQuery(window).on('load',function() { jQuery( "#selection-container label:not(:first) input:checked" ).click(); }); In the front end, press Ctr+F5 to purge all the browser cache. the final look will be:...
Read more...
test
September 29, 2021
...
Read more...
DoS – TCP SYN cookies attack
September 26, 2021
The TCP Syn is DoS (Denial of Service) attack. It consumes resources on your Linux server. The attacker begin with the TCP connection handshake sending the SYN packet, and then never completing the process to open the connection. This results into massive half-open connections. The Linux kernel can block such attacks easily. Tutorial details Difficulty level Intermediate Root privileges Yes Requirements /etc/sysctl.conf Est. reading time N/A See the current settings Use sysctl command to configure or see kernel parameters at runtime. To see the current settings for net.ipv4.tcp_syncookies kernel parameter, enter: # sysctl -n net.ipv4.tcp_syncookies OR # cat /proc/sys/net/ipv4/tcp_syncookies Sample outputs: # sysctl -n net.ipv4.tcp_syncookies 1 Enable TCP SYN cookie protection Edit the file /etc/sysctl.conf, run: # vi /etc/sysctl.conf Append the following entry: net.ipv4.tcp_syncookies = 1 Save and close the file. To reload the change, type: # sysctl -p DDoS with Kernel setting Instead, we provide a set of CentOS 7 kernel settings that we would use. Just put the below in your /etc/sysctl.conf file and apply the settings with sysctl -p. Anti-DDoS Kernel Settings (sysctl.conf) kernel.printk = 4 4 1 7 kernel.panic = 10 kernel.sysrq = 0 kernel.shmmax = 4294967296 kernel.shmall = 4194304 kernel.core_uses_pid = 1 kernel.msgmnb = 65536 kernel.msgmax = 65536 vm.swappiness = 20 vm.dirty_ratio = 80 vm.dirty_background_ratio = 5 fs.file-max = 2097152 net.core.netdev_max_backlog = 262144 net.core.rmem_default = 31457280 net.core.rmem_max = 67108864 net.core.wmem_default = 31457280 net.core.wmem_max = 67108864 net.core.somaxconn = 65535 net.core.optmem_max = 25165824 net.ipv4.neigh.default.gc_thresh1 = 4096 net.ipv4.neigh.default.gc_thresh2 = 8192 net.ipv4.neigh.default.gc_thresh3 = 16384 net.ipv4.neigh.default.gc_interval = 5 net.ipv4.neigh.default.gc_stale_time = 120 net.netfilter.nf_conntrack_max = 10000000 net.netfilter.nf_conntrack_tcp_loose = 0 net.netfilter.nf_conntrack_tcp_timeout_established = 1800 net.netfilter.nf_conntrack_tcp_timeout_close = 10 net.netfilter.nf_conntrack_tcp_timeout_close_wait = 10 net.netfilter.nf_conntrack_tcp_timeout_fin_wait = 20 net.netfilter.nf_conntrack_tcp_timeout_last_ack = 20 net.netfilter.nf_conntrack_tcp_timeout_syn_recv = 20 net.netfilter.nf_conntrack_tcp_timeout_syn_sent = 20 net.netfilter.nf_conntrack_tcp_timeout_time_wait = 10 net.ipv4.tcp_slow_start_after_idle = 0 net.ipv4.ip_local_port_range = 1024 65000 net.ipv4.ip_no_pmtu_disc = 1 net.ipv4.route.flush = 1 net.ipv4.route.max_size = 8048576 net.ipv4.icmp_echo_ignore_broadcasts = 1 net.ipv4.icmp_ignore_bogus_error_responses = 1 net.ipv4.tcp_congestion_control = htcp net.ipv4.tcp_mem = 65536 131072 262144 net.ipv4.udp_mem = 65536 131072 262144 net.ipv4.tcp_rmem = 4096 87380 33554432 net.ipv4.udp_rmem_min = 16384 net.ipv4.tcp_wmem = 4096 87380 33554432 net.ipv4.udp_wmem_min = 16384 net.ipv4.tcp_max_tw_buckets = 1440000 net.ipv4.tcp_tw_recycle = 0 net.ipv4.tcp_tw_reuse = 1 net.ipv4.tcp_max_orphans = 400000 net.ipv4.tcp_window_scaling = 1 net.ipv4.tcp_rfc1337 = 1 net.ipv4.tcp_syncookies = 1 net.ipv4.tcp_synack_retries = 1 net.ipv4.tcp_syn_retries = 2 net.ipv4.tcp_max_syn_backlog = 16384 net.ipv4.tcp_timestamps = 1 net.ipv4.tcp_sack = 1 net.ipv4.tcp_fack = 1 net.ipv4.tcp_ecn = 2 net.ipv4.tcp_fin_timeout = 10 net.ipv4.tcp_keepalive_time = 600 net.ipv4.tcp_keepalive_intvl = 60 net.ipv4.tcp_keepalive_probes = 10 net.ipv4.tcp_no_metrics_save = 1 net.ipv4.ip_forward = 0 net.ipv4.conf.all.accept_redirects = 0 net.ipv4.conf.all.send_redirects = 0 net.ipv4.conf.all.accept_source_route = 0 net.ipv4.conf.all.rp_filter = 1 ...
Read more...
Chapter 2 jQuery Actions and Methods
September 14, 2021
Basic Behavior of jQuery Scripts One of the most convenient features of jQuery is the fact that nearly all its methods are chainable, which means methods can be executed one right after the other. $('p') .addClass('new-class') .text("I'm a paragraph!") .appendTo('body'); or $('p').addClass('new-class').text("I'm a paragraph!").appendTo('body'); Understanding jQuery Methods Traversing DOM Elements Traversal in jQuery is the act of moving from one DOM element to another; traversal is essentially another form of filtering performed after the initial selection has been made. This is useful because it allows developers to complete an action and then move to another part of the DOM without needing to perform another search by selector. .eq() If a set of elements needs to be narrowed down to just one element identified by its index, then you’re able to use the .eq() method. This method accepts one argument: an index for the desired element. For .eq(), indices start at 0. Let’s take a page of products as example, there a list of products with class product. So $(“li.product”) shows the object list, and the index. And I pointed at the object with index 2. Now I enter the snippet $(“li.product”).eq(2) and hope it will only show the third product. .first() and .last() The .first() and .last() methods work identically to .eq(0) and .eq(-1), respectively. To select the last paragraph from a set of all paragraphs on the page, use the following: $("p").last(); .filter() and .not() To use a whole new selector within a set of elements, the .filter() method comes in handy. It accepts any selector that can be used in the jQuery function, but it applies only to the subset of elements contained within the jQuery object. For instance, to select all paragraphs and then filter out all but the ones with class foo, you would use the following: $("p").filter(".foo"); The inverse of .filter() is .not(), which will return all elements from a result set that do not match the given selector. For instance, to select all paragraphs and then limit the selection to paragraphs that do not have the class foo, you would use the following: $(“p”).not(“.foo”); .has() To select an element that contains elements matching a certain pattern, you can use the .has() method. For instance, you would use the following to select all paragraphs and filter the results to only paragraphs that contain a span element: $("p").has("span"); .is() The .is() method is a little different from other methods in that it does not return the jQuery object. It evaluates a result set without modifying it, which makes it ideal for use in callback functions or functions executed after the successful execution of a function or method. You’ll learn more about practical uses of .is() in later examples of this book; right now, select all paragraphs in your test document then check if one has the class foo: $("p").is(".foo"); The result is a Boolean (true or false) answer. .slice() To select a subset of elements based on its index, the .slice() method comes into play. It accepts two arguments: the first is a starting index from which to generate the subset, and the second is an optional ending point. If the second parameter isn’t supplied, the subset will continue until the end of the selection is reached. .children() Oftentimes, it becomes necessary to drill down in a result set to find child elements. This is accomplished using the .children() method, which accepts one optional parameter: a selector to match child elements against. To select all paragraphs and then change the selection to match all child elements of the paragraphs, execute the following code: $("p").children(); .closest() The .closest() method is an easy way to find elements up the DOM tree, which is the nesting order of elements (a DOM tree relationship in your example is the span within a paragraph within the body element). For example, to find the closest paragraph to the span with class foo, run the following code snippet in the console: $("span.foo").closest("p"); .find() Similar to the .children() method, the .find() method matches descendants of elements within the current set. The main difference between .find() and .children() is that .children() only checks one level down in the DOM tree, whereas .find() doesn’t care how deep the matched elements are. Creating New DOM element You can also add attributes to this new element by passing a second argument as JavaScript Object Notation (JSON), A sample of JSON data would be: { "key":"value" } or { "key1":"value1", "key2":"value2" }. If you want to create a paragraph like below: <p class="test">This is a new paragraph!</p> The JSON syntax will be: $("<p>", { "class":"test", "text":"This is a new paragraph!" }); This is only creating the element, it hasn’t been attached to the DOM yet and, therefore, isn’t visible in the browser window. We will talk about how to insert new elements in the next section, “Inserting New Elements into the DOM.” Insert New Elements into the DOM An important note to make here is that the modification of the DOM is temporary, meaning that any changes made will be reset back to the original HTML document once the page is refreshed. This happens because JavaScript is a client-side language, which means it isn’t modifying the actual files from the server. .append() and .prepend() The .append() and .prepend() functions will attach the elements passed as arguments to the jQuery object to which they are chained. The only difference is that .append() attaches the elements at the end, and .prepend() attaches at the beginning. The content will be appended or prepended inside the matched elements, meaning if you match all paragraphs on the page and append a new sentence, “This was added by jQuery”, it will be appended inside the closing paragraph tag (</p>).: <p>Test paragraph.</p> Execute below code: $("p").append(" This was added by jQuery."); <p>Test paragraph. This was added by jQuery.</p> .appendTo() and .prependTo() $("<p>", { "text":"I'm a new paragraph!", "css":{"background":"yellow"} }) .prependTo("body"); .after() and .before() The .after() and .before() methods are similar to .append() and .prepend(), except they add the content outside the element either before or after it, instead of inside the element at the beginning or end. To add a new paragraph after the paragraph with class foo, use the following snippet: $("p.foo").after("<p>A new paragraph.</p>"); .insertAfter() and .insertBefore() The same way that .appendTo() and .prependTo() allow for more concise addition of new elements to the DOM, .insertAfter() and .insertBefore() offer the same alternative for .after() and .before(). To repeat the example from the previous section using .insertAfter(), alter the code to read as follows: $("<p>", { "text":"A new paragraph." }) .insertAfter("p.foo"); .wrap() The .wrap() method allows developers to enclose existing elements with one or more new elements quickly and easily. The argument accepted by .wrap() can either be a collection of one or more tags to wrap around the selected elements, or a callback function to generate the tags. First, wrap all the spans in the example document with a strong tag using the following: $("span").wrap("<strong />"); .unwrap() The inverse of .wrap(), .unwrap() will remove tags that surround a given element. It does not accept any arguments; it simply finds the immediate parent element and removes it. To unwrap the span elements in the example file, execute this code: $("span").unwrap(); To unwrap a single element, add the wrap to unwrap(): $("span").unwrap("<strong />"); .wrapAll() If an entire set of elements needs to be wrapped in a new tag, .wrapAll() is used. Instead of individually wrapping each selected element with a new tag, it groups all selected elements and creates one wrapper around the whole group. To wrap a div element with a yellow background around all paragraphs on the page, use the following code: var div = $("<div>", { "css":{"background-color":"yellow"} }); $("p").wrapAll(div); .wrapInner() In some cases, it’s desirable to wrap the content of an element but not the tag itself. A good example of this is making an entire paragraph bold: to wrap strong tags around a paragraph is not valid HTML and, therefore, isn’t a desirable solution. Fortunately, jQuery provides .wrapInner(), which wraps everything contained within an element in a new tag. To italicize all text in the paragraphs on the test page, use the following code: <p>Paragraph with on id.</p> $("p").wrapInner("<em />"); <p><em>Paragraph with on id.</em></p> .remove() and .detach() To remove an element from the DOM entirely, the .remove() and .detach() methods are used. Both methods remove selected elements from the DOM, but the .detach() method keeps jQuery data for the element intact, which makes it ideal for situations in which an element will be reattached to the DOM at some point. Both .remove() and .detach() accept an optional selector to filter the elements being removed. In your example, remove all paragraphs with class foo using the following: $("p").remove(".foo"); When the code is run, the paragraph with class foo is removed from view and is no longer part of the DOM. Accessing and Modifying CSS and Attributes attr() For most element attributes, the .attr() method is used. This method has two purposes: The first is to read a given attribute, which is accomplished by supplying the name of the desired attribute as the first argument to the method with no other arguments. The second is to set an attribute by passing the name of the attribute to be set as the first argument and the value to which it is to be set as the second. First, retrieve the ID of the third paragraph using the following: $("p:eq(2)").attr("id"); Second, change the id attribute of the third paragraph to 3rdLable $("p:eq(2)").attr("id","3rdLable") .removeAttr() To remove an attribute, simply call .removeAttr() on the element from which you wish to remove the attribute and pass the attribute’s name. Enable the check box in the sample form by removing the disabled attribute: $(":checkbox").removeAttr("disabled"); .css() The .css() method works just like .attr(), except it applies to styling rules. To return a value, pass the name of the value as the only argument to the method; to set a value, pass both an attribute name and a new value for it. Like .attr(), multiple values can be set using JSON format. To change all elements with class foo to have red text and a yellow background, use the following: $(".foo").css({ "color":"red", "background":"yellow" }); .text() and .HTML() When dealing with the contents of an element, the .text() and .html() methods are used. The difference between the two is that .html() will allow you to read out and insert new HTML tags into an element, where .text() is for reading and writing text only. If either of these methods is called on an element set with no arguments, the contents of the element are returned. When a value is passed to the method, the existing value is overwritten, and the new one is put in its place. To read the text out of the paragraph with ID bar, run the following code in the console: $("#bar").text(); This captures all text (including whitespace) but ignores the span tag. .val() Accessing and modifying the content of form elements is accomplished through the .val() method. This method returns the value of an input, or if a value is supplied, sets the value of an input. Retrieve the value of the submit button in your test form using the following: $(“:submit”).val(); .data() it allows you to store information about an element within the jQuery object in a safe, easy manner. To give the first two paragraphs in the test document nicknames, store the information using .data() and then log it in the console: $("p:first") .data("nickname", "Pookie") .next("p") .data("nickname", "Shnookums"); console.log("My nickname: "+$("p:first").data("nickname")); console.log("My nickname: "+$("p:eq(1)").data("nickname")); Data can be added to an element en masse as in JSON format as well: $("p.foo").data({ "nickname":"Wubby", "favorite":{ "movie":"Pretty Woman", "music":"Sade", "color":"pink" } }); console.log("Nickname: "+$("p.foo").data("nickname")); console.log("Favorite Movie: "+$("p.foo").data("favorite").movie); The preceding will produce the following output when executed: >>> $("p.foo").data({ "nickname":"Wubby",....data("favorite").movie); Nickname: Wubby Favorite Movie: Pretty Woman This can also be done with variable: $("p.foo").data({ "nickname":"Wubby", "favorite":{ "movie":"Pretty Woman", "music":"Sade", "color":"pink" } }); var info = $("p.foo").data(); // cache the data object in a variable console.log("Nickname: "+info.nickname); console.log("Favorite Movie: "+info.favorite.movie); ...
Read more...
Chapter 1 jQuery with DOM and CSS
September 14, 2021
In most implementations of jQuery, the shortcut $() is used instead of jQuery() to keep the code concise. Caution: Certain other JavaScript libraries also use the $() function, so conflicts may occur when attempting to use multiple libraries simultaneously. jQuery provides a fix for this situation with jQuery.noConflict(). For more information, see http://docs.jquery.com/Core/jQuery.noConflict. Selecting DOM Elements Using CSS Syntax In this article, we will use firefox for developer as demo environment, you can click the wrench icon in the right top, and click “web developer tool”. You will see another pane at the bottom of the browser, Then click console, and you can type the snippet demonstrated below: Basic Selectors Selecting Elements by Tag Type To select an element by tag type, simply use the name of the tag (such as p, div, or span) as your selector. To select all paragraph (<p>) tags in our test document, enter the following snippet at the bottom of the console: $("p"); Press Enter and the code will execute. If you have multiple result, then point to one of them, the browser will highlight the related part. Selecting Tags by Class Name, ID Just as quickly as you can select by tag type, you can select elements by their assigned class or classes. The syntax for this is the use the class name preceded by a period (.): .class Select all the elements with the class foo by executing the following snippet in the console: $(".foo"); To select an element by its id attribute, the CSS syntax of the id preceded by a hash sign (#) is used. #id Match all elements with an ID of bar with the following: $("#bar"); Combining selectors In some situations, it may be necessary to isolate only certain tags that correspond to a class, which is easy to do by combining tag type and class in your selector. Enter the following in the console to select only paragraph tags with the class foo: $("p.foo"); Hierarchy Selectors Sometimes, it’s not enough to be able to select by element, class, or ID. There are points at which you’ll need to access elements contained within, next to, or after another element. Selecting Descendant Elements Selecting descendant elements, which are elements contained within other elements, is done using the ancestor selector followed by a space and the descendant selector. ancestor descendent $("body span"); This will find all spans contained within the body tag (<body>) of the document, even though the spans may be also inside paragraph tags. Very next level descendent Only the very next level of element is considered for matching. $("body>span"); Selecting Next Elements Occasionally in a script, you’ll need to select the next element in the DOM. This is accomplished by providing an identifier for the starting element (any selector pattern works here), followed by a plus sign (+), followed by the selector to match the next instance of: $(".foo+p"); There is only one element with the class foo, so only one paragraph element p.first is returned: <div class="foo"> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </div> <p class="first"> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p> <p class="second"> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p> Selecting Sibling Elements Sibling elements are any elements contained within the same element. Selecting sibling elements works similarly to selecting next elements, except the sibling selector will match all sibling elements after the starting element, rather than just the next one. To select sibling elements, use the starting element selector, followed by an equivalency sign (~), and the selector to match sibling elements with: start~siblings To match all siblings after the paragraph with class foo, execute the following command in the console: $(“.foo~p”); The result set will be: p.first, p.second Basic Filters Filters are another very powerful method of accessing elements in the DOM. Instead of relying on element types, classes, or IDs, you’re able to find elements based on their position, current state, or other variables, such as the first child, last child, odd number. The basic syntax of a filter is a colon (:) followed by the filter name: :filter Selecting First or Last Elements One of the most common uses of filters is to determine if an element is the first or last element in a set. With filters, finding the first or last element is incredibly simple; just append the filter :first or :last to any selector: $("p:last"); This returns the following when executed in the console: >>> $("p:last"); Selecting Elements that Do Not Match a Selector If you need to find all elements that don’t match a selector, the :not() filter is the easiest way to go about it. Append this filter to your selector along with a selector as its parameter, and the results set will return any elements that match the original selector, but not the selector passed as a parameter to :not(). For example, select a paragraph that does not have class foo: $("p:not(.foo)"); Selecting Even or Odd Elements Similar to :first and :last, the :even and :odd filters are syntactically simple and return exactly what you might expect: the even or odd elements from a result set. Selecting Elements by Index Note: An element’s index refers to its position among other elements in the set. Counting in programming starts a zero (0), so the first element is at index 0; the second is at index 1, and so on. In the event that you need to grab a particular element by its index, the :eq() filter allows you to specify which element is needed by passing an index as the filter’s parameter: $("p:eq(3)"); Content Filters Filters are also available to select elements based on their content. These can range from containing certain text to surrounding a given element. Selecting Elements That Contain Certain Text To select only elements that contain certain text, use the :contains() filter, where the text to be matched is passed as a parameter to the filter: $("p:contains(Another)"); Selecting Elements That Contain a Certain Element If you need to select only elements that contain another element, you would use the :has() filter. This works similarly to :contains(), except it accepts an element name instead of a string of text: $("p:has(span)"); Selecting Elements That Are Empty To find elements that are empty (meaning the element contains neither text nor any other elements), the :empty filter comes into play. In the HTML example you’re using, the only empty elements are not visible. Select them by looking for any empty element: $(":empty"); Selecting Elements That Are Parents The opposite of :empty, :parent will only match elements that contain children, which can be either other elements, text, or both. Select all paragraphs that are parents using the following: $("p:parent"); Visibility Filters Visibility filters, :hidden and :visible, will select elements that are, respectively, hidden and visible. Select all visible paragraphs like so: $("p:visible"); Child Filters Child filters add an alternative to the use of :even, :odd, or :eq(). The main difference is that this set of filters starts indexing at 1 instead of 0 (like :eq() does). Selecting Even or Odd Parameters or Parameters by Index or Equation One of the more versatile filters, :nth-child() provides four different options to pass as a parameter when selecting elements: even, odd, index, or an equation. Like other child filters, this one starts indexing at 1 instead of 0, so the first element is at index 1, the second element at 2, and so on. Using :odd, the result set contained the paragraphs with a class of foo and an ID of foo; select odd paragraphs using :nth-child() to see the difference in how the filters handle by executing the following command: $("p:nth-child(odd)") Selecting First or Last Child Elements While very similar to :first and :last, :first-child and :last-child differ in that the returned element set can contain more than one match. For instance, to find the last span that is a child of a paragraph element, you might use the following: $("p span:last"); Form Filters Matching by Form Element Type The most common form-specific filters simply match form element types. The available filters are :button, :checkbox, :file, :image, :input, :password, :radio, :submit, and :text. To select all radio inputs, use the following code: $("input:radio"); Selecting Only Enabled or Disabled Form Elements Additionally, filters to select enabled or disabled form elements are available using :enabled and :disabled. To select all disabled form elements, use the following code: $(":disabled"); Selecting Checked or Selected Form Elements Radio and check box inputs have a checked state, and select inputs have a selected state. Filters are provided to retrieve the form elements that are in either state using :checked or :selected, respectively. To select the currently checked radio button in your HTML example, execute the following code in the console: $(":checked"); This returns the radio input that is currently selected. Example Find tags with class fontstyle0, and add class test. <script> $(window).on('load',function() { $(".fontstyle0").addClass("test"); }); </script> <style> .test{ font-size: 120%; color: #ff6600; } </style> ...
Read more...
Add variable to wordpress page
September 2, 2021
Sometimes you might want to show different content to a customer for a same URL: Add below to functions.php //Add var to url add_filter('query_vars', 'parameter_queryvars' ); function parameter_queryvars( $qvars ) { $qvars[] = 'redirect'; return $qvars; } In the theme folder, create a template by copy the page.php, and rename it. Here I want it to listen to a parameter called “redirect”, such as https://frankfu.click/test-2/?redirect <?php /* Template Name: Parameter Page */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php global $wp_query; if (isset($wp_query->query_vars)) { //content for url with parameter print "<h1>Content with parameter</h1>"; }else{ //content for url without parameter while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'page' ); endwhile; // End of the loop. } ?> </main><!-- #main --> </div><!-- #primary --> <?php get_sidebar(); get_sidebar( 'left' ); get_footer(); Now in the front we can see new template file: Now if you type normal URL , it shows the content “test”, if you type https://frankfu.click/test-2/?redirect, it shows the “Content with parameter” ...
Read more...
modify the wordpress login page
August 28, 2021
Your wp-login page is located in the root folder and the file name is wp-login.php you can customize the logo by below line: <h1><img src=”your_logo.png” alt=”xxx” style=”max-width: 100%;”/></h1> Or you can style it by add style=”” in the head...
Read more...
Woocommerce hide current product from related products
August 14, 2021
WooCoomerce shipped with current product also in the related products tab. I was using the product slider carousel: default code is: $products = wc_get_products( $args ); Then below iterate all the products: <div class="swiper-container"> <div class="swiper-wrapper"> <?php //Modified below line for exclude current product foreach ( $products as $product ) { echo '<div class="swiper-slide"> <div class="gpsc--product-image"> <a href="' . esc_url( get_permalink( $product->get_id() ) ) . '"> <img src="' . esc_url( wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id() ), 'medium' ) ) . '" alt="' . esc_html( $product->get_title() ) . '"> <h2>' . esc_html( $product->get_title() ) . '</h2> </a> <br>' . do_shortcode( '' ) . '</div> </div>'; } ?> </div> </div> We can add a variable called $current_product, and use below code to get it: $current_product = wc_get_product(); Then we create a empty <div> when the $current_product equals $product: <div class="swiper-container"> <div class="swiper-wrapper"> <?php //Modified below line for exclude current product foreach ( $products as $product ) { if ($product == $current_product){ echo '<div class="current"></div>'; }else{ echo '<div class="swiper-slide"> <div class="gpsc--product-image"> <a href="' . esc_url( get_permalink( $product->get_id() ) ) . '"> <img src="' . esc_url( wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id() ), 'medium' ) ) . '" alt="' . esc_html( $product->get_title() ) . '"> <h2>' . esc_html( $product->get_title() ) . '</h2> </a> <br>' . do_shortcode( '' ) . '</div> </div>'; } } ?> </div> </div> ...
Read more...
Google Structured Data – organization.
August 9, 2021
ORGANIZATION Many SEO tool does not support full functions of this: <script type="application/ld+json" class="yourdomain-schema-graph"> {"@context":"https://schema.org", "@graph":[{ "@type":"Organization", "@id":"https://youdomain.com/#organization", "name":"G.P.Yinson", "foundingDate": "", "founders": , "address": { "@type": "PostalAddress", "streetAddress": "100 your street", "addressLocality": "Melbourne", "postalCode": "3000", "addressCountry": "AU" }, "contactPoint": { "@type": "ContactPoint", "contactType": "customer support", "telephone": "", "email": "info@yourdomain.com" }, "url":"https://yourdomain.com/", "sameAs":[ "https://www.facebook.com/yourdomain-107065678328608", "https://twitter.com/yourdomain", "https://www.linkedin.com/in/Jake-lele-yin-42ba4b7a/", "https://www.youtube.com/channel/UC7kuFFdfd2OJmzjih0bWzmQ", "https://www.instagram.com/yourdomain/" ], "logo":{"@type":"ImageObject", "@id":"https://yourdomain.com/#logo", "inLanguage":"en-AU", "url":"https://yourdomain.com/wp-content/uploads/2021/06/logo-dark.png", "contentUrl":"https://yourdomain.com/wp-content/uploads/2021/06/logo-dark.png","width":592,"height":188,"caption":"G.P.Yinson"}, "image":{"@id":"https://yourdomain.com/#logo"}}, { "@type":"WebSite","@id":"https://yourdomain.com/#website", "url":"https://yourdomain.com/","name":"GP Yinson","description":"","publisher":{"@id":"https://yourdomain.com/#organization"}, "potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint", "urlTemplate":"https://yourdomain.com/?s={search_term_string}"},"query-input":"required name=search_term_string"}], "inLanguage":"en-AU"}, {"@type":"ImageObject","@id":"https://yourdomain.com/#primaryimage", "inLanguage":"en-AU", "url":"https://yourdomain.com/wp-content/uploads/2021/06/logo-dark.png", "contentUrl":"https://yourdomain.com/wp-content/uploads/2021/06/logo-dark.png", "width":800,"height":600,"caption":"Real Estate Agent Melbourne - G.P.Yinson"},{"@type":"WebPage","@id":"https://yourdomain.com/#webpage", "url":"https://yourdomain.com/", "name":"Real Estate Agent Melbourne, your best rental, selling Agent", "isPartOf":{"@id":"https://yourdomain.com/#website"}, "about":{"@id":"https://yourdomain.com/#organization"}, "primaryImageOfPage":{"@id":"https://yourdomain.com/#primaryimage"}, "datePublished":"2020-05-28T12:15:04+00:00", "dateModified":"2021-08-08T13:28:47+00:00", "description":"Looking for Real Estate Agent in Melbourne? yourdomain offers a comprehensive resources for property sell, rental in Melbourne.","breadcrumb":{"@id":"https://yourdomain.com/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https://yourdomain.com/"]}]},{"@type":"BreadcrumbList","@id":"https://yourdomain.com/#breadcrumb","itemListElement":}]}</script> TEST YOUR STRUCTURED DATA You can generate with a online tool: https://technicalseo.com/tools/schema-markup-generator/ https://search.google.com/structured-data/testing-tool https://search.google.com/test/rich-results...
Read more...
