Emulating the Zillow homepage effect using javascript?

I'm curious about how I might emulate what's currently going on with the Zillow homepage, .. where clicking on the different tabs both changes the background image, and also changes the appearance and behavior of the search form.

https://www.zillow.com/

I'd like to try to implement something similar on a WordPress site, most likely using JQuery (though I'm not averse to using vanilla JavaScript). Does anyone here have any tips or some "quick start" code examples they could share with me?

By the way  .. it's not necessary that I change the page url when I click on the different tabs.  I'm just looking to modify the DOM.

Thanks,
- Yvan
egoselfaxisAsked:
Who is Participating?
 
Julian HansenCommented:
The tabs are implemented as a list <ul> with the items Buy Rent etc.

There is an event handler attached to the click event on the <li> that does the following
1. Change the placeholder text on the input below the tabs
The search input is defined like so
<input data-rent-search-input="Enter a neighborhood, city, address or ZIP code" maxlength="150" autocomplete="off" tabindex="1" data-sell-search-input="Enter your home address" autocorrect="off" data-buy-search-input="Enter an address, neighborhood, city or ZIP code" data-default-placeholder="Enter an address, neighborhood, city or ZIP code" data-za-action="focus" name="citystatezip" data-zestimate-search-input="Enter your home address" data-za-category="search" id="citystatezip" placeholder="Enter an address, neighborhood, city or ZIP code" class="search-input za-track-event yui3-aclist-input" data-za-label="top-search-bar" aria-autocomplete="list" aria-expanded="false" aria-owns="yui_3_18_1_1_1515661128713_1121" style="padding-right: 115px;" type="text">

Open in new window

As you can see all the options for the various states are included as custom data attributes - when the tab is clicked the appropriate data items is copied to the placeholder attribute.
2. Changes the background-image on this element
Using the same method as above
<div data-zestimate-marquee-image="https://videos.zillowstatic.com/homepage/video_zest_20170503_1800b_q.jpg" role="option" data-buy-marquee-image="https://videos.zillowstatic.com/homepage/video_buy_20170503_1800_vlc.jpg" style="background-image: url(&quot;https://videos.zillowstatic.com/homepage/video_buy_20170503_1800_vlc.jpg&quot;); opacity: 1;" data-rent-marquee-image="https://videos.zillowstatic.com/homepage/video_rent_20170503_1800b_q.jpg" class="marquee-image" data-sell-marquee-image="https://videos.zillowstatic.com/homepage/video_sell_20170503_1800b_q.jpg"><video data-buy-marquee-video="https://videos.zillowstatic.com/homepage/video_buy_20170503_1800.mp4" role="option" src="https://videos.zillowstatic.com/homepage/video_buy_20170503_1800.mp4" data-rent-marquee-video="https://videos.zillowstatic.com/homepage/video_rent_20170503_1800b.mp4" data-zestimate-marquee-video="https://videos.zillowstatic.com/homepage/video_zest_20170503_1800b.mp4" data-sell-marquee-video="https://videos.zillowstatic.com/homepage/video_sell_20170503_1800b.mp4" preload="none" class="marquee-video" poster="https://videos.zillowstatic.com/homepage/video_buy_20170503_1800_vlc.jpg" autoplay="true" loop="true"></video><!-- Get the time when blue background is shown up --><!-- Using window here because, if using Y, we will get an inaccurate time --><script type="text/javascript">
                                window.homepageMarqueeImageElemShowUp = performance.now();
                            </script></div>

Open in new window


In terms of emulating though it would be something like this

$('.selectorClass li').click(function() {
    // Get something to indicate which li was clicked - can be a custom-data element, a class. I am going to use a custom data
    var id = $(this).data('search-term');
    var newtext = $('#searchBar').data(id + '_placeholder');
    $('#searchBar').attr('placeholder', newtext);
    var newbg = $('#backgroundContainer').data('id + '_bg_image');
    $('#backgroundContainer').css(backgroundImage: newbg);
});

Open in new window

You would then define your list
<ul class="selectorClass">
   <li data-search-term="buy"> ...
</ul>

Open in new window

Your input search would be as above with
data-buy-placeholder="Search value for buy" 

Open in new window

and
data-rent-placeholder="Search value for rent"

Open in new window

etc
0
 
leakim971PluritechnicianCommented:
backgroundImage_ID is the value of the ID attribute of the image in the background of your wordpress site
tabX_ID is the value of the ID attribute of each tab

jQuery(function($) {
      $("#tab1_ID").click(function() {
            $("#backgroundImage_ID").attr("src", "/path/to/some/image1.jpg");
      });
      $("#tab2_ID").click(function() {
            $("#backgroundImage_ID").attr("src", "/path/to/some/image2.jpg");
      });
      $("#tab3_ID").click(function() {
            $("#backgroundImage_ID").attr("src", "/path/to/some/image3.jpg");
      });
});

Open in new window

0
 
egoselfaxisAuthor Commented:
Julian -- thank you for this.  I've succeeded at creating a working example.  I just have one more quick question.  

How would I go about adding a similar "cross dissolve" type of effect / animation when the different LI items are clicked?  (Right now my prototype seems a bit harsh / abrupt with each transition).

Thanks,
- Yvan
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
egoselfaxisAuthor Commented:
It's been a few days and I still haven't heard back. Any thoughts?

- Yvan
0
 
Julian HansenCommented:
Can you explain what you mean by a cross dissolve - can you point us at a site that does what you want?

There are default transitions like fadeIn and fadeOut that you could experiment with - more complex transitions might require additional libraries.
0
 
egoselfaxisAuthor Commented:
Yes .. I was just referring to JQuery fadeIn and fadeOut effects.   I'm assuming that I'd just do something like this ...
$('#backgroundContainer').fadeOut( "fast" ).fadeIn( "fast").css(backgroundImage: newbg);

Open in new window

.. or am I missing the mark here?  

- Yvan
0
 
egoselfaxisAuthor Commented:
Hmm .. this definitely isn't working the way I'd hoped it would.  

http://sanctuary.royalpalm.com/zillow-example/

Do you have any ideas as to why it's fading to and from white when clicking on the different tabs (instead of to the black background color of the DIV)?

- Yvan
0
 
leakim971PluritechnicianCommented:
replace :
jQuery('#backgroundContainer').fadeOut( "fast" ).fadeIn( "fast").css(backgroundImage: newbg);

Open in new window

by :
    jQuery('#backgroundContainer').fadeOut( "fast", function() {
    	jQuery(this)
    		.css("backgroundImage", 'url(' + newbg + ')')
    		.fadeIn( "fast");
    });

Open in new window

0
 
egoselfaxisAuthor Commented:
That looks a little better -- but it still seems to be fading to white instead of black.  

And I think I might need to preload this different background images, because the transitions are a bit jumpy when I clear my browser's cache and load the page for the first time. Any idea how I might do that, considering that this is going to go on the homepage of a WordPress site?  Also .. is it just my imagination, .. or are the foreground elements also fading in and fading out ?  

I'd be happy to award you the points and post this as a different question if you thank that'd be more appropriate.  Just let me know.

Thanks,
- Yvan
0
 
leakim971PluritechnicianCommented:
it don't fade to white.
it fade mean it start being transparent to totally transparent.
you set you body background to something near white so once it transparent you see the background  
body {
    background-color: #f7f7f7;
}

Open in new window


if you want to avoid this, put a background (a div) same height and size but background-color to black
0
 
egoselfaxisAuthor Commented:
The background images images are already in a DIV that has the background color of black.  

#backgroundContainer {
    z-index: -1;
    height: 1080px;
    width: 100%;
   background-color: #000000 !important;
    background-image: url('http://sanctuary.royalpalm.com/wp-content/uploads/2018/01/Ocean_OH.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 20%;
}

Open in new window

0
 
leakim971PluritechnicianCommented:
the #backgroundContainer itself is fadeout-in
I'm talking about its parent,

<div class="black">
     <div id="#backgroundContainer"

Open in new window


or maybe just use the curreznt one :
<div class="wpb_wrapper"

Open in new window

0
 
egoselfaxisAuthor Commented:
That worked Leakim971. I'm going to just go ahead and award points and close out this ticket .. and likely open up a new either later today or tomorrow, as I'm running in to some other issues that I need to figure out how to resolve.

Thanks guys!
- Yvan
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.