simple thanos effect by javascript and css

Hello.

Here I present simple thanos effect code. Only css and simple javascript are use to  make this effect. Copy and paste whole html code for see result.

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

body {

  font-size: 16px;

}

.btn,

.block {

  text-align: center;

  border: 1px solid transparent;

}

.btn {

  margin: 8px auto;

  padding: 6px 12px;

  background-color: #5bc0de;

  color: white;

  display: inline-block;

  border-radius: 3px;

  cursor: pointer;

}

.btn:hover {

  background-color: #1490ac;

}

.block {

  width: 440px;

  height: 200px;

  border-color: #cfd8dc;

  border-radius: 8px;

  box-shadow: none;

  padding: 12px;

  line-height: 40px;

}

.div-hidden {

  transition: opacity 1.75s ease 0s;

  opacity: 0;

  visibility: hidden;

}

.div-show {

  transition: opacity 1.5s ease 0s;

  opacity: 1;

  visibility: visible;

}

.block-container {

  position: relative;

  margin: 8px 0;

}

.div-overlay {

  position: absolute;

  top: 0;

  animation-iteration-count: 1;

  animation-duration: 1.5s;

  visibility: hidden;

}

.div-overlay-left {

  animation-name: slide-left;

}

.div-overlay-right {

  animation-name: slide-right;

}

@keyframes slide-left {

  from {

    left: 0;

    opacity: 1;

    visibility: visible;

  }

  to {

    left: -30px;

    opacity: 0;

  }

}

@keyframes slide-right {

  from {

    left: 0;

    opacity: 1;

    visibility: visible;

  }

  to {

    left: 30px;

    opacity: 0;

  }

}

</style>

</head>

<body>

<div class="block-container">

  <div id="block" class="div-show block-main">

    <div class="block">

      A naive implementation on Google's Thanos effect (Mobile version)

      <br>

      No jQuery or other libaray used

      <br>

      Good bye, the cruel world

      <br>

      Hello, the new world

    </div>

    <button type="button" class="btn" onclick="onBtnClick();" id="btn">Thanos This</button>

  </div>

  <div id="overlay"></div>

</div>

<script type="text/javascript">

function classHas(base, has) {

  const arr = base.split(" ")

  for (let i = 0; i < arr.length; i++) {

    if (arr[i] === has) 

      return true;

  }

}

function classReplace(base, replace, next) {

  return base.replace(replace, next)

}

function onBtnClick() {

  const block = document.getElementById("block");

  const btn = document.getElementById("btn");

  const overlay = document.getElementById("overlay");

  if (classHas(block.className, "div-show")) {

    block.className = classReplace(block.className, "div-show", "div-hidden")

    //btn.innerHTML = "Show"

    const content = block.innerHTML;

    overlay.innerHTML = "<div class=\"div-overlay div-overlay-left\">" + content + "</div>" + "<div class=\"div-overlay div-overlay-right\">" + content + "</div>";

  } else {

    /*block.className = classReplace(block.className, "div-hidden", "div-show")

    btn.innerHTML = "Snap"

    overlay.innerHTML = null;*/

  }

}

</script>

</body>

</html>

I will put real thanos effect in a short time.

Demo:-

selection by array

Hello

Here I display : Call one query one time. Save its value in array. Fetch it whenever need it.

/*get stage types*/
$stgsql = "SELECT * FROM stage_t";
$stgrs  = mysql_query($stgsql);
$stageTypes=array();
while($rowStage=mysql_fetch_assoc($stgrs))
  $stageTypes[$rowStage[code]]=$rowStage[edesc];

echo  $todaysstage = $stageTypes[$row[todaysstage]];

select and inset for dropdown list

Here I write code for select from dropdown and insert into new input box.

HTML:
<td>
                            <select name="registration_survey_no1[]" id="registration_survey_no1" style="width:180px;" onchange="addsurvey()" >
                                <option value=0> Select Survey~~Resurveyno </option>
                                <option value=1> Select Survey1~~Resurveyno1 </option>
                                <option value=2> Select Survey2~~Resurveyno2 </option>
                                <option value=3> Select Survey3~~Resurveyno3 </option>
                                <option value=4> Select Survey4~~Resurveyno4 </option>
                            </select>
                        </td>
                        <td>
                            <div class="input_fields_wrap"></div>
                        </td>

Javascript :
function addsurvey(){
            var registration_survey_no1 = $('#registration_survey_no1').val();
            var wrapper           = $(".input_fields_wrap"); //Fields wrapper
            var x = 1; //initlal text box count
            var i = 0 ;
            var random = Date.now();
            //text box increment
            if(registration_survey_no1 != '0'){
                x++;
                $(wrapper).append('<div id="dv_'+random+'"><input type="text" value="'+registration_survey_no1+'" name="mytext[]"/><a href="#" class="remove_field" onclick="deletesurvey('+random+')">Remove</a></div>'); //add input box
                //$('select[name^="input_fields_wrap"]').eq(1).focus();
                $('#registration_survey_no1').trigger("chosen:updated");
                //document.getElementsByName('registration_survey_no1['+i+']')[0].focus();
            }
           
        }
        function deletesurvey(id){
            var divid = "dv_"+id;
            var element = document.getElementById(divid);
            element.parentNode.removeChild(element);
        }

pure javascript click by id

Here i give you code of pure javascript.

You can add any event by id.

Simple, copy and post this code in any file and you will get result.

<button id="chirag">Button 1</button> <br>
<button id="2">Button 2</button> <br>
<button id="3">Button 3</button> <br>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('chirag').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>

database upload with cmd

Here I explain how to upload database with cmd.

First create database in phpmyadmin. For example ahd_db1

Now copy your sql file and paste in this path : MySql/bin

for example your sql file is db.sql so paste it xampp/MySql/bin/db.sql

Now run this command :

D:\xampp\mysql\bin>mysql -uroot ahd_db1< db.sql

Wait for some time. If execution ncompleted than it will display noraml cmd. For cross check go to phpmyadmin and check your database.

Solved errror while upgrade magento 1.9.3.1 to 1.9.3.3 CE

Hello

Recently I faced problems while upgrade magento 1.9.3.1 to 1.9.3.3 community Edition.

I saw that missing formkey in every page. So it create problems. You have to simply put this one line code . Add in all of your custom checkout templates in forms next line

<?php echo $this->getBlockHtml('formkey') ?>

You have to check these pages :

Shipping cart form:

app/design/frontend/<package>/<theme>/template/checkout/cart/shipping.phtml

Multishipping billing checkout form:

app/design/frontend/<package>/<theme>/template/checkout/multishipping/billing.phtml

Multishipping shipping checkout form:

app/design/frontend/<package>/<theme>/template/checkout/multishipping/shipping.phtml

Billing checkout form:

app/design/frontend/<package>/<theme>/template/checkout/onepage/billing.phtml

Shipping checkout form:

app/design/frontend/<package>/<theme>/template/checkout/onepage/shipping.phtml

Payment checkout form:

app/design/frontend/<package>/<theme>/template/checkout/onepage/payment.phtml

Shipping method checkout form:

app/design/frontend/<package>/<theme>/template/checkout/onepage/shipping_method.phtml

Persistent Billing checkout form:

app/design/frontend/<package>/<theme>/template/persistent/checkout/onepage/billing.phtml

Also do this for "base" folder.

On top of that the following JS files have been updated to be compatible with that change:

• js/varien/payment.js
• skin/frontend/base/default/js/opcheckout.js

You have to do:

If you're using with custom versions of those templates you'll have to update them by adding the following code into them:

<?php echo $this->getBlockHtml('formkey') ?>

If you're using a 3rd party checkout module, you'll have to get in touch with them so they can provide an updated version of their module.

Also if you have custom versions of the previously listed JS files, you'll have to update them too.

IMPORTANT NOTE : the checkout formkey validation can be changed in the backend via a new config field under System > Configuration > Admin > Security > Enable Form Key Validation On Checkout . THIS IS NOT ENABLED BY DEFAULT so you'll have to enable it to benefit from this security feature!!! Note that you'll get a notice in the backend if it's not enabled.