Hi Nathan,
You developed an example of using JQuery to load content into a web page:
http://rd.radile.com/rdweb/SocialHope/index.html
I have two questions:
1. Does this example constitute a single page app (SPA)?
It certainly seems to have the workflow of an SPA. The user downloads one page (index.html), then the content of the page dynamically changes based on user activity. If this is an SPA, then it shows a very simple, responsive SPA requires little in the way of JavaScript libraries or frameworks.
2. Are there pitfalls to modifying the site layout based on the content being loaded into the page?
The site has a light blue box extending across the page containing the site theme (i.e., "Social hope is faith in the ability of human beings to care for each other"). I would like the site theme to show only on the home page. I would like it hidden on the other pages to give more scree real estate to the content of the page.
I'm thinking about using the following code:
function ht_html(s) {
$("#content").load(s);
$(".nav-button,.primary-nav").toggleClass("open");
if (s == 'home.html') {
$('#siteTheme').css("display","block");
} else {
$('#siteTheme').css("display","none");
}
}
Am I setting myself up for headaches or pitfalls later on by doing this--assuming it even works?
Thanks,
Kelly
-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Kelly Cookson
Sent: Tuesday, July 07, 2015 9:51 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] 7 lessons from my first responsive web site
Hi Nathan,
Interesting.
Fixing the position of the navigation at the top of the page eliminates the need for navigation links at the bottom of the page. That's something I'll keep in mind as a design strategy.
I have mixed feelings about fixing the position of the theme statement (i.e., the lighter blue bar with the text "Social hope is faith in the ability of human beings to care for each other.") Fixing the theme statement in place reduces the height of the main content area. To me, the main content area is functionally more important to the site than the theme statement. So, on the one hand, fixing the position of the theme statement helps preserve the visual consistency of layout, but, on the other hand, it reduces the real estate of the main content and thereby disrupts functional prioritization of the layout. I would probably try some options like loading the theme statement at the top of the main content (so it scrolls with the main content) or dropping the theme statement on all pages except the home page. However, I might not like these options once I see them.
I clearly see the maintenance benefits of loading the main content into a page. The web site header information, theme statement, navigation links, and footer information--basically everything except the main content--is in a single HTML file. If I want to make changes to this information, I can do it one time in one file. Conversely, the way my web site is currently set up, if I want to make changes to a navigation link, I have to make the change in multiple HTML files, one HTML file for each page of my web site.
Moreover, loading the main content into the page avoids the need for a page refresh when the user clicks a link. The web site header, theme statement, navigation and footer are loaded only one time when the user visits the web site. The only thing that changes is the content of the DOM element with the selector id #content (i.e., the main content of the page). This eliminates any white flicker while waiting for a page to load because there are no more page loads after the initial page load. It also reduces the amount of data that has to be downloaded while browsing the web site, making the site more efficient in terms of bandwidth and more cost-effective in terms of data charges for users.
Let me see if I understand the details correctly.
In the HTML file, you coded this in the anchor tag for the page on Care:
href="javascript:ht_html('care.html');"
The argument 'care.html' is the name of an HTML file that contains only the main content for the page on Care. The care.html file does not contain any of the header, navigation, or footer information. When the user clicks on this anchor tag, the JavaScript function ht_html is executed.
In the JS script, you coded the ht_html function:
ht_html(s) {
$("#content" ).load(s);
}
The "s" argument in ht_html(s) and load(s) is a variable that is replaced by the name of the file provided in the code javascript:ht_html('care.html').
So, when the user clicks the link for the page Care, JQuery grabs the care.html file and loads it into the DOM element with the id selector #content.
Is this basically correct?
Thanks,
Kelly
-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Nathan Andelin
Sent: Tuesday, July 07, 2015 1:25 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] 7 lessons from my first responsive web site
Hi Nathan,
By all means post a link. I would be interested in seeing what you did.
http://rd.radile.com/rdweb/SocialHope/index.html
I experimented (played) with the layout and styling; hopefully it's not messed up.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing list To post a message email: WEB400@xxxxxxxxxxxx To subscribe, unsubscribe, or change list options,
visit:
http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing list To post a message email: WEB400@xxxxxxxxxxxx To subscribe, unsubscribe, or change list options,
visit:
http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.
midrange.com
