Jump to content

mind boggling Foundation conflict


Joss
 Share

Recommended Posts

Okay, so I have no idea where to start with this one.

Foundation 5 has an off-canvas menu system described here:

http://foundation.zurb.com/docs/components/offcanvas.html

I have a template that uses this function. It also calls in child pages and renders them down the page.

So far, it works fine. 

Now, I add to the child template an image:

<?php echo $page->main_image->url; ?>

All good - renders fine, everything wonderful.

Now, I resize it:

<?php echo $page->main_image->width(400)->url; ?>

The image is shown, it has been resized and every thing is wonderful, yes?

Well, no - because the offcanvas menu no longer works!

Revert to no resizing, it works fine, use any resize (height, width, size) it breaks.

Er, why?

The menu is a Jquery function, the resize is a php function.

So, why are they conflicting?

I must be getting old.....

Link to comment
Share on other sites

Thanks Martijn - just knocked it up for my new web design site (that I am losing sleep over)

Here is a screen of the front page - all those are animations.

I really am not an artist, but since I can't afford to employ one, I will have to do!

post-822-0-64104200-1410467404_thumb.jpg

  • Like 11
Link to comment
Share on other sites

Revert to no resizing, it works fine, use any resize (height, width, size) it breaks.

If you (temporarily) replace the orginal image with the resized version on your filesystem and revert to no resizing, does it still break?

I'm just trying to pinpoint your problem for now.

Link to comment
Share on other sites

Well you could do that or you could just rename myimage.jpg => myimage.old.jpg and then rename myimage.400x0.jpg => myimage.jpg.

I'm curious to see if it's the filename of the resized image that's causing the trouble. I would find it very odd if it did, but hey, your case seems weird to begin with and there's no harm ruling it out.

Could you also paste the code/img-tag you have around <?php echo...->url ?>

Link to comment
Share on other sites

I would focus on the jquery and the css to make sure positioning of the menu isnt causing the large image to push the div out of the way. Is there any issues/errors (firebug or devtools)? Maybe an open div tag or a duplicate id..? 

I thought Joss said it was the resized image that was breaking the canvas. I doubt he is stretching the original image bigger?

Link to comment
Share on other sites

Morning world!

The actual size of the image is not a problem. The original image is 500 wide and is simply pushed off the side of the div.

Basically, there are two templates:

sub-page is the proper template for the child page. It uses if ($page->url == $_SERVER["REQUEST_URI"]) { } to remove header and footer info for when the sub-page child is rendered into the parent page.

The resize does not appear to be an issue when this page/template is called directly.

basic-page is the parent template. The majority of this template is identical to sub-page, except that it loops through and renders the children.

This is where the aside is suddenly not working.

For amusement, here is the basic-page template. Not sure it means much out of context, to be honest!

EDIT: By the way, I have tried removing all the code for what goes into the aside, and that makes no difference.

<?php 

/**
 * basic-page template
 * Use this as the basis for any other template for this profile
 */

include("./includes/head.inc"); 
?>
<!-- Header Stuff -->

<div class="pageheader">
	<div class="row">
		<div class="columns">
		</div>
	</div>
</div>

<!-- Main Page Markup goes here -->

<div class="wrapper-inside"><!-- Using a wrapper to give the main contents area a background colour -->


<div class="row">

<!-- off canvas menu -->
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <a class="left-off-canvas-toggle"><h4 class="title">Menu</h4></a>
      </section>

    </nav>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
<?php
// If this is a first level page, child of root, then we show its children
if($page->parentID === 1){
 childrensectionmenu(); 
}
// if this is not a first level page, not a child of root, we show its siblings
if($page->parentID !== 1){
  currentsectionmenu();
}

// Always show this bit of menu
mainsectionmenu();

//include("./includes/navigationvert.inc");
?>
    </aside>

    <!-- main content goes here -->
    <section class="main-section">
          <div class="row">
            <div class="medium-6 columns">
              <h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>
           </div>
            <div class="medium-6 columns">
            Something else
            </div>
          </div><!-- /row -->
<?php 

if ($page->child) {

  $childsections = $page->children("limit=10");
  foreach($childsections as $childsection){

echo $childsection->render();
  } // end foreach $childsections
} //end if $page->child

?>

    </section>
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div><!-- /inner wrap -->
</div><!-- /off-canvas-wrap -->

<!-- end menu -->

</div><!-- /row -->

</div><!--/wrapper-->
<!-- /End main page markup -->
<?php 
/* Included common footer markup */
include("./includes/footer.inc");
?>

<!-- add any post footer specific to the page here -->

<?php
/* Included common <scripts> */
include("./includes/footscripts.inc");
?>

<!-- add any scripts like foundation plugins specific to this page here -->

<!-- initialize foundation -->
<script src="<?php echo $config->urls->templates?>js/foundation/foundation.offcanvas.js"></script>

    <script>
      $(document).foundation({
  offcanvas : {
    close_on_click : true,
  }
});
    </script>

<?php
/* Wrapping up the page */
include("./includes/foot.inc"); 
Link to comment
Share on other sites

Okay, though you might find it boring - as I said, they are almost identicle.

The only bit that actually gets rendered is lines 69 to 83 ish

<?php 
if ($page->url == $_SERVER["REQUEST_URI"]) {
/**
 * basic-page template
 * Use this as the basis for any other template for this profile
 */

include("./includes/head.inc"); 
?>
<!-- Header Stuff -->

<div class="pageheader">
  <div class="row">
    <div class="columns">
    </div>
  </div>
</div>

<!-- Main Page Markup goes here -->

<div class="wrapper-inside"><!-- Using a wrapper to give the main contents area a background colour -->


<div class="row">

<!-- off canvas menu -->
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <a class="left-off-canvas-toggle"><h4 class="title">Menu</h4></a>
      </section>

    </nav>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
<?php
// If this is a first level page, child of root, then we show its children
if($page->parentID === 1){
 childrensectionmenu(); 
}
// if this is not a first level page, not a child of root, we show its siblings
if($page->parentID !== 1){
  currentsectionmenu();
}

// Always show this bit of menu
mainsectionmenu();

//include("./includes/navigationvert.inc");
?>
    </aside>

    <!-- main content goes here -->
    <section class="main-section">
<?php } // End If for page URL ?>

<div class="row">
            <div class="medium-6 columns" id="<?php echo $page->name; ?>">
              <h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>

<p><a href="<?php echo $page->url; ?>">read more</a></p>

           </div>
            <div class="medium-6 columns">
            
            <img src="<?php 
            
            echo $page->main_image->width(400)->url; ?>" >
            </div>
</div>

<?php if ($page->url == $_SERVER["REQUEST_URI"]){ ?>
    </section>
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div><!-- /inner wrap -->
</div><!-- /off-canvas-wrap -->

<!-- end menu -->

</div><!-- /row -->

</div><!--/wrapper-->
<!-- /End main page markup -->
<?php 
/* Included common footer markup */
include("./includes/footer.inc");
?>

<!-- add any post footer specific to the page here -->

<?php
/* Included common <scripts> */
include("./includes/footscripts.inc");
?>

<!-- add any scripts like foundation plugins specific to this page here -->

<!-- initialize foundation -->
<script src="<?php echo $config->urls->templates?>js/foundation/foundation.offcanvas.js"></script>
    <script>
      $(document).foundation();
    </script>

<?php
/* Wrapping up the page */
include("./includes/foot.inc"); 

} //end if for page URL
Link to comment
Share on other sites

First of all Joss. I am also not an artist, but I wish I was the kind of "not an artist" as you are, seeing your new website design :D. It is really great. I'm curious to the animations.

I agree with MuchDev that your problem is maybe caused by pure html/jquery problems as open divs etc.

But the only way to check this properly is to look not at the templates with all the php and includes inside but to the generated page and its source. Could you post that one or do you have it online?

Link to comment
Share on other sites

In that first template you have

offcanvas : {
    close_on_click : true,
  }

in the second you haven't...

BTW, delete the comma after 'true', that might result in an error.... [some browsers]

Edit: I think Reems has indeed a valid point... 

Edited by videokid
Link to comment
Share on other sites

Hi Video kid - that doesn't make any difference. I think close_on_click might be true on default, can't remember now.

Reems - thanks! The animations are done in Adobe Edge Animate. The top one has the crane driver raising and lowering the phone (complete with the wheel turning, his arm moving etc) plus the forman guiding him, the dogs head moving and the chap carrying the bricks wobbling. The draftsman is drawing and the minstrel is tapping his foot, strumming the lute and shaking his head. I should probably compose some music for him.

I think this has something to do with the way I am removing bits of code when rendering the template - I will look at a different approach.

Link to comment
Share on other sites

Actually me too

sub-page is the proper template for the child page. It uses if ($page->url == $_SERVER["REQUEST_URI"]) { } to remove header and footer info for when the sub-page child is rendered into the parent page.

 

The resize does not appear to be an issue when this page/template is called directly.

I have a feeling, like this was addressed before: open div [or similar] somewhere

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...