Saturday, 26 October 2013

Create CSS based Simple Slider

Simplest Slideshow

Download Source Code: Click Here to download

One of my Colleague was looking at doing a simple slideshow. The requirements were very straight forward like Images should MOVE sequentially after some Interval . I put my thinking cap on and decided to write a script from scratch. In the end, it turned out much simpler than even I predicted.Here you see how it looks like

You can customize it as per your requirement ..

HTML

Wrapper with div's as the "slides", which can contain any content.

 <div style="width: 500px; height: 300px;" id="simpleslider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul style="width: 2000px; margin-left: -500px; left: 0px;">
   <li><img alt="" src="1.jpg"/></li>
  <li><img alt="" src="2.jpg"/></li>
   <li><img alt="" src="1.jpg"/></li>
    <li><img alt="" src="3.jpg"/></li>
 
  <li><img alt="" src="4.jpg"/></li>
 
   </ul>  
</div>
 

CSS

Slides need to be absolutely positioned within the wrapper.
#simpleslider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#simpleslider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#simpleslider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 18px;
  opacity: .4;
  cursor: pointer;  
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

JQuery

<script type="text/javascript">
 
 jQuery(document).ready(function ($) {

  $('#body').text(function(){
    setInterval(function () {
        moveAhead();
    }, 2000);
  });
  
 var total_Slides= $('#simpleslider ul li').length;
 var width_Slide = $('#simpleslider ul li').width();
 var hight_Slide = $('#simpleslider ul li').height();
 var sliderUlWidth = total_Slides* width_Slide;
 
 $('#simpleslider').css({ width: width_Slide, height: hight_Slide });
 
 $('#simpleslider ul').css({ width: sliderUlWidth, marginLeft: - width_Slide });
 
    $('#simpleslider ul li:last-child').prependTo('#simpleslider ul');

    function moveBack() {
        $('#simpleslider ul').animate({
            left: + width_Slide
        }, 200, function () {
            $('#simpleslider ul li:last-child').prependTo('#simpleslider ul');
            $('#simpleslider ul').css('left', '');
        });
    };

    function moveAhead() {
        $('#simpleslider ul').animate({
            left: - width_Slide
        }, 200, function () {
            $('#simpleslider ul li:first-child').appendTo('#simpleslider ul');
            $('#simpleslider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    
 
 </script>


Complete Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.slidebody
{
 
}
</style>

<style type="text/css">
#simpleslider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#simpleslider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#simpleslider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 18px;
  opacity: .4;
  cursor: pointer;  
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}


</style>
<script src="jquery.js" type="text/javascript"></script>

<title>new</title>
  <script type="text/javascript">
 
 jQuery(document).ready(function ($) {

  $('#body').text(function(){
    setInterval(function () {
        moveAhead();
    }, 2000);
  });
  
 var total_Slides= $('#simpleslider ul li').length;
 var width_Slide = $('#simpleslider ul li').width();
 var hight_Slide = $('#simpleslider ul li').height();
 var sliderUlWidth = total_Slides* width_Slide;
 
 $('#simpleslider').css({ width: width_Slide, height: hight_Slide });
 
 $('#simpleslider ul').css({ width: sliderUlWidth, marginLeft: - width_Slide });
 
    $('#simpleslider ul li:last-child').prependTo('#simpleslider ul');

    function moveBack() {
        $('#simpleslider ul').animate({
            left: + width_Slide
        }, 200, function () {
            $('#simpleslider ul li:last-child').prependTo('#simpleslider ul');
            $('#simpleslider ul').css('left', '');
        });
    };

    function moveAhead() {
        $('#simpleslider ul').animate({
            left: - width_Slide
        }, 200, function () {
            $('#simpleslider ul li:first-child').appendTo('#simpleslider ul');
            $('#simpleslider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    
 
 </script>
</head>
 
<body>
<div id="simpleslider" style="height: 300px; width: 500px;">
  <a class="control_next" href="https://www.blogger.com/blogger.g?blogID=8013485932946089823#">&gt;&gt;</a>
  <a class="control_prev" href="https://www.blogger.com/blogger.g?blogID=8013485932946089823#">&lt;</a>
  <ul style="left: 0px; margin-left: -500px; width: 2000px;">
<li><img alt="" src="1.jpg" /></li>
<li><img alt="" src="2.jpg" /></li>
<li><img alt="" src="1.jpg" /></li>
<li><img alt="" src="3.jpg" /></li>
<li><img alt="" src="4.jpg" /></li>
</ul>
</div>
</body>

</html>
 
Hope this helps...
Shabir 

Compare and Choosing Right Content Management System CMS

Introduction

I am just writing this article because most of the people compare SharePoint with other content management system (CMS), which really makes no sense or is equal to compare orange and Apple. I agree we can compare but only CMS functionality of SharePoint with other CMS’s
Now online business and Content management system (CMS) are very closely related. So, one need to be very smart while choosing Content management system software because your business is designed/used to

Store ·
Organize
Create
Publish
Process

And power all your online activities. Based on my extensive experience utilizing these applications I came to the understanding that a CMS is a natural, more powerful wing
There are hundreds of content management system software platform available from which you have to choose. Obviously, you can’t choose unless and until you have experienced or you need to Google search and find the best one.
For people working online, a content management system will be one of the closest buddy. Fact is that we all use content management systems in one way or another: blogging, building websites, maintaining websites, selling products online, marketing and more.
Fact is that there is no platform available in market which can be compared to SharePoint; SharePoint is a full-featured suite of many different apps. These include:
  • Content management
  • Enterprise social networking
  • Intranet, extra-net and portal creation Collaboration tools
  • Project and workflow management
  • Business intelligence
  • Enterprise search
Looking to just content management feature of SharePoint Here is the comparison.

License Fee

Interwoven
SharePoint
DNN
Alfresco
Drupal
Per user fees
license based server
license based server
license based server
license based server

Designing Tools: 

SharePoint Designer 2010 you can download free and is the ultimate tool for customizing, prototyping, and designing SharePoint 2010 sites. Built on ASP.NET 3.5, SharePoint Designer 2010 provides IT pros, information workers, and Web designers the ability to create code-free SharePoint 2010 solutions, including powerful integration capabilities with data sources such as SQL databases and Web services, business intelligence solutions via the Business Connectivity Services (BCS) model, and custom workflows that can be adapted to existing business processes. A what-you-see-is-what-you-get (WYSIWYG) interface enables Web designers to gain a more realistic view of design and customization ahead of deploying custom attributes to SharePoint sites, such as master pages and CSS files.

The scope of SharePoint Designer 2010 features includes:
  • Code-free customizations
  • Prototype design and customization
  • Design and create SharePoint master pages and CSS files
  • Modify and customize themed CSS files
  • Style SharePoint list views, including conditional formatting and use of XSLT
  • Create multiple forms for lists, such as edit and display forms
  • Create new SharePoint sites
  • Create new lists, document libraries, and site columns
  • Add new SharePoint permission groups and modify group membership
  • Create new publishing page layouts and new Web part pages
  • Create declarative list and reusable workflows, including creation of custom workflow forms and approval tasks
  • Import and export workflows to Visio 2010
  • Connect to SQL server databases and other data sources and establish powerful querying and filtering between linked data sources
  • Create interactive data connections to external data including create, read, update and delete (CRUD) operations
  • Save sites as templates (WSP files) and export those WSP files for further development in Visual Studio 2010. Additionally, you can also export workflows to WSP for further development in Visual Studio 2010.
There is no such tool provided by other CMS

Other Feature Comparison

No
Features
Interwoven
SharePoint
DNN
Alfresco
Drupal
1
Documentation
Average
Excellent
Average
Poor
Average
2
Implementation
Poor
Excellent
Better
Better
Better
3
Shell Access
Yes
Yes
Yes
No
No
4
Setup and Deployment
Poor 
Easy
Easy
Poor
Poor
5
Product Development
Very Slow
Rapid
Medium
Medium
Medium
6
Web Service Model Support
N/A
Custom/In-Built
Poor
Poor
Poor
7
Blog Feature
N/A
In-Built
Extra Cost
In-Built
In-Built
8
Chat
No
Free Add-on
No
Free Add-on
Free Add-on
9
Reports
Extra Cost
Free Add-on
Free Add-on
Free Add-on
No
10
Discussion/Forum
Free Add-on
In-Built
In-Built
In-Built
In-Built
11
Events Calendar
Free Add-on
In-Built
In-Built
In-Built
Free Add-on
12
Graphs and Charts
Free Add-on
In-Built
Free Add-on
No
No
13
Mail form
Free Add-on
In-Built
In-Built
In-Built
Free Add-on
14
Newsletter 
Free Add On 
In-Built
In-Built
In-Built
Free Add-on
15
Photo Gallery 
Free Add On 
In-Built
Extra Cost
In-Built
Free Add-on
16
Project Tracking
No
In-Built
In-Built
No
Free Add-on
17
Site Map
Free Add On 
In-Built
Free Add On 
In-Built
Free Add-on
18
Surveys
No
In-Built
Free Add On 
Extra Cost
Free Add-on
19
Time Tracking
No
In-Built
In-Built
No
Free Add-on
20
Stock Quotes
No
Extra Cost
Extra Cost
No
Free Add-on
21
Subscriptions
No
In-Built
No
In-Built
Free Add-on
22
Presentation for publishing
Average
Average
Good
Good
Good
23
Announcements
In-Built
In-Built
In-Built
In-Built
No
24
Dashboard
In-Built
In-Built
In-Built
In-Built
Free Add-on
25
Link Management
In-Built
In-Built
Free Add-on
In-Built
Free Add-on
26
Document Management 
In-Built
In-Built
In-Built
In-Built
Limited 
27
Versioning
In-Built
In-Built
In-Built
In-Built
In-Built








Apart, there are other consideration we need for effective Web CMS selection process like
Support: This may be limited to basic product patches and may include services like hosting, strategic guidance, or even web development, Community vision and stability..

Conclusion:

Finally a good CMS system should provide an easy way to implement a custom UI for a site Once again, in SharePoint 2010 it was bit difficult task and in addition to the HTML specialist involved a SharePoint developer But SharePoint 2013 allows creating HTML templates in an editor of your choice and applying SharePoint elements without knowledge of its internals. Apart, SharePoint provides users tools for editing content and sites structure, managing information visibility and access permissions, policies providing search features and approval workflows, SEO capabilities and much more. Good development platform for customizations – development in SharePoint 2013 is much easier comparing with SharePoint 2010.
Hope this info helps you to choose right tool for you organization..
Shabir Hakim