I'm trying to make tabbed comments section for WordPress. I use jQuery UI tabs to make it work. I have styled radio switches between tags but it does not works. When I click a tab, link click happens and radio button does not change.
my code for first <li> element looks like this:
<li class="active ui-state-default ui-corner-top ui-tabs-active ui-state-active" id="comments-evolved-Facebook-control" role="tab" tabindex="0" aria-controls="comments-evolved-Facebook-tab" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<a href="#comments-evolved-Facebook-tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">
<div class="switch switch-Facebook">
<input name="multicomments" id="Facebook-toggle" class="switch-control" type="radio">
<label class="switch-toggle" for="Facebook-toggle">
<div class="switch-handle"><span><i class="icon-multicommentsFacebook"></i></span>
</div>
</label>
</div><span id="comments-evolved-Facebook-label">Label Example</span>
</a>
</li>
see actual WordPress page: Page with comments
Solved! Here is the jQuery code I added.
jQuery('#".$tab."').click(function() {
jQuery('#".$tab."-toggle').prop('checked', true);
});
`".$tab."` is the `<li>` element ID
Related
I'm building a static site with Fomantic-UI (Semantic-UI). When I created my menus, but before I wired them up to links, I noticed that the text of the dropdown link item changed when one of the submenu items was selected. Neat! But since I'm not using anything that preserves state, that change is not sustained, now that the links take you to a new page. I'm fine with that, but I don't like how the text changes briefly before the browser loads the new page. I would like to eliminate that change altogether.
Or, if there's a way to maintain that change on the new page, I'd be fine with that too.
Thanks!
Edit: Here's my code, but the fix will have to reference the framework's JS.
<div class="ui dropdown link item">
<span class="text" role="group">Group 1</span>
<i class="dropdown icon"></i>
<div class="menu submenu">
<div class="header">Services</div>
<a class="item" href="#">Item 1</a>
<a class="item" href="#">Item 2</a>
<a class="item" href="#">Item 3</a>
</div>
</div>
JSFiddle
#gwyndall If you don't want to update the current text when you click the menu item. You can use action property with select in dropdown settings.
$('.ui.dropdown').dropdown({ action: 'select' });
Source: https://github.com/fomantic/Fomantic-UI/issues/1676#issuecomment-693587926
I have a simple question. I do not know how to add custom url in my latest version of wordpress today.
In the following snap.
The top menu is the one that i want to customize. Inspecting it and adding
a style of display none, i got the result. But I do not know how to add this Customize->custom-url. Do any one know how to ..
The following is the source code as follows:
<div class="full-container">
<a href="http://www.keynesdeepak.com/blog/" title="Deepak’s Website" rel="home" class="logo" style="
/* display: none; */
"><img src="http://www.keynesdeepak.com/blog/wp-content/uploads/2017/10/deepak_logo.png" class="logo-height-constrain" width="369" height="214" alt="Deepak's Website Logo"><h1 class="site-title logo-title" style="">Deepak's Website</h1></a>
<div id="search-icon">
<div id="search-icon-icon"><div class="vantage-icon-search"></div></div>
<form method="get" class="searchform" action="http://www.keynesdeepak.com/blog/" role="search" style="width: 1080px;">
<input type="text" class="field" name="s" value="" placeholder="Search">
</form>
</div>
<div id="so-mobilenav-standard-1" data-id="1" class="so-mobilenav-standard"></div><div class="menu" style="
"><ul>
<li class="current_page_item"><span class="icon"></span>Home</li><li class="page_item page-item-45"><span class="icon"></span>Blog</li>
<li class="page_item page-item-41"><span class="icon"></span>Contact Me</li>
<li class="page_item page-item-43"><span class="icon"></span>Gallery</li>
</ul></div>
<div id="so-mobilenav-mobile-1" data-id="1" class="so-mobilenav-mobile"></div><div class="menu-mobilenav-container"><ul id="mobile-nav-item-wrap-1" class="menu"><li><span class="mobile-nav-icon"></span>Menu</li></ul></div> </div>
Go to Appearance -> Menus and add new custom link to your menu and drag it according to the order you want.
see the screenshot below:
Edit your first url, go to theme appearance editor
<a href="http://www.keynesdeepak.com/blog/" title="Deepak’s Website" rel="home" class="logo" style="
With thanks to trevorp the basic side nav bar works perfectly. Then I needed to nest some menu items. This seems logical to me
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#20"><i class="dropdown-toggle"></i>Accounting <span class="caret"></span></a>
<ul class="sub-menu collapse" id="20">
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#21"><i class="dropdown-toggle"></i>Income <span class="caret"></span></a>
<ul class="sub-menu collapse" id="21">
<li>Customers</li>
</ul>
</div>
</li>
<li>Purchases</li>
<li>General Ledger</li>
<li>Banks</li>
<li>Invoicing</li>
<li>Financials</li>
<li>Utilities</li>
<li>Reports</li>
</ul>
</div>
</li>
But it produced this result
That just closes when clicked, instead of opening the li item... It's probably something very basic, but the art of staring at it hasn't produced any results yet :-)
I suspect clicking on the sub menu item is closing the parent, but no idea how to overcome that. No idea why the formatting is totally different either!
Thank you
======================= UPDATE =======================
If the second accordion-group div is removed it takes care for the blank menu item, and disabling the script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
$('.accordion-group .in').collapse('hide');
});
that closes the main menu items when another is opened now gives this result..
That now leaves two questions
How can I select a sub menu item without closing the accordion group?
How can I format the sub menu items in the same colour as the others (white not orange)?
Finally managed to find a way to solve question one
If there is a less verbose method I'd love to hear :-)
Add an onlick method to the sub-menu item
<li class="collapsed active">
<a onclick="holdCollapse();" data-toggle="collapse" data-target="#Menu_21" class="dropdown-toggle collapsed"><i class="fa fa-gift fa-lg"></i>Income </a>
<ul class="sub-menu collapse" id="Menu_21">
<li>Customers</li>
</ul>
</li>
and add a hidden field
<input type="hidden" value="0" id="HiddenField" />
add this script
<script>
function holdCollapse(e) {
$('#HiddenField').val('1');
}
and edit the original script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
var isSubMenu = $('#HiddenField').val();
if (isSubMenu == '0') {
$('.accordion-group .in').collapse('hide');
}
$('#HiddenField').val('0');
});
I use dropdownlist populated with checkboxes, as shown in the picture.
http://pokit.org/get/?7c1ecede2a99c5fc2c15f63baa153dae.jpg
Here is dropdown code, although I think it doesn't matter.
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
#{ int counter = 0;}
#{ string id = "SelectedTypes_" + counter.ToString() + "_";}
#foreach (var rightGroup in Model.RightGroupList)
{
<li>
<label class="checkbox">
<input id="#id" name="SelectedTypes[#counter]" value="#rightGroup.Id" data-value="#rightGroup.Id" type="checkbox" class="input-md minimal" checked />
#rightGroup.RIGHTGROUPNAME
#{ counter++;}
</label>
</li>
}
</ul>
</div>
Dropdown is located in partialview, so it's height is limited by height of that same partialview.
Is there any way for this dropdown to be visible out of bounderies of partialview, I want it to drop down as much as it can. I know it isn't the best solution, but I'll deal with scrolling later.
Could it be done by expanding partialview over entire screen?
Thanks
Edited
Here is HTML code, (all controls are in the same row div)
<div class="row">
<div class="col-md-12 col-lg-12 form-group" id="divRightGroupList">
<div class="dropdown" style="overflow: visible">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" style="overflow: visible" role="menu">
<li>
<label class="checkbox">
<input id="SelectedTypes_0_" name="SelectedTypes[0]" value="1" data-value="1" type="checkbox" class="input-md minimal" checked />
LICNA INVALIDNINA (CLAN 12 ZAKONA)
</label>
</li>
</ul>
</div>
If you have a div with a defined height and the CSS style, overflow:hidden, applied, then anything inside that div that extends past the boundaries will be cut off. The only way around this is to not use overflow:hidden. If you set it either to visible (which is the default if you just remove the overflow property completely) or auto (which will enable scrollbars within the div), you'll be able to see the entire dropdown menu. However, in the latter case (overflow:auto), you will likely have to scroll to see the cut-off portion of the dropdown menu. The only way to just have it display is to go with visible.
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page