Solved

100% width Google Map

  • 17 November 2014
  • 30 replies
  • 378 views
X

How could I make 100% width Google Map inside custom HTML?
Main problem is that p-positioned-content class is limiting page width.

Thanks in advance!
Elvis

icon

Best answer by Johnny_Opao 20 November 2014, 02:08

View original

30 replies

Oneblis

Did you solve the problem? I’m having the same trouble here and don’t know how to fix it.

J

I’m trying to get the 100% width to work on my page. When using the code snippets above, it does affect the width, but it also removed all scrolling (up and down) on the page effectively cutting off content. Is there a way to avoid that?
thanks!

Antoine

I used the code provided here :

/** * Do not remove this section; it allows our team to troubleshoot and track feature adoption. * TS:0002-13-015 */ #lp-code-310 { width:100% !important; height:100% !important; top:0px !important; left:0px !important; position: fixed !important; }

Works fine for the full width but it puts the map sticked in header.

Thanks for your help!

jai

That’s fine. I will just change the base colour from white to match the colour of next section and it should look better. :dealwithitparrot:

Thanks for your help 🙂

Johnny_Opao
Userlevel 3

Hey Jai!

So awesome that you got it working.

As for the height issue that can be a bit tricky. This is the downside to having a video ‘stretched to page edges’. This requires the section itself to be dynamic in height based on the video size, which would likely require javascript to detect the screen size first before adjusting the height of the section. Doing so could potentially offset the look of the other elements of your page, as all Unbounce elements are absolutely positioned, rather than relative to elements around it.

To be honest I don’t have much of a suggestion here. Stretching it to page edges may not play well without adding a lot of complexity to your script.

Sorry I couldn’t be of much more help. If I do think of anything else I’ll be sure to post an update here

jai

Just another small issue.

Is it somehow possible to adjust the height of section ‘#lp-pom-block-XX’ according to the width of the video?

The problem I am facing is that if I adjust its height lets say according to my mobile, then visitors having mobile with small screen size will see a weird blank space under the video and visitors having mobiles with the wider screen may not see the video controllers (play or volume button) properly.


Jess
Rank
Userlevel 7
Badge +1

Wow, @jai you really are the gif master! 🙌

jai

It works smoothly.

If someone else gonna try it just make sure ‘stretch background to page edges’ box is checked .

Johnny_Opao
Userlevel 3

Hey Jai

Your use case is a little more complex as Wistia includes javascript to load the video in. So the behaviour isn’t always clear when using the same solution as the google map script above.

I don’t have a plug and play solution for you, but just some suggestions you can try.

I’d separate the script tags and drop them into your ‘javascripts’ box in the builder

<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script>

There’s some unnecessary tags in your script that you posted. Some of which appears on my old solution above (looks like the code may have been altered/messed up when we updated our community). Here’s a cleaned up version with the javascript tags removed:

<script>
$( "#lp-pom-block-XX .lp-pom-block-content" )
  .css('width','100%')
  .append('<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');
</script>

More importantly, I’d make sure you’re targeting the correct lp-pom-block-XX ID. From the sounds of it it’s targeting the wrong page section.

Lastly, this sounds like a different, but a completely reasonable want for using a video on Unbounce. I’d throw this suggestion over to our feature requests section as a improvement for our existing video widget. Perhaps this is something we can eventually build into Unbounce

http://community.unbounce.com/c/feature-requests

Hope that helps Jai. Again i’m not sure if that will fix your issue but at the least I hope it guides you closer!

jai

Hey Stefano,
Sorry, I forgot to mention in my first post that I want to do it in ‘mobile view’. This video background thingy does not work in mobile view and moreover even in the ‘desktop view’ it doesn’t have any sound.

However, with the code provided by @Johnny_Opao, I was able to achieve full width but was unable to fix its height and also for some reason it was getting shifted to the bottom of the page.

Stefano
Userlevel 7
Badge +4

Simply hit the section you’d like to set the video background to, and click on “background” in the properties panel. Select video and enter your video URL and you’ll be set! Some more info on that here.

Let me know if that helps!

jai

Yes, you get it right.

I want to create something like the mobile page in this screenshot.


The section with the word ‘TA -KU’ is a video. It has full page width and looks awesome.

thanks

Stefano
Userlevel 7
Badge +4

Hey there! Sorry, not sure If I understand this correctly - are you trying to get a full-width video as a section? I’ll be glad to help with some clarity 🙂

jai

Hey Johnny, I tried to use your last script from ‘Nov’14’ to expand a video embedded in ‘custom HTML’ example

<script> <br />
$( "#lp-pom-block-XX .lp-pom-block-content" ).css('width','100%').append('<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');
<br /> </script>    indent preformatted text by 4 spaces/script>

It worked and get expanded to 100% width but not in the provided #lp-pom-block-XX. It gets shifted at the bottom of the page and #lp-pom-block-XX is just empty.

I dont have any knowledge about coding.

Can you please help me to sort it out?

Thanks
Jai

A

you speak of animations of services? servizi?

you say this hover effects?

http://codecanyon.net/item/solid-css3-image-hover-effects/12642704

for the moment I’m not selling just building sites…

I wish I had conversions !!! 😉 grazie. Thanks 

J

Whoa, Aurelio! This looks really great! :) 

I have a quick question about the neat loading animation. Is this just for effect? How have you found this has affected your conversion rates (if at all)?

A

Hi JUSTIN ! Take it easy… ? I am resolved problem thanks.  See it here: 

http://cuanticoweb.it/studio-dentistico-panzanera/

Scrolling zoom doesn’t’ exist ! Cool ! 😉

J

Hi Grazie!
Since this isn’t our script I’m not sure exactly how we can modify it to do exactly that, but if you get in contact with the template creator he should be able to give you some pointers. He’s a really friendly guy!
support@surjithctly.in

A

grazie .😦

A

Hi everyone ! 

I need please install map but without scrolling zoom on:

http://cuanticcuanticoweb.it/studio-dentistico-panzanera

I found here in this page a part of code: 

http://stackoverflow.com/questions/29146888/disable-scrolling-zoom-in-google-maps-iframe

but I can’t do it both   :( 

Please help me !

  
  /*
  *  These are custom CSS styles for this template
  *  If you have any issues with customizing, 
  *  Please contact support
  *  Email: support(at)surjithctly.in
  *
  */

  
  /*Hide Map Help Text */
  
  #lp-pom-text-147 {
    display:none; 
  }
  
J

Hey Matt! 
We might need to take a look into your page a little deeper to get a better understanding on why it’s not working. Could you link it here? If not, let me know and I’ll have my support team reach out to you directly. 

Matt_Lowe

Hey Johnny, 

I’m trying to do the same thing, but am having issues getting around the template’s set page properties width. 

The div is viewing the HTML snippet as “content” which is defaulted to stay within the boundaries of the page properties set width. 

Is there a way for the HTML snippet to override the set width so that is has a percentage based width? 

Apologies if that is unclear. 

Thanks!
-Matt

Johnny_Opao
Userlevel 3

Glad to help Elvis 🙂

X

It is working!

This is greate pice of code for Unbounce Templates.

Thank you very much for your time Johnny!

Best regards,
Elvis

Johnny_Opao
Userlevel 3

Hey Elvis - Give this a try:

Drop the following into your javascript box:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery('#lp-pom-block-39 .lp-pom-block-content')
 .css('width', '100%')
 .append('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.5437478600206!2d-123.115227!3d49.285042000000026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5486718276025337%3A0x9e0b0fbb24f756af!2sUnbounce!5e0!3m2!1sen!2sca!4v1416345455256" width="100%" height="100%" frameborder="0" style="border:0"></iframe>');
</script>

Replace #lp-pom-block-39 with your section ID and the < iframe > code with your own map embed code.

I think that should do it. It’s quite a bit of a workaround so I can’t guarantee it will be perfect but hopefully it works for what you were looking for.

If you don’t want the height to expand the entire page section height, just adjust the ‘height’ property to a number of pixels (ex: ‘300px’)

Reply


Terms & ConditionsCookie settings