Question

am in a bit of a fix here with a designer insisting a certain design is done and stating “Oh well if it can’t be done…” in those tones that we all know as developers that says It can be done but you can’t do it.

I thought it wasn’t possible, but have had a read on here about using jQuery .append so it may well be after all. Any advice would be great thank you.

This is my code:

<section id="technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>
<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>

The ul is 4 floated left white boxes with an image in each. The div below the is just a piece of content the same with as the .

The site is a responsive site so that when it is reduced to a tablet view, the four left floated li turn into two rows of two and in smartphone view are stacked one on top of the other.

In each view, the div below the section just resizes to fit and the content is rearranged.

The designer is not happy because his design says in 960px view, div id=”ddWrapper” is below the four left aligned boxes; in tablet 600px view, the div has to be between the two rows and in smartphone 320px view it has to be under the first li.

To me this is not a responsive layout, but I’ve been trying to use jQuery to pull the rabbit out of the hat to make the designer happy.

Is there a way of using jQuery’s append() to move the div id=”ddWrapper” to different places in the HTML based on the current layout? This question has pushed beyond my current knowledge of jQuery so I’m asking for any help anyone can provide.

cheers

frank

Answer 1

Probably the simplest way to acheive this would be to include some of the content more than once and just display: none; the content you don’t want. i.e.

<section class="desktop-technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="tablet-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
 </ul>
</section>


<section class="mobile-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
 </ul>
</section>


<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>


<section class="tablet-technologies">
  <ul>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="mobile-technologies">
  <ul>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>

then you can just apply:

.tablet-technologies, .mobile-technologies {
    display:none;
}

with the appropriate sections showing for the appropriate styles.

It’s not the cleanest solution, but it doesn’t add to much overhead to the filesize and is controllable without javascript.

Hope that helps!