Friday, 27 January 2017

rotating fa icon


Assuming you have imported Angular Js and FontAwesome in your HTML, below is how my controller looks like:

Controller

angular.module('switchdemo', []).controller('DemoController', function($scope){
  
  $scope.init = function(){
    $scope.status = true;
  }
  
  $scope.changeStatus = function(){
    $scope.status = !$scope.status;
  }
  
})

HTML

body ng-app="switchdemo">
  <h1>On Off switch using Angular JS</h1>
  <div ng-controller="DemoController" ng-init="init()">
    <div class="well">
      <i class="fa fa-toggle-on active"
         ng-if="status == true" 
         ng-click="changeStatus();">
      </i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive"
         ng-if="status == false"
         ng-click="changeStatus();">
      </i>
    </div>
    <pre>{{ status }}</pre>
  </div>
</body>

CSS

.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}


resource from : https://www.codeproject.com/Tips/854988/Create-an-ON-OFF-switch-using-Angular-JS-and-FontA

Demo

I have created a demo on plunkr with this code, here is the link to it: http://plnkr.co/edit/Kc8M3enHJB7iwFRyGUDr?p=preview

Monday, 20 June 2016

Get the current URL via JavaScript and change url to short

Example if url is like this : 
http://localhost:8080/someapplication/?token=sUyJhbGciiOiJIUzI1NiJ9.eyJleHAiOjE0NjYxNzIxNTIs1NiJ9.eyJleHAiOjE0NjYInN1YiI6ImthZ2FtaS1hdXRoLXRpY2tldCIsImlzcyI6ImFkbWluIiwicm9sZSI6ImFkbWluIn0.d50P0r2dyeB-XyOG7I-daRp2Pu1OzaBxwisS4Et_rYI&service=auth#/somepage

and output URL to be : http://localhost:8080/someapplication/#/somepage

working code through javascript below : 

/*URL change start*/
if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?token=/';
    window.history.pushState({path:newurl},'',newurl);
}
$(window).bind('hashchange', function() {
/* url change code here */
if (window.location.search.match("?token=")){
     var newHash = "/" + window.location.search;
var newHash = "/" ;
     if (window.history.replaceState){
       window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
     }     
   }
});
function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;
    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            //alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}
var hashDetection = new hashHandler();
/*URL change end*/

-----------------------------------------------------------------------------------------------------------------------------

JavaScript provides you many methods to retrieve and change the current URL which is displayed in browser's address bar. All these methods uses the Location object, which is a property of the Window object. You can create a new Location object that has the current URL as follows:
var currentLocation = window.location;
Basic Structure of a URL
<protocol>//<hostname>:<port>/<pathname><search><hash>
Basic structure of a URL
  1. Protocol -- Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))
  2. hostname -- Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host.
  3. port -- A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.
  4. pathname -- The path gives info about the specific resource within the host that the Web client wants to access. For example, /index.html.
  5. query -- A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).
  6. hash -- The anchor portion of a URL, includes the hash sign (#).
With these Location object properties you can access all of these URL components
  1. hash - Sets or returns the anchor portion of a URL.
  2. host - Sets or returns the hostname and port of a URL.
  3. hostname - Sets or returns the hostname of a URL.
  4. href - Sets or returns the entire URL.
  5. pathname - Sets or returns the path name of a URL.
  6. port - Sets or returns the port number the server uses for a URL.
  7. protocol - Sets or returns the protocol of a URL.
  8. search - Sets or returns the query portion of a URL


Hope it helps you.......




Saturday, 11 June 2016

unique text color to multiple rows in javascript

for(var i=0;i<10;i++){
  var x = ".itemborder" + i;
  var color='#'+Math.random().toString(16).substr(2,6);
  $(x).css("border-color", color );     
}

output : rgb(023, 230, 111)

Sunday, 28 February 2016

Cross Site Request Forgery in JS Web Apps

Ensuring that attackers don’t forge requests in your web applications can be a tricky businesses, one that often requires a hand-rolled solution.
As soon as you have a session, you need to start thinking about cross site request forgery (CSRF). Every request to your site will contain authentication cookies, and HTML forms don’t abide by the same origin policy (SOP).
One method of ensuring that destructive requests (PUTs/POSTs/DELETEs) to your site are made from your domain, is by only allowing requests with aContent-Type header of application/json. The only way to set this header is via Ajax, and Ajax requests are limited to the same domain.
However, there have been active vectors in the past that have allowed header injection (such as some of the Flash exploits), and Egor, who is the expert in these things, assures me it’s not enough.
The classic method of preventing CSRF attacks is via a token that you pass with every destructive request. The idea is that attackers can’t get hold of this token (because of the SOP), and thus can’t forge requests.
If you’re using Rails, you get this for free. If you’re using Rack, than Rack CSRF is your best bet. It’ll deal with generating tokens and checking requests. The only part you have to handle is on the client side.
jQuery has a neat feature called ajaxPrefilter, which lets you provide a callback to be invoked every Ajax request. You can pass a CSRF token to the client side via, say, a meta tag. Then set a header using ajaxPrefilter.
var CSRF_HEADER = 'X-CSRF-Token';

var setCSRFToken = function(securityToken) {
  jQuery.ajaxPrefilter(function(options, _, xhr) {
    if ( !xhr.crossDomain ) 
        xhr.setRequestHeader(CSRF_HEADER, securityToken);
  });
};

setCSRFToken($('meta[name="csrf-token"]').attr('content'));
In the example above we’re retrieving our CSRF token from a meta tag in the page. Then we’re ensuring that any local Ajax requests forward the token as part of the request’s header.

site ref : http://blog.alexmaccaw.com/jswebapps-csrf#kudo

Wednesday, 11 November 2015

php get the last row with MySQL

If you want the last 10 then just change ASC to DESC

SELECT * 
FROM 
chat 
WHERE 
(userID=$session AND toID=$friendID) 
OR 
(userID=$friendID AND toID=$session) 
ORDER BY id 
DESC
LIMIT 10
SELECT * FROM chat WHERE (userID=$session AND toID=$friendID) OR (userID=$friendID AND toID=$session) ORDER BY id DESC LIMIT 10

Sunday, 27 September 2015

A Simple HTML Login page using JavaScript with count

Enter Username : test
Enter Password : test
ENTER USER NAME
ENTER PASSWORD



code here :

 <script type = "text/javascript">

// Note: Like all Javascript password scripts, this is hopelessly insecure as the user can see
//the valid usernames/passwords and the redirect url simply with View Source.
// And the user can obtain another three tries simply by refreshing the page.
//So do not use for anything serious!

var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["test", "test1"];  // as many as you like - no comma after final entry
var pwArray = ["test", "test1"];  // the corresponding passwords;

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Login was successful");
window.location = "view.php";
return false;
}

var t = " tries";
if (count == 1) {t = " try"}

if (count >= 1) {
alert ("Invalid username and/or password.  You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}

else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}

}

</script>
<p>Enter Username : test </p>
<p>Enter Password : test </p>
<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> </p>
<p>ENTER PASSWORD <input type="password" name="pword">
<p><input type="button" value="Check In" name="Submit" onclick= "validate()"></p>

</form><br/><br/>

Thursday, 13 August 2015

Tab example with pure javascript to show and hide tab content

Example on show hide button pure javascript



example


<!DOCTYPE html>
<html>

<head>
<meta charset='UTF-8'>
<title>example</title>

 <style type="text/css">
 #page-wrap { width: 100%; background: #ccc; }
.breadcrumbs { margin: 0; padding: 0; }
.breadcrumbs li { float: left; list-style: none; margin: 5px 10px; padding:10px; background-color: #2396D0; }
.breadcrumbs li a { text-decoration: none; color: white; }
.showhidediv { padding: 0; background: #2396D0; width: 100%;  }
.showhidedivC { padding: 10px 0; }
 </style>

</head>

<body>


<div id="page-wrap">


<div class="">
<ul class="breadcrumbs">

<li class="nobg"><input type="button" value="1 button" onclick="show('div1')"/></li>
<li class="nobg"><input type="button" value="2 button" onclick="show('div2')"/></li>
<li class="nobg"><input type="button" value="3 button" onclick="show('div3')"/></li>
<li class="nobg"><input type="button" value="4 button" onclick="show('div4')"/></li>

</ul>
</div>
<div style="clear:both;"></div>

<div class="showhidediv">

<div class="showhidedivC" id="div1" style="display:none;">
111111111111
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div2" style="display:none;">
22222222222222222
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div3" style="display:none;">
333333333333333
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div4" style="display:none;">
44444444444444444444
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>


</div>

</div>


<script>
for (i=1; i<5;i++){

    var currentDiv = document.getElementById("div"+i);
 
    function show(divID) {
        var div = document.getElementById(divID);

        currentDiv.style.display = "none";
        div.style.display = "block";

        currentDiv = div;
    }
    i++;

    }

</script>

</body>

</html>