For my projects section on my website I have them laid out in tabs. I have an overview tab that shows small cards with images of each of the projects. I would like to enable a feature where clicking on a project card will make "active" the respective tab.
I copied the format of the tabs by setting the following on my project card divs:
<a href="#Tab_Content_ID" data-toggle="tab" role="tab">
<div id="Project_Image"></div>
</a>
I am able to trigger the opening of that project's tab. However, the tab itself (in the tab navbar) is not selected. The overview tab is still selected (active) and thus the user can not return to the overview without first clicking on another project tab then back to the overview tab.
How can I fix this?
Project link
This is the current live version of the page. It does not reflect the changes I have made because they are still in testing. Just linking here so you can get a visual idea of what I'm talking about.
Relevant Projects Section HTML link
I can't post it in a codepen because none of the images will show.
Alright I doubt anyone will ever read this but I solved it myself. Now to be fair this is somewhat specific to my ID system but here goes
Each tab is a list item in the unordered list of the nav-tab bar. This is important because the "active" class is placed on the LIST item not the TAB itself.
Each tab content has an ID which I have titled "Project-Tab" where Project is the name of that particular project.
Each tab then links (href) to the content of that tab with an ID I have titled "Project" where project is the name of that particular project.
Now in my overview section on each of the "project cards" that I have linked to the tab content I added a class "Overview_Tab"
With that explanation here is the solution
$('.Overview_Tab').click(function(){
/* Gets the href of the clicked "project card" which is a link to the tab
content for that project. I then concatenate '-Tab' onto the end to get the
id of the associated tab (as explained above) */
var target = $(this).attr('href')+'-Tab';
// Get the parent (the list item containing that tab div) this is where
"active" needs to be placed
var target_parent = $(target).parent();
// Remove the active class on the overview tab
$('#Overview-Tab').parent().removeClass('active');
// Add active class to the target parent
target_parent.addClass('active');
});
So to generalize this you want your tab ID and tabContent ID to be the same just add '-Tab' to the end of your tab ID.
Pick any class name you want to add to the element that is replicating a tab (I picked "Overview_Tab" but you can put anything there as long as it matches between the HTML and the JS function)
Related
Class methods are exposed in the file system, they take up a lot of space and are not needed.
How to make them not show?
Open "Project View" panel options (right click on the panel header or click on the gear/cog icon)
Ensure that "Tree Appearance | Show Members" is unchecked/disabled.
From https://www.jetbrains.com/help/phpstorm/project-tool-window.html#title_bar_context_menu
Show Members
If this option is on, the files in the tree that contain classes turn into nodes. When such node is unfolded, the contained classes with their fields, methods, and other members of the selected item are shown.
I have a table in my wiki as below. Right now when I click on the red pdf icon it takes me to the file description page for the target file, myfile.pdf.
Instead, I want it to immediately open the myfile.pdf, not require 2 clicks to get it open.
Below is what that table cell entry looks like (1st row, 2nd col in the table). How do I modify it to do what i want?
[[Image:Pdf_icon.png|20px|link=File:myfile.pdf]]
You can use one of the following methods:
[[Image:Pdf_icon.png|20px|link=Special:FilePath/myfile.pdf]]
or
[[Image:Pdf_icon.png|20px|link={{filepath:myfile.pdf}}]]
The slight difference is that the first method links to an internal special page that automatically redirects to the file, and the second method generates a direct link to the file.
I'm trying to find a way to change order of sitecore custom / editor tabs. by default sitecore displays custom tabs, content tab and dynamic tabs, and according to
https://www.markstiles.net/Blog/2011/02/27/editor-tabs-in-sitecore.aspx
the only way to change order of tabs is to dig into sitecore. sitecore forum isn't helpful either. any ideas if this is configurable in sitecore? above mentioned post is pretty old and sth might have changed since then, but I haven't found any info about it.
As of Sitecore 8.0 update 3, the sitecore code for retrieving the tabs is still the same with the addition of the buckets tab:
Retrieved from Sitecore.Client.dll in the Sitecore.Shell.Applications.ContentManager.Editor class
private static List<Editor.EditorTab> GetEditorTabs(Item item, Editor.Sections sections)
{
Assert.ArgumentNotNull(item, "item");
Assert.ArgumentNotNull(sections, "sections");
List<Editor.EditorTab> editorTabs = new List<Editor.EditorTab>();
Editor.GetCustomEditorTab(item, editorTabs);
Editor.GetCustomEditorTabs(item, editorTabs);
Editor.GetContentTab(item, sections, editorTabs);
if (InternalSettings.ItemBucketsEnabled)
{
Editor.GetNewSearchTab(item, sections, editorTabs);
}
Editor.GetDynamicTabs(item, editorTabs);
return editorTabs;
}
So unfortunately, it looks like this is still the order by which they get rendered. As the article mentions, this could potentially be overridden, but likely to be quite involved.
I've achieved this slightly different. Not 100% satisfied with the solution, but it works until there is a better option.
In my custom tab, that displays as the first tab and therefore the active tab when I select an item. I have added the following JavaScript code to change the active tab back to the standard Sitecore Tab.
parent.scContent.onEditorTabClick(this, null, "Content");
The code goes up to the parent window as the Tab is an iFrame and set the active tab to the "Content" tab.
My custom tab is a SPEAK tab running on Sitecore 8. Here is the SPEAK javascript PageCode for reference.
https://github.com/sobek1985/SitecoreContentEditorTabs/blob/Complete/SitecoreContentEditorTabs/SitecoreContentEditorTabs.js
And a blog post i wrote on the subject too: http://mikerobbins.co.uk/2015/07/14/sitecore-content-editor-tabs-in-speak/
This seems simple enough but I can't quite think of how to actually do it...
In IBM Web Content Management (WCM) version 7 I have a Presentation Template (PT) which calls a Menu Component to display some content items.
I also have some (static) links on the sidebar which I want to basically just change the menu component that is being used, and that's it.
So for example...
In the PT:
[Component name="Main Page"]
When I click on a link, I want the exact same PT to be displayed except I want it to use:
[Component name="Next Page"]
Basically, Main Page and Next Page are showing the same content items, they just have different filters on them (so they appear to be different pages). The "Main Page" shows "everything" and then if you click on a link it's suppose to only show a subset of that.
I can't quite figure out how to connect the link to the PT to change it. I've thought about using JavaScript or JSP to simply rewrite the HTML, but even then I'm not sure how I set it up to say that: "if the link has been clicked, rewrite the HTML" because I'm not sure what to even point the link to, or pass through the link.
I thought about creating different content items with different PTs to link to, but there are about a dozen links (and therefore a dozen different Menu Components that I want to use), so I thought it might be better in the long run to just use 1 dynamic PT (in case the number of links grows).
It is only that one component that needs to be changed in order to display how I need for every link though.
Any ideas how to go about doing this?
So this is how I resolved this:
I created a component reference element in the content items called "menuComp" and then I set that to point to the appropriate Menu Component for each particular page.
In the presentation template, I removed the component reference and changed it to an [Element] tag which used key="menuComp".
I’m working in Dreamweaver CS3. I’ve created a template and made my horizontal menu bar an editable region. I realize now that was a bad decision since I want to be able to edit the menu once and not on every page. I want to turn it back into a non editable region.
I’ve tried:
Modify>Templates>Remove Template Markup (it’s grayed out)
Modify>Templates>Detach from Template (it’s grayed out)
I’ve manually removing the markup in the code, yet it still remains editable
I don’t know what else I can do. Is this because it’s a spry menu?
If you've marked a region of your template file as editable and you want to lock it (make it non-editable in template-based documents) again, use the Remove Template Markup command.
Click the tab in the upper-left corner of the editable region to select it.
Do one of the following:
Select Modify > Templates > Remove Template Markup.
Right-click (Windows) or Control‑click (Macintosh), then select Templates > Remove Template Markup.
The region is no longer editable.
Once you move something into an editable region in DW, you will have to manually remove it from all child pages. You can certainly move the code back on the dwt file to an uneditable region, but all child pages will not retroactively edit code or text in the editable region.
This is because DW assumes that anything in an editable region is your content and thus not to be overwritten by changes to the template. Changes to stuff inside an editable region will be applied to new pages created from the template only.
So, your steps are:
1) Move the menu code back to the uneditable region in the template
2) Do a Find and Replace to remove the code from the editable region in all child pages completely in your entire site
3) Update all child pages so the menu code gets replaced in the uneditable region.