SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  2
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Adding a new tab to website contacts...

3 years 11 months ago - 3 years 11 months ago #120366 by cesaralex
Adding a new tab to website contacts... was created by cesaralex
Hi there,

i would like to add a new tab (to the contacts separator of imexmoto.com) as Leiria and Lisboa, with name "Porto", but i'm not sure if i only need to do changes on the contactos.tpl file!?

Can you give me a hand with this.

The link of the contacts is: imexmoto.com/conteudos/contactos/


thanks in advance,

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120385 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
Hi Cesar,

Inside "tab_menu" <ul> create a new <li>:
<ul id="tab_menu">  
	[ the other tabs are here ]
	<li><a class="" rel="tab-custom">New tab</a></li>
</ul>

Then, inside "tab_container" add the content for the new tab:
<div class="tab_container">
	<div class="tab_container_in">
		[ the other contents are here ]
		<div id="tab-custom" class="post">
			[ your content goes here ]
		</div>
	</div>
</div>

To link a tab with it's content, use the same value, replacing "tab-custom" in the example.
  • rel="tab-custom" in the tab
  • id="tab-custom" in the content

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago #120394 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi Valentin,

thanks for your support. And the iframe code for the map, can i get it on Google maps?

thanks again.

Please Log in to join the conversation.

3 years 11 months ago #120395 by Nick
Replied by Nick on topic Adding a new tab to website contacts...
Hi Cesar,

Yes, definitely. You can use Google Maps embed feature for that:
support.google.com/maps/answer/3544418?hl=en

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120399 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi Nick,
i'm having troubles with the code. You can see the file i've edited attached.

The tab for Porto its displayed outside of the layout, and i'm not sure if there is something missing on the code.

Thanks,

This message has an attachment file.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 11 months ago #120405 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Now i think the layout is ok.

I'm just having troubles with the map "iframe".

The developer of the website used a different code from the iframe code produced by Google Maps.

Please Log in to join the conversation.

3 years 11 months ago #120408 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
Take a look to this tutorial , Step #1 and #2.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120412 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi Valentin,

thanks for your support.

I've noticed that the content of the tabs is being displayed verticaly on the first tab. I've failed with something on the code.

Please Log in to join the conversation.

3 years 11 months ago #120420 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
The new tab looks fine in my end.
May you elaborate? Include an screenshot if necessary

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120422 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi Valentin,

in the tab "Leiria", if you scroll down, the information of "Lisboa" and "Porto" is dislplayed below. And it should only be displayed when you click the tabs.

I've been searching if it's any div that could be wrong, but i can´t find out.

This image is hidden for guests.
Please log in or register to see it.



It happens only when you enter on the "Contactos" separator: imexmoto.com/conteudos/contactos/

After that, when you click other tab and return "Leiria" it looks ok.

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120435 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi there,

this maybe caused by the changes i've made, because before it wasn't happening. But i've checked the code several times, and i can´t find what's wrong.

Could it be necessary to change the .js file associated with the tabs?

The problem only happens when the "contactos" separator is loaded.

Please Log in to join the conversation.

3 years 11 months ago #120449 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
Hi Cesar,

The page loads different to your screenshot. For example, I can only see a map for each tab. Yours have two maps.
Am I missing something?

I'm using Firefox browser, by the way.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120450 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Hi Valentin,

i'm using Chrome. The problem is that when you load "Contactos" page, the information of the 3 tabs is displayed verticaly on "Leiria" tab (3 maps and other information). And it seems there is something related with the "Porto" tab, because it blinks when loading.

After you click another tab, it works ok. Maybe i did someting wrong with any div!?

Please Log in to join the conversation.

3 years 11 months ago #120460 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
I see the issue now.

Remove the inline CSS:
style="display: block; margin-top:0px;"

from:
<div class="post" id="tab-lisboa" style="display: block; margin-top:0px;">
<div class="post" id="tab-porto" style="display: block; margin-top:0px;">

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago #120461 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
Thanks Valentin, but it didn't worked out.

The problem persists!

Please Log in to join the conversation.

3 years 11 months ago #120463 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
Let's see the javascript. What code generate the tab functionality?

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago #120464 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
/*
TABS SCRIPT

*/

var menuscript={
disabletablinks: false, ////Disable hyperlinks in 1st level tabs with sub contents (true or false)?
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url

definemenu:function(tabid, dselected){
this[tabid+"-menuitems"]=null
this.addEvent(window, function(){menuscript.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
var menuitems=this[tabid+"-menuitems"]
for (i=0; i<menuitems.length; i++){
menuitems.className=""
if (typeof menuitems.hasSubContent!="undefined")
document.getElementById(menuitems.getAttribute("rel")).style.display="none"
}
targetitem.className="current"
if (typeof targetitem.hasSubContent!="undefined")
document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (menuscript.currentpageurl==menuurl)
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
var menuitems=document.getElementById(tabid).getElementsByTagName("a")
this[tabid+"-menuitems"]=menuitems
for (var x=0; x<menuitems.length; x++){
if (menuitems[x].getAttribute("rel")){
this[tabid+"-menuitems"][x].hasSubContent=true
if (menuscript.disabletablinks)
menuitems[x].onclick=function(){return false}
}
else //for items without a submenu, add onMouseout effect
menuitems[x].onmouseout=function(){this.className=""}
menuitems[x].onclick=function(){menuscript.showsubmenu(tabid, this)}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
menuscript.showsubmenu(tabid, menuitems[x])
var setalready=true
}
else if (parseInt(dselected)==x)
menuscript.showsubmenu(tabid, menuitems[x])
}
}
}

I think this is the code. The file is "tabs.js".

Thanks.

Please Log in to join the conversation.

3 years 11 months ago #120466 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
There is an error in tabs.js file line:43
TypeError: document.getElementById(...) is null
var menuitems=document.getElementById(tabid).getElementsByTagName("a")

The error is visible with Firebug addon (in Firefox) or other inspect tool with "Console" tab enabled.

I suggest to contact to the original developer, so he can fix the error.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago #120467 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
In the meanwhile, add the below inline CSS to hide by default the next two contents:
style="display: none;"
<div class="post" id="tab-lisboa" style="display: none;">
<div class="post" id="tab-porto" style="display: none;">

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 11 months ago #120468 by cesaralex
Replied by cesaralex on topic Adding a new tab to website contacts...
The strange thing is that i've edited only the .tpl file, and i think the problem wasn't happening before.

I'll try to place there the original .tpl file, to see if it still happens.

Please Log in to join the conversation.

3 years 11 months ago - 3 years 11 months ago #120472 by Valentin
Replied by Valentin on topic Adding a new tab to website contacts...
Let us know how it goes.

Don't forget to give a try to my previous CSS suggestion .

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: cesaralex

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!