Bedford: Changing the banner height?

The script above is for full height. Now, I'm sure this is the totally wrong way to do this and there is no doubt a much better way, but if you change this line:

var windowHeight = window.innerHeight;

to say:

var windowHeight = window.innerHeight * 0.5;

the banner should be 50% of fullscreen.

PERFECT!

Thanks

anyone else having problems with this script in Firefox?

It didn't work for me but I'm using the slideshow gallery feature. I need to shorten the banner since you cannot see that there is text below on a 13" laptop or tablet.

@mim What sort of problems? Works fine for me with Firefox on both the Mac (Mavericks) and PC (Windows 7). Maybe post a link to your site so people can help.

Here you go:

https://savethebosque.squarespace.com

It isn't live yet so you'll need to the password:

b0squebash

The browser just doesn't recognize the code and has no effect on the slideshow height. Of note, the template wasn't working properly on Firefox prior to my adding this code. Rather than scaling correctly the images took up only about half of the screen and got severely cropped. I added the code in an attempt to fix the problem but all it did was create a black strip below the slideshow. Thus far I've only noticed the issue on monitors with 2 to 1 aspect ratios.

Is there a way to have this code work only on the desktop and not mobile devices? Or even better, is there a way to implement this code but have mobile still scale to width? On mobile it crops a lot from the header images instead of scaling them to the width.

Here's the site I mentioned earlier where it's working on everything i've tried except Firefox. I used the script above but changed it to 50% of the window height, not 100%. On Firefox, the images themselves aren't scaling, though some aspects of the container are. (Note that the content is now tucked up underneath the image.) Contrast that to Chrome, where it works as I expected. Ideas?

http://quickspacenevada.squarespace.com

(Still Trial, so Visitor Access...)

Thank you!

Anyone else note that this code affects the way the shopping cart works? When clicking "add to cart", the thing that pops up and floats with you as you scroll doesn't float anymore and stays at the top of the page. We've noticed that several of our visitors have been confused by this. Any thoughts on a fix? Thanks. (cc/ @foleyatwork)

All works great apart from Firefox. Tested on multiple versions and anything on a fairly big monitor the homepage image is not scaling to fill the screen.

http://simon-randall-mw7u.squarespace.com

Not got a real answer for you Simon but I can confirm the code works for my site in Firefox (tested on multiple machines). The only thing I did different was create a fullscreen.js file using the dev platform instead of using the footer code injection area on the consumer platform. Have a look at www.valorizzazioniculturali.com and see if it works for you.

@si lunt – I just noticed this on a new page I created with a slideshow instead of a singe image. It displays the same defect that you have, the window in Firefox is limited to @galleryHeight + 100px (which in Bedford is 600px + 100px for a total of 700px.)

In developer mode I changed:

&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:@galleryHeight + 100px !important;
     .sqs-gallery {
       height:@galleryHeight + 100px !important;
     }
   }
 }
}

To:

&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:100% !important;
     .sqs-gallery {
       height:100% !important;
     }
   }
 }
}

And it now works fine in Firefox as well – this works only with a transparent header.

Thanks Paul

Don't want to really flip the dev switch on that site tho. I'll have a play about.

Oh how I wish that worked for me, Paul. Incorporated your code but the results are the same in FireFox. BTW, the issue shows up only on those monitors that have more of a 2 to 1 aspect radio (more cinema style). Did you check your site on that kind of monitor?

@mim - My answer only works with a transparent header (I've updated the answer to reflect that. Let me have a play with a non transparent header and get back to you.

thanks, Paul.

Im having the same problem with firefox aswell. Is there a way of fixing this within either the CSS or using code injection instead of using the developer platform?

I figured it out myself, added this to the CSS

.sqs-gallery.sqs-gallery-design-stacked { min-height: 100% !important;}

This works with both a visible header or transparent header.

This code didn't work at all for my slideshow. Am I missing something?

#collection-5342eca3e4b0258f115c2563 .desc-wrapper {
 height:150px!important;
}

I found out how to fix the Firefox issue. I added this to my CSS and it works great in all browsers now:

.collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
 height: 100% !important;
}

hey ericjensen1628,

That only works with a transparent header. If you use this code in the CSS instead it will work for both a transparent and visible header:

.sqs-gallery.sqs-gallery-design-stacked { min-height: 100% !important; }

I'm having a problem with this code. It works for all of the pages EXCEPT the homepage.

@foleyatwork - This javascript snippet is great and works beautifully, thank you for sharing!

I am looking to have this work on Event posts as well and simply do not know javascript well enough to know what I need to add.

Thank you in advance for your assistance.

Correction: this is actually the case for any page that has a banner thumbnail image but does not have a description or title wrapper.

Hi - sorry to jump in here with an idiot question. I'm a complete beginner and far too scared to even contemplate CSS, but have same prob as described above - I want a full size (i.e. same size as my main header image) slide show gallery where my banner is on my home page.I tried the Five template but was advised, if I didn't want to try CSS, to use Bedford as it had a built in banner slideshow. However, the Bedford slideshow is just a small gallery on the page which is not what I want.Is there any way to get what I want without being remotely expert or shall I just give up? Thanks in advance.

Ok so I am trying to get all my slideshows fullscreen but I want my static single thumbnail banner images to be the stock height. Does anyone know how to do this?