Sport Ngin User Group Forum
SportsEngine Community Forum
Sign up Latest Topics
 
 
 


Reply
  Author   Comment  
jaxincb

Junior Member
Registered:
Posts: 13
 #1 
I have been working with Tab Elements, I sometimes try to move a page element into an inner Tab by dragging it, like is common in most of the website. But it won't go, until I first create a Page Element within the destination, then dragging into the Tab Element works fine.

Is this the best practice for moving elements into a Tab Element? Does anyone else have this issue? ...or have a better way?
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #2 
Hi jax, I'm pretty sure you have discovered the best workaround for dragging page elements into previously empty tabbed elements. I have heard of users creating a text block element, putting a few XXs in the text block, then saving it in a previously empty tab element. Then they drag in the desired page element and delete the text element. Not ideal, but it works.

I'll see if Sitebuilder product manager Rob Bedeaux has any other information on this topic.
0
jaxincb

Junior Member
Registered:
Posts: 13
 #3 
Not ideal, but no big deal either. Get Brian to make a video. [smile]
0
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #4 
Thanks Loren. The suggestion you gave today is the best way to handle this. We do have this as a to-do on our usability list. I'll post here when we have a resolution for it



__________________

Rob Bedeaux
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
jaxincb

Junior Member
Registered:
Posts: 13
 #5 
Take a look at dragging elements out of a tab element too.

I get around that by clicking the "Move" icon and moving the page to the same page the tab element is on. It comes in at the bottom of the page and I then drag it to where I need it.

"Not ideal, but it works."
0
Brian Ingle

Junior Member
Registered:
Posts: 2
 #6 
Hi Jax,

Great idea on a video to demonstrate this "temporary technique".

Here you go



Boom!


0
jaxincb

Junior Member
Registered:
Posts: 13
 #7 
Hi Brian,

Thanks, but I am a bit confused, it was a video for learning how to embed video in a website. Is that the correct video? I thought it might be for moving page elements around tab elements.

Jax
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #8 
Brian must have grabbed the wrong link. I pasted the correct link in his post. My favorite Brian Ingle video yet.

Boom! indeed.
0
jaxincb

Junior Member
Registered:
Posts: 13
 #9 
Way Boom!

I got a chuckle. Thanks, I guess that's part of my 15 minutes of fame, eh.
0
rrs209

Junior Member
Registered:
Posts: 2
 #10 

How do you link to an individual tab?

Let's say I have a page called Hockey. On this page I have a tab element with 3 tabs entitled: Overview, Division A, and Division B. When I go to the Hockey page (in User mode), the Overview tab is automatically selected (this is default), all good there. I also have a few text links on the Overview tab, cleverly called Division A and Division B of which currently point to a named anchor set at the top of each tab. Here's a rough example of what I'm looking to do.

Page: Hockey
URL: /hockey (aka: /hockey#overview)
Tabs: Overview (active tab) | <a href="#div-a">A-Division</a> | <a href="#div-b">B-Division</a></p>
H2: <a id="overview" name="overview"></a>Overview
P: Overview tab content... we have 2 divisions, <a href="#div-a">A-Division</a> and <a href="#div-b">B-Division</a> ...

Page: Hockey
URL: /hockey#div-a
Tabs: <a href="#overview">Overview</a> | A-Division (active tab) | <a href="#div-b">B-Division</a></p>
H2: <a id="div-a" name="div-a"></a>A-Division
P: A-Division tab content... or read about the <a href="/hockey#div-b">B-Division</a> ...

Super-duper pseudo-code aside, it would be wonderful if the above concept itself actually worked ... but it does not. While in User mode, if I right-click on my Division B tab and select "copy link address", I get something like this:
/layout_container/show_layout_tab?layout_container_id=16729545&page_node_id=1052233&tab_element_id=54295

...however, updating my text links (or simply visiting this URL) only shows me the un-styled content of the tab I right-clicked on. Not too helpful.

And so...
My question is, how do I actually link to an individual tab from another tab or another page altogether?

Thoughts, tips or tricks?

Thanks,
_rs

0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #11 
Hey _rs,

Haven't heard this question before, so checking now to see if there is a way to link directly to a specific tab. Stay tuned.

Loren
0
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #12 
Hi there,

There isn't a built in way to set the tab when a page loads, but with a little Javascript magic, you can accomplish this. It isn't pretty, but here you go!!

Take the code block below and insert it onto the page (I like sticking it on a tab in the tab element so it doesn't get 'lost.'

You can now use a query string in the URL to target a specific tab. For example, if I have a tab with three tabs called Red, Blue, and Yellow and I want to target the tab yellow I would input in the URL something like this http://www.mysite.com/mypage/?tab=Yellow.

A couple of notes—if you have multiple tabs with the same name, it will set them all to the same tab. Set the Code Element title so you remember what this does!

<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

$j(window).load(function() {
var selectedTab = getParameterByName("tab");
if (selectedTab !== "") {
$j("ul.layoutContainerTabs span a:contains(" + selectedTab + ")").click();
}
})
</script>


__________________

Rob Bedeaux
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
rrs209

Junior Member
Registered:
Posts: 2
 #13 
Excellent! Worked like a charm.

A couple notes for anyone following along or using the script listed above:

  1. Be sure to clear the cache (both from your browser and the Sport Ngin page you just added this code to), otherwise it'll look like it doesn't work.
  2. The query string is case-sensitive. In this case, linking to http://www.mysite.com/mypage/?tab=Yellow will work just fine while http://www.mysite.com/mypage/?tab=yellow will bonk. That is, unless you actually named your tab "yellow" (in lowercase).
I can see this little trick being another candidate for one of Brian's training videos.

Thanks again!
_rs
0
kwfastpitch

Junior Member
Registered:
Posts: 10
 #14 
The OP's (jax) work-around doesn't seem to work for me. Has something changed? I can't seem to drag page elements into or out of an inner tab element regardless of whether or not I create a page element in the inner tab first.
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #15 
I did some testing on this on a couple of the sites I spend a lot of time working on.

On one, a custom theme, I wasn't able to drag elements into the tab element no matter what I tried.

On the other, also a custom theme, I had no problem dragging in elements once I had created that first element inside the tab (as discussed in original post). I was unable to drag elements out of the tab element, though.

So, it might depend on the theme you are using?

Curious to hear other folks' experiences trying this.

0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.