Gregory's Blog

JSON Parse Error in jQuery when using a Coldfusion function inside a .cfm page.

Late at night, I put a function inside a .cfm template and tried to consume it from Ajax, but I received a json parse error that was displayed in Chrome's console when trying to invoke a function within a .cfm page. I had forgot that ajax functions should not be consuming a .cfm page, and placed the exact same function within a component with a .cfc extension, and the issue went away. When a function is within a component with the access remote argument, ColdFusion will autogenerate a web services stub, but it does not do this within a .cfm page. If you receive a json parse error using logic that is known to create a valid json object within a .cfm page, try putting the same code in a .cfc component and consume it there. It may solve this parse error for you as well. The code below has a 'proxyControllerUrl' variable that was initially using a template with a .cfm extension, and it failed. However, when I put the same function within a .cfc extension, it worked.

view plain about
1function getAllThemeSettingsFromIniStore(themeId){
2
3    // Get all of the theme properties stored in the ini configuration file.
4    $.ajax({
5        type: "get",
6        url: "<cfoutput>#application.proxyControllerUrl#?</cfoutput>method=getAllThemeSettingsFromIniStore",//Works with a .cfc component, fails when the method is inside a .cfm template.
7        data: { // method and the arguments
8            themeId: themeId
9        },
10        dataType: "json",
11        cache: false,
12        success: function (data){
13            // Pass the data to the getAllThemeSettingsResult function.
14            getAllThemeSettingsResult(data);
15        },
16        error: function(xhr, textStatus, error){
17            console.log(xhr.statusText);//Parse error shows up here when inside a .cfm template.
18            console.log(textStatus);
19            console.log(error);
20        }
21    });
22}//... function

This entry was posted on May 18, 2019 at 2:26 AM and has received 184 views.

Set active kendo tab

There are two standard ways to activate a Kendo tab: 1) via Javascript, or 2) appending the k-state-active class to the HTML list. Both approaches are useful. However, I have had troubles using a javascript function to set the active tab when I had a button open up a new Kendo window, and then set the active tab based upon the URL variable that I sent along when opening up the Kendo window. For some odd reason, when I used the javascript method it would not process the scripts in the second tab. I could not figure out how, or even why, this method failed, but appending the k-state-active class to set the to tab worked just fine. I will share both options below.

Option 1, use javascript and the select(tabIndex) method:

view plain about
1// Set the active tab if it was passed into the URL.
2var tabName = <cfoutput>'#URL.tabName#'</cfoutput>
3// Set the active tab if the tab argument is not a null string
4if (tabName !=''){
5    // Set the tab
6    setContractDetailTab(tabName);
7}
8    
9// function to select the appropriate detail tab.
10function setContractDetailTab(tabName){
11        
12    if (tabName == 'contractDetail'){
13        // Get the index. We are starting at 0, so the first tab will have a zero index.
14            var tabIndex = 0;
15        } else if (tabName == 'routing'){
16            var tabIndex = 1;
17        } else if (tabName == 'attachment'){
18            var tabIndex = 2;
19        }
20        
21        // Don't perform any actions until the dom is loaded.
22        $(document).ready(function() {
23            // Get a reference to the tab.
24            var detailTabSrip = $("#detailTabSrip").kendoTabStrip().data("kendoTabStrip");
25            // Select the tab. Make sure to use a timeout otherwise an error will occur and the kendo dropdowns will not be instantiated.
26            setTimeout(function() {
27                detailTabSrip.select(tabIndex);
28            }, 500);
29            
30        });    //document.ready
31    }
32}

Option 2) use the k-state-active Kendo class to select the active tab:

view plain about
1<div id="detailTabSrip" style="height:925px">
2 <!--- Tab names. --->
3 <ul>
4 <li id="contractDetail" <cfif not isDefined("URL.tabName") or URL.tabName eq "">class="k-state-active"</cfif>>
5     <p>Contract Detail</p>
6 </li>
7 <li id="routing" <cfif isDefined("URL.tabName") and URL.tabName eq 'routing'>class="k-state-active"</cfif>>
8     <p>Routing</p>
9 </li>
10 <li id="attachment" <cfif isDefined("URL.tabName") and URL.tabName eq 'attachment'>class="k-state-active"</cfif>
11 <p>Attachment</p>
12 </li>
13 </ul>

This entry was posted on May 9, 2019 at 2:55 PM and has received 162 views.

How to get both background and non-background images using the imagesLoaded library.

I use the imagesLoaded javascript library to determine when and what images are loaded and to provide a status on a pre-loader status screen. The imagesLoaded library has the ability to gather information on background images, and non-background images using the 'background: true/false' argument. If you need to get both background and non-background images, just run it twice switching the background arguments. I highly recommend using this library when you want to provide a 'please wait' dialog and show the load progress of a graphically intense site.

view plain about
1// Get the parallax images (non-background images).
2$('.images').imagesLoaded({
3    background: false
4}).progress( function( instance, image ) {
5    loadProgress();
6});
7
8// Get the background images in the scenes.
9$('.bcg').imagesLoaded({
10    background: true
11}).progress( function( instance, image ) {
12    loadProgress();
13});

This entry was posted on May 8, 2019 at 11:35 PM and has received 192 views.

Kendo tooltips with multiple classes and styles.

I had thought that I figured out how to use the Kendo tooltip widget as illustrated in another post, however, I quickly found out that by over-riding the k-tooltip Kendo base class that I could only have one tooltip style for the whole page. Unlike most other Kendo widgets, you can't specify a unique css rule with #divName .k-tooltip { rules... }. As soon as I put in the element name in front of .k-tooltip, everything broke. I thought that I must have made a silly mistake, and tried everything, including the element name after the .k-tooltip class, trying to put in the parent element name, trying to create new custom classes, and appending the class to .k-tooltip, etc, but nothing worked. Time to search the web with google.

Apparently, Telerik's tooltip design prevents this type of chaining. You can't manually add a class to the tooltip. Instead, we have to use jQuery's addClass to add a class in a function. This particular approach has some issues when the first tooltip is raised (the cutout does not immediately point to the element, and the correct background color may not immediately appear), but otherwise, it works for the most part. I am finally able to have multiple Kendo tooltip styles. Here is my approach. There are a few ColdFusion tags in the example, but the code and comments should be illustrative. A working example of this code is found on my home site at gregoryalexander.com/

HTML

view plain about
1<!--- Tooltip on the left side of the page. --->
2<div id="aboutThisImage">
3    <span id="leftTooltip" title="Jenny Lake, Grand Teton National Park." data-desc="This is a majestic trail. But pay attention.... you may come face to face with a Grizzly bear..." class="leftTooltip">
4        <img src="/images/symbol/aboutGreen.gif" align="center" />
5    </span>
6</div><!---<div id="aboutThisImage">--->
7
8<!--- Tooltip on the right side of the page. --->
9<div id="imageLocation">
10    <!--- Don't show the tooltip on mobile devices. --->
11    <cfif not session.isMobile><span title="Click to view an interactive map." data-desc="Click on this button to view an interactive map of the Jenny Lake trail." class="rightTooltip"></cfif>
12        <img src="/images/symbol/mapMarkerButton.gif" align="left" onClick="openMapWindow(0)"/>
13    <cfif not session.isMobile></span></cfif>
14</div><!---<div id="imageLocation">--->

CSS:

view plain about
1/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
2.leftTooltipStyle {
3    background: #046FA1 !important; /* Blue matching the left part of the logo */
4    width: var(--toolTipWidth);
5    height: var(--toolTipHeight);
6    font-size: var(--toolTipFontSize);
7    border-radius: 10px;
8    /* Subtle drop shadow on the main layer */
9    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
10}
11        
12/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
13.rightTooltipStyle {
14    background: #698A50 !important; /* Green matching the right part of the logo */
15    width: var(--toolTipWidth);
16    height: var(--toolTipHeight);
17    font-size: var(--toolTipFontSize);
18    border-radius: 10px;
19    /* Subtle drop shadow on the main layer */
20    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
21}
22        
23.tooltipTemplateWrapper h3 {
24    font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
25    font-weight: bold;
26    padding: 0px 10px 5px;
27    border-bottom: 1px solid #e2e2e2;
28    text-align: left;
29}
30
31.tooltipTemplateWrapper p {
32    font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
33    padding-top: 0px;
34    padding-right: 10px;
35    padding-bottom: 10px;
36    padding-left: 10px;
37    text-align: left;
38}

And finally, the javascript:

view plain about
1var leftTooltipIntro = $("#intro").kendoTooltip({
2    // A class can also be used to trigger the popup.
3    filter: ".leftTooltip",
4    position: "right",
5    // Note: we need to use a template as we have created a popup matching the blue notification popups on the right side of the page.
6    content: kendo.template($("#aboutTemplate").html()),
7    show: function(e) {
8        // We also need to override the k-tooltip style with our own class. Otherwise, all of the other tooltips will have the same style. We are differentiating the look of both the right and left tooltip.
9        this.popup.element.addClass("leftTooltipStyle");
10    },
11    // Add animation effects.
12    animation: {
13        open: {
14            effects: "zoom",
15            duration: 150
16        }
17    }
18}).data("kendoTooltip");
19                
20var rightTooltipIntro = $("#intro").kendoTooltip({
21    // A class can also be used to trigger the popup. We can have as many classes as we want separated by comma's.
22    filter: ".rightTooltip",
23    position: "left",
24    // Note: we need to use a template as we have created a popup matching the blue notification popups on the right side of the page.
25    content: kendo.template($("#locationTemplate").html()),
26    show: function(e) {
27        // We also need to override the k-tooltip style with our own class. Otherwise, all of the other tooltips will have the same style. We are differentiating the look of both the right and left tooltip.
28        this.popup.element.addClass("rightTooltipStyle");
29    },
30    // Add animation effects.
31    animation: {
32        open: {
33            effects: "zoom",
34            duration: 150
35        }
36    }
37}).data("kendoTooltip");

This entry was posted on May 8, 2019 at 9:10 PM and has received 228 views.

Kendo template with void to consume a function in an anchor link

I have a Kendo template that is used to display real time statuses for contracts, and programmed an a href tag that was intended to consume a javascript function rather than opening up a link. On my first attempt, I was having problems as I could not program a pound symbol into the Kendo template (like ColdFusion, a pound symbol indicates a variable within a Kendo template), so I escaped it using two pounds, and found myself struggling to figure out why my window was suddenly being refreshed. I spent around ten minutes stepping through my code only to find out that the a href tag refreshing the entire page, even though it was blank as the double pound sign was escaped. On further introspection, this is understandable as I just had inadvertently programmed a typical link. To fix this issue, I used a simple javascript:void(0); within the link, and the javascript function is called without the default a href tag opening up the link. Essentially, the void(0) code prevents the default behavior of the link, and it acts like a a href="#". I would not typically use void in other code, but using it within a Kendo MVVM template is an appropriate place. Here is the code:

view plain about
1<script type="text/x-kendo-template" id="myApprovalTemplate">
2    /* Note: dynamic vars can be displayed like so: #: myApprovalDs.total() # */
3     /* Alternate row colors. */
4    # if(window.altRow) { #
5        <tr class='k-alt'>
6    # } else { #
7        <tr class='k-content'>
8         # } #
9 # if(ApprovalId >
0){ #
10     <td class="border">
11     <input type="checkbox" name="approved#: ApprovalId #" id="approved#: ApprovalId #" value="1" /></td>
12     <td class="border">#: ApproverTitle #</td>
13     <td class="border"><a href="javascript:void(0);" onClick="openContractDetailWindow(#: ContractId #, #: ApprovalId #, '')">#: Contract #</a></td>
14     <td class="border">#: Contractor #</td>
15     <td class="border">pdf</td>
16     <td class="border"></td>
17 #} else {#
18     <td colspan="6"<!--- class="k-loading-image k-loading-color" --->>
19     <br/>There are no contracts eligible for you to approve
20     </td>
21 #}#
22     </tr>
23 <!--- Toggle the window variable. --->
24 # window.altRow = !window.altRow; #
25 </script>

This entry was posted on April 24, 2019 at 7:51 PM and has received 184 views.

Reopen an existing Kendo window.

I have been coding thousands of Kendo windows throughout the last several years, and ran into a problem that I have never seen before, and could not find a solution (or even a hit) on google. While coding a window that will hold a Kendo map, I ran into the following error when I opened the window, closed it, and then tried to open it again: Cannot call method 'destroy' of kendoWindow before it is initialized. This error is just not found.

Type in "Cannot call method 'destroy' of kendoWindow before it is initialized" into google, you won't find a single result. You'll find many other topics, but not one that matches this particular error message. Here is a solution on how I overcame this error, and why I think that it may have happened in the first place.

My personal website uses a Greensock animation carriage. It is my guess that the errors are due to having a lot of subtle animations there, and it is resource intensive as it has extensive scroll and touch listeners. Along with the Kendo map widget, the site is very resource intensive on the client end. This is probably freezing the destroy methods that are used to typically close a Kendo window. Whatever the actual reason, when I try to destroy the window that contains the map, as I usually do, I run into multiple errors and the window will not open again.

My approach was to build a function that would check if the window was previously opened, and then closed, to simply re-open it and then refresh the content (it has dynamic content).

If the window was not already created (by someone opening it), then I would create the window, as usual, but I eliminated Kendo's destroy method when the window is closed. I don't want to destroy it- in fact- I can't. It causes errors.

If the window was opened, and closed (making the window hidden since it does not have the destroy method), I would re-open the existing window. Here is the code:

view plain about
1function openMapWindow() {
2            
3    $( document ).ready(function() {
4                
5    /* This is a totally weird approach to open a kendo window. I have coded kendo windows for several years, and have probably coded several hundred windows, but using a Kendo window in this greensock platform, especially with Kendo maps, just does not work. Here, I am testing to see if the window is:
6    1) defined (the first mapWindow line of code will error out if the window has not already been opened)
7    2) and if the window is defined, is it hidden (it will be- I am not destroying the window like I always do in other code as I have problems with that here.)
8    If both conditions ARE true, then I merely reopen the existing window that was hidden when the user clicked on the 'x' at the top of the window.
9    If both conditions are NOT true, then I create the window as usual (but I don't destroy it as usual as I had problems there too).
10    Essentially what I am doing is:
11        - Creating the window if the window was not first opened and then closed.
12        - Or reopening the window if it was opened and then closed.
13    */

14    // This must be put into a try block as the 'var mapWindow =         $("#mapWindow").data("kendoWindow");' will cause errors if the window has not already bee already opened.
15    try {
16        // Get a reference to the opened window.
17        var mapWindow = $("#mapWindow").data("kendoWindow");
18        // Determine if the window was closed...
19        var mapWindowIsHidden = mapWindow.element.is(":hidden"); //returns true or false
20        // If the window was closed (and now hidden), re-open the existing window.
21        if (mapWindowIsHidden){
22            // Change the title
23            mapWindow.title(getMapDataByScene(sceneIndex));
24            // Open it.
25            mapWindow.open();
26            // And refresh the window.
27            mapWindow.bind("refresh", window_refresh);
28                    }
29        // Otherwise create the window (for the first time)...
30        } catch(e) {
31                    
32            // Initialize the window.
33            var mapWindow = $('#mapWindow').kendoWindow({
34            title: getMapDataByScene(sceneIndex),
35            actions: ["Refresh", <cfif not session.isMobile>"Minimize", </cfif>"Close"],
36            modal: false,
37            resizable: true,
38            draggable: true,
39            pinned: true, // Note: we must pin this window, or it will open at the top of the page at all times when we use this approach.
40            position: { top: 100 },
41            width: getGrizzlyWindowWidth(),
42            height: getGrizzlyWindowHeight(),
43            iframe: false, // Don't use iframes unless it is content derived outside of your own site.
44            content: "/includes/layers/map.cfm?sceneIndex=" + sceneIndex,// Make sure to create an absolute path here. I had problems with a cached page.
45        <cfif session.isMobile>
46            animation: {
47                close: {
48                effects: "slideIn:right",
49                reverse: true,
50                duration: 500
51            }
52        }
53    </cfif>
54    }).data('kendoWindow').center();// Center the window.
55                                
56    }//..try
57});
58            
59}//..function openMapWindow() {

Additionally, if you don't need a dynamic window where the content changes, you can simply use the following simple approach:

view plain about
1// Dynamic window for the approval routing picker.
2    // This window also has an id variable.
3    // Original inspiration provided by Ona Bai (http://dojo.telerik.com/@OnaBai/ekIba/2).
4    // To use, first create a div at the top of the page like so: <div id="dynamicDetailWindow"></div>
5    function dynamicRoutingPickerWindow(id, id2, name, width, height) {
6        var thisWin = $("#" + name).data("kendoWindow");
7        if (thisWin) {
8            thisWin.open();
9        } else {
10            thisWin = $("<div id='" + name + "'></div>").kendoWindow({
11            actions: ["Minimize", "Maximize", "Refresh", "Close"],
12            title: "Contract Details",
13            content: "includes/routingPicker.cfm?contractId=" + id,
14            width: width,
15            height: height,
16            modal: false,
17            resizable: true,
18            draggable: true,
19            // Open the window near the top of the page.
20            position:{
21                top:"15%",
22            },
23            appendTo: "#dynamicRoutingPickerWindow",
24            visible: true
25            }).data("kendoWindow").center();
26        }
27 }

This entry was posted on April 19, 2019 at 12:15 AM and has received 378 views.

Kendo scrollview

I have been using the scroll view on my home site at gregoryalexander.com quite a bit, and wanted to pass along a few tips.

If you want to change the button size on the scroll view, use the following css. The default font-size is around 2em, to make the right and left arrows bigger, use anywhere from 6-8em, and 1em to make the arrows a bit smaller.

view plain about
1#nameOfScrollViewDiv .k-scrollview-next span, .k-scrollview-prev span {
2    font-size: 8em;
3}

To use the scrollview to display a lot of text, I used the following approach.

First, we need to use data-role='page' and create a 'white-space:normal' style for every element in order to allow for the text to wrap properly instead of going off of the scrollview page:

view plain about
1<div id="developmentScrollView" class="blueGradient">
2    <!-- This is used for every page -->
3    <div class="getConnected" data-role="page" style="white-space:normal;">
4</div>

To constrain the text and allow the arrows to be seen visibility on the right and left, I created a css class for the div that contains the actual scrollview, and wrapper classes that constrain the text information in the proper spot.

The class for the scrollview div (the outer class in this case):

view plain about
1/* Scroll view outer containers within the content blocks. */
2#developmentScrollView {
3    /* Text color */
4    color: rgba(255, 255, 255, 0.9);
5    height: var(--scrollViewHeight);
6    width: var(--scrollViewWidth); /* Don't use dynamic css vars set when the page loads. It screws stuff up. */
7    margin: auto;    
8    z-index: 2; /* This needs to be higher than the nav blocks */
9}

And the three wrapper classes: the first class (firstScrollviewWrapper) is used on the first slide, and the second class (scrollviewWrapper) controls all of the slides after the first and last slide, and the last class (lastScrollviewWrapper) is used for the very last slide. These are used to keep the text separated from the arrows in order to make the arrows more visible.

view plain about
1.firstScrollviewWrapper {
2    position: relative;
3    display: table;
4    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
5    right: 10%;
6    margin: auto;
7    width: 80%; /* the width of the scroll view container. */
8    text-align: left;
9    font-family: var(--scrollViewFont);
10    font-size: var(--scrollViewFontSize);
11}
12
13.scrollviewWrapper {
14    position: relative;
15    display: table;
16    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
17    right: 10%;
18    margin: auto;
19    width: 80%; /* the width of the scroll view container. */
20    text-align: left;
21    font-family: var(--scrollViewFont);
22    font-size: var(--scrollViewFontSize);
23}
24
25.lastScrollviewWrapper {
26    position: relative;
27    display: table;
28    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
29    right: 0%; /* The last slide does not have a right arrow that we need to leave room for. */
30    margin: auto;
31    width: 80%; /* the width of the scroll view container. */
32    text-align: left;
33    font-family: var(--scrollViewFont);
34    font-size: var(--scrollViewFontSize);
35}

A demonstration of my approach can be seen on my www.gregoryalexander.com/index.cfm home page.

Note: I am using css variables for the font family and font size.

This entry was posted on April 16, 2019 at 7:57 PM and has received 165 views.

How to add additional descriptive elements to an element with 'data-'

While coding logic for a Kendo tooltip, I had to send both the anchor's title and other information that the Kendo tooltip would display. I wanted to display the location where the image was taken, and a description of the image like this:

"Grand Prismatic Spring, Yellowstone National Park.

The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?"

I wanted both elements to be separated with a horizontal rule, and I needed to isolate the location and the description. However, the anchor tag only has a 'title' and an alt tag to store this information.

If you want to store additional information in an element does not support, you can easily use the 'data-' + name prefix like so:

view plain about
1<span title="Grand Prismatic Spring, Yellowstone National Park." data-desc="The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?">

To get the information that the data element contains, in this case, a Kendo template, use the data- prefix. You can name the prefix anything you want, and within the javascript template, don't need to specify the actual data tag- just leave it blank but name the variable after the 'data-' element (see '#=target.data('desc')#: below).

view plain about
1<!--- Kendo tooltip template--->
2<script id="aboutTemplate" type="text/x-kendo-template">
3    <div class="template-wrapper">
4        <h3> #=target.data('title')# </h3>
5        <p>#=target.data('desc')#</p>
6    </div>
7</script>

This is a neat way to store additional data into HTML elements, such as a span tag, or any other element as well.

This entry was posted on March 29, 2019 at 2:16 PM and has received 161 views.

Kendo Server Side Validation

This post describes how to use Kendo's validator for server side validation. There are very few posts showing how to use Kendo's validator with server side validation (none of them are really clear), it took me a bit of time to figure it out, and want to share my approach and will provide extensive comments.

One of the reasons that there are very few posts concerning server side validation with the Kendo validator is that it is not really built to do this. Unlike the majority of the other Kendo widgets which allow for customization, the validator was meant for simple validation. The built in validation is quite useful for simple client side validation, but it is not an extensive validation library and anytime that you need to extend it you will find yourself wanting more. I felt like I was trying to hammer a square peg into a circle while coding this. However, since one of the main goals of this blog is to share how ColdFusion can use the Kendo UI, I felt the need to dig into the kendo validator.

I have a captcha form on this blog that is used to verify that the user is an actual user, and it encrypts a token and passes it off to the server side for validation. You can see this in action by making a comment on this post below.

The meat and potatoes of this function, like most of the other Kendo widgets, lies in the Javascript. This script is heavily commented. Click the more button below to inspect the script.

This entry was posted on March 1, 2019 at 5:34 PM and has received 263 views.

Responsive Web Design

I am spending quite a bit of time making the new blog responsive. My goal is to make the mobile site fully functional and to make it look as nice as the application on the web. I ran into some major hurdles.

For example, the original code formatter, developed by Jason Delmore, expanded beyond the mobile device size. I re-wrote quite a bit of the logic in the formatter, but I did not want to re-write the core logic that provides the formatted code and lines. I had wanted to re-write every inner div and span that used position: absolute underneath the constraining parent div that had position, relative, but gave up as there were so many div's and spans. There is so much logic in the formatter that I gave up thinking about making the code responsive and instead I constrained the content like so:

CSS:

view plain about
1/* The constrainer table will constrain one or many different div's and spans to a certain size. It is handy to use when you are trying to contain the size of elements created by an older libary that does not use responsive design. */
2#constrainerTable {
3    /* The parent element (this table) should be positioned relatively. */
4    position: relative;
5    /* Use the root width var */
6    width: var(--contentWidth);
7    /* Now that the parent element has a width setting, make sure that the width does not ever exceed this */
8    max-width: 100%;
9}    
10        
11/* Helper function to the constrainerTable to break the text when it exceeds the table dimensions */
12#constrainerTable .constrainContent {
13    max-width: 100%
14}
15th {
16    max-width: var(--contentWidth);
17}
18td {
19    word-break: break-word;
20    min-width: 50px;
21}

And the HTML:

view plain about
1<!-- Post content -->
2<!--- Note: Delmore's code formatter is not mobile friendly and it does not use responsive design. This table will constrain the content to a certain variable size. --->
3<table id="constrainerTable" class="constrainContent">
4    <tr>
5        <td>
6            <!--- Blog post. --->
7            #application.blog.renderEntry(body,false,enclosure)#                
8        </td>
9    </tr>
10</table>

Fixed background image settings for mobile devices: To use a fixed background, the main arguments here are display: block, position: fixed, z-index:-10

view plain about
1body:before {
2    content: "";
3    display: block;
4    position: fixed;
5    left: 0;
6    top: 0;
7    width: 100%;
8    height: 100%;
9    z-index: -10;
10    background: url(<cfoutput>#blogBackgroundImage#</cfoutput>) no-repeat center center;
11    -webkit-background-size: cover;
12    -moz-background-size: cover;
13    -o-background-size: cover;
14    background-size: cover;
15}

Opacity settings for mobile devices: The web application has a nice opacity effect where the theme's background image bleeds through into the interface. To accomplish the same effect for iOs devices, I used: opacity: .92 and visibility: true.

view plain about
1/* Opacity for iOs */
2opacity: 0.<cfoutput>#siteOpacity#</cfoutput>;
3visibility: visible;

This entry was posted on February 12, 2019 at 4:01 PM and has received 175 views.




Footer Logo

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Galaxie Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Galaxie Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Galaxie Blog Version 1.50 November 22 2019