Tiny Mce 4.0 How to change Background Color and Styles

Posted On // 1 comment

Background

I just downloaded the latest version of TinyMce (4.0) to use it in Asp.Net MVC 4 form.  It was easy to just link the script file by putting link on the page itself. (you should be able to add it to bundle or to layout file too)
http://www.tinymce.com/download/download.php

The default LightGray skin did not really matched with my page style so I downloaded a new skin for it from here. Its minimalist skin from pixabay  http://pixabay.com/en/blog/posts/a-modern-custom-theme-for-tinymce-4-40/


Now , on my page I needed to change the default white color of the editor "on focus" ( and also its width and margin etc).  I tried changing the styles in tinyMCE associated style sheets ( "light" skin style sheets and theme "modern" style sheets) but no use. (Even with applying !important to styles)

Here is what you need to do

$(function () {
 tinymce.init({ selector: '.htmleditor', browser_spellcheck: true, content_css: "@Url.Content("~/Content/Site.css")", statusbar: false, menubar: false, toolbar: "bullist numlist | bold italic underline  | styleselect" });
});
So the magic is content_css property. You need to point it to any of your own custom style sheet. (In my case i have just pointed to my site's main stylesheet). The path is relative from the current page where your textarea resides.

The style in my Site.css for changing background color of TinyMCE editor is
.mce-content-body {
background: #FFFFD4;
}



.mce-content-body {
padding: 5px;
font-size: 14px;
color: #111;
}
No need to add !important

BONUS

Need to move editor left or right or Leave margins in your form , you can use this style though it will only work in Modern browsers
.mce-panel:first-of-type {
margin-left: 130px!important;
width: 75.1%!important;
}

My toolbar was sitting lower with extra space on top of tiny editor. To move it up (making it look like vertical-align:top sort of  thing), you can use this
.mce-flow-layout {
margin-top: -25px!important;
}
Please post comment if it is useful for you, cheers

[Read more]

Asp.Net MVC oauth LinkedIn Email problem

Posted On // Leave a Comment


By default the LinkedinClient with oAuth in DotNetOpenAuth.AspNet.Clients does not retrieve the email of the linkedin logged user.
According to the linkedin specifications you need to provide r_emailaddress in the scope field of the request token. You will also need to ensure that in your developer linkedin account you have enabled the r_emailaddress field under OAuth User Agreement. Screenshot from linkedin below


The default Linkedin client does not follow that BUT the good thing is oauth lets you implement your own client with ease. Here is my LinkedinCustomClient class
------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Xml;
using System.Xml.Linq;

using DotNetOpenAuth.AspNet;
using DotNetOpenAuth.AspNet.Clients;
using DotNetOpenAuth.Messaging;
using DotNetOpenAuth.OAuth;
using DotNetOpenAuth.OAuth.ChannelElements;
using DotNetOpenAuth.OAuth.Messages;

namespace Project
{
    public class LinkedInCustomClient : OAuthClient
    {
        private static XDocument LoadXDocumentFromStream(Stream stream)
        {
            var settings = new XmlReaderSettings
            {
                MaxCharactersInDocument = 65536L
            };
            return XDocument.Load(XmlReader.Create(stream, settings));
        }

        /// Describes the OAuth service provider endpoints for LinkedIn. BELOW NOTE RequestTokenEndpoint r_emailaddress

        private static readonly ServiceProviderDescription LinkedInServiceDescription =
                new ServiceProviderDescription
                {
                    AccessTokenEndpoint =
                            new MessageReceivingEndpoint("https://api.linkedin.com/uas/oauth/accessToken",
                            HttpDeliveryMethods.PostRequest),
                    RequestTokenEndpoint = new MessageReceivingEndpoint("https://api.linkedin.com/uas/oauth/requestToken?scope=r_fullprofile+r_emailaddress", HttpDeliveryMethods.PostRequest),

                    UserAuthorizationEndpoint =
                            new MessageReceivingEndpoint("https://www.linkedin.com/uas/oauth/authorize",
                            HttpDeliveryMethods.PostRequest),
                    TamperProtectionElements =
                            new ITamperProtectionChannelBindingElement[] { new HmacSha1SigningBindingElement() },
                    ProtocolVersion = ProtocolVersion.V10a
                };

        public LinkedInCustomClient(string consumerKey, string consumerSecret) :
            base("linkedIn", LinkedInServiceDescription, consumerKey, consumerSecret) { }

        /// Check if authentication succeeded after user is redirected back from the service provider.
        /// The response token returned from service provider authentication result. 
        [SuppressMessage("Microsoft.Design", "CA1031:DoNotCatchGeneralExceptionTypes",
            Justification = "We don't care if the request fails.")]
        protected override AuthenticationResult VerifyAuthenticationCore(AuthorizedTokenResponse response)
        {
            // See here for Field Selectors API http://developer.linkedin.com/docs/DOC-1014
            //const string profileRequestUrl = "https://api.linkedin.com/v1/people/~:(id,first-name,last-name,headline,industry,summary)";
            const string profileRequestUrl = "https://api.linkedin.com/v1/people/~:(id,first-name,last-name,email-address)"; // important line- this is where we are getting values out from response
 

            string accessToken = response.AccessToken;

            var profileEndpoint =
                new MessageReceivingEndpoint(profileRequestUrl, HttpDeliveryMethods.GetRequest);
            HttpWebRequest request =
                WebWorker.PrepareAuthorizedRequest(profileEndpoint, accessToken);

            try
            {
                using (WebResponse profileResponse = request.GetResponse())
                {
                    using (Stream responseStream = profileResponse.GetResponseStream())
                    {
                        XDocument document = LoadXDocumentFromStream(responseStream);
                        string userId = document.Root.Element("id").Value;

                        string firstName = document.Root.Element("first-name").Value;
                        string lastName = document.Root.Element("last-name").Value;
                        string userName = document.Root.Element("email-address").Value;
                        // string userName = firstName + " " + lastName;

                        var extraData = new Dictionary
                                            {
                                                {"accesstoken", accessToken}, 
                                                {"name", firstName + " " + lastName}
                                            };

                        return new AuthenticationResult(
                            isSuccessful: true,
                            provider: ProviderName,
                            providerUserId: userId,
                            userName: userName,
                            extraData: extraData);
                    }
                }
            }
            catch (Exception exception)
            {
                return new AuthenticationResult(exception);
            }
        }
    }
}

 OAuthWebSecurity.RegisterClient(new LinkedInCustomClient("YourKey", "YourSecret"), "LinkedIn", null); 
Rest logic is up to you that how you handle the values. For me after the callback
public ActionResult ExternalLoginCallback(string returnUrl)
{
 AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
//result.UserName contains the email address
//return view code here//
}
[Read more]

IE 6 Market Share

Posted On // Leave a Comment
Microsoft has launched a new Web site that is aimed at stepping up its campaign to upgrade users from IE 6 to IE 8 and 9. The site has IE usage distribution for various countries worldwide and then a sum of all the usage as a bold % which sits at 12% today.

Here is the link
[Read more]

Safari on Windows 7 does not allow entering URL

Posted On // Leave a Comment
Problem
There is glitch in the latest safari browser and has been there for few months now. On Windows 7 when you install safari, the URL address bar lets you enter the webiste address but on pressing enter or load button, doesnt take to that website and keeps refreshing the default home page.

The apple guys are aware of this problem but there is no news regading its fixing. May be they are not very interested as the browser works fine in MAC OSX
Solution
If you really need to use safari you can simple open a new tab and enter address there and it works. After that you will be able to enter url and go to address even from the original tab window



[Read more]

Manually delete users and profiles from ASP.NET Membership

Posted On // Leave a Comment
 -- The following sequence of sql commands will delete all users and their related data from membership database

  DELETE FROM aspnet_Profile

  DELETE FROM aspnet_UsersInRoles

  DELETE FROM aspnet_PersonalizationPerUser

  DELETE FROM dbo.aspnet_Membership

  DELETE FROM aspnet_users
[Read more]

Special 48-Hour Offer: Free ASP.NET MVC 3 Video Training

Posted On // Leave a Comment
The paid training videos are free for a limited time for ASP.NET MVC. Check out here

[Read more]

Guide to Css Navigation Menu

Posted On // Leave a Comment
According to Cameron Chapman, In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. Read More
[Read more]

Conference on ASP.NET MVC

Posted On // Leave a Comment
The virtual Microsoft's ASP.NET MVC Conference

[Read more]

Use Javascript or not - Fair use of scripting

Posted On // Leave a Comment
Look around the web and find out the names of successful web applications that don't use JavaScript. I could not find any and I think you wont find any too. It looks we are lost somewhere between making web applications behave like desktop applications and making desktop applications behave like web applications. Talking about the former JavaScript comes into limelight. Are we too much reliant on this script ?


Examples

This site just refused to work without JavaScript on any browser. Don't believe me, check this out ( or turn JavaScript off in your browser and go to facebook website)

It does give you an option of viewing the mobile facebook site ( that i think is lame because why i would want to see a miniature (feature less) site when i am using full big PC to surf)There




There are numerous other examples where the sites refuse to work without javascript and millions of other site like Devexpress  (builds beautiful custom dot net controls) which fail to degrade gracefully without javascript and just fall apart (their site's main menu does not even work and so do many of their controls)


JavaScript Statistics

There are no absolute trends about the use of JavaScript. Some users have scripting turned off. Some browsers don't support scripting but that is minimal left to 5% only in 2008
Date JavaScript On JavaScript Off
January 2008 95% 5%
January 2007 94% 6%
January 2006 90% 10%
January 2005 89% 11%
January 2004 92% 8%
January 2003 89%  11%
January 2002 88% 12%
January 2001 81% 19%
January 2000 80% 20%

source: http://www.w3schools.com/




Ok, i get it .. javascript is holy grail when it comes to dynamic web applications that behave like desktop applications (some call them rich applications) and feature rich user experience. 




Question :Do all browsers old and new have an option to turn off javascript !   
Answer: YES

If there is potential threat of users turning off javascript on their browsers then why do all these sites still use/depend on javascripts. Answer is "Rich Experience" for user and hence more likebility of the site/app. 


Forms
 
Forms are basic building block of collecting user information on any website. An important element of form is input date and time. How can a date picker work without javascript ? Yes, we can have drop down date lists and make them fancy with css but can they match the goodness of a jquery ui date picker. I have even seen sites with conventional date picking drop down lists and a javascript calendar to give lazy users an relief. The reality is we all hate forms. There are thousands of autoform filling plugins for browsers for a reason.
Then comes validation. User dont want to wait for the page to refresh and come up with errors showing mistakes they did previously. Users want to see mistakes pointed out at the same time when they make them, so that they can fix them immediately. Javascript validation libraries comes to the rescue in the form of client side validation. Yes you can validate input on server side and it is recommeded but we cannot ignore client side validation. For today's form its a must.


Ajax & Distributed processing
Javascript gives us power of dynamically reloading content on demand on various parts of the web page without making user ever leave the page. Also, for validation, small calculations we can make use of javascript to use client's cpu power instead of putting load on the server's cpu.


Future
With HTML5 on horizon which provides abilities like storing information on client's machine and use it as small database, the role for client side scripting is growing even more bigger. The use of canvas tag in HTML makes use of javascript to provide inline animation without using third party plugins like flash.


So, Are we using javascipt fairly or overusing it ?
It really depends on how we use it. if you are using javascript for its sleek looks capability and bringing a bling to the site then YES its an overuse (you should use CSS for that purpose) . Other hand, if it solves a logical or design problem then go ahead and use it as much as you need



[Read more]

asp checkbox javascript confirmation event

Posted On // 1 comment
Code for ASP Checkbox



JS Code

function confirmBox(e)
{
if(e.checked==true)
{
var answer = confirm('Are you sure you want to cancel?')
if (answer)
e.checked=true;
else
e.checked=false;
}

}
[Read more]