top of page
Search
  • Writer's pictureDerek Carlson

The Sky Opens as God Gives Access to the Heavens with Wix Dev Mode and Javascript

I just had to write something to acknowledge how cool this is.


I've been building websites from scratch for quite a number of years now. Raw HTML5, CSS3, and Javascript with lots of --


<div>blah blah blah awesome stuff blah blah</div>

and some such similar coding gobbledygook.


I often feel as if I'm mentally swimming amidst the contents of the Death Star's trash compactor.


But for my own business site, I use Wix. And it's just awesome.


Like totally.


But I'm only writing this to express appreciation for one little Wix feature...


They give you direct access to the Javascript code running beneath your website! So you get all the benefits of their visual website builder, but you also have all the flexibility of writing your own site from scratch!


Now that's sweeeeeeeeeet!


How did I come across this?


Well, I needed a certain banner graphic for my site on desktop, but a different banner graphic for my site on mobile. Now Wix has the inbuilt ability to hide certain desktop elements when viewing on mobile, but it doesn't have the opposite: there's no inbuilt way to hide certain elements on the desktop site yet show them on the mobile site.


Gasp!


But...


Not to worry!


Just turn on dev mode, and..


We have the power!

We are kings of the world!

No one can stop us now!


(Scroll down to Step 2 on this page to learn about turning on dev mode.)


Now we can see the id's of all the elements on the page, and we have access to the Javascript that runs under the page.


So here's what I did. (You can read about the specific step-by-steps here, but below is my layman's paraphrasing of it all.)


I loaded both banner graphics but set the mobile banner graphic to be hidden as soon as the site loads. And at the same time, I went to the mobile design page and had the desktop banner graphic turned off on mobile.


So at that moment, there would be no banner graphics showing up on mobile.


Then - and here is the magic sauce - I added Javascript that checks to see if the site is loading on a mobile device, and if it is, then show the mobile banner graphic.


Boom! It worked! Sweet!


I'm just so impressed with Wix. Shout out to the guys and gals in Israel who created that company!


5 views0 comments

Recent Posts

See All

"Weeds"?

bottom of page