I have a series of pages on my website that I allow a client to choose the color of. Currently, my crude solution is to just use a container box that is about the size of your average screen (1920x1080). This is a bad solution as any screen larger or smaller than this will either have white space or scroll bars.
I am in need of one of the following:
1.) An element that is stretchable, such as strips, that I can change the background COLOR of, not just image. I can not possibly store a single pixel image of each color with the name the same color code as every possible option my clients could choose.
2.) An element that already has changeable background colors, ie a box that has style.backgroundColor, to become stretchable.
3.) Similar to 1, but allow us to with code change the document COLOR as well as the image. This would be the best solution as Iād truly be changing the clients background color as opposed to just changing an element covering up all of the background.
4.) (Not preferable) Let text elements be stretchable and let me use itās html setter to simply create a div a % of the page. This would allow custom styling that could span a page and allow a plethora of more options.
I know many others would benefit from this addition as Iāve seen many other forum posts similar to this one:
https://www.wix.com/corvid/forum/community-feature-request/full-screen-box-option
https://www.wix.com/corvid/forum/community-discussion/responsive-boxes
https://www.wix.com/corvid/forum/community-feature-request/container-box-stretch-to-full-width
https://www.wix.com/corvid/forum/community-discussion/change-background-colour-via-code
I have been searching for some workaround so if there is any solution that could be provided to solve this issue please let me know. Or if Iām simply wrong and there has been an element added that can do what Iāve stated Iād love to know about it.
Thank you for your time.
1 Like
This stuff is what CSS was made for, so youād be much better off coding some HTML into an iframe and pass viewport info to it for responsiveness:
https://www.wix.com/corvid/reference/wix-window.html#getBoundingRect
Wix HTML iframes themselves are not responsiveā¦ Your solution is basically create a static sized box with responsive elements inside.
@loganrdavis Yes. It will work provided you donāt need it to fit the viewport entirely.
@skmedia I understand what youāre saying, but, this solution is worse than what Iām doing now. Iād have to create an Iframe thatās as big as the biggest screen that would view it, probably an ultrawide at 21:9 aspect ratio. Then for every screen smaller, yes I could then adjust a color div inside the iframe to fit the current screen. BUT, every screen smaller than 21:9 would have a horizontal scroll bar that, if scrolled, would show blank screen since the site would be set to the width of the largest element, in this case our giant iframe. If weāre going this route, I might as well make a giant box thatās always that color. Youād still have a scroll bar but at least itād be the same color as the main portion.
The whole point of what Iām trying to do is make a code selected background with no scroll bars that fits the whole page no matter what size it is. You can set a static color with a stretched strip that works. All Iām wanting to do is have some element like a strip that can also have itās color changed with code.
Davidās answer with using CSS is the best option for yourself and especially if you are wanting to change the whole background colour on your website.
Although if you are just wanting to change some element for example on your page then you can look at using something like this.
https://www.wix.com/corvid/reference/$w.Style.html
https://www.wix.com/corvid/reference/$w.Background.html
But it doesnāt change the whole background color. It would only change the background color up to the width the size of the iframe. and anything smaller than the width of the iframe creates a scroll bar.
Yes your links are exactly what I wantā¦ Except style only appears on non responsive elements and background only allows images to be set, not colors.
If you need to see where exactly Iām applying this, here is one of my clients pages:
https://www.laborsaver.solutions/PartyBooking/Menu/Lokomotion-Family-Fun-Park/e7afd78d-acc3-4db1-bd82-3af41be42e8c
Basically I offer an event booking service where the client builds out all of the aspects of the menus, backgrounds, and forms. I basically built an editor within an editor using a lot of code and numerous database tables. If you go to the link above, youāll notice that if you shrink the screen smaller than 16:9, you get an ugly scroll bar that leads out to blank space. If you go bigger than 16:9, you see white behind it.
An iframe does nothing to solve this issue. I need some element that can adjust itās width dynamically to fit the entire view-port horizontally.
Itās not that we donāt get what youāre trying to do. Itās that Wix does not allow DOM changes. So keeping in mind you can construct a div and set its class node attribute, you can have a large and smaller iframe to avoid the scrollbar issue. Otherwise, youāll have to rethink your design.
@skmedia Wix does allow changing the background image: https://www.wix.com/corvid/reference/$w.Document.html
So it doesnāt seem like asking to be able to set a color code as opposed to an image src would be too much to ask.
So are you saying I should have an iframe per screen width Iād like to support and dynamically set which one to show? If youāre going to do this I could just collapse and expand boxes to achieve the same thing. Even If I could do this with iframes, now the issue is iframe height wont dynamically adjust either. So if my client adds more menus and thus makes the page taller, my iframe will fail to fill the new blank space.
The solution to a non-responsive page is not to add more non-responsive elements.
I do appreciate the responses and I donāt want to come off as rude, but Iframes just arenāt the answer as their height and width are set and wont adjust to anything on the page.
@loganrdavis I understand, but if this is what youāre jetset on, you need a platform like WP where you have DOM access. Otherwise, you will have to choose your sacrifices. And yes, if youāre really only wanting to change a color then just use a container box, but as I said before the iframe solution is intended with the provision that you are not filling the viewport, in which case the container is not viable.
@skmedia Right. So far I have been able to code my way around most wix limitations Iāve come across whether that be using iframes and running html with js external sources or using backend apis. The downside does come to situations like this where I just need slightly more control than given. I totally agree that the iframe solution would work if I wasnāt try to fill the viewport but that is what Iām doing.
I guess this is probably more of a feature request topic but I was hoping maybe I had missed some obscure element that I could make work in this case.
The only other solution I can see is if someone somewhere had some API or url destination available where I could fetch single pixel color images based on the color hex code. Then I could just set the document background to said image url.
You could consider having a āpreview modeā and just having a smaller editor that isnāt responsive.
The preview mode simply requests fullscreen from the iframe, and then everything is responsive. I know thereās a readily available node package for fonts, so maybe thereās one for colors who knows.
@skmedia Unfortunately I think Iām going to have to wait until wix implements something I can use. Thank you for your time I appreciate your assistance.
@deleteduser Thatās awesome thanks! Iāll give them a shot and report back!
Works great! Thanks! I tried searching for something like this but obviously failed in doing so.
To test I simply created an input box and used the following code:
export function input1_change(event) {
$w(āDocumentā).background.src = āhttps://dummyimage.com/1/ā + $w(ā#input1ā).value + ā.jpg&text=+ā
}
And it works great! Still a work around but one that Iām okay with for now!