
Community Member
May 28, 2013

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

November 8, 2009

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
- 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>
- 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".
- create a custom css definition for topic as below
.topic{ display:none; }
do that last because in will hide all of those posts.
- Once you've done that let me know and I'll write you some JavaScript.
Rick Anderson – WordPress Instructor

Community Member
May 28, 2013

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



November 8, 2009

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
Rick Anderson – WordPress Instructor

Community Member
May 28, 2013

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

November 8, 2009

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
Rick Anderson – WordPress Instructor

Community Member
May 28, 2013


November 8, 2009

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.
Rick Anderson – WordPress Instructor

Community Member
May 28, 2013


November 8, 2009

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>
Rick Anderson – WordPress Instructor
Most Users Ever Online: 228
Currently Online:
12 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Keith W Jones: 1444
Brian Tozer: 1004
Carolin: 984
Heidi Hafner: 509
John Cunningham: 423
Reece Morrel: 353
Newest Members:
saamkrish
volminFL
soundpilot
digitalaerolus
emma62755
sharonmarks
Forum Stats:
Groups: 8
Forums: 46
Topics: 7004
Posts: 34849
Member Stats:
Guest Posters: 6
Members: 6765
Moderators: 2
Admins: 2
Administrators: Rick Anderson, Rick Anderson
Moderators: Pierre Cote, Laura Nugent