I am currently using Bootstrap Timeline (example here). Since this will be a long timeline I want at the top of it to have some symbols (each with a date and a unique ID), which will represent certain event. When clicking a certain symbol I want to be redirect to the correspondent event on the timeline.
Nevertheless, at the moment, when I click the symbol I am redirected to the top of the div 'container' which contains the timeline and not to the specific <li>
Example:
LINK:
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
TO:
<div class="container">
<ul class="timeline2">
<li id = "type1" onclick = "window.location.hash = 'type1';">
</li>
<ul>
<div>`
Remove id from the link and remove the onclick from the timeline item. The hashtag in href should jump to the id set in the timeline item.
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
<div class="container">
<ul class="timeline2">
<li id="type1">
</li>
<ul>
<div>
Because you have the same id "type1" for two DOM elements. Id should be unique.
Related
I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).
That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.
I want to do this using php or css, but not using javascript.
I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.
Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.
<ul>
<li>
Menu item 1
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
</ul>
<li>
<a href='item-2'>
Menu item 2
</a>
<li>
</ul>
<article>Page contents</article>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
Wrap the bottom ul with this code in php.
This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.
<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
<?php } ?>
This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.
How can I create a function to scan all menu items from Drupal 7 system and if there is a nested ul, add dropdown CSS classes to the nested ul and add a custom attribute to the parent li container? Im using UIKIT which will automatically create the dropdowns.
Here's my current menu HTML output:
<ul class="menu">
<li class="first last expanded">
<a title="" href="/node/add">Add content</a>
<ul class="menu">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Here's what I need it to be:
<ul class="menu">
<li class="first last expanded" data-uk-dropdown>
<a title="" href="/node/add">Add content</a>
<ul class="menu uk-dropdown">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Im looking for the simplest approach possible.
You can crawl menu tree your self and write out menu HTML as you like. Used that and should be something like:
$tree = menu_tree_all_data('menu_machine_name');
Also, if I remember well, if you do only that your active (current) menu item won't be marked any way, and for marking it you have to also call (after getting $tree variable) :
menu_tree_add_active_path($tree);
But again, if I remember well, that function is only available if you install "Menu block" module...
Print out $tree variable after that and organize your code to crawl recursively menu tree you collected.
I have to pass the id of selected tab when another action occurs
<ul class="nav nav-tabs" id="myTab">
<li <?php if($all_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($select_index== 1){?> class="active" <?}?>>Selected</li>
<li <?php if($reject_index== 1){?> class="active" <?}?> >Rejected</li>
</ul>
I have a dropdown to filter the tab data..First tab is always active.
If i want to filter the second tab,then i click the dropdown the action occur..but the tab selected is first one..I want the Second one
If you are looking to capture the value on form submit, create a hidden field in your form. So every time on click, capture the id of the tab and store in hidden field.
<input type="hidden" id-"hidden" name="tab-selected" />
In script
$(document).on("click","#myTab a",function() {
var sel = $(this).attr("href");
$("#hidden").val(sel);
});
so on form post, you will get the selected tab's value.
Here is the fiddle demo
In View
<ul class="nav nav-tabs" id="myTab">
<li <?php if($tab_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($tab_index== 2){?> class="active" <?}?>>Selected</li>
<li <?php if($tab_index== 3){?> class="active" <?}?> >Rejected</li>
</ul>
in Controller
public function FunctionName($value)
{
# code...
// pass which id should be active alone with data
}
I'm adding an 'active' class to clicked menu bar items but it is removing when page goes to other link after click.
This is my HTML:
<ul class="nav navbar-nav">
<li class="active">
News / Article
</li>
<li>
Players
</li>
<li>
Forum
</li>
<li class="dropdown">
Rules <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
</ul>
</li>
<?php if(!empty($session)){ ?>
<li>
Profile
</li>
<?php } ?>
<li>
Gallery
</li>
<?php if(empty($session)){ ?>
<li>
Register
</li>
<?php } ?>
</ul>
Javascript:
$(".nav li").click(function () {
$(".nav li").removeClass('active');
$(this).addClass('active');
});
You cannot do that with only that javascript. You need to get data from url and decide which menu to be active.
First get current url in page. And do following operation;
$(".nav li").removeClass('active');
var urlType = document.URL.split("/");
$("a[href*='/" + urlType + "']").addClass("active"); // contains /players
When you go this url;
http://yourdomain.com/players;
the js will be;
$(".nav li").removeClass('active');
$("a[href*='players']").addClass("active");
And Players menu will be active
You are re-loading the site, so it load the HTML like the first time.
So you only will have the 'active' class until you don't leave or reload that website.
A way to fix it , load the content by Ajax, and the menu will not change.
I hope it will help you.
The active class probably removes because you're loading a new view when you click on a link and this loads some other HTML.
It is possible to create an IF query for the tag in SPIP?
When i have only one article linked to the tag than he take me directly to the article. But if i have more than 1 article, than he does taken me to the tag page of spip, where are the listing of the linked article.
Here the code to go directly to the article
<div id="tagsphere-#ENV{id_article}">
<ul>
<BOUCLE_mot(MOTS){id_groupe ?}>
<B_article>
<li>
<a<BOUCLE_article(ARTICLES){id_mot = #ID_MOT}{0, 1}> href="#URL_ARTICLE"</BOUCLE_article>>
#TITRE
</a>
</li>
</B_article>
</BOUCLE_mot>
</ul>
</div>
and here the code to go to the tag menu
<div id="tagsphere-#ENV{id_article}">
<ul>
<BOUCLE_mot(MOTS){id_groupe ?}>
<li>[(#TITRE)]</li>
</BOUCLE_mot>
</ul>
</div>
Thanks in advance
Try this, will work with any SPIP version.
<BOUCLE_mot(MOTS){id_groupe ?}>
[(#REM) Link to mot]
<BOUCLE_check(ARTICLES) {id_mot} {1,1}>
<li>#_mot:TITRE</li>
[(#ID_ARTICLE|oui)]
</BOUCLE_check>
[(#REM) Link to one article]
<BOUCLE_one(ARTICLES) {id_mot} {0,1}>
<li>#_mot:TITRE</li>
</BOUCLE_one>
<//BOUCLE_check>
</BOUCLE_mot>
Conditional display is a real lack in SPIP. This is what I would do (don't have any SPIP environment with me to check).
<div id="tagsphere-#ENV{id_article}">
<ul>
<BOUCLE_mot(MOTS){id_groupe ?}>
<BOUCLE_articles(ARTICLES){id_mot = #ID_MOT}>
<B_article_unique>
<li>
<a<BOUCLE_article_unique(ARTICLES){id_article}{si #TOTAL_BOUCLE|==1}> href="#URL_ARTICLE"</BOUCLE_article_multiple>>
#TITRE
</a>
</li>
</B_article_unique>
<BOUCLE_article_multiple(ARTICLES){id_article}{si #TOTAL_BOUCLE|!=1} />
<li>
<a href="#URL_MOT">
#TITRE
</a>
</li>
</B_article_muliple>
</BOUCLE_articles>
</BOUCLE_mot>
</ul>
</div>