Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
How dynamically change content in the same area page?
Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
1
June 28, 2018 - 7:48 pm
sp_Permalink sp_Print

Hello,

I´m wondering how to implement a couple of functionalities in this site (http://sitea.aceyrapages.com/), I been looking for videos and topics forums in the byobwebsite site, but I didn't find anything similar.

I hope you could help me. By the way; I'm using the last versions of Thesis and Agility.

The functionalities that I'm wondering how to implement are:

1) In "Our Procedures" area; I don't know how to implement the functionality that when someone clicks the menu links, the post image and the post content, change automatically (get updated) in the same area (without request a new page) - I already created a custom post for each procedure.

2) In a similar way in the "Map Area" I´m looking for that when someone clicks the location link the map change accordingly (central park location / Washington park location) as well the address text - I already create both maps and a couple of custom post for the address text.

is there a box, query-box or plugin in order to do this?
is there some tutorial video that explains how to do this?

please let me know if you need my credentials to access this site.

 

Thanks in advance

 

Julian Garambullo

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
June 29, 2018 - 9:07 am
sp_Permalink sp_Print

Julian, that is an excellent question.  There are a couple of ways this can be done.  I don't have videos on either of them.

One way is to make an AJAX request that goes back to the database and brings up the new post.  That's the way modern JavaScript frameworks like Angular, React and Vue handle that sort of thing.  The downside of this is SEO.  Search engines only see the first content but none of the rest.

The second way is to load all of the data but only show the requested data using JavaScript.  This way Google sees all of the data.

I would take the second path. If you build out the HTML I would be glad to suggest CSS and JavaScript to make this work.  Here is how to do the HTML

  1. In your custom html widget replace the <a tags with <button tags.  Give each button the data-topic attribute of the topic and the class "topic-selector".  For example
    <li><button class="topic-selector" data-topic="implants">Implants</button></li>
  2. In the services_area section put all 7 of the posts.  Each post should have an ID that corresponds to the data-topic.  They should also all have a class name of "topic".
  3. create a custom css definition for topic as below
    .topic{
         display:none;
    }

    do that last because in will hide all of those posts.  

  4. Once you've done that let me know and I'll write you some JavaScript.
Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
3
June 29, 2018 - 1:13 pm
sp_Permalink sp_Print

Thank You Rick, you're the Boss!

Ok, I already made the suggested changes, that´s the updated Widget area:

<ul>
<li><button class="topic-selector" data-topic="implants">Implants</button></li>
<li><button class="topic-selector" data-topic="root_canal">Root Canal</button></li>
<li><button class="topic-selector" data-topic="surgery">Oral Surgery</button></li>
<li><button class="topic-selector" data-topic="sedation">Sedation</button></li>
<li><button class="topic-selector" data-topic="veneers">Veneers</button></li>
<li><button class="topic-selector" data-topic="teeth_whitening">Teeth Whitening</button></li>
<li><button class="topic-selector" data-topic="gum_lift">Gum Lft</button></li>
</ul>

For the post ID`s, I use the "Display ID (and Hook Name)" from the Agility Featured Content box, is that correct?

and also I include the 7 posts (feature image and content) with the "topic" Class.

Thanks again and I look forward to hearing from you regarding next steps in the process.

Julian

Service-content-Feutured-Image.pngImage Enlarger

Service-content-Feutured.pngImage Enlarger

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
June 29, 2018 - 3:09 pm
sp_Permalink sp_Print

OK, this will be a little tough to explain.

The query box can't be split across 2 columns.  It has to wrap those columns.  What you need is a structure that looks something like:

<section id="implants"
      <query_box
            <left column
                  <left column content
            <right column
                  <right column content

The easiest way to do this is to create a responsive columns section for each of the 7 areas  rather than putting them all in the same section.  And use 7 query boxes, not 14

Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
5
June 29, 2018 - 4:19 pm
sp_Permalink sp_Print

Hello Rick

A couple of doubts; actually the structure for this section is an "Agility Content Grid Section" and inside each column, I have 7 "Agility Featured Content Box" (not a query box).

Should I repeat the actual structure 7 times... 7 "Agility Content Grid Section" + "Agility Featured Content Box"

or

Should I use 7 "Agility Easy Responsive Columns Section"+ "Agility Enhanced Query Box" selecting the Post by ID <-- in this case how I include the two columns? or it will be a single column?

(I suggest the "Enhanced Query Box", because in the normal "Query Box" there is no a way to select the specific Post to display)

Please let me know

Julian

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
6
July 1, 2018 - 8:28 am
sp_Permalink sp_Print

Julian, I would use 1 Easy Responsive Columns Section and one Featured Content Query Box per section. 

Put both columns inside the query box and then the content in the columns.

Also be sure to give the section an HTML id that corresponds to the data-topic 

Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
7
July 2, 2018 - 11:13 am
sp_Permalink sp_Print

Ok thank youServices-1.pngImage Enlarger

Services-2.pngImage Enlarger
Services-3.pngImage Enlarger
Services-4.pngImage Enlarger
, I already created this structure, could you please check it?

sp_PlupAttachments Attachments
Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
8
July 3, 2018 - 4:53 pm
sp_Permalink sp_Print

No, that layout won't work.  We need to be able to have both the topic class and the id=topic on the same, outermost element.  If you look at my diagram above the outermost element - the <section - has the id, it also needs the class="topic"

The big idea here is to hide all of the structure (except for the default) until one of the buttons is pressed.  In your system part of the structure has to stay visible.  If it were possible to add ids to the query boxes then your structure would work.  Unfortunately it isn't.

FYI the class=topic must be on the same element as id=implants - AND no place else.  We are using class=topic to hide everything and id=implants to show individual sections.

Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
9
July 4, 2018 - 3:57 pm
sp_Permalink sp_Print

Ok I got it, I made the changes to the structure, Could you review it?.

and thanks you for your patience

Julian

Structure_3-1.pngImage Enlarger

sp_PlupAttachments Attachments
Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
10
July 5, 2018 - 10:06 am
sp_Permalink sp_Print

The last thing to do is to add this to JavaScript section of the Front Page template

<script>
document.getElementById('implants').style.display = "block";

function reset(){
var hide = document.getElementsByClassName('topic');
var i;
for (i = 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
}

var buttons = document.getElementsByClassName('topic-selector');
var index;
for (index = 0; index < buttons.length; index++){
buttons[index].onclick = function(){
var topic = this.dataset.topic;
reset();
document.getElementById(topic).style.display = "block";
};
}
</script>
Avatar
Julian Garambullo
Mexico
Member
Members

Community Member
Forum Posts: 6
Member Since:
May 28, 2013
sp_UserOfflineSmall Offline
11
July 5, 2018 - 5:40 pm
sp_Permalink sp_Print

Rick Thank You very much, this works perfectly !

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online: Marcy
7 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1359

Brian Tozer: 1004

Carolin: 979

Heidi Hafner: 466

John Cunningham: 422

Reece Morrel: 353

Newest Members:

David

Dina Jokanovic

kwitchey

Kirk Ewing

Md Saifullah

Ian Birch

Forum Stats:

Groups: 8

Forums: 46

Topics: 6942

Posts: 34509

 

Member Stats:

Guest Posters: 6

Members: 6743

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent