Adding large submenues menus on Wordpress - nightmarew solved

Add this to wp-admin/nav-menus.php :        

<style type="text/css">
            .munevera {
                display:block;
            }
.categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel, .wp-tab-panel {
    max-height: 400px;
}
.menu-item-bar .menu-item-handle {
    padding: 5px 15px;
}
.menu-item-bar {
    margin: 3px 0 0;
}
div#side-sortables {
    position: fixed;
    top: 250px;
    left: 180px;
width: 300px;
}
            </style>

Creating responsive modal

Creating modal dialog window is easy, you need one button/link, few lines of HTML code, some css, and javascript call to opet and close it.

Button:
<button id="prijavadugme" type="submit" class="dugme single_add_to_cart_button button alt">Prijavi se</button>


HTML part:
<div id='dialogu' class="notify tltc ">
            <div id='dialoger'>
                <div id="modal" class="foodform">
                    <div id="datetexti">
                                 Put your text or HTML here
                    </div>
                    <div id="concnotif">
                        </div>
                         <div class="buttonari cancela">
                            <p class="cart_navigation roundbutton showme">
                                <a id='closeding' href="#" class="button_large" title="Cancel">X</a>

                            </p>
                        </div>
                </div>
            </div>
        </div>

Javascript part:
<script type="text/javascript">
           
         function ShowAlert() {
            var vtop =  $(window).scrollTop(); /*Get document position*/
            $('#dialoger').css("top", vtop+80); /*Set modal position, important for big dialog on mobile*/
            $('#dialogu').show();
        }

        $(document).ready(function () {

            $("#prijavadugme").click(function() {
             
                ShowAlert();
            })
         
            $("#dialoger #closeding").click(function (e) {
                e.preventDefault();
                $("#dialogu").hide();
            });
        });

        </script>


CSS part:

.notify #dialoger #modal {
    background:white;
    border: solid 2px #c4b173;
}

.notify input.goldbord {
    color:#c4b173;
    text-align:center;
    padding:10px;
}

.notify  .buttonari.cancela {
    position: absolute;
    top: -20px;
    right: -20px;
}

.notify  .cancela  p.cart_navigation a.button_large {
    padding-left:15px;
    padding-right:15px;
}
div#datetexti {
    padding: 20px;
}


#dialoger #content {
    border-radius:8px;
    background:#fff;
    padding:20px;
}

@media (max-width: 480px) {

    #dialoger #modal {
        position: relative;
        background: url(tint20.png) 0 0 repeat;
        background: #c4b173;
        border-radius: 0px;
        padding: 8px;
        z-index: 900;
        padding: 1px;
        min-width: 260px;
    }
}
#dialogu  {
    display:none;
}

#dialoger {
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 2;
    top: 10%;
    left: 50%;
    right: 50%;
}



#dialoger p.cart_navigation a.button_large, form p.submit input:hover, #add_address p.submit2 input{

    border: 1px solid #C4B073;


}

#dialoger #close {
    position:absolute;
    background:url(close.png) 0 0 no-repeat;
    width:24px;
    height:27px;
    display:block;
    text-indent:-9999px;
    top:-7px;
    right:-7px;
}

Customize default select with CSS and Bootstrap-select

Best select customizes for me is bootstrap-select, it is simple and works very good.
Just add css on the beginig of your code, ad js file on the of your code, and add to your default select class selectpicker.
Example: <select id="days" name="days"  class="selectpicker">
<option value="">DAY</option>...
And it works!

Customize default CheckBox, Radiobox with css and HTML

Best site for download customizations for checkbox is: http://www.csscheckbox.com/
and for radio buttons: http://www.csscheckbox.com/radio-buttons/0/

Pick one of them and save picture of checkbox/radiobox to your computer so you can callit from css like this: background-image:url(../img/cssradiobox1.png);.

Add this css code to your css file:

 /*checkboxes*/
 label {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 input[type=checkbox].css-checkbox {
   position: absolute;  
   overflow: hidden;  
   clip: rect(0 0 0 0);  
   height:1px;  
   width:1px;  
   margin:-1px;  
   padding:0;
   border:0;
 }
 input[type=checkbox].css-checkbox + label.css-label {
   padding-left:20px;
   height:15px;  
   display:inline-block;
   line-height:15px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox:checked + label.css-label {
   background-position: 0 -15px;
 }
 .radio label, .checkbox label {
   min-height: 10px;
 }
 .account_creation label {
   padding-top: 0px;
 }
 /*specific classes related to Checkbox skins*/
 .lite-gray-check{background-image:url(../img/lite-gray-check.png);}
 input[type=checkbox].css-checkbox.med + label.css-label.med {
   padding-left:22px;
   height:17px;  
   display:inline-block;
   line-height:17px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.med:checked + label.css-label.med {
   background-position: 0 -17px;
 }
 input[type=checkbox].css-checkbox.sme + label.css-label.sme {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{
   background-position: 0 -16px;
 }
 input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
   padding-left:22px;
   height:20px;  
   display:inline-block;
   line-height:20px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
   background-position: 0 -20px;
 }
 input[type=radio].css-radiobox {
   position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
 }
 input[type=radio].css-radiobox + label.css-radiolabel {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
   /*padding-left:23px;
   height:18px;  
   display:inline-block;
   line-height:18px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:18px;
   vertical-align:middle;
   cursor:pointer;*/
 }
 input[type=radio].css-radiobox:checked + label.css-radiolabel {
   background-position: 0 -16px;
 }
 label.css-radiolabel {
   background-image:url(../img/cssradiobox1.png);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

After this you can use it on your web page like this:
Radio buton example:

 <input type="radio" name="plan" class="css-radiobox" id="planluxury" value="luxury"checked="checked" />
                <label for="planluxury" class="css-radiolabel sme radGroup1" class="top">Luxury</label>

Checkbox example:

 <input type="checkbox" class="css-checkbox" name="optin" id="optin" value="1"checked="checked" autocomplete="off"/>
                <label for="optin" class="css-label lite-gray-check">Receive special offers from our partners!</label>

As you can see we added to radio box input class="css-radiobox" and to label of radio box: class="css-radiolabel

For checkbox we added to input: class="css-checkbox",and for label: class="css-label lite-gray-check"

Entity Framework: Unable to load the specified metadata resource

After reading this answers article and this blog I changed:

  entity.Metadata = @"res://*/Data.System.csdl|res://*/Data.System.ssdl|res://*/Data.System.msl";

To:

  entity.Metadata = "res://*/";

And it works :-)

Answer found on : http://stackoverflow.com/questions/8971698/entity-framework-unable-to-load-the-specified-metadata-resource

Authentication with token and interceptor with AngularJS and WebAPI

Source: http://stackoverflow.com/questions/21255203/angularjs-clientside-routing-and-token-authentication-with-webapi

Interceptors: http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

Explanation with example project: http://www.codeproject.com/Articles/784106/AngularJS-Token-Authentication-using-ASP-NET-Web-A

Another good artcle about WebAPI and AngularJS: http://bitoftech.net/2013/12/03/enforce-https-asp-net-web-api-basic-authentication/

On WebAPI side you must add [RoutePrefix("api/Orders")] before ApiControler declaration and

[Authorize][Route("")] before function declaration, also you sould add code for check authentication:

ClaimsPrincipal principal = Request.GetRequestContext().Principal as ClaimsPrincipal;
var userName = principal.Claims.Where(c => c.Type == "sub").Single().Value;

namespace AngularJSAuthentication.API.Controllers
{
    [RoutePrefix("api/Orders")]
    public class OrdersController : ApiController
    {
        [Authorize]
        [Route("")]
        public IHttpActionResult Get()
        {
            ClaimsPrincipal principal = Request.GetRequestContext().Principal as ClaimsPrincipal;

            var userName = principal.Claims.Where(c => c.Type == "sub").Single().Value;

            return Ok(Order.CreateOrders());
        }

    }
}

Interceptor is regular service (factory) which allow us to capture every XHR request and manipulate it before sending it to the back-end API or after receiving the response from the API. In our case, we are interested to capture each request before sending it so we can set the bearer token, as well we are interested in checking if the response from back-end API contains errors which means we need to check the error code returned so if its 401 then we redirect the user to the log-in page.

To do so, add new file named “authInterceptorService.js” under “services” folder and paste the code below:

 Collapse | Copy Code

'use strict';
app.factory('authInterceptorService', ['$q', '$location', 
'localStorageService', function ($q, $location, localStorageService) {

    var authInterceptorServiceFactory = {};

    var _request = function (config) {

        config.headers = config.headers || {};

        var authData = localStorageService.get('authorizationData');
        if (authData) {
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        return config;
    }

    var _responseError = function (rejection) {
        if (rejection.status === 401) {
            $location.path('/login');
        }
        return $q.reject(rejection);
    }

    authInterceptorServiceFactory.request = _request;
    authInterceptorServiceFactory.responseError = _responseError;

    return authInterceptorServiceFactory;
}]);

By looking at the code above, the method “_request” will be fired before $http sends the request to the back-end API, so this is the right place to read the token from local storage and set it into “Authorization” header with each request. Note that I’m checking if the local storage object is nothing so in this case this means the user is anonymous and there is no need to set the token with each XHR request.

Now the method “_responseError” will be hit after we receive a response from the back-end API and only if there is failure status returned. So we need to check the status code, in case it was 401 we’ll redirect the user to the log-in page where he’ll be able to authenticate again.

Now we need to push this inspector to the inspectors array, so open file "app.js" and add the below code snippet:

 Collapse | Copy Code

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
});

By doing this, there is no need to setup extra code for setting up tokens or checking the status code, any AngularJS service executes XHR requests will use this interceptor. Note: This will work if you are using AngularJS service $httpor $resource.

Select/Dropdown/Combobox controls in angular

These days I tried a lot of select/Dropdown/Combobox controls in angular but on the end I realized that classic select2 (angular version) works best.
Here is link to ui-select2: https://github.com/angular-ui/ui-select2 
After you implenet it you will see that it doesn't look in bootstrap style so you should download aditional css for select2: http://fk.github.io/select2-bootstrap-css/index.html

in your code you need to add this files:

 <link href="content/css/select2/select2.css" rel="stylesheet" />
    <link href="content/css/select2/select2-bootstrap.css" rel="stylesheet" />


    <script src="scripts/select2.min.js"></script>
    <script src="scripts/select2.js"></script>



Here is example:

 <select class="select2-container form-control select2" ui-select2 ng-model="New.opcinaID" data-placeholder="Pick a number" ng-required="true">
                                    <option value=""></option>
                                    <option ng-repeat="kontakt in kontakti" value="{{kontakt.id}}">{{kontakt.naziv}}</option>
                                </select>