Web Designer

IE10 scrollbar overlay on page issue - Solution

2013-11-11T02:07:00.000-08:00

IE10 scrollbar overlay Issue:

When we designing a website on bootstrap you'll notice that the IE10 scroll-bar appears on content of the page like below picture.

In IE-10 the scroll-bar not always appear, when it appear they overlay on the page contents

IE10 scrollbar overlay Solution:

The following piece of code will solve IE10 scroll-bar issue

@-ms-viewport {

width: auto !important;
}

-ms-overflow-style property

Radio button with bootstrap in Asp.net

2013-11-07T08:12:00.003-08:00

It's now easier than ever before to build scalable responsive website layouts, using Bootstrap A web developer doesn't have to spend time laboriously working out.

ASP.NET developer can easily use bootstraps css classes for alignment form elements like radio buttons, checkbox, text field etc

For group radio button alignment with bootstrap we can do following thing

Put Asp.net radio buttons control in DIV which have 'control radio' class. "control radio" it is bootraps css classes. We just need to add this css classes in DIV

<div class="controls radio">
<asp:RadioButtonList ID="rblTiming" runat="server" RepeatDirection="Horizontal" Width="200px">
<asp:ListItem Selected="True" >Morning</asp:ListItem>
<asp:ListItem>Afternoon</asp:ListItem>
</asp:RadioButtonList>
</div>

Result :

Bootstrap datepicker fancybox conflicts - Solution

2013-10-28T10:37:00.003-07:00

When we working with Bootstrap with Fancybox, several time face following javascript error
"Cannot call method 'split' of undefined" to solution of this issue is :

Add fancybox type (type:'iframe') in Fancybox Jquery method like

$(".fancybox-html").fancybox({ 
width    : '75%', 
height   : '75%', 
autoSize    : false, 
closeClick  : false, 
fitToView   : false, 
openEffect  : 'none', 
closeEffect : 'none', 
type : 'iframe' 
});

Hope it work for you,
Thank you

Hide Div when Click Outside - JQuery

2013-10-27T08:30:00.001-07:00

When you trying to do the simple hide div when you click on the any part of the page. I got the trick after googling to to hide the div using JQuery.

HAS() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against the descendants of the matching elements; the element will be included in the result if any of its descendant elements matches the selector.

Hide Div when Click Outside - Trick

Jquery code

$(document).mouseup(function (e)
{
var loginBox = $("#login");

if (loginBox.has(e.target).length === 0)

{
loginBox.hide();
}
});

HTML Code

<div id="login"></div>

Scrollpane automatically re-size

2013-08-06T04:30:00.002-07:00

JscrollPane is the one of the great fancy scroll-bar for every browser (IE, Firefox, Chrome etc)
this post show to you to how to JscrollPane to automatically reinitialize itself, you need to just passing "autoReinitialise: true;" in setting frame, after passing srollpane attempts to reinitialize itself after delay milliseconds

Here is the example of auto Reinitialize:

$(function()

{

var settings =
{
showArrows: true,
autoReinitialise: true
};

var pane = $('.scroll-pane')
pane.jScrollPane(settings);
var contentPane = pane.data('jsp').getContentPane();
var i = 1;

// Every second add some new content...
setInterval(
function()
{
contentPane.append(
$('
').text('This is paragraph number ' + i++)
);
},
1000
);
});

Reference:
http://jscrollpane.kelvinluck.com/auto_reinitialise.html

How to remove Search.us.com Toolbar from Browsers

2013-06-23T05:39:00.000-07:00

From Firefox

Step 1. goto the following folder and find prefs.js and user.js files
C:\Users\Naveed\AppData\Roaming\Mozilla\Firefox\Profiles

remove or rename prefs.js and user.js files, on my side I just removed this files

Step 2. Clear the cache and cookies

Step 3. In home default page area, remove the search.us

Now you are free from Search.us toolbar

From Chrome Step 1. Clear the cache and cookies Step 2. In home default page area, remove the search.us Now you are free from Search.us toolbar

Jquery Pop up msgBox

2013-04-11T01:01:00.003-07:00

You can find Jquery popup examples http://jquerymsgbox.ibrahimkalyoncu.com/

Adding Bullets in left navigation Sharepoint 2010

2012-07-17T04:54:00.000-07:00

$(function(){ $('').insertBefore('.s4-ql ul.root > li > .menu-item .additional-background .menu-item-text') $('#s4-statusbarcontainer').css("display","none"); $("#layoutsTable").removeAttr("style"); $('.s4-ql ul.root > li > .menu-item .additional-background ').removeClass(); $('').insertBefore('.s4-ql ul.root > li li> .menu-item .additional-background .menu-item-text') $('.s4-ql ul.root > li li> .menu-item .additional-background').removeClass(); });

jquery Accordian in sharepoint 2010 using Default left navigation

2012-07-17T04:52:00.001-07:00

Solution:
Here we go...........

jQuery(document).ready(function ($) {
    //Mark as hidden
    $('.s4-ql ul.root > li > a.menu-item').attr('data-hide', '1');
    $('.s4-ql ul.root > li > span.menu-item').attr('data-hide', '1');
    //Hide the children
    $('.s4-ql ul.root ul').hide();
    var url = window.location.toString().toLowerCase();
    $('.s4-ql ul.root > li > a.menu-item, .s4-ql ul.root > li > span.menu-item').each(function (index) {
        var $this = $(this);
        var thisURL = $this.attr('href');
        if(thisURL)
        thisURL = thisURL.toLowerCase();

        var menuExpanded = 0;
        if (url.indexOf(thisURL) != -1) {
            showChildren($this);
            menuExpanded = 1;
        }
        if (menuExpanded == 0) {
            $this.next().find('li > a').each(function (j) {
                var childURL = $(this).attr('href');

                if(childURL)
                childURL = childURL.toLowerCase();

                if (url.indexOf(childURL) != -1) {
                    showChildren($this);
                    menuExpanded = 1;
                }
            });
        }
    });
    function showChildren($this) {
        $this.next().show();
        $this.attr('data-hide', '0');
        $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
    }

    //Show/Hide when the heading is clicked.
    $('.s4-ql ul.root > li > span.menu-item').bind('click', function (e) {
        var $this = $(this);
        toggleChildrenElems($this);
        e.preventDefault();
    });
    function toggleChildrenElems($this) {
        if ($this.attr('data-hide') == '1') {
            $this.next().show("slow");
            $this.attr('data-hide', '0');
            $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
        }
        else {
            $this.next().hide("slow");
            $this.attr('data-hide', '1');
            $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
        }
    }
    //Disable the webpart header link
    $('.ms-WPHeaderTd .ms-standardheader a').bind('click', function (e) {
        e.preventDefault();
    });
    if ($.browser.msie) {
        var version = parseInt($.browser.version);
        if (version == 7) {
            $('ul#custom-top-nav > li.first_level').bind('mouseover', function (e) {
                var $this = $(this);
                var width = $this.width() + 5;
                var marginStyle = 'margin-left: -' + width + 'px;';
                var $thisDiv = $(this).find("div#top-nav-children");
                $thisDiv.attr("style", marginStyle);
            });
        }
    }
});

CSS3 - PIE.htc and SharePoint 2010

2012-07-17T04:34:00.002-07:00

Solution
Step1:
Open the Folder location
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\projectName
Step2:
Paste border-radius.htc
Step3:
Add url in css in my case i used
.middlePic img
{
width:99%;
height:286px;
border-radius:20px;
border:2px solid #bebebe;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
-ms-transition:all 0.9s ease-in-out;
behavior: url(/_LAYOUTS/project/border-radius.htc);
}
Step4:
Congrates..

Solution for USB Drive folders and Files converted into short cut by virus

2011-03-28T03:42:00.000-07:00

Solution for USB Drive folders and Files converted into short cut

If your USB or External devices folders converted into short cut the do the following instructions

1 st scan your drive by any good antivirus, I m using not32

Check your external drive letter like I have my Drive letter ( I: ) then

Go to Start -> Run(windows key + R) type the following command

attrib -h -r -s /s /d i:*.*

Type your drive letter instead of “ i ” and click on Enter button, it take some time after the cmd cursor blinking stopped then go to My computer and see your USB or external device, your folders will recover and you also see the short cut as well, please the delete these shorts cut. Now your problem solved

Creating a web gallery in just few clicks

2011-03-18T07:42:00.000-07:00

Creating a web gallery in very easy using photoshop CS2, CS 3 goto in file > Automate > web photo gallery

now you can see the Web Gallery box,

In this box you can set your favorite gallery style in styles field,

In source images, select the folder and browse the path of images directory in your pc.

In Destination select the path where you want to save the gallery
In Options select size and design of the galley like general, banner
That is press ok button and your web gallery is ready.

Web Designer

2011-01-23T12:11:00.000-08:00