I've been trying to find a method on moving the TOC in MediaWiki to the sidebar or any location really that I want it outside of the main content but with no success.
The simplest looking solution brought up the following but it doesn't seem to actually move the TOC.
<div id="toc_sidebar_holder"> </div>
<script type="text/javascript">
var toc = document.getElementById('toc');
var toc_holder = document.getElementById('toc_sidebar_holder');
if(toc && toc_holder){
toc.parentNode.removeChild(toc);
toc_holder.appendChild(toc);
}
</script>
Then here is what the HTML looks like for the TOC currently.
<table id="toc" class="toc"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><span class="tocnumber">1</span> <span class="toctext">Cats</span>
<ul>
<li class="toclevel-2 tocsection-2"><span class="tocnumber">1.1</span> <span class="toctext">Type</span></li>
<li class="toclevel-2 tocsection-3"><span class="tocnumber">1.2</span> <span class="toctext">Meows</span></li>
</ul>
</li>
<li class="toclevel-1 tocsection-4"><span class="tocnumber">2</span> <span class="toctext">Dogs</span>
<ul>
<li class="toclevel-2 tocsection-5"><span class="tocnumber">2.1</span> <span class="toctext">Woof</span></li>
</ul>
</li>
</ul>
</td></tr></table>
Really looking for a solution or figuring out how to get the function above to work.
That script looks fine, but if you you test it, you might notice that toc is not assigned.
Put the script at the bottom of your skin, so it is executed when both elements are already available.
Related
I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>
Im a newbie and im trying to create a webstie just for practice, I realized that when I want to line break one of the divs (just to make stuf fancy) all my other divs gets linebreaked though, which I dont want. how do you fix this?
<ul class = "nav">
<div class = "head_dividers"><li> Hello <span> World </span> </li> </div>
<div class = "head_dividers"><li> stuff </li></div>
<div class = "head_dividers"><li> Help </li> </div>
</ul>
</div>
You should not have the <li> tags inside of a <div> tag. You can swap them if you like, but generally, <div> is a divider, and the <ul>/<li> items setup their own spacing/breaks (on each new list item).
The <br /> tag, on the other hand, is used inside of your text to create a break at a specific point.
I would recommend something a bit more simple like this:
<ul class="nav">
<li class="head_divider">...</li>
<li class="head_divider">Text<br />Here</li>
<li class="head_divider">...</li>
</ul>
and use CSS to add any necessary styles/spacing.
So I'm currently working on a small styleguide application and part of the functionality is that there is a sandbox area where certain modules get loaded into an iframe (to be able to simulate media queries). Now this content is inserted dynamically after the iframe is created along with the relevant styling and scripts.
The non event handler scripts work fine for example an alert box but the click handlers don't seem to be functional. Jquery is loaded in just fine so I've ruled that out.
This is a sample of the code being inserted
<!-- Accordion-->
<div class="accordion module-suggestions col-sm-3 col-xs-12 pull-right hidden-xs">
<h4>Most popular</h4>
<div class="accordion-section active">
<ul>
<li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
</li>
<li>How to measure performance of SMEs<span class="result-type guides"></span>
</li>
<li>How to measure performance <span class="result-type checklist"></span>
</li>
</ul>
</div>
<h4>Most recent</h4>
<div class="accordion-section">
<ul>
<li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
</li>
<li>How to measure performance of SMEs<span class="result-type guides"></span>
</li>
<li>How to measure performance <span class="result-type checklist"></span>
</li>
</ul>
</div>
<h4>Recommended</h4>
<div class="accordion-section">
<ul>
<li>Why your CCTV could land you in jail<span class="result-type case-study"></span>
</li>
<li>How to measure performance of SMEs<span class="result-type guides"></span>
</li>
<li>How to measure performance <span class="result-type checklist"></span>
</li>
</ul>
</div>
</div>
<!-- / Accordion -->
<script>
function accordion() {
var accordion = $('.accordion h4');
var accordionSection = $('div.accordion-section');
$(accordion).on("click", function(e) {
if (!$(this).next(accordionSection).is(":visible")) {
$(accordionSection).is(":visible") && $(accordionSection).slideUp();
$(this).next(accordionSection).slideDown();
}
});
}
accordion();
</script>
Just to clarify, the code is being put directly inside the iframe's HTML, I'm not calling it from it's parent.
The code responsible for inserting the html/js into the iframe:
iframePreview.contents().find('html').html( libraryScripts + '\n' + moduleHtmlAndJs);
Any idea how I can make these click handlers functional?
You could simplify this by using slideToggle and access the closest accordion-section within the handler.
Try this:
function accordion() {
$('.accordion').on("click","h4", function() {
var accordionSection = $(this).next('div.accordion-section');
$(accordionSection).slideToggle();
});
}
accordion();
Example: http://jsfiddle.net/7fpt87yv/
It seems that .html() strips out <script> tags.
How to prevent jquery from removing the <script> tags
Try to use .innerHTML instead:
iframePreview.contents().find('html').[0].innerHTML = libraryScripts + '\n' + moduleHtmlAndJs;
Rather than injecting your script into the iframe couldn't you create the function at global level on the iframe contentWindow itself?
For example:
iframePreview.contentWindow.accordion = function(){
$('.accordion').on("click","h4", function() { ... etc...});
}
Then call that function once you've inserted your html:
iframePreview.contentWindow.accordion();
So - you set the function from the parent window on the iFrame and call it from the parent once the HTML is in place.
Hi i'm having below scenario,
Fetching products from other 3rd party website,
Their product page having 3 different tabs and their default html structure is like this,
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"></div>
<div class="gallery"></div>
</div>
Is i click on second tab (spec tab) then the html structure is (contents adding dynamically),
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"> Specs goes here </div>
<div class="gallery"></div>
</div>
Because of the contents adding dynamically according to tab selection, i cant able to fetch complete contents. Is there any way to click other too and get all contents ?
Did anyone know how to solve this ?
Not sure what are you asking here. but may be worth a try :
var tabs = document.getElementsByTagName("li");
for (var i = 0, x; x = tabs[i++];)
x.click();
I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.