Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#923541

My Chinese client has designed a large banner image with an image map and JS to make the map responsive. All works well except that, because the image is referenced by a Wrapper module, the height is too large when the screen width is below 1280px. How can I make the space below the image suit the image size at all screen widths. The image itself (and the image map) adjusts automatically.

http://systems34.gpmnews.com/

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#924083

Any screenshot highlighting the module you’re referring to?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#924088

Difficult to miss 🙂 http://systems34.gpmnews.com/ but below is a screen shot for the avoidance of doubt. In theory the wrapper module should auto adjust for height but doesn’t. Does the source item need to send it a message ?

BTW: http://systems34.gpmnews.com/administrator/index.php?option=com_modules&view=module&layout=edit&id=156 is the wrapper module that links to the special image item.

---

Attachments:

1. 

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#924431

Hi @saguaros,

Maybe some clues here (scroll down to oldskule) http://forum.joomla.org/viewtopic.php?t=322871

Finally resolved by changing the whole JS Function in: /components/com_wrapper/views/wrapper/tmpl/default.php

  function iFrameHeight()
  {
   var the_height=
   document.getElementById('blockrandom').contentWindow.
   document.body.scrollHeight;
   document.getElementById('blockrandom').height=
   the_height;
  }

This info is via Ken Lai.

@pankaj, Do I replace all of existing code with the above or just part of it ?

Existing is:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_wrapper
 *
 * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
JHtml::script('com_wrapper/iframe-height.min.js', false, true);
?>
<div class="contentpane<?php echo $this->pageclass_sfx; ?>">
<?php if ($this->params->get('show_page_heading')) : ?>
    <div class="page-header">
        <h1>
            <?php if ($this->escape($this->params->get('page_heading'))) :?>
                <?php echo $this->escape($this->params->get('page_heading')); ?>
            <?php else : ?>
                <?php echo $this->escape($this->params->get('page_title')); ?>
            <?php endif; ?>
        </h1>
    </div>
<?php endif; ?>
<iframe <?php echo $this->wrapper->load; ?>
    id="blockrandom"
    name="iframe"
    src="<?php echo $this->escape($this->wrapper->url); ?>"
    width="<?php echo $this->escape($this->params->get('width')); ?>"
    height="<?php echo $this->escape($this->params->get('height')); ?>"
    scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
    frameborder="<?php echo $this->escape($this->params->get('frameborder', 1)); ?>"
    class="wrapper<?php echo $this->pageclass_sfx; ?>">
    <?php echo JText::_('COM_WRAPPER_NO_IFRAMES'); ?>
</iframe>
</div>

[Waleed Sharo Friend Waleed SharoJoin date: December 2010Posts: 14Downloads:129Uploads:0 Thanks: 2 Thanked: 5 times in 5 posts]

#927171

Hi @timtecsa

I think wrapper module height is already responsive within Joomla 3, your problem is due to the template style for media devices, which needed further customization.

you can add this code to your custom.css

@media screen and (min-width:469px) {#Mod158 iframe {height: auto;} #Mod158 {padding-bottom: 10px; padding-top: 10px;} }

Also, for better automatic resizing of the height and width of iFrames to fit their contained content, you can implement iframe-resizer script.

1 user says Thank You to Waleed Sharo for this useful post

1. timtecsa

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#927174

Many thanks Waleed. They work a treat.
http://systems34.gpmnews.com

Tim

c.c. @saguaros @pankaj Sharma

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#927233

Hi Tim
may be you missed to check your previous thread with me .
i spent a lot of time and I already sent the solution to you here
@waleed sharo
thanks for copying my solution and sharing it here .

[Waleed Sharo Friend Waleed SharoJoin date: December 2010Posts: 14Downloads:129Uploads:0 Thanks: 2 Thanked: 5 times in 5 posts]

#927273

Hi @pankaj

There must be a misunderstanding!

I did not see your ‘solution’ nor copy you code!, but I was chatting with timtecsa via Skype and he showed me his page, and the line he added to custom css (contains your code) and then I suggest to add another line to target other size of media devices.

Eventually I suggested the iFrame resizer which proved to be the solution as neither of the two css @media lines fixed the resizing problem, kindly note that the current custom.css file on http://systems34.gpmnews.com doesn’t contains these two @media lines.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#927283

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#927409

Hi @waleed sharo I apologise for misunderstanding in the last post . I did nt mean by copy , I am saying thanks for sharing the solution here 🙂 Actually the same issue discussed in the another thread that created the misunderstanding . @tim the previous code u used is for the mobile layout as u asked for solving it for mobile . Iframe using same height that makes it unresponsive , So you use the Media queries as discussed above by waleed and apply it . The may not work because of the syntax errors in your custom.css file . Always make sure you have equal no. of open and close braces and place with correct style code .
@waleed thanks again for making a fix for this issue .I appreciate your help in this matter .
Regards

[Author]

Posts