Posts Tagged 'Dynamic'

February 15, 2013

Cedexis: SoftLayer "Master Model Builder"

Think of the many components of our cloud infrastrucutre as analogous to LEGO bricks. If our overarching vision is to help customers "Build the Future," then our products are "building blocks" that can be purposed and repurposed to create scalable, high-performance architecture. Like LEGO bricks, each of our components is compatible with every other component in our catalog, so our customers are essentially showing off their Master Model Builder skills as they incorporate unique combinations of infrastructure and API functionality into their own product offerings. Cedexis has proven to be one of those SoftLayer "Master Model Builders."

As you might remember from their Technology Partner Marketplace feature, Cedexis offers a content and application delivery system that helps users balance traffic based on availability, performance and cost. They've recently posted a blog about how they integrated the SoftLayer API into their system to detect an unresponsive server (disabled network interface), divert traffic at the DNS routing level and return it as soon as the server became available again (re-enabled the network interface) ... all through the automation of their Openmix service:

They've taken the building blocks of SoftLayer infrastructure and API connectivity to create a feature-rich platform that improves the uptime and performance for sites and applications using Openmix. Beyond the traffic shaping around unreachable servers, Cedexis also incorporated the ability to move traffic between servers based on the amount of bandwidth you have remaining in a given month or based on the response times it sees between servers in different data centers. You can even make load balancing decisions based on SoftLayer's server management data with Fusion — one of their newest products.

The tools and access Cedexis uses to power these Openmix features are available to all of our customers via the SoftLayer API, and if you've ever wondered how to combine our blocks into your environment in unique, dynamic and useful ways, Cedexis gives a perfect example. In the Product Development group, we love to see these kinds of implementations, so if you're using SoftLayer in an innovative way, don't keep it a secret!

-Bryce

August 8, 2012

No iFrames! Dynamically Resize Divs with jQuery.

It's no secret that iframes are one of the most hated methods of web page layouts in the web development world — they are horrible for SEO, user experience and (usually) design. I was recently charged with creating a page that needed functionality similar to what iframes would normally provide, and I thought I'd share the non-iframe way I went about completing that project.

Before I get into the nitty-gritty of the project, I should probably unpack a few of the reasons why iframes are shunned. When a search engine indexes a page with iframes, each iframe is accurately recorded as a separate page — iframes embed the content of one we page inside of another, so it makes sense. Because each of those "pages" is represented in a single layout, if a user wanted to bookmark your site, they'd probably have a frustrating experience when they try to return to your site, only to find that they are sent directly to the content in one of the frames instead of seeing the entire layout. Most often, I see when when someone has a navigation bar in one frame and the main content in the other ... The user will bookmark the content frame, and when they return to the site, they have no way to navigate the pages. So what's a developer to do?

The project I was tasked with required the ability to resize only certain sections of a page, while asynchronously shrinking another section so that the entire page would always stay the same size, with only the two sections inside changing size.

Let's look at an example with two divs, side by side on a web page:

iFrame Tutorial

One div will contain a navigation menu to jump to different pages of the website (#sidebar), and the second div will contain all the content for that page (#content). If some of the elements in #sidebar are too long to read with the default width of the div, we want to let the user freely resize the two divs without changing the width of the page.

Our task is straightforward: When #sidebar expands in width, also expand the navigation and shrink #content along with the main content inside #content. If #sidebar shrinks, the navigation, #content and main content would respond accordingly as well:

iFrame Tutorial

It's a relatively easy concept to do with iFrames ... But then you remember that iframes are no longer cool (yes, there was a time long ago when iframes were cool). I decided to turn to my favorite alternative — jQuery — and the fix was actually a lot easier than I expected, and it worked beautifully. Let's run through a step-by-step tutorial.

1. HTML

Lay out your two divs:

<div id="sidebar"> 
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>

2. CSS

Style your divs:

#sidebar {
       width: 49%;
}
#content {
width: 49%;
        float: left;
}

3. jQuery

Now that we have our two divs side by side, let's apply some jQuery magic. To do that, Let's include our jQuery files in the <HEAD> of our document:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Now that we have the necessary scripts, we can write our function:

<script type="text/javascript">
  $(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
            var setWidth = $("#sidebar").width();
            $('#content).width(1224-setWidth);
            $('.menu).width(setWidth-6);
        });
  });
</script>

I know that might seem like an intimidating amount of information, so let's break it down:

   $( "#sidebar" ).resizable({      
   });

This portion simply makes the div with the ID of "sidebar" resizable (which accomplishes 33% of what we want it to do).

   $("#sidebar ").bind("resize", function (event, ui) {

By using the .bind, we are able to trigger other events when #sidebar is called.

            var setWidth = $("#sidebar").width();
            $('#content).width(1224-setWidth);

This is where the magic happens. We're grabbing the current width of #sidebar and subtracting it from the width you want your site to be. This code is what keeps your page stays the same width with only the divs changing sizes.

            $('.menu).width(setWidth-6);

This part of the code that expands the contents in the navigation along with #sidebar.

You can see a working example of iframe-like functionality with jQuery here: http://jqueryui.com/demos/resizable/

The only part you won't find there is the trick to adjust a corresponding div's size to make it grow/shrink with the first ... I had a heck of a time searching that on the web, so hopefully this quick tutorial will help other developers who might be searching for this kind of functionality!

- Cassandra

August 3, 2011

CyberlinkASP: Tech Partner Spotlight

This is a guest blog from Chris Lantrip, CEO of CyberlinkASP, an application service provider focused on hosting, upgrading and managing the industry's best software.

The DesktopLayer from CyberlinkASP

Hosted virtual desktops – SoftLayer style.

In early 2006, we were introduced to SoftLayer. In 2007, they brought us StorageLayer, and in 2009, CloudLayer. Each of those solutions met a different kind of need in the Application Service Provider (ASP) world, and by integrating those platforms into our offering, DesktopLayer was born: The on-demand anytime, anywhere virtual desktop hosted on SoftLayer and powered by CyberlinkASP.

CyberlinkASP was originally established to instantly web-enable software applications that were not online in the past. Starting off as a Citrix integration firm in the early days, we were approached by multiple independent software vendors asking us to host, manage and deliver their applications from a centralized database platform to their users across multiple geographic locations. With the robust capabilities of Citrix, we were able to revolutionize application delivery and management for several ISV's.

Over time, more ISV's starting showing up at our doorstep, and application delivery was becoming a bigger and bigger piece of our business. Our ability to provision users on a specific platform in minutes, delete them in minutes, perform updates and maintain hundreds of customers and thousands of users all at one time from a centralized platform was very attractive.

Our users began asking us, "Is it possible to put our payroll app on this platform too?" "What about Exchange and Office?" They loved the convenience of not managing the DBs for individual applications, and they obviously wanted more. Instead of providing one-off solutions for individual applications, we built the DesktopLayer, a hosted environment for virtual desktops.

We deliver a seamless and integrated user experience utilizing SoftLayer, Citrix XenApp and XenDesktop. When our users log in they see the same screen, the same applications and the same performance they received on their local machine. The Citrix experience takes over the entire desktop, and the look and feel is indistinguishable. It's exactly what they are accustomed to.

Our services always include the Microsoft suite (Exchange, Office, Sharepoint) and is available on any device, from your PC to your Mac to your iPad. To meet the needs of our customers, we also integrate all 3rd party apps and non-Microsoft software into the virtual desktop – if our customers are using Peachtree or Quickbooks for accounting and Kronos for HR, they are all seamlessly published to the users who access them, and unavailable to those that do not.

We hang our hat on our unique ability to tie all of a company's applications into one centralized user experience and support it. Our Dallas-based call center is staffed with a team of knowledgeable engineers who are always ready to help troubleshoot and can add/delete and customize new users in minutes. We take care of everything ... When someone needs help setting up a printer or they bought a new scanner, they call our helpdesk and we take it from there. Users can call us directly for support and leave the in-house IT team to focus on other areas, not desktop management.

With the revolution of cloud computing, many enterprises are trending toward the eradication of physical infrastructure in their IT environments. Every day, we see more and more demand from IT managers who want us to assume the day-to-day management of their end user's entire desktop, and over the past few years, the application stack that we deliver to each of our end users has grown significantly.

As Citrix would say "the virtual desktop revolution is here." The days of having to literally touch hundreds of devices at users' workstations are over. Servers in the back closet are gone. End users have become much more unique and mobile ... They want the same access, performance and capabilities regardless of geography. That's what we provide. DesktopLayer, with instant computing resources available from SoftLayer, is the future.

I remember someone telling me in 2006 that it was time for the data center to "grow up". It has. We now have hundreds of SMB clients and thousands of virtual desktops in the field today, and we love having a chance to share a little about how we see the IT landscape evolving. Thanks to our friends at SoftLayer, we get to tell that story and boast a little about what we're up to!

- Chris M. Lantrip, Chief Executive, CyberlinkASP

This guest blog series highlights companies in SoftLayer's Technology Partners Marketplace.
These Partners have built their businesses on the SoftLayer Platform, and we're excited for them to tell their stories. New Partners will be added to the Marketplace each month, so stay tuned for many more come.
January 19, 2011

AJAX Without XML HTTP Requests

What is AJAX?

Asynchronous JavaScript and XML - AJAX - is what you use to create truly dynamic websites. Ajax is the bridge between application and presentation layers, facilitating lightning fast, instant application of data from the end user to the host and back to the end user. It dynamically changes the data displayed on the page without disrupting the end user or bogging down the client. Although the name is misleading, it is used as a term for any process that can change the content of a web page without unnecessarily reloading other parts of the page.

What are XML HTTP requests?

Passing information from your server to your end user's browser is handled over HTTP in the form of HTML. The browser then takes that info and formats it in a way the end user can view it easily. What if we want to change some of the data in the HTML without loading a whole new HTML document? That's where XML comes in. Your web page needs to tell the browser to ask for the XML from the server; luckily, all browsers have a function called XmlHttpRequest(). Once it's called, it will poll the server for XML data.

Why shouldn't you use XML HTTP requests?

A long time ago, in a galaxy far, far away, Microsoft invented the XmlHttpRequest() object for Microsoft Exchange Server 2000. As with all first generation technologies, everyone wanted to use it, and some people implemented it differently. IE didn't even have native support until 2006, and there are still some discrepancies in various browsers when studying the OnReadyStateChange event listener. There is also an issue with cross-domain requests. When the internet was young, JavaScript hackers would steal users' identity by pulling information from secure websites and posting it to their own, stealing bank account numbers, credit cards, etc. Now that the internet has grown up a bit, people with large networks and many servers have found use for sending data across domains, but it's still not possible with XML HTTP requests.

What's an Alternative?

Using JavaScript, you can create client side scripts whose source is built with server side scripts, passing variables in the URL. Here's an example of a basic web page with local JavaScript, a few checkboxes for human interaction, and a table with some information that we want to change. View source on the page below to see the outline.


Looking at the three JavaScript functions, the first (clearTags) automatically clears out the checkboxes on load, the second (check(box)) makes sure that only one box is checked at a time, the third (createScript) is the interesting one; it uses the createElement() function to create an external JavaScript, the source of which is written in PHP. I have provided a sample script below to explain what I mean. First, we get the variable from the URL using the $_GET super global. Then, we process the variable with a switch, but you might use this opportunity to grab info from a database or other program. Finally, we print code which the browser will translate to JavaScript and execute.

<code>&lt;?PHP
//First we get the variable from the URL
$foo=$_GET['foo'];
//Here's the switch to process the variable
switch ($foo){
case 'foo' : print "var E=document.getElementById('data'); E.innerHTML='bar'; "; break;
case 'fooo' : print "var E=document.getElementById('data'); E.innerHTML='barr'; "; break;
case 'ffoo' : print "var E=document.getElementById('data'); E.innerHTML='baar'; "; break;
case 'ffooo' : print "var E=document.getElementById('data'); E.innerHTML='baarr'; "; break;
default : print "var E=document.getElementById('data');
E.innerHTML='unknown'; ";
}
?&gt;
</code>

-Kevin

Subscribe to dynamic