1. CSS Subgrid: Nested Grids, Unleashed

Remember when aligning nested grid items was a pain? CSS Subgrid is here to save the day. It allows child elements to align with the parent grid, creating more complex and flexible layouts.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
}

With this setup, your child grid items will align perfectly with the parent grid columns. No more manual calculations or nested grid headaches!

2. CSS Scroll Snap: Smooth Scrolling, Simplified

Want to create that slick, app-like scrolling experience? CSS Scroll Snap has got you covered. It’s perfect for image galleries, paginated content, or any situation where you want controlled, smooth scrolling.

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.item {
  scroll-snap-align: start;
}

Just like that, you’ve got a smooth-scrolling container. Your users will thank you!

3. CSS Backdrop Filter: Blurring the Lines

Ever wanted to apply cool effects to the area behind an element? CSS Backdrop Filter lets you do just that. Blur, color shift, or add other graphical effects to create stunning visual designs.

.overlay {
  backdrop-filter: blur(10px) brightness(80%);
}

This simple line can transform a plain overlay into a captivating visual element. The possibilities are endless!

4. CSS Custom Properties: Variables Get a Makeover

While not brand new, CSS Custom Properties (also known as CSS Variables) have gained wide support and are a game-changer for creating dynamic, reusable styles.

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
}

With this setup, changing your site’s color scheme becomes a breeze. One change at the root, and it propagates throughout your entire site!

5. CSS @property: Taking Control of Custom Properties

Want more control over your custom properties? The @property rule lets you define the type, inheritance, and initial value of your CSS custom properties.

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

This level of control opens up new possibilities for animations and dynamic styling that were previously difficult or impossible.

6. CSS Container Queries: Responsive Design 2.0

Last but certainly not least, we have CSS Container Queries. This feature is set to revolutionize responsive design by allowing you to style elements based on the size of a containing element, not just the viewport.

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

This approach allows for truly modular design, where components can adapt to their container regardless of where they’re placed in the layout.

Wrapping Up

These modern CSS features are just the tip of the iceberg. They represent a shift towards more powerful, flexible, and intuitive web design. By incorporating these techniques into your workflow, you’ll be able to create more dynamic, responsive, and visually appealing websites.

Remember, the key to mastering these features is practice. So go ahead, experiment with them in your next project. Your future self (and your users) will thank you!

Keep coding, keep learning, and keep pushing the boundaries of what’s possible with CSS. The future of web design is looking brighter than ever!

The post Modern CSS Features Every Front-End Dev Should Know appeared first on Michael Soriano.

It’s basically a carousel, with the caption in a grey area in the side, along with control buttons in the bottom. When clicked, the next image is shown.

At first, I thought of using a plugin, which would’ve been fine. Except this would’ve added some level of training on how to use carousel plugins. Most of which are quite complicated to use. Besides, our users are already familiar with using the default WordPress gallery option. They just want to change the way it looks!

So the solution was to use a little bit of JavaScript and CSS. Note that this requires jQuery, Bootstrap for the grid, as well as Handlebars for templating.

Let’s begin:

First, let’s add a gallery to our page.

Make sure that each image has a caption to go with it:

This will ouput the default gallery in WordPress. Now note that each gallery will have a “.gallery” class in them. So let’s grab all of them, and create an object with it.

var galleries = {};
    $('.gallery').each(function(i,item){
        var id = $(this).attr('id');
        var imgs = Array();
        var children = $(this).find('.gallery-item');
        $.each(children,function(){
            var imgSrc = $(this).find('img').attr('src');
            var caption = $(this).find('.wp-caption-text').html();
            var imgItem = imgSrc + "::" + caption;
            imgItem = imgItem.trim()
                        .replace(/[\n\r]+/g, '')
                        .replace(/\s{2,10}/g, '')
                        .replace('undefined','');
            imgs.push(imgItem);
        })
        galleries[id] = imgs;
    });

Now we have a “galleries” object, with the gallery id as the indexing property. This will support multiple galleries in a page, hence the index.

Inside each gallery object contains properties for the source and caption (separated by a “::”).

So we’ll have something like below:

With our object in place, we can create our carousel.

Let’s create the HTML. The below code is simply HTML but using Handlebars syntax.

<script id="carousel-template" type="text/x-handlebars-template">
        <div class="carousel-wrap" data-gallery="{{gallery}}">
        {{#each imgObj}}
        <div class="boxed-style clearfix {{hiddenOrNot @index}}" data-index="box-index-{{@index}}">
        <div class="box-style col-lg-8 col-md-8 col-sm-8 col-xs-12" style="background-image:url('{{imgSrc}}')">
            <div class="triangle-left-large hidden-xs"></div>
            <div class="triangle-top-large visible-xs"></div>
        </div>
        <div class="box-style-copy col-lg-4 col-md-4 col-sm-4 col-xs-12">{{txt}}</div>
        </div>
        {{/each}}
        <a href="#" class="carousel-previous visible-xs">Previous</a>
        <a href="#" class="carousel-next visible-xs">Next</a>
        <div class="carousel-controls">
        {{#each imgObj}}
            <a class="trig"
                data-index="box-index-{{@index}}"
                href="#"><span class="fa fa-circle" aria-hidden="true"></span></a>
        {{/each}}
        </div> </div>
</script>

As you can see above, we are wrapping everything in it’s own “carousel-wrap”, with an attribute of “data-gallery”, along with the gallery index as the value.

We loop through each image and assign the values to the HTML.

We are using Boostrap col classes, and using a “background” for the image (not img tag). This makes our image behave properly in different viewports.

Note that we have “Previous” and “Next” buttons – which we’re adding for now – and will explain later.
Also, we’re creating the controls in the bottom, which will look like below:

 
Back in our JavaScript, let’s register a helper called “hiddenOrNot” – which simply decides if it’s not the first image – hide everything:

Handlebars.registerHelper('hiddenOrNot', function(ind) {
         return ind === 0 ? '' : 'hidden';
    });
    var source   = $("#carousel-template").html();

Now let’s compile our object and output to our template.

Remember our delimiter “::”, that’s what we’re doing in line 8 below. Also, we’re binding events to each of the controls along with assigning hidden and active classes to both itself and the large images.
Finally, we remove the default WordPress gallery by using jQuery’s .remove().

for(gallery in galleries){
        // console.log(gallery);
        var col = {};
        col.gallery = '#' + gallery;
        col.imgObj = {};
        for($i=0;$i<galleries['gallery'].length;$i++){
            var imgObj = {};
            var img = galleries['gallery'][$i].split('::');
            imgObj.txt = img[1];
            imgObj.imgSrc = img[0];
            col.imgObj[$i] = imgObj;
        } //end for each img
        var template = Handlebars.compile(source);
        $('#'+gallery).before(template(col));
        $('[data-gallery="#'+gallery+'"] a.trig').each(function(index,item){
            if(index == 0){
                $(this).addClass('active');
            }
            $(this).on('click',function(){
                var imgId = $(this).attr('data-index');
                var galleryId = $(this).closest('.carousel-wrap').attr('data-gallery');
                $('[data-gallery="'+galleryId+'"]' + ' .carousel-controls a').removeClass('active');
                $(this).addClass('active');
                $('[data-gallery="'+galleryId+'"]' + ' .boxed-style[data-index]').addClass('hidden');
                $('[data-gallery="'+galleryId+'"]' + ' [data-index="'+imgId+'"]').removeClass('hidden');
                return false;
            })
        })
        $('#'+gallery).remove();
    } //end for each gallery

Remember our Previous and Next buttons, this is only to show up in viewports for mobile devices. That is made possible by using the “visible-xs” Bootstrap class. So, it looks like below in small devices:

Now let’s add some events to those buttons:

$('[data-gallery]').each(function(i,item){
        var previous = $(this).children('.carousel-previous');
        var next = $(this).children('.carousel-next');
        previous.on('click',function(){
            var currentGallery = $(this).closest('.carousel-wrap').attr('data-gallery');
            var previousBox = $('[data-gallery="'+currentGallery+'"]'+' [data-index="'+getCurrentBox(currentGallery)+'"]')
                            .prev('.boxed-style');
            if(previousBox.length !== 0){
                hideBoxes(currentGallery);
                previousBox.removeClass('hidden');
                updateDots(currentGallery);
            }
            return false;
        });
        next.on('click',function(){
            var currentGallery = $(this).closest('.carousel-wrap').attr('data-gallery');
            var nextBox = $('[data-gallery="'+currentGallery+'"]'+' [data-index="'+getCurrentBox(currentGallery)+'"]')
                            .next('.boxed-style');
            if(nextBox.length !== 0){
                hideBoxes(currentGallery);
                nextBox.removeClass('hidden');
                updateDots(currentGallery);
            }
            return false;
        })
        function updateDots(currentGallery){
            $('[data-gallery="'+currentGallery+'"] a.trig').removeClass('active');
            $('[data-gallery="'+currentGallery+'"] a[data-index="'+getCurrentBox(currentGallery)+'"]')
                .addClass('active');
        }
        function hideBoxes(currentGallery){
            $('[data-gallery="'+currentGallery+'"] .boxed-style').addClass('hidden');
        }
        function getCurrentBox(gallery){
            var curBox = $('[data-gallery="'+gallery+'"]' + ' .boxed-style').not(':hidden');
            var curBoxIndex = $(curBox).attr('data-index');
            return curBoxIndex
        }
    })

For each button, we’re doing some logic – each of them are in functions that we can reuse.
Finally, let’s add some CSS styles:

.boxed-style {
    clear:both;
    display: block;
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
}
.boxed-style .box-style,
.boxed-style-vertical .box-style-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 380px;
    background-position-x: center !important;
    background-position-y: center !important;
    background-size: cover !important;
    padding-bottom:100px;
    box-shadow: inset 0px 0px 1px 1px rgb(234, 234, 234);
}

This is for the carousel itself:

.carousel-wrap {
    clear: both;
    display: block;
    overflow: hidden;
    margin-bottom: 45px;
    margin-top:40px;
    position: relative;
}
.carousel-previous,
.carousel-next {
    position: absolute;
    width:48px;
    height:48px;
    text-indent: -9999px;
    top:35%;
}
.carousel-next {
    background:url('images/chevron-right.png') 0px 0px no-repeat;
    right:0;
}
.carousel-previous {
    background:url('images/chevron-left.png') 0px 0px no-repeat;
}
.carousel-wrap .boxed-style {
    margin-bottom: 0;
}
.carousel-controls {
    text-align: center;
    margin:15px 0;
}
.carousel-controls a {
    font-size:13px;
    margin-right: 3px;
    color: #ccc;
}
.carousel-controls a:hover,
.carousel-controls a:focus,
.carousel-controls a.active {
    color: #0077C8;
}

Now you might have noticed a little triangle in our caption. This is the CSS that made that possible:

.triangle-left-large {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #eaeaea;
    position: absolute;
    right: 0;
}

Below is the finished result. In desktop and mobile view. A live example can be found here (scroll down to the middle of the page).

And that’s about it! We’ve just created a carousel without a plugin. This may be a simplistic carousel – one that can be enhanced even further. Maybe add some animations, previews, swipe events etc.

Hope you try it out in your projects. Leave your comments below.

The post Convert WordPress default Gallery into a simple Carousel without a plugin appeared first on Michael Soriano.

Get all the links

First of all, we need to get all the links in the page. We have a simple utility called “document.links” – which returns an array of links! What a way to get started! Let’s go ahead and create a wrapper for our code.

(function(){
  //all code goes in here
})()

The above is also known as an “Immediately Invoked Function Expression“. This code is immediately run as soon as the page is loaded. It’s similar to jQuery’s “document.ready()” handler.
Now it’s time to grab all the links in the page. Notice that we’re simply doing a “for” loop, and checking if the link has a “title” attribute.

var links = document.links;
  for(var i=0; i < links.length; i++){
     var a = links[i];
     if(a.title !== ''){
       a.addEventListener('mouseover',createTip);
       a.addEventListener('mouseout',cancelTip);
     }
    //  console.log(a);
  }

We then bind two functions to our links using “addEventListener()”. One during “mouseover” and “mouseout”. The functions are named “createTip” and “cancelTip” (which we haven’t created yet). Know that “addEventListener()” is similar to jQuery’s “.on()”.
It’s funny that I’m writing a tutorial on pure JavaScript and comparing functions to jQuery. Usually, it’s the other way around.
Moving on…

Remove the default browser tip

Before we create the tooltip, we need to get rid of the default browser behavior of showing the ugly tip:

The trick is to remove the “title” attribute, and putting it in a temporary location (like another attribute). This way we can retrieve it for later use (like for our own tooltip and putting the title back).
Let’s create our first function that happens on “mouseover”. Then let’s add the code that strips out the title and adding it to a new attribute called “tooltip”:

function createTip(ev){
    var title = this.title;
    this.title = '';
    this.setAttribute("tooltip", title);
}

Let’s create our second function that happens during “mouseout”. This time, setting the attributes to its original state:

function cancelTip(ev){
    var title = this.getAttribute("tooltip");
    this.title = title;
    this.removeAttribute("tooltip");
}

Now, when you hover over the link, you will see our attributes are being manipulated by our function:

Let’s continue building the tooltip.

Create the new Tip

Now that we got that out of the way, and we have both functions in place, it’s time to build our tooltip. In summary, we need to create a div, add our text inside and put it inside the body of the HTML.
Add the code below inside our already existing createTip() function – just underneath the setting attribute code:

    var tooltipWrap = document.createElement("div"); //creates div
    tooltipWrap.className = 'tooltip'; //adds class
    tooltipWrap.appendChild(document.createTextNode(title)); //add the text node to the newly created div.
    var firstChild = document.body.firstChild;//gets the first elem after body
    firstChild.parentNode.insertBefore(tooltipWrap, firstChild); //adds tt before elem

Notice the new DIV we’ve created and added our class “tooltip”. This allows us to style our tip – which is why we’re doing this in the first place. We then append our text inside the div using .createTextNode() and .appendChild().
Finally, we insert the new DIV right underneath the BODY tag. We do this by finding the first child of the BODY element, then we do a “insertBefore()” it with our new DIV.
But wait, our DIV is in place – but it’s all the way at the top! We continue below by positioning our tip.

Positioning

Now this is probably the trickiest part of the code. It also depends on how you want the tooltip to appear, so you must adjust accordingly. In my case, I want the default position of the tip to be right above the link I’m hovering. Plus the tips have a little arrow pointing down – so we need to make room for that as well.
First, let’s plugin some styles so we get a better idea of how much to adjust. I wanted my tooltip to have a darker background, with a slight orange font color.

  .tooltip {
    position: absolute;
    background: #646464;
    border-radius:4px;
    padding: 6px 12px;
    font-family: arial;
    font-size: 12px;
    text-shadow: 0px 1px 1px #000;
    color: #ffc64a;
  }
  .tooltip:before {
    content : " ";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #646464;
    position:absolute;
    bottom:-5px;
    left:5px;
  }

You will also notice a :before pseudo class. This is to create the “arrow” that’s pointing down. Now that we have our styles, we know how much to adjust.
Next we get the coordinates and dimensions of the link and the tip itself. We do this by doing a “getBoundingClientRect()”. Once you do a console.log, you should see an objects that has the tooltip and link properties that we need:

The top and left properties is the X and Y coordinates (or where it is in the window), plus the height and width. We need the height to calculate and offset our tip.
Let’s add our new code below inside the createTip():

   var padding = 5;
   var linkProps = this.getBoundingClientRect();
   var tooltipProps = tooltipWrap.getBoundingClientRect();
   var topPos = linkProps.top - (tooltipProps.height + padding);
   tooltipWrap.setAttribute('style','top:'+topPos+'px;'+'left:'+linkProps.left+'px;')

As I was saying, we simply calculate the position of our tooltip by offsetting based on where the link is. We also add some padding and take in account the height of the tip. We add this new position to the tip by adding an inline “style” with “top” and “left”.
Now hover over a link and you should see our newly styled tip, positioned nicely above the link.

We can also simply remove all tips from the page by adding the code below to our “cancelTip()” function:

   document.querySelector(".tooltip").remove();

And that’s basically it.

Conclusion

This is probably the simplest tooltip we can build. There are plenty of things to consider – such as image links, or positioning the tips below or to the left or right. These things we can add as an enhancement in the our next session. I will also build a Git repository and a demo in my next tutorial – so stay tuned.

The post How to create Better Tooltips with plain JavaScript and CSS appeared first on Michael Soriano.

Note that this will require the following files:

• jquery.min.js
• bootstrap.min.js
• handlebars.min.js
• moment.min.js
• editor.js
• editor.css
• bootstrap.min.css
• font-awesome.min.css

The plugin already includes the above files via CDN.

View in Github

We are building “Tab Containers“. Basically, content that is shown in different tabs in a page. The entire CRUD interface also comes with it – so we’ll be able to add, edit and delete tab content and items, all in one page (without refreshing).

Why is this Useful?

Well there really is no way to achieve this in SharePoint. If you want to add Tabs inside an SP page, you would have to paste the whole code inside their editor. But updating this is quite cumbersome to most users.

This solution provides you with a nice interface to manage your tab content, while the data is stored in an SP list. The good thing about this is, you can use multiple apps and utilize just one list. So if you convert this into a webpart or an app – you simply need one list per site to make it work.

Ready to get started? Also, I’m only going to discuss the meat of the logic. You will need some basic JavaScript and SharePoint to follow and complete this tutorial.

Create the List

The data for our application will be stored in a custom list. The list will basically contain four columns: 1) Title: which is the default title field, 2) content which is a Rich Text type 3) tab-order a single line text value 4) webpart-id – this will be the identifier for our webpart (in case you want multiple webparts in the site).

The title column will hold tab title, content is the contents of the tab, tab order is for ordering the tabs from left to right. You can go ahead and fill it out with dummy data for now, so we can go ahead and fetch the data for our front end. Note that that I have the list template also included in the Github page.

Fetch the Items

We are going to use a slight variation of the “Revealing Module” pattern to construct our code. This is especially useful when you are expecting your code to be reused multiple times in a page. In our case, users might want multiple of these web parts in a page, so a “modularized” approach is needed.

var SpTabs = function(){
   //ENTER REST OF CODE HERE
return {
    init : init,
    getContent : getContent
  }
}

As you can see, we are returning two public functions from our “SpTabs” object. The “init()” method will make the object unique per instance, while the “getContent()” will fetch the items for our view. Let’s build our init() function right below:

var init = function(obj){
    setListName(obj.listName);
    setWebPartId(obj.webPartId);
    setListItemEntityTypeFullName();
    checkPermissions();
}

Inside our “init()”, we have some setters. It simply sets our module up for execution. The setter functions are pretty self explanatory – and you can simply investigate what each of them does in the source code. Let’s continue getting our items:

var getContent = function(obj){
    var endpoint = "/_api/web/lists/getbytitle('"+listName+"')/Items?";
    endpoint = _spPageContextInfo.webAbsoluteUrl + endpoint + '$orderby=tab_x002d_order asc';
    endpoint += "&$filter=(webpart_x002d_id eq '"+webPartId+"')";
    var ajax = $.ajax({
      url: endpoint,
      method: "GET",
      headers: { "Accept": "application/json; odata=verbose" },
      success : function(data){
        items = data.d.results;
        buildTabsHtml();
        buildTabsContentHtml();
      },
      error : function(data){
        console.log(data);
      }
    });
    return ajax;
  }

This is the AJAX call that goes into our API to fetch our items. As you can see, we are returning the variable “ajax” from the getContent() function, in cases where we want to add additional stuff once the response is received. But the default behavior is inside the “success” method of jQuery’s $.ajax().

Note the two methods buildTabsHtml() and buildTabsContentHtml(), and our results are in our global var “items”. So we’re ready to build some output.

Output with Handlebars

Let’s create our Handlebars templates so we can use it to produce our content. In case you haven’t used it, Handlebars is a minimal template language for JavaScript. It just makes life easier. Note that we have to include our handlebars source to make it work. Also, we are using Bootstrap for our tab styles. So you have to include that in your source as well.

The code that will make this work is inside our two methods buildTabsHtml() and buildTabsContentHtml(). Let’s go ahead and build that now:

function buildTabsHtml(){
    var source = $("#tabs-navigation-template").html();
    var template = Handlebars.compile(source);
    $(getId() + '.tabs-navigation').html(template(items));
    //atach handlers
    $(getId()+'.tabs-navigation li a').on('click',function(){
      $(getId()+'.tabs-navigation li').removeClass('active');
      $(this).closest('li').addClass('active');
      var id = $(this).attr('data-id');
      $(getId()+'.tab-item').addClass('hidden');
      $(getId()+'div.tab-item[data-id="'+id+'"]').removeClass('hidden');
      if(id === 'addNew'){
        addNewForm();
      }
    })
  }

The above will output the content of our tabs. It also attaches the handlers to the tab navigation elements. Next up is the buildTabsContentHtml() method:

function buildTabsContentHtml(){
    var source = $("#tabs-content-template").html();
    var template = Handlebars.compile(source);
    Handlebars.registerPartial("tabForm", $("#tabs-content-form-template").html());
    $(getId() + '.tabs-content').html(template(items));
    $.each(items,function(i,item){
      $(getId()+'[data-id="'+item.Id+'"] .editable-content').Editor(EditorOptions);
      $(getId()+'[data-id="'+item.Id+'"] .Editor-editor').html(item.content);
    })
    $(getId()+'.save-changes').on('click',function(){
      var id =$(this).closest('.tab-item').attr('data-id');
      if(validateFields(id)){
        $(this).addClass('fetching').html(' Saving...');
        $(getId()+'.editmode').css({'opacity':'.4'});
        setTimeout(function(){
          var ajax = submitChanges(id);
          ajax.done(function(data, xhr){
              var ajax2 = getContent();
              ajax2.done(function(){
                $(getId()+'.tabs-navigation li a[data-id="'+id+'"]').trigger('click');
                addButton();
              });
          });
        },1000);
      }else{
        showErrorMessage(id);
      }
      return false;
    })

Now things got a bit hairy. First you’ll notice our handlebars compile – which is normal, but note the “registerPartial()” method. This means that we’re adding another handlebars template into our existing template. This is the form that handles our inline editing. I’m not going to post the code on here, instead you can see the #tabs-content-form-template from our text file – which simply contains a few input forms for our app.

Why use partials within templates?

This is another powerful feature of handlebars. This allows for more re-usability and “modularity” for your applications. In other words, we write once and re-use multiple times. In our case, the form can be reused multiple times across our application – in “edit” and “new” mode. This will become evident as you write along.

We’re also using a lightweight WYSWG editor called “Line Control“. Since we’re already using Bootstrap and FontAwesome, it just makes sense that we use a plugin that requires the same libraries. So this is what’s happening on lines 8-9 above: “.Editor(EditorOptions)”, where “EditorOptions” is declared on top of of our file as an array.

Insert, Update and Delete

Finally, we attach our “Save” and “Delete” buttons to do a couple of REST calls to our server when clicked. First our “Save” button is connected to our “submitChanges(id)” method (which takes care of both “edits” and “inserts”), while the next call is to “getContent()” – which is our main function to grab the tab items.

The “Delete” will also consist of two main REST calls, which is to delete and fetch the records. Our “deleteRecord()” function is shown below:

function deleteRecord(tab){
    var ajax = $.ajax({
       url: tab.__metadata.uri,
       type: "POST",
       headers: {
           "Accept": "application/json;odata=verbose",
           "X-RequestDigest": $("#__REQUESTDIGEST").val(),
           "X-HTTP-Method": "DELETE",
           "If-Match": tab.__metadata.etag
       },
       success: function (data) {
          console.log('record has been deleted');
       },
       error: function (data) {
          console.log('there was a problem with deleting the record');
       }
   });
   return ajax;
  }

While our “submitChanges()” method looks like so:

function submitChanges(id){
      var item = {
        "__metadata": { "type": ListItemEntityTypeFullName },
        "Title" :   $(getId()+'[data-id="'+id+'"] input[name="title"]').val(),
        "content" : $(getId()+'[data-id="'+id+'"] .Editor-editor').html(),
        "tab_x002d_order" : $(getId()+'[data-id="'+id+'"] input[name="tab-order"]').val()
      };
      if(id === 'addNew'){
        item.webpart_x002d_id = webPartId;
        var endpoint = "/_api/web/lists/getbytitle('" + listName + "')/items";
        ajax = $.ajax({
           url: _spPageContextInfo.webAbsoluteUrl + endpoint,
           type: "POST",
           contentType: "application/json;odata=verbose",
           data: JSON.stringify(item),
           headers: {
               "Accept": "application/json;odata=verbose",
               "X-RequestDigest": $("#__REQUESTDIGEST").val()
           },
           error: function (data) {
              console.log(data);
           }
       });
       return ajax;
      } //end addNew;
      var tabItem = findItem(id);
      ajax = $.ajax({
         url: tabItem.__metadata.uri,
         type: "POST",
         contentType: "application/json;odata=verbose",
         data: JSON.stringify(item),
         headers: {
             "Accept": "application/json;odata=verbose",
             "X-RequestDigest": $("#__REQUESTDIGEST").val(),
             "X-HTTP-Method": "MERGE",
             "If-Match": tabItem.__metadata.etag
         },
         error: function (data) {
            console.log(data);
         }
     });
     return ajax;
  }

Note that all of the REST calls all look similar, with a select few nodes that changes. First you’ll notice the “X-HTTP-Method” for edits is “MERGE” and “DELETE” for deleting. The rest are pretty much SharePoint REST API requirements – which you can find more on this page. Our “item” object is also mapped to the names of the list columns that we have. Depending on your list – you may need to modify this area as well.

In our UI, note the placement of our buttons and our form:

Lastly, you notice a couple of helper functions “getId()” and “findItem()”. The getId() simply returns our current div – with the “#” and a space as a string (or the CSS selector for the current div), while our findItem() loops through our global items object and returns the current item.

Moving forward, let’s look at a couple of important internal methods which includes our validation and error messaging mechanism.

Form Validation

Since we’re entering our data into our SharePoint lists through client side, we can implement a validation method using JavaScript as well. The cool thing about SP’s REST API has it’s own validation in the server side so all we have to worry about is the user experience.

function validateFields(id){
    errors = [];
    $('.error').remove();
    var title = $(getId()+'[data-id="'+id+'"] input[name="title"]');
    var content = $(getId()+'[data-id="'+id+'"] .Editor-editor');
    var tabOrder = $(getId()+'[data-id="'+id+'"] input[name="tab-order"]');
    if(title.val() == ''){
      var obj = {};
      obj.field = 'title';
      obj.message = 'Title cannot be empty'
      errors.push(obj);
    }
    if(content.html() == ''){
      var obj = {};
      obj.field = 'content';
      obj.message = 'Content cannot be empty'
      errors.push(obj);
    }
    if(tabOrder.val() == ''){
      var obj = {};
      obj.field = 'tab-order';
      obj.message = 'Tab order cannot be empty'
      errors.push(obj);
    }
    if(errors.length > 0){
      return false;
    }
    return true;
  }

Our very simple validation code is above. Note that this happens every time that “submit” button is clicked. So it simply goes through the fields – check for empty and puts the errors in an array. I’m not checking for anything else like valid data etc – and feel free to add your own rules. Simply keep pushing the error messages into our array when invalid. Our messaging is handled in the code below:

function showErrorMessage(id){
    $.each(errors,function(i,er){
      var field = '';
      if(er.field === 'content'){
        field = $(getId()+'[data-id="'+id+'"] .Editor-container');
      }else{
        field = $(getId()+'[data-id="'+id+'"] input[name="'+er.field+'"]');
      }

[the code above has been truncated due to an error w syntax highlighter… sorry]

The following screenshot shows our validation code in action. Error messaging is placed underneath each label and at the same time. This way, users can see where they had made an error and fix. Remember to add your own rules as necessary.

Checking Permissions

Finally, since we’re not using the regular SharePoint process in updating a page with tabs, we need to come up with our own. See, the entity we’re updating is not the current page – but a list. So we need to check if the current user has permission to edit the list – and give them access to our newly created UI.
I found this great article on how to effectively do this – since Microsoft’s documentation is a bit vague.

We’re using the “effectiveBasePermissions” REST endpoint along with SP.BasePermissions() class – which we need from SP.ClientContext object. Yes, it’s a bit of a mess so simply check the code below:

function checkPermissions() {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
      var call = jQuery.ajax({
          url: _spPageContextInfo.webAbsoluteUrl +
              "/_api/Web/lists/getbytitle('"+listName+"')/effectiveBasePermissions",
          type: "GET",
          dataType: "json",
          headers: {
              Accept: "application/json;odata=verbose"
          }
      });
      call.done(function (data, textStatus, jqXHR) {
          var permissions = new SP.BasePermissions();
          permissions.initPropertiesFromJson(data.d.EffectiveBasePermissions);
          var permLevels = [];
          for(var permLevelName in SP.PermissionKind.prototype) {
              if (SP.PermissionKind.hasOwnProperty(permLevelName)) {
                  var permLevel = SP.PermissionKind.parse(permLevelName);
                  if(permissions.has(permLevel)){
                        permLevels.push(permLevelName);
                  }
              }
          }
          // console.log(permLevels);
          if($.inArray('editListItems',permLevels) != -1){
            userCanEdit = true;
            addButton();
          }else{
            console.log('You dont have "editListItems" permissions on '+ listName);
          }
      });  //end done
    });
  }

We’re still using jQuery’s ajax to get information, though it’s wrapped inside a “SP.SOD.executeFunc()” method – which is Microsoft’s way of loading and executing internal scripts. What we get back is an array we’re calling “permLevels” This array contains all the permissions a user has against our list.

We’re simply looking for the “editListItems” – and if found, we’re show the button and let the user edit.

Final Steps

Our code is now complete. Note that there is not a single line of .NET code above – it’s all JavaScript, HTML and CSS. All server interactions are done through the REST API. This code can be applied whichever way you want to implement – may it be a custom web part, an app part or simply add the code to a Content Editor.

Remember to update the initialize settings like below: The important part is the “webPartId” and “listName” parameters – which connects the plugin to the data you need.

Once that’s done, simply reload the page and you should see your SPA in action. Note that the code editor I used is very basic – so you might need to go to the list itself when updating content.

This editor was mostly designed for quick updates to your content.

Remember, the purpose of this article was really to expose you to the inner workings of REST and how to build a single page application right inside SharePoint with existing open technologies such as jQuery, Handlebars and Bootstrap.

Hope you enjoy this piece. Let me know your comments below.

The post Build a SharePoint Single-Page App using nothing but Front-End Code appeared first on Michael Soriano.

The problem is, the default infowindow has limited options for HTML styling.

View Demo

The default infowindow looks like below:

You can only style the inside of the window. We need a bit more flexibility and style the entire window.

Thankfully there’s this plugin called “Infobox“. With InfoBox, you can style the entire window by simply passing a few parameters. In my case, I need to make the window look like below:

Ready to get started? Let’s start by adding our script to InfoBox. Note that if you’re loading Google Maps asynchronously, you need to add your script in your callback method.

var initMap = function() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "js/infobox.js";
  $("head").append(s);
  var map = new google.maps.Map(document.getElementById('map-wrap'), {
    center: {lat: 33.78444500, lng: -118.15378000},
    zoom: 8
  });
}

Once your scripts are loaded, you should see your map, and add a simple marker like so:

var marker, i;
marker = new google.maps.Marker({
   position: new google.maps.LatLng(22.556444, -44.565),
   map: map
})

Now, InfoBox has plenty of options – so I just leave the defaults alone. What we really need is the “boxStyle” object. This we can pass our CSS as key/value pairs. This is the style of the outermost box – the box that the default infowindow doesn’t let you customize easily.

var ibOptions = {
    		disableAutoPan: false
    		,maxWidth: 0
    		,pixelOffset: new google.maps.Size(-140, 0)
    		,zIndex: null
    		,boxStyle: {
          padding: "0px 0px 0px 0px",
          width: "252px",
          height: "40px"
        },
        closeBoxURL : "",
        infoBoxClearance: new google.maps.Size(1, 1),
    		isHidden: false,
    		pane: "floatPane",
    		enableEventPropagation: false
    	};

Once that’s done, let’s create a click handler, so our InfoBox will pop out when our marker is clicked. The code below is an example of a closure. We’re only including the “non static” properties inside our closure, so you’ll notice that our “innerHTML” property is inside.

google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var source   = $("#infobox-template").html();
        var template = Handlebars.compile(source);
        var boxText = document.createElement("div");
        boxText.style.cssText = "margin-top: 8px; background: #fff; padding: 0px;";
        boxText.innerHTML = template(subSet[i]);
        ibOptions.content = boxText
        var ib = new InfoBox(ibOptions);
      	ib.open(map, marker);
        map.panTo(ib.getPosition());
      }
  })

I am also using Handlebars for templating, so the template is compiled multiple times. Also inside click handler above, and only shows up when the marker is actually clicked. My template will look like below. Remember that I have multiple of these boxes.

<div class="info-box-wrap">
  <img src="{{img_src}}" />
  <div class="info-box-text-wrap">
  <h6 class="address">{{address}}, {{city}} {{zip}} {{state}}</h6>
  <p class="price">{{price}}</p>
</div>
<div class="action-btns"></div>
</div>

Finally, the styles. Remember, InfoBox has already done the outer shell styles. Now it’s up to us to style the inner part of our box. So simply hack away with your CSS chops:

.info-box-wrap {
  background:#fff;
  overflow: hidden;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.08);
}
.info-box-text-wrap {
  height:40px !important;
  width:120px;
  float:left;
  overflow: hidden;
}
.action-btns {
  float:left;
  width:70px;
  overflow: hidden;
  position: relative;
  top:12px;
  left: 6px;
}
.action-btns i {
  font-size: 18px;
  color: #78A737;
  margin-left: 3px;
}
.action-btns i:hover {
  transition: color 0.5s ease;
  color:#ccc;
  cursor: pointer;
}
.action-btns i.fa-heart-o {
  font-weight: bold;
}
.info-box-text-wrap h6.address {
  padding:6px 5px 1px 0;
  margin:0 0 0 0;
  font-family:"Roboto Slab";
  color: #0c99c8;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-box-text-wrap p {
  padding:0 0 0 0;
  margin:0 0 0 0;
}
.info-box-text-wrap p.price {
  color:#B25B00;
}
.info-box-wrap  img {
  width:40px !important;
  height:40px;
  float:left;
  margin-right: 10px;
  padding-top:0;
  margin-top:0;
}

With the above code everything should be in place. All we need is an arrow that points back from our box to our marker.

Creating the Arrow

There is an awesome article on how to create traingles that is pure CSS. We really don’t need an image for this type of thing. Another thing, we’re going to use the ::before pseudo selector to insert our triangle. This prevents us from adding unnecessary DIVs into our markup.

.infoBox:before{
  content : " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position:absolute;
  top:-10px;
  left:130px;
}

Note the “content” property with the value of ” “. This makes it so the ::before selector is actually visible in the DOM.

And the final result looks like below. Note that the map automatically centers to the marker that is clicked. That is in our click handler “map.panTo(ib.getPosition())” method.

Note that in the demo, it’s loading sample data from a text file. I’m also outputting which property is clicked on the left side.

Until next time, please leave your comments below.

The post How to fully customize your Google Map Info Windows with Infobox appeared first on Michael Soriano.

The Basic .col-xx-xx Classes

Bootstraps column classes are what makes up the individual columns of the grid. It’s main purpose is to align your components into – you guessed it, columns. They’re designed to have 3 sections:

The prefix part “col” – just organizes all the col classes together, sort of like a namespace. And if you’ve worked with other frameworks in the past, the 3rd section “12” just tells us to occupy 12 columns out of the maximum 12. Pretty basic right?
But what about the 2nd part? In our example, it’s the “lg”. This tells the browser to primarily use this for large screens only (default is 1170 pixels and above). Meaning, since we can use multiple classes on any element, we can now design for multiple sizes of the screen. Pretty powerful eh?
So how does it do that?
So if you investigate the css, and look for that particular class (.col-lg-12), you will see that it’s enclosed in a media query:

@media (min-width: 1200px) {
.col-lg-12 {
    width: 100%;
  }
}

As a matter of fact, ALL of the “lg” classes are inside this media query. So the rule only applies to a specific screen resolution. The rest of the sizes (md for 970px, sm for 768px and xs for less than 768px) contains the rules for its respective classes. Pretty forward thinking right?
Show me an example of its usefulness:
A common scenario is a two-column layout, with content on the left and sidebar on the right. With just a single class applied to both areas: red div has a class of col-lg-9 and green div has col-lg-3.
But most of the time – your sidebar’s content is not ready for a full page width in medium and small view ports. So you wish the sidebar doesn’t snap to the bottom right away right?

The solution: apply multiple .col classes into the same divs (one for each of the view port sizes). Take a look at the next example – where we apply a different column number ONLY on the extra small (.col-xs-12).

You see how the divs retained their 2 column layout all the way until the extra small view port is reached. Only then, did our sidebar snap to the bottom at full width. So you see how useful this is yet?

Classes “row” and “container”

Let’s jump out of the columns and look at the classes that wrap them. We have two important classes that do just that.
.row
Just as the word describes – a row is something that is on one horizontal layer. Similar to a “record” in a database, or a “row” in a table. In Bootstrap, if you want elements to be in one horizontal layer – use a class .row.

The dark grey divs both have a class “.row”. A row basically acts as a traditional div tag, but instead can be applied as a class. I’ve used class .row on a header or footer tag – and it works really well.
.container
Ideally, you add your HTML elements that need to be grouped together inside a class .container. The “max-width” properties for each break point (the media queries) are defined in this class. It is a very important class. One that is required to make things work the way they do.
According to Bootstrap’s docs, containers are:

Easily center a page’s contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.

Containers also follow the default padding rule of 15 pixels on each side. So the contents are automatically flushed together with just the right amount of gutter space all the time.

How does Nesting work?

Nesting means adding more .col classes inside of existing .col classes. Most of the time, you would need to add a .row class first – before nesting your .col divs inside in order to see desired results.
So when do you need to nest?
All the time! If you inspect most HTML documents – it’s already a series of nested DOM elements so nesting your .col classes is already expected behavior. Although in Bootstrap, nesting will save you a lot of work calculating and deciding how wide a column has to be.

See both green divs have that have .col-lg-6 classes? These are nested inside the red div (the parent div). Also, notice that a nested .col-lg-6 class takes up 50% of the parent div’s width. In other words, all you really need to remember is the 12 grid rule – no matter how deep the nesting goes.
Note that I also applied the multiple classes technique (discussed above) to the child classes shown in the screenshot above. This is so that when resized, both div’s retain it’s 6 column width – until the last view port kicks in.

Pushing, Pulling and Offsetting

For even deeper customization of the grid elements, Bootstrap allows you to shift the columns around. Push and pull classes allow you to move the column # times to the left (also know as pull), or # times to the right (push).

So consider the markup below. Even though the green div is written right above the red div, the push and pull classes allows us to order them as if they were otherwise.

green pushed 4
red pulled 4

The code above makes it so the divs appear in the browser in a different order.

What makes it work?
If you inspect the push and pull classes, it utilizes the right and left property respectively – in percents. Since everything in Bootstrap is positioned relatively, using left and right will automatically just work.

@media (min-width: 992px)
   .col-md-pull-4 {
      right: 33.33333333333333%;
   }
   .col-md-push-4 {
      left: 33.33333333333333%;
   }
}

Offsets
Offsetting classes is similar to push and pull classes – except for the “offset” keyword in the class name. Also similar to push and pull, the number in the class tells the browser how many columns to offset the element.

The difference with offsetting is that it uses the margin left property. So if your element is right next to another element – it will simply push itself against it by the designated percentage. See the code below for a .col-md-offset-4 class:

@media (min-width: 992px)
 .col-md-offset-4 {
    margin-left: 33.33333333333333%;
 }

You see how this can be useful? You can simply apply this class to whichever you want to offset and still retain the responsive margins effectively. Pretty good right?

Visibility Classes

Although this has nothing to do with the grid, I thought it is worth a mention. We’ve all worked with a system that has a default class for a “display:none”. Well not only does Bootstrap have this (it’s called .hidden), but they’ve taken it an extra step. I like to call them the “visibility” classes.
These classes do just that – controls the visibility of elements – across multiple views. Now, when designing your web site, you just now have to pick which elements to show, hide in large, medium and small views – then simply apply the visibility classes. The table below (taken from Bootstrap’s website) explains what the classes do in specific view ports.

Conclusion

I believe we’ve looked at the core classes that will get you up and running with Bootstrap’s grid system. This alone, if used properly – will save you countless hours of development time. Don’t forget to read up on the rest of Bootstrap’s many features such as the built-in components, Javascript plugins and of course, the rest of the styles. Good luck and have fun coding!
Last of all, I would like to keep this an open discussion. If there’s anything that you would like to add, please leave a comment. I will be more than happy to answer questions or append to the article.

The post Exploring the Bootstrap 3.0 Grid System appeared first on Michael Soriano.

The Problem

Most navigation menus is marked up with list items that are floated left. While this is good with desktop resolutions, it doesn’t work well when the view port is for small screens.

As I’ve mentioned above, we’ll get our way around this problem by hiding the original menu and showing a new one. This can all be achieved by CSS and a little jQuery. Take a look at the existing markup for the menu.
code taken out – due to problems with my plugin

Create the Media Query

Let’s add a media query in our CSS for max width of 796 pixels. We then hide the list items by setting a “display none” inside the query.

@media (max-width: 796px) {
 .navigation.responsive ul li {
   display:none;
}

Now try re-sizing your browser to less than 796 pixels and see that the contents of our menu disappears.

Add the Trigger and Empty Div into the Markup

We’re going to need a new anchor tag into our existing menu, also known as the “trigger”. We can simply add a last list item to our navigation menu – but set it to “display:none”. I’ve created a class in our CSS called “hidden”, to simply use that with our trigger.
Then add an empty DIV outside of our current navigation. I’ve named our new DIV “mini-navigation”. I also added the “hidden” class to this DIV, so both our trigger and mini-nav won’t be visible by default. Our markup should now look like below:
code taken out – due to problems with my plugin

Note the last list item and our empty DIV above.

Show the Trigger in our Media Query

Inside our media query, add these lines to our CSS:

.navigation.responsive ul li.hidden {
  display:block;
}
.navigation.responsive ul li.hidden:hover {
  border-radius:4px 0 0 4px;
}
.navigation.responsive ul li.hidden a{
  background:url('menu.png')no-repeat 0 -5px;
  padding-left:24px;
}

Note that the key code in the above is the “display:block”. This will make our trigger be visible. The rest of the code simply styles our trigger so it will look like below:

Add the Javascript

Now that we have our trigger, we need Javascript to handle what happens when it is clicked. First, make sure you’re hooked up with jQuery in your page.
Then let’s add the following code in a set of script tags. I’ll explain what it does after the source.

$(document).ready(function(){
	var trigger = $(".trigger a");
	var menu = $(".mini-navigation");
	trigger.on('click', function(){
		var html = $(".navigation.responsive").html();
		menu.html(html).toggle(0, function(){
		  if($(this).is(":visible")){
			trigger.html('Hide Menu');
				}else{
					trigger.html('Show Menu');
				}
			$('.mini-navigation li.trigger').remove();
			});
		});
		$(window).resize(function(){
			menu.hide();
			trigger.html('Show Menu');
		});
	})

Let me explain the code above. First we open the document.ready() function. We then set two variables: trigger(our trigger link) and menu(our hidden div). We bind the click event by using doing trigger.on(). Everything inside the .on() anonymous function is the heart of the code.
We create another variable called “hmtl” – which is the contents of our existing navigation. We then add it to our hidden div by doing: menu.html(html). So our hidden div (mini-navigation) now has our list items from the original menu.
We then chain the .toggle() function right after the .html(). This will show or hide our hidden div. We add an if else statement as a callback inside the .toggle(), just to change the label of our trigger from “Show Menu” to “Hide Menu”.
We also remove the last list item (which is the duplicate trigger).
Finally, we have window.resize() function – which simply resets our menu back to hidden and the label to “Show Menu” – which are the default states.

Style the Mini Navigation

This is of course, open to your customization. But what I’ve done is simply make our new menu a list item, with some bottom borders, appropriate padding and hover states.

.mini-navigation {
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:0 0 0 0;
	margin-left:5px;
	margin-right:5px;
	border-radius:0 0 8px 8px;
}
.mini-navigation ul {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.mini-navigation ul li {
	margin:0 0 0 0;
	padding:10px 18px 12px 23px;
	list-style:none;
	border-bottom:1px solid #ebebeb;
}
.mini-navigation ul li:hover {
	background:#f6f6f6;
}
.mini-navigation ul li a {
	text-decoration:none;
	font-size:12px;
	color:#1e7759;
}
.mini-navigation ul li a:hover {
	text-decoration:underline;
}
.mini-navigation ul li:last-child{
	border-bottom:none;
	padding-bottom:15px;
}
.mini-navigation ul li:last-child:hover {
	border-radius:0 0 8px 8px;
}

Our mini navigation should look like below:

Note that typically, the navigation is right above the rest of your content. When our menu appears – it simply pushes the rest of the content downwards. And when the new page loads – our menu returns to hidden by default.

Conclusion

And I believe that should do it. That’s as simple as it gets. Our very own responsive navigation menu system. Please leave your comments below.

The post Build a Simple Responsive Navigation Menu from scratch with jQuery and CSS appeared first on Michael Soriano.

This tutorial will walk you through how to create full page background images that rotate like a slideshow. We will be using CSS and jQuery – particularly the nifty cycle plugin. Ready to get started? Let’s begin:

The HTML Markup:

First we create the background images. Place them in your root folder, in a directory called “images”. We wrap them around a special DIV which houses all the images. We need this DIV so we can target it from our script later:

Make sure your image is a good sized horizontal shot. For almost all screen resolutions have wider width vs height. Our images will scale to the width of the screen. The DIV id=”wrap” is the container for your content. This is directly underneath our slideshow container. Save your HTML and view it in the browser. You should see a series of images on top of each other.

The CSS

Add this code to your page. This will set the images width to span the entire page.

View Refresh your page. You should see only the first image. The rest of the images are tucked away underneath the first one. This is what “z-index” and “position” properties in our code did. Now for the slideshow effect, we use some jQuery magic.

The jQuery

Download the jQuery Cycle plugin from here, and place it inside a directory called “scripts” in your root folder. Add the jQuery library and a reference to the plugin inside the head section of your HTML.
Then add the following code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:

You can choose to edit the plugin options by tweaking the above code. For the list of available options such as transition effects, timing and callbacks – refer to the jQuery Cycle docs.

Conclusion:

Now refresh your browser and you should see your background fade into the next image and to another. Like I said, this style can be quite refreshing – to vary your page from a million other websites out there with large image backgrounds. There is a bug in some browsers when re-sized, the image stays in the original size and doesn’t adjust on the fly. Maybe someone out there can improve through Javascript or CSS. Please leave a comment below.

The post Create Rotating (Full Paged) Background Images with CSS and jQuery appeared first on Michael Soriano.

Set up the Environment:

In order for our PHP scripts to run, you need to have a web server. A good example is XAMPP, which is free and can be downloaded from http://www.apachefriends.org/en/xampp.html. Create a root folder – name it anything, and inside it, create the following folders:

• Images – this is where the image of the gallery will go.
• Scripts – this is where our scripts will go

Download Timthumb script: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/. Timthumb is an image resizer script that is written in PHP. Save timthumb.php inside scripts.
Let’s create a new HMTL file inside the root, name it index.php. Add this line of code:

The above code creates 2 variables:

• $path – is the full image path of our images
• $files – is an array of filenames from a specified folder that we’ve scanned through the scandir() function

Then add the code below:

This loops through each item in the array $files – and assign it to another variable $file. For each one found, we’re printing a list item with an anchor and image tags. Within these tags you’ll notice the variables we’ve created earlier. The timthumb script is inserted at the beginning of the src attribute of our thumbnails. The width and the height parameters are hard coded in there as well. Note that we are going to randomize this section a little bit later.
Assuming that you already have photos in your image folder – fire up your web browser and navigate to index.php. You should have something like the screenshot below:

As you can see – we’re swiftly on our way. Our thumbnails are resizing right. Once clicked, the larger image appears. Though there are mysterious images that are returning empty (file name is shows as “.” and “..”). This may not be the case with yours – but with me, I just decided to fix this by wrapping our list items inside an ‘if – else’ statement:

Now we move on to the Fancy Box script:

Add Fancy Box

I almost always use jQuery for all my projects. It is one of the most versatile and powerful javascript libraries to date. Download the latest version from http://jquery.com/ and include it in your document.
Download the Fancybox files from http://fancybox.net/. Once again, include the script right under the jQuery one. Note that Fancy box comes with its own image folder and css file. You need to include that css as well:
Now let’s add a “rel” attribute to our anchor tag, with a value of “lightbox”. This makes it easier for our script to target which elements to add an effect on.
Finally, create a new script tag and add our line of code:

The above code states that when the document is ready – grab all the anchor tags with an attribute value of “lightbox” and hook it up with the fancybox function. I’ve chosen the effect ‘Elastic’ for the transitions – you can replace this with your own liking.
Now go back to the browser and hit F5 to refresh. Click on a thumbnail – you should see Fancy Box in action with smooth and eye popping animation added to your photo gallery.

Next up – some styling with CSS.

Pretty ‘er up.

Now it is always good practice to separate your formatting and markup. Create a new file named style.css, go back to index.php and link the stylesheet we just created.
In the last screenshot you notice that I marked the little buttons. That’s because of two things – if you’ve configured Fancybox correctly – those icons should be visible. The other thing is, I’ve created an icon that is very identical to those of Fancybox’s – and we’ll include in our thumbnails. Take a look at the couple of images below:

These images (available in the download) I’ve saved inside the root folder. In your style.css – add these lines of code:

The code above adds a nice texture to our gallery background. Next, it floats each item to the left – aligning them all side by side. Then it adds a nice white background to each image, along with proper paddings and margins:

Remember our custom script tag just above our closing head tag? – add, this line of code just in between the $(document).ready() function:

This will insert an empty span tag inside each of our list items (this is for the small magnifying glass icon). If you’re thinking – why not just add an inline span tag in our “for each” loop inside index.php – that’s an excellent question. This is because for users without javascript enabled – they won’t see this magnifying button.
Add these lines of code inside our style.css:

The above styles adds the subtle details that will make our thumbnails beautiful. This includes – of course our magnify.png, CSS3 box shadows (box-shadow) and rounded corners (border-radius).

Our gallery looks really good so far, but not good enough. Let’s add some embellishments.

Randomize the Images and Orientation:

Let’s make the thumbnail images be mixed orientation – some tall and some wide. Remember our thumbnail dimensions declared right after the timthumb script? All we need to do is switch the height and width values. So let’s create a PHP function. Append this code on top of index.php (right before the html tag):

The code above randomizes the two strings (‘&h=194&w=224‘ and ‘&h=224&w=194’). Then we call this function where our image tag is:


Now our thumbnails have different orientation each time we refresh. But as you can see, we need to fix the float – some thumbnails get stuck where portrait ends. We also need to fix the magnify icon positioning.
We need a way to tell what the current thumbnail orientation is, and somehow apply a class to that specific list item. This way we can fix the padding and margins accordingly. Add this line of code inside our “else” statement:

This grabs the current orientation and assigns it to a variable. Now, inside our li tag – paste this line of code:

This adds a class name of “tall” for each list item – if the $current_o variable equals to the portrait dimension. We also need to replace our image thumbnail script to this new code:

Refresh your browser and if we inspect our code – you should see list items with a class of “tall” for images that have 224 x 194 dimensions:

Also, add these lines of code to our style.css file:

The above code overrides the default styling for the list items.
Note that you also have to delete some previous styling for our list items (see the comments in the download). If you’re following this tutorial – I apologize for the replacements. As you see, I’m developing this as I go.
Lastly, add this code inside index.php:

This will randomize the images. So now we’ve fixed the list items, magnify icon – as well as randomized the images:

Final Touches:

So our gallery is so done. Except I like to add those final details that make it really good. Let’s add a pre-loader image. This is when you see a “loading” message for each thumbnail before they appear. To do this, we go back to jQuery. Inside our document ready event, add this line of code:

The above code delays our images just a tad bit – just enough to see a preloader image. Save your “loading.png” image in the root directory. In your styles.css, add these lines of code:

This just sets a background image to our list items. So next time you load the page – you should see our preloaders:

Finally, download the fancy box mousewheel.js pack inside your scripts folder and include it in your document. You should now be able to view next and previous images once you scroll your mouse wheel.

Conclusion:

Well now, I think our gallery is ready for prime time. The good thing about this is you never have to re-size a thumbnail again. All you need to do is add the large image inside the “images” folder and presto! Another good thing is that your gallery doesn’t look the same all the time. With our randomized order and orientation, the gallery looks fresh at each refresh. So go ahead and grab the download files. Play around with it – and maybe even improve the code. Be sure to include your comments below:

The post Create an Awesome Photo Gallery with FancyBox and TimThumb appeared first on Michael Soriano.

The Goal:

We will use clean markup. We’re trying to integrate this into exsting HTML – so we will be generating all extra classes and tags using Javascript. I imagine most web documents follow the same constant pattern: Heading tags, followed by some content which are a mixture of different DIVS, paragraphs, images etc. This goes on until the next heading tag – which is usually the same type as the first heading.
Look at the sample mark up below:

We will use the H5 tags as our “Clicker” – once clicked, will hide the contents right underneath it. Click it again, and it will show the contents again.

The Script:

We start by calling the jQuery library, followed by the document.ready() call:

We then loop through each of our particular heading tag (in this case, all of H5). Once it finds all of them, it checks to see if right next to it is another H5 tag; if it’s not, it adds a class of “clicker” to it and appends a span with a minus (-) sign in it:

If you investigate your code so far – you will see that only the H5 tags that have content OTHER than H5 tags have the class “clicker” and the span tag with a minus (-) sign in it:

Now let’s code the click events:

Now that we have our designated clickers, we create a couple of functions that toggle at every click.
The first action, hides the contents below “$(this)” – which is the tag you just clicked. Remember – we only want to hide the contents up until the next H5 tag. It also changes the content of the span into a plus (+) symbol.
The second action shows the contents below, and changes the span to a minus (-) symbol.

Optional Styling:

At this point you already have a functional accordion. If you’re applying the code to an existing page, you are already working with the current styles. Although, using CSS3 for say the plus (+) and minus (-) span looks pretty cool – which I’m sure you’d want to use.
Add this code to your styles:

Of course you have to replace the #wrap h5 with your own class / ids. This creates the css3 button you see in the demo. This code is courtesy of Zurb’s Super Awesome buttons with CSS3 and RGBA:

Conclusion

And that is it! You have yourself an accordion page powered by jQuery. Feel free to grab this code and improve it. Maybe refactor it into a more plugin like code – make it more reusable. Or even – fix the choppiness issue in the slideUp / slideDown animation in certain browsers. In any case, please leave a comment on what you think of this code.
You might also be interested in these articles regarding jQuery accordions:

• Simple Accordion w/ CSS and jQuery
• Exactly How to Create a Custom jQuery Accordion
• Grid Accordion with jQuery

The post Yet Another jQuery Accordion Tutorial appeared first on Michael Soriano.