Thursday, March 23, 2017

Create one image from multiple image or from div content

Hello
Today i create one single image from content of div.
Code :
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
        body {
    font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.dataset {
    float: left;
    vertical-align: top;
}
.widget {
    display: inline-block;
    background-color: white;
    font-size: 14px !important;
    line-height: 20px !important;
    margin: 5px;
    vertical-align: top;
    color: #333;
    border-radius: 5px;
    margin: 10px;
    padding-bottom: 20px;
    border: 1px solid lightgray;
    border-radius:5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    page-break-after: always;
}
.widget .header p {
   padding: 10px;
   border-bottom: 1px solid lightgrey;
   max-width: 360px;
}
.widget .header .title {
    font-weight: bold;
    vertical-align: middle;
    min-height: 36px;
    padding: 5px 10px 5px 10px;
}
.widget .header:hover {
    background-color: #f4f4f4;
}
.widget .header  .title.selected {
    border-color: cornflowerblue;
    background-color: #EEF;
}
.widget .content {
    padding: 5px;
    overflow-y: auto;
    max-height: 400px;
}
.autolayout {
    display: inline-block;
}
.element {
    width: 360px;
}
.compact .content {
    display: table;
    width: 100%;
}
.compact .row {
    display: table-row;
    width: 100%;
}
.compact .cell {
    display: table-cell;
}
.compact .row.selected {
    background-color: #eee;
}
.toolbar {
    display: block;
    vertical-align: top;
    margin: 10px;
}
.toolbar .basis {
    min-width: 100px;
}
.btn {
    /*min-width: 60px;*/
}
.cell.value {
    overflow: hidden;
    text-wrap: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    padding-right: 10px;
}
.cell.freq {
    width: 60px;
}
.cell.glyph {
    vertical-align: middle;
    width: 100px;
}
.element {
}
.element table {
    table-layout: fixed;
    width: 100%;
}
.element td {
    padding: 0px;
}
.element .selectable:hover {
    background-color: #f4f4f4;
}
.element .stat {
    text-align: right;
    padding-right: 20px;
    font-weigth: bold;
    color: darkgray;
}
.element .bar {
    height: 18px;
    display: inline-block;
    float: left;
}
.bar-both {
    background-color: #0a67a3 !important;
}
.bar-fg {
    background-color: #3e97d1 !important;
}
.bar-bg {
    background-color: #ddd !important;
}
.selected .bar-fg {
    background-color: #FC0;
}
.selected .bar-both  {
    background-color:#FA0;
}
tr.selected {
    background-color: #eee;
}
.crosstab .selectable:hover {
    background-color: #f4f4f4;
}
.crosstab tr.selected {
    background-color: #eee;
}
.crosstab .header p {
    max-width: 600px;
}
.crosstab td {
  padding: 0 5px 0 5px;
  text-align: right;
}
.crosstab td.value {
  min-width: 60px;
  max-width: 240px;
  text-align: left;
}
.crosstab .cell {
    vertical-align: top;
}
.crosstab th.cell {
    max-width: 120px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    text-align: right;
    padding-right: 10px;
    vertical-align: bottom;
}
.crosstab .n {
    color: darkgray;
}
.fieldlist {
}
.constraints {
    min-width:300px;
    padding: 10px;
    border-radius:5px;
    -webkit-border-radius: 5px;
}
.constraints table {
    width: 100%;
}
.sidenote {
  max-width:300px;
  padding: 0 10px 0px 10px;
  display: inline-block;
  vertical-align: top;
}
.headnote {
    max-width: 600px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
}
.info-block {
    /*border: 1px solid lightgrey;*/
    background-color: #eee;
    vertical-align: top;
    margin: 10px;
    padding: 10px;
    display: block;
    /*box-shadow: 0 0 0 0px #9bc0cf, 0 0 0 3px #e0ebf0;*/
}
.menu-item {
}
.menu-item-value {
    text-align: right;
    float: right;
}
.gradient-blue {
    background: #b8e1fc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4ZTFmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2E5ZDJmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzkwYmFlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzkwYmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzkwYmZmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzZiYThlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2EyZGFmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZGYzZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8e1fc), color-stop(10%, #a9d2f3), color-stop(25%, #90bae4), color-stop(37%, #90bcea), color-stop(50%, #90bff0), color-stop(51%, #6ba8e5), color-stop(83%, #a2daf5), color-stop(100%, #bdf3fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e1fc', endColorstr='#bdf3fd', GradientType=0); /* IE6-8 */
}
    </style>
    <script  type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Base64/1.0.0/base64.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script type="text/javascript">
//<![CDATA[
$(window).load(function(){
$(function() {
    $("#btnSave").click(function() {
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                // Convert and download as image
                Canvas2Image.saveAsPNG(canvas);
                $("#img-out").append(canvas);
                // Clean up
                //document.body.removeChild(canvas);
               
            }
        });
    });
});
});//]]>
</script>
</head>
<body>
<span id="widget" class="widget" field="AGE" roundby="20" description="Patient age, in years">
    <div class="header ng-scope">
      <div class="title ng-binding">AGE</div>
      <p class="ng-binding">Patient age, in years</p>
    </div>
    <div class="element ng-scope">
      <div ng-show="hasData()" class="content">
        <table ng-model="table" class="ng-pristine ng-valid">
          <colgroup>
            <col/>
            <col width="60x"/>
            <col width="100px"/>
          </colgroup>
          <thead>
            <tr>
              <th class="cell value">Value</th>
              <th class="cell freq">Freq</th>
              <th class="cell value"></th>
            </tr>
          </thead>
          <tbody>
<tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="0" class="selectable ng-scope">
            <td class="cell value"><span tooltip="0 to 19" class="ng-scope ng-binding">0 to 19</span>
            </td>

            <td class="cell freq ng-binding">17.2%</td>
            <td class="cell glyph">
              <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 17.234468937875754%;"></span>
              <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
              <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
            </td>
          </tr><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="20" class="selectable ng-scope">
            <td class="cell value"><span tooltip="20 to 39" class="ng-scope ng-binding">20 to 39</span>
            </td>
            <td class="cell freq ng-binding">18.0%</td>
            <td class="cell glyph">
              <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 18.03607214428858%;"></span>
              <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
              <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
            </td>
          </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="40" class="selectable ng-scope">
            <td class="cell value"><span tooltip="40 to 59" class="ng-scope ng-binding">40 to 59</span>
            </td>

            <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
            <td class="cell freq ng-binding">34.3%</td>
            <td class="cell glyph">
              <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
              <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 34.2685370741483%;"></span>
              <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
              <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
            </td>
          </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="60" class="selectable ng-scope">
            <td class="cell value"><span tooltip="60 to 79" class="ng-scope ng-binding">60 to 79</span>
            </td>

            <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
            <td class="cell freq ng-binding">24.0%</td>
            <td class="cell glyph">
              <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
              <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 24.04809619238477%;"></span>
              <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
              <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
            </td>
          </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="80" class="selectable ng-scope">
            <td class="cell value"><span tooltip="80 to 99" class="ng-scope ng-binding">80 to 99</span>
            </td>

            <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
            <td class="cell freq ng-binding">6.4%</td>
            <td class="cell glyph">
              <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
              <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 6.4128256513026045%;"></span>
              <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
              <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
            </td>
          </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
          <tr ng-show="getShowMean()" class="">
            <td class="stat">Mean</td>
            <td class="ng-binding">46.1</td>
          </tr>

          </tbody>
        </table>
      </div>

    </div>
  <!-- ngRepeat: field in getChildren(field) -->
</span>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>

<div id="img-out"></div>

</body>
</html>
This code generates this result :
 
Posted by at No comments:
Labels: , , , ,

Thursday, March 16, 2017

Plugins are necessary before publish wordpress website

Hello.

Here i give you the list of necessary plugin list for wordpress website. These plugins are must be installed in your wordpress website.



1 : Contact Form 7
2 : MailChimp
3 : Yoast SEO
4 : W3 Total Cache
5 : Display Widgets
6 : Wordfence Security
7 : Testimonials Widget
8 : Visual Composer
9 : Revolution Slider 
10 : Custom Post Type
11 : Custom Fields
12 : Simple Share Buttons Adder
13 : Google Analytics +
14 : Google XML Sitemaps
15 : WP Mail SMTP
16 : Contact Form DB
17 : Woocommerce  for ecommerce

This is not end. I came across to these plugins. This post is updated continuously. 
Posted by at No comments:
Labels: , ,

hide second p tag jquery

Hello
here i explain you how to hide nearest div or class or p tag.



HTML

<select id="pa_subscription-option" class="" name="attribute_pa_subscription-option" data-attribute_name="attribute_pa_subscription-option" >
<option value="">Choose an option</option>
<option value="free-plan" class="attached enabled">Free Plan</option>
<option value="monthly-plan" class="attached enabled">Monthly Plan</option>
<option value="yearly-plan" class="attached enabled">Yearly Plan</option>
</select>

 <div class=" product-addon product-addon-additional-camera"
            <h3 class="addon-name">Additional Camera </h3>
    <p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
                    <label>Monthly Subscription (<span class="amount">USD10.00</span>)</label>
                <input step="" class="input-text addon addon-input_multiplier" data-raw-price="10" data-price="10" name="addon-76315-additional-camera-0[monthly-subscription]" value="0" min="0" max="100" type="number">
        <span class="addon-alert" style="display: none;">This must be a number!</span>
    </p>
    <p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
                    <label>Yealy Subscription (<span class="amount">USD96.00</span>)</label>
                <input step="" class="input-text addon addon-input_multiplier" data-raw-price="96" data-price="96" name="addon-76315-additional-camera-0[yealy-subscription]" value="0" min="0" max="100" type="number">
        <span class="addon-alert" style="display: none;">This must be a number!</span>
    </p>
    <div class="clear"></div>
</div>


JAVASCRIPT

<script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
        jQuery('#pa_subscription-option').on('change', function(){
var selsub = $( "#pa_subscription-option" ).val();
            if(selsub == 'yearly-plan'){
                $(".product-addon-additional-camera p").eq(0).hide();
                $(".product-addon-additional-camera p").eq(1).show();
            } else if(selsub == 'monthly-plan'){
                $(".product-addon-additional-camera p").eq(1).hide();
                $(".product-addon-additional-camera p").eq(0).show();
            } else {
                $(".product-addon-additional-camera p").eq(1).show();
                $(".product-addon-additional-camera p").eq(0).show();
            } 
         });
    });
</script>


eq(0) means first and eq(1) means second.
Posted by at No comments:
Labels: , ,

Saturday, March 11, 2017

How to detect browser close and tab close event in JavaScript

There is a function called onbeforeunload in javaScript, which could help to detect browser close event as well as tab close event. With the help of this function you can alert any message while user is going to close tab or browser as you have seen this type of features on my website, when you leave the page, A popup alert shows with some message like “Do you want to close?” etc.


Following javascript code you could use to detect browser close and tab close event.

window.onbeforeunload = function () {
    alert("Do you want to close?");
};

Posted by at No comments:
Labels: , ,

Thursday, March 9, 2017

I see a response message “Your message was sent successfully” with green border, but I never receive a mail for that.

Recently i face this problem. Contact form display successful message sent. But mail is not recieved. All settings are perfect.

After this i installed one plugin. Easy WP SMTP.  Download here
Configure it with server. Set smtp and port. After this contact form perfectly working. 


You can also testmail also. Here is the setting for testing your settings are right or not.

 
Posted by at No comments:
Labels: , , ,

Thursday, March 2, 2017

visual composer bug and solution

Hello.
Recently i came to know one bug of visual composer.  Visual composer ignore
Posted by at No comments:
Labels: , , , , ,

Wednesday, March 1, 2017

add post or custom post title in contact form 7

Hello
I am trying to:
load all my post titles of a specific custom post type into a select box of my contact form.
Currently, I'm using Contact Form 7

Here is the solution :
You need to create a custom shortcode in the contact form 7 for the select box. In order to create the custom shortcode for displaying title in select box, you can use the following custom shortcode.

Add this code to your function.php file.

add_action( 'wpcf7_init', 'custom_views_post_title' );
  
function custom_views_post_title() {
    wpcf7_add_shortcode( 'custom_views_post_title', 'custom_views_post_title_shortcode_handler' );
}
  
function custom_views_post_title_shortcode_handler( $tag ) {
    global $post;
    $args = array( 'post_type' => 'event' );
    $myposts = get_posts( $args );
    $output = '<select name="eventname" id="fleet" onchange="document.getElementById(\'fleet\').value=this.value;"><option></option>';
    foreach ( $myposts as $post ) : setup_postdata($post);
       $title = get_the_title();
       $output .= '<option value="'. $title .'">'. $title .' </option>';
    endforeach;
    $output .= "</select>";
    return $output;
}
and use the shortcode [custom_views_post_title] in contact form 7.
Now how to display in contact form 7 email :
Your code is :
$output = '<select name="eventname">
So write  [eventname]
Posted by at 7 comments:
Labels: , , , ,
Subscribe to: Posts (Atom)