I think it's pretty cool to see how others might approach this problem. I replied to Kyle off-list but I kind of want to jump in too. He had sent me some additional info so I'm just going to edit liberally to stay on point but this is for a specific change request that I can't remember if it was part of the original email to the list.
FWIW: Like Brian mentioned, I kind of like Flexbox as an option. I figure applying it retroactively to existing CSS could be more effort than it's worth in this case and more lines of code. I also wanted to avoid duplicating or adding more to the DOM (e.g., for use with .show {} and .hide {} classes)
So, anyway, I wrote:
This is a good puzzler. The solution regarding duplicating content in a hidden <div> would certainly work but there may be drawbacks that are more impactful than the positives of repositioning. Namely, the impact on performance and accessibility. Plus, you then have two sets of content to update. O_o.
I’m not able to see the HTML so I’m going to make some assumptions, but there may be an alternate way to go about it that's still CSS only.
Let’s start just with repositioning the Wireless Printing Picture to the top of the site on mobile. Even if there isn’t a class or ID on the <img> HTML, you can still use attribute selectors to target that picture specifically. Given the image source www.example.org/wireless.jpg, the CSS to target an image that ends with “wireless.jpg” is
img[src$="wireless.jpg"] {
/* code here */
}
Let us also assume that the main content area of the page between the menu and footer has some kind of container, which is often something with the class of “wrap”, but could be anything.
Here is how you might step through the process:
1. Start inside a @media screen and (max-width: 320px ) { } media query, where the pixels are whatever breakpoint you need it to be …
2. Push the .wrap container down a number of pixels equal to the height of the image. Ex., .wrap { position: relative; margin-top: 200px; }
3. Absolutely position img[src$="wireless.jpg"] to the top of the container. If the wrap is position: relative; and the image isn’t inside any other relatively positioned element, than that might be as simple as { position: absolute; top: 0; }
You will need to do some nudging to get it into the right place, and it depends on the surrounding elements. The image would revert back to its original location at larger screens.
//
Anyway, I hope we all hear about what ended up working.
Michael
www.libux.co / @schoeyfield
-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of Eric Larson
Sent: Friday, October 30, 2015 1:04 PM
To: [log in to unmask]
Subject: Re: [CODE4LIB] CSS positioning expertise needed
There are a lot of ways to shuffle the DOM around between breakpoints.
I've used this javascript library to move blocks of markup between viewport sizes before:
http://wicky.nillia.ms/enquire.js/
It adds media query support to JS, letting you call custom functions on and off whatever viewport rules suite your need. Works great in scenarios just like this one.
- - - -
Basic usage is simple like...
// Move PageNav and PageContent
Brand.OrderNavContent = function(selector1, selector2) {
return jQ(selector1).after(jQ(selector2));
}
jQ(document).ready(function() {
// JS Media Queries
enquire
// Large
.register("screen and (min-width: 1200px)", {
match : function() {
Brand.OrderNavContent('div#page-nav', 'div#page-content');
// Small
.register("screen and (min-width: 768px) and (max-width:991px)", {
match : function() {
Brand.OrderNavContent('div#page-content', 'div#page-nav');
.....
Cheers,
- EL
On Fri, Oct 30, 2015 at 11:50 AM, Aeschleman, Luke <[log in to unmask]>
wrote:
> If you duplicate the block (even if it's hidden) it will load the
> content twice. Not a huge deal if it's static HTML, but if it's a lot
> of promotional images, this could slow down load times.
>
> I found this that might help
> http://tanalin.com/en/articles/css-block-order/
>
> In theory, use media queries to adjust the display of the content divs.
> When the viewport gets to mobile size, you'd add display:table to the
> wrapper (containing x,y,z,1,2,3), display: table-row-group to divs
> x,y,z,1,3, and display: table-header-group to div 2. (Doesn't work for
> ie <=8, fyi).
>
> Another option is moving the content around with javascript or jquery
> clone.
>
> Personally, I'd prefer a purely CSS solution. If the display:table
> solution doesn't work out, I'd fall back to hiding duplicate content
> over javascript.
>
> Hope that helps!
>
> Cheers,
>
>
> Luke Aeschleman
> Web / Database Development Librarian
> UNC Chapel Hill Health Sciences Library CB #7585 Chapel Hill, NC 27599
> 919.966.7637
> [log in to unmask]
> http://library.ncahec.net
>
>
>
> -----Original Message-----
> From: Code for Libraries [mailto:[log in to unmask]] On Behalf
> Of Kaile Zhu
> Sent: Friday, October 30, 2015 11:04 AM
> To: [log in to unmask]
> Subject: Re: [CODE4LIB] CSS positioning expertise needed
>
> We don't know what framework the designer uses. Likely proprietary,
> modified based on some open sources. So, it is hard for anyone to do
> some customization, if the hired designer is unwilling to help you.
>
> To me, the easiest way to achieve your goal is to embed some code to
> detect the viewing device; if desktop, show as is; if mobile, redirect
> to the similar page with 2 on the top. Visitors don't care you
> actually provide a different page, or they may not even notice that.
>
> Kelly Zhu | Head of Systems
> James C. Jernigan Library
> Texas A&M University - Kingsville
> phone: 361.593.4082
>
>
>
> -----Original Message-----
> From: Code for Libraries [mailto:[log in to unmask]] On Behalf
> Of Kyle Breneman
> Sent: Friday, October 30, 2015 9:25 AM
> To: [log in to unmask]
> Subject: Re: [CODE4LIB] CSS positioning expertise needed
>
> Thanks so much to all who responded! As I said before, I was
> reluctant to share the full context with the list because I didn't
> want to share the in-house mock-ups I've received with the entire
> list. Here's a summary of the question and answers received:
>
> Context: Our library homepage is being redesigned to responsively resize.
> The work is being done by an outside design firm. Imagine that our
> homepage content looks like this, where x, y, z and 1, 2, 3 are all
> distinct blocks of content on our homepage.:
>
> X Y Z
> 1 2 3
>
> When this homepage responsively resizes for smaller screens, the
> content arranges in a column, as below:
>
> X
> Y
> Z
> 1
> 2
> 3
>
> Problem: "2" is a space where we often post graphics to market
> upcoming library events, so we wanted "2" to appear at the very top of
> our page, in mobile view (as below),
>
> 2
> X
> Y
> Z
> 1
> 3
>
> but the outside design company told us that this wouldn't be possible.
> They said: "It’s really a coding issue. When building a page with
> responsive design in mind, the code is going to stack elements almost
> like reading a book - top to bottom, left to right to fit the mobile view . . .
> We have ["2"] almost at the “end” of content on desktop and
> sandwiched between to other elements, to pull that up as the very
> first item for mobile presents issues and may cause the transition
> between desktop and mobile to break."
>
> Answers received: Multiple people suggested creating a duplicate
> version of "2," wrapped in a div and at the top of all of our other
> homepage content, and using media queries to either display or hide
> this div, depending on the user's screen size. Additionally, we would
> use media queries to hide the original "2" div when in mobile view.
>
> Much gratitude to Matt Sherman, Jason Bengtson, Marya Sawaf, Cary
> Gordon, Heather Rayl, Andy Wagner, Lisa Haitz, and Michael Schofield
> for their helpful responses!
>
> Regards,
> Kyle
>
>
>
> On Thu, Oct 29, 2015 at 11:21 AM, Kyle Breneman
> <[log in to unmask]>
> wrote:
>
> > Our library is currently working with the public relations
> > department at our university to complete a responsive redesign of
> > the library
> website.
> > The redesign is being driven by the PR department, who is
> > contracting with an outside design firm for all of the actual coding.
> >
> > We'd like to make some changes to the order in which our homepage
> > content displays when our site responsively resized for mobile, but
> > we're being told that the changes we want are not possible. I'm
> > pretty certain that what we want can be achieved by CSS positioning,
> > but I'd welcome responses, off-list, where I can share more details
> > and get a better understanding of what code would be needed to
> > achieve
> our objectives.
> >
> > Regards,
> > Kyle Breneman
> > Langsdale Library
> > University of Baltimore
> >
>
--
Eric Larson
Web Architect and User Experience Analyst University of Minnesota Libraries
612-624-5332
