-
AuthorPosts
-
mpurcell Friend
mpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
March 11, 2014 at 3:12 am #195672I’m using Joomla 3.2.2, T3 Framework 2.1.2 and t3_bs3_blank template.
My project has four main blocks, header, mainnav, mainbody, and footer. I’ve combined the header and mainnav into a div which is fixed in position to make it sticky at the top of the page, and the other two blocks into another div which will scroll. Here’s the code from my default-p.php:
[PHP]<body><div>
<div class=”fixed-top”>
<?php $this->loadBlock(‘header-p’) ?>
<?php $this->loadBlock(‘mainnav-p’) ?>
</div>
<div class=”scrolling-body”>
<?php $this->loadBlock(‘mainbody-p’) ?>
<?php $this->loadBlock(‘footer-p’) ?>
</div>
</div>
</body>[/PHP]
and here are the classes I added to style.less:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}.scrolling-body {
position: relative;
top: 150px; //approx. height of header and mainnav combined
}The problem is that on my phone, when the display switches from vertical to horizontal, or horizontal to vertical, the div containing the header and mainnav do not resize as the individual blocks do when they are not contained in a div. I tried adding clearfix to see if that would solve the issue, but it does not. So far, I have been unable to track down the code I would need to modify. I do like the effect, but if I can’t solve the issue, it will be a show stopper. The second div containing the main body and footer does resize as it should. I assume the same issue would be present on a tablet, but I don’t have one to test with.
My second problem is extra space around module positions in phone and tablet views, and extra space at the bottom of the footer. In desktop and wide desktop views, the layout is two-sidebar with content in the middle. In this view, the spacing between the main body and the footer is normal. in phone and tablet views, the layout is a single column with the two sidebar modules stacked below the main content. (See my previous post.) In this view, there is a bit too much space between the main content and sidebar 1, and a very large amount of extra space between sidebars 1 & 2, and between sidebar 2 and the footer. Also, there is extra space at the bottom of the footer, making it approximately twice as tall as it needs to be.
edit: I’ve solved the spacing issues, as highlighted above. I’m still stumped by the refresh issue, and would appreciate some help with it. The issue is related to the fixed position property, because when I change the class declaration of the fixed-top div to Position:relative, the block resizes to fit the window when the phone display switches from vertical to horizontal or horizontal to vertical.
Or alternatively, is there another solution to accomplish a sticky top containing two blocks?
Tia,
Michael Purcell1 user says Thank You to mpurcell for this useful post
mpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
March 12, 2014 at 9:27 pm #526517I’ve been developing this site on a local xampp server, but I’ve decided to go ahead and make it a test site on my live server so that you can see how it behaves. The site is a simple business brochure for my residential cleaning service, and content wise is identical to my existing live site.
http://www.premier-cleaning-services.com/premier3
Please take a look, and help with the above stated problem if possible.
Thanks,
Michaelmpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
March 13, 2014 at 5:01 am #526552When the styling is applies to divs as in the first post, there was always the problem. When the styling is applied to each block individually, the blocks resize nicely on screen orientation change. The solution was to apply the navbar-fixed-top class to the header, the navbar-fixed-top and navbar-collapse-fixed-top classes to the navbar, and then position the navbar and main body by pixels using the Top property.
After this everything worked except for the navbar toggle button, which would not move when the screen orientation changed. The solution to this was to override the float: right property to make it float: left.
1 user says Thank You to mpurcell for this useful post
mpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
April 12, 2014 at 1:42 am #530637This small business brochure site is finished and has gone live http://www.premier-cleaning-services.com. The test site has been taken down. Initially, I tested the site on all platforms and devices that I have access to. I do not own a tablet or other device larger than a phone. I have verified that the site works correctly on several phone versions of friends.
Today I was in the AT&T store and had a chance to use their demo devices, which are fully functional. First, I verified that the site displays correctly on several different varieties of phone, including Samsung, LG, and iPhone. I also verified that the site displays correctly on two different sizes of iPad tablet devices. However, there was a problem on two Samsung tablet devices running Android.
Both the Samsung Galaxy Tab 7.0 and the Samsung Galaxy Tab 10.2 devices I tested, using the stock browser, display the sticky portion of the display, the header/navbar combination, flush to the left side of the screen, but the body and footer portion which are not sticky, display centered. The two sections are both the same and correct width, but they are offset slightly due to the actual size of the display. The larger screen of course has more offset.
I hate having my site not look professional, even if only on a few devices. My problem in trying to troubleshoot the issue is that I do not have access to this type of device. It is about a 45 minute round trip by car to the AT&T store. So if anyone can point out what might be causing this issue and how to correct it, that would be greatly appreciated.
swissa Friend
swissa
- Join date:
- November 2011
- Posts:
- 1955
- Downloads:
- 7
- Uploads:
- 277
- Thanks:
- 175
- Thanked:
- 717 times in 572 posts
April 12, 2014 at 7:04 am #530645If you want to test off on mobile devices there are lots of emulators out there.
I use responsinator.com mostly but there are others.
Hope that helps
1 user says Thank You to swissa for this useful post
mpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
April 12, 2014 at 3:49 pm #530669<em>@swissa 421395 wrote:</em><blockquote>If you want to test off on mobile devices there are lots of emulators out there.
I use responsinator.com mostly but there are others.
Hope that helps</blockquote>
Thanks for the reply. I tested using all of the tools mentioned in others, but I was unable to find any emulator that would duplicate the issue I found on the Samsung Galaxy Tab 7.0 and 10.2 devices. The screenfly emulator even has a specific Samsung Galaxy Tab (600 x 1024) emulator, but is displays correctly. This makes sense, because these emulators basically create a frame and display the site in the frame, but they are still using the underlying browser code to render the frame. No, it appears that I will have to use actual devices to test.
arthurjohnston Friend
arthurjohnston
- Join date:
- November 2010
- Posts:
- 170
- Downloads:
- 152
- Uploads:
- 16
- Thanks:
- 58
- Thanked:
- 27 times in 2 posts
September 22, 2014 at 2:05 pm #550385I am considering in using your modification. Being new to PHP, CSS etc., I have a few questions.
Are these files all that are required to make multiple blocks sticky?
Should the file “default-p.php” be placed in the “template/tpls/blocks” directory?
Thank you in advance.
mpurcell
- Join date:
- March 2014
- Posts:
- 14
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 6
- Thanked:
- 5 times in 2 posts
September 23, 2014 at 1:08 am #550431<em>@arthurjohnston 446853 wrote:</em><blockquote>Are these files all that are required to make multiple blocks sticky?[/quote]
It’s been quite a few months since I worked on this, so my memory might be a little rusty. But there should be enough information in the posts above for you to accomplish this. I think there might be more information about this in other posts of mine somewhere on this forum. Bear in mind that I never did find the cause of the issue mentioned in post #4. It seems that on some Samsung devices, the problem appears when using the stock browser, but evidently does not appear when using other browsers such as firefox, dolphin, etc.Should the file “default-p.php” be placed in the “template/tpls/blocks” directory?</blockquote>
Yes, in the same directory as the default.php file.1 user says Thank You to mpurcell for this useful post
-
AuthorPosts
This topic contains 8 replies, has 3 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum