FORUMS: list search recent posts

Foundation // Respond.js

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Chris Walter
Foundation // Respond.js
on Aug 16, 2013 at 3:43:18 pm

Hi Guys,

Bit of an amateur when it comes to responsive design however - at work we are considering re-designing our site and making it responsive. I've been playing around with Foundation 4 from ZURB and have been very impressed - my issue is I need the grid to work in IE8.

After doing some reading up I seem to have found a potential solution by including respond.js - This is the bit where I really am an amateur. I have tried adding the script and referencing it but no cigar - I just can't seem to get it to work.

Any help on where to include the conditional script tag in my HTML or alternatively a different solution would be fantastic. I would be much obliged if someone out there could help me out with this!

Thanks in Advance!


Return to posts index

Curtis Thompson
Re: Foundation // Respond.js
on Aug 18, 2013 at 2:27:04 am

hello...

can you post your code for us to see? hard to offer advice blind... :-/

sitruc


Return to posts index

Chris Walter
Re: Foundation // Respond.js
on Aug 18, 2013 at 9:14:19 pm

Here's the code.

<!DOCTYPE html>
<!--[if IE 8]> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->



<!-- Set the viewport width to device width for mobile -->


Welcome to Foundation










<ul>
<!-- Title Area -->
<li>
<a href="#">PsychoCannon</a>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li><a href="#">Menu</a></li>
</ul>


<!-- Left Nav Section -->
<ul>
<li></li>
<li><a href="#">Main Item 1</a></li>
<li></li>
<li><a href="#">Main Item 2</a></li>
<li></li>
<li><a href="#">Main Item 3</a>

<ul>
<li><a href="#">Dropdown Level 1a</a>

<ul>
<li>Dropdown Level 2 Label</li>
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li><a href="#">Dropdown Level 2c</a>

<ul>
<li>Dropdown Level 3 Label</li>
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li></li>
</ul>

<!-- Right Nav Section -->
<ul>
<li></li>
<li><a href="#">Main Item 4</a>

<ul>
<li>Dropdown Level 1 Label</li>
<li><a href="#">Dropdown Level 1a</a>

<ul>
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li><a href="#">Dropdown Level 2c</a>

<ul>
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li></li>
<li>Dropdown Level 1 Label</li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li></li>
<li>

<div>
<div>

</div>
<div>
<a href="#">Search</a>
</div>
</div>

</li>
<li></li>
<li>
<a href="#">Button!</a>
</li>
</ul>




<div>
<div style="background:#fedd14;">

PsychoCannon
<p>Click here for extended information.</p>
<p style="float:right;">BOOM</p>

</div>
</div>


<div>

</div>

<!-- End Header and Nav -->

<!-- First Band (Slider) -->

<div>
<div>
<ul>
<li><img src="img/one.png" /></li>
<li><img src="img/two.png" /></li>
<li><img src="img/three.png" /></li>
<li><img src="img/four.png" /></li>
</ul>
<!-- <div>

</div> -->


</div>
</div>

<!-- Three-up Content Blocks -->

<div>
<div>
<img src="http://placehold.it/400x300&text=[img]" />
This is a content section.
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>

<div>
<img src="http://placehold.it/400x300&text=[img]" />
This is a content section.
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>

<div>
<img src="http://placehold.it/400x300&text=[img]" />
This is a content section.
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>

</div>



<!-- Call to Action Panel -->
<div>
<div>

<div>
Get in touch!

<div>
<div>
<p>We'd love to hear from you, you attractive person you.</p>
</div>
<div>
<a href="#">Contact Us</a>
</div>
</div>
</div>

</div>
</div>

<!-- Call to Action Panel -->

<div>
<div>
<ul>
<li>Standard</li>
<li>$99.99</li>
<li>An awesome description</li>
<li>1 Database</li>
<li>5GB Storage</li>
<li>20 Users</li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>

<div>
<ul>
<li>Standard</li>
<li>$99.99</li>
<li>An awesome description</li>
<li>1 Database</li>
<li>5GB Storage</li>
<li>20 Users</li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>

<div>
<ul>
<li>Standard</li>
<li>$99.99</li>
<li>An awesome description</li>
<li>1 Database</li>
<li>5GB Storage</li>
<li>20 Users</li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
</div>


<!-- Footer -->


<div>

<div>
<div>
<p>© Copyright no one at all. Go to town.</p>
</div>
<div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</div>



document.write('')





$(document).foundation();

<!-- End Footer -->




Return to posts index


Curtis Thompson
Re: Foundation // Respond.js
on Aug 18, 2013 at 11:41:29 pm

hello...

and where in here have you tried posting what and what happens when you say it doesn't work? does it work in other browsers fine but not ie8?

sitruc


Return to posts index

Chris Walter
Re: Foundation // Respond.js
on Aug 19, 2013 at 10:12:07 am

Hi Curtis,

I have tried adding the respond.js in the standard places eg. right after the stylesheet links, above the style sheet links, before the closing body tag - with no joy.

Yes the page works fine in everything except IE8 and unless I'm mistaken I thought adding respond.js would resolve the problem with the responsive 12 column grid system which the Foundation 4 framework uses.


Return to posts index

Chris Walter
Re: Foundation // Respond.js
on Aug 19, 2013 at 10:12:49 am

Sorry the file I was trying to add was the respond.js if I didn't mention that before.


Return to posts index


Curtis Thompson
Re: Foundation // Respond.js
on Aug 19, 2013 at 6:06:03 pm

hello...

did you read their docs/support page on this, perchance?

http://foundation.zurb.com/docs/support.html

"Want IE8 Grid Support? We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid that will work in IE8, just like it did in Foundation 3."

this might do what you need...

sitruc


Return to posts index

Herbert van der wegen
Re: Foundation // Respond.js
on Aug 20, 2013 at 8:28:46 pm

Your html code is missing all the required classes to make the foundation grid work at all. Do you have an online version for us to inspect?

/*----------------------------------------------------*/
System: Win7 64bit - i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), ATI 7970 3gb, EVGA 590 3GB, Revodrive X2 240gb, e-mu 1820. Screens: 2 x Samsung s27a850ds 2560x1440, HP 1920x1200 in portrait mode


Return to posts index

Nathan Selikoff
Re: Foundation // Respond.js
on Sep 23, 2013 at 2:30:58 pm

P.S. sometimes it's easier to temporarily share large amounts of code via https://gist.github.com, http://pastebin.com, or http://jsfiddle.net.

-Nathan

--
Nathan Selikoff
Artist / Programmer
Interactive installations, audiovisual performances, graphics programming, technical direction


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]