Responsive Design

Increase of portable device usage requiring dynamic design changes for static site. Currently I have faced some issue with such concept. My requirement was to display a table on a page and make it look dynamic.

Here are some methods that I used to do it.

1) Using pure CSS :

You need to use media queries to make content dynamic. here is my code sample:

// for device Apple iPhone 5 or less, Samsung Galaxy S3 mini or less and Microsoft Lumia phones

@media (max-width: 320px) {

#docsTable{ 

max-width:320px;

}

}

// for device Apple iPhone 6,LG G3,LG Optimus G,Samsung Galaxy Note 2,Samsung Galaxy S3- S5,Samsung Galaxy Nexus

@media (max-width: 480px) {

#docsTable{ 

max-width:480px;

}

}

//for Apple iPad series

@media (max-width: 768px) {

#docsTable{ 

max-width:768px;

}

}

For other device width information  click here. 

But the problem occurs when the device has slightly smaller or larger width. It displays scroll which is not user friendly. Here is a way to handle such thing:

2) using Javascript

In this method we calculate the width by device's width and add width css to control at display time.

<script type="text/javascript">

$(document).ready(function() {

    // run test on initial page load

    checkSize();

    // run test on resize of the window in browser. Also need for screen rotation.

    $(window).resize(checkSize);

});

//Function to the css rule

function checkSize(){

    if(window.innerWidth < 768)

{

var thisObject = $("#docsTable");

var actualWidth = window.innerWidth - 50;

thisObject.css("max-width",actualWidth+"px");

}

});

}

</script>

Display Other site collection List data in current site collection using Client object modal.

A very bad dream in SharePoint 2013 is to "Display Other site collection List data in current site collection" as SharePoint Designer 2013 has deprecated data view web part and content search web part does not give look and feel as we wanted. It might be simple but I will update my self and this blog if I get success in near future with it.

Here is the sample code to display data from other site collection:

1) You need to add a web part page.  Add a "Content Editor Web part " in this page. In this paste below code with your changes.

<div>
   <!-- Table -->
  <table id="docsTable">
    <thead>
    <tr>
<th>ID</th>
<th>Title</th>
<th>Modified</th>
</tr>
</thead>
  </table>
</div>


<script language="javascript" type="text/javascript">
$(document).ready()
{
var folderUrl = document.getElementById('folderpath').value;
var url =document.getElementById('sitepath').value +"/_api/Web/GetFolderByServerRelativeUrl('" + folderUrl + "')?$expand=Folders,Files";


 // Get Folders and Files in single call. You can try using ajax call too. I have tried it but I was forced to call method multiple time.

$.getJSON(url,function(data,status,xhr){

 // Get Folders

    for(var i = 0; i < data.Folders.length;i++){      
        $('<tr>').append(
        $('<td>').html("data.Folders[i].ID"), // Append ID
        $('<td>').html("<a href='"+data.Folders[i].ServerRelativeUrl+"' target='_blank'>"+data.Folders[i].Name+"</a>"), // Apend Name. Click redirect to specific Item
        $('<td>').text(data.Folders[i].TimeLastModified.substring(0, 10))).appendTo('#docsTable'); //Append modified date.
    }

 // Get Files

    for(var i = 0; i < data.Files.length;i++){      
        $('<tr>').append(
        $('<td>').html("data.Files[i].ID"),  // Append ID
        $('<td>').html("<a href='"+data.Files[i].ServerRelativeUrl+"' target='_blank'>"+data.Files[i].Name+"</a>"), // Apend Name. Click redirect to specific Item
        $('<td>').text(data.Files[i].TimeLastModified.substring(0, 10))).appendTo('#docsTable');//Append modified date.
    }
})

}

This is a sample code. You can Add some more functionality like paging, sorting or can change fields as per your need.

JavaScript check if file exist at URL or not.

I was trying simple things lately with client side object modal. Here is one of the main issue I have face

"How to check if image / file exist at given path?"

I have tried using .done,.fail,.success,.complete and many more tricks that I could use. Even I tried Try.. Catch .. finally. But the real issue was if file does not exist at URL it will give exception 404. But not throw it so it won't be cached. Finally I came across a method shown below which gives me 404 error but will return result.

Answer: 

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send(); // Here it will generate 404
   
    if (xhr.status == "404") {
        return false;
    } else {
        return true;
    }
}

Calling :

if (doesFileExist(filePath)) {

            // yay, file exists!

        } else {

   // oops, file not exist!

}