We Keep Coding

mark.js trigger event from selection

I can't seem to figure out how to use mark.js (or some other tools) that would allow me to trigger the animated highlighting when a button is selected in a table of contents.
e.g. Imagine on the left side of the page is a list of questions. When the user selects one of these questions/clicks on a question, the corresponding answer gets highlighted on the right side, somehow. It could be that the right side of the page goes dark except for the corresponding text or a red frame animates around the corresponding text, or is highlighted...any ideas?
In other words, the highlighting is triggered based off of a click or tap, and not a search result.

You don't need mark.js as it's much more easier:
$(function() {
$("[data-question]").on("click", function() {
var number = $(this).attr("data-question");
$("[data-answer]").removeClass("highlight");
$("[data-answer='" + number + "']").addClass("highlight");
});
});
.questions,
.answers {
float: left;
width: 50%;
}
.highlight {
background: red;
}
<div class="questions">
<ul>
<li data-question="1">Question 1</li>
<li data-question="2">Question 2</li>
<li data-question="3">Question 3</li>
</ul>
</div>
<div class="answers">
<ul>
<li data-answer="1">Answer 1</li>
<li data-answer="2">Answer 2</li>
<li data-answer="3">Answer 3</li>
</ul>
</div>

jquery add tag around unnested text

This is a really hard question to find a title for, but here is it.
I got this HTML, that I can't change
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
And I'd like to apply things to the "first part of the list" and "Second part of the list" part, but not the nested ul part, like CSS transform scaleY, and a custom Jquery onClick method.
So, the solution I'd like would be a way to JQueryly add around those.
Is this possible?
Thank you a lot

To achieve this you can filter() the li contents() to retrieve the text nodes within it, then wrap that in a span and apply the needed CSS rules. Something like this:
$('#container > ul > li').each(function() {
var foo = $(this).contents().filter(function() {
return this.nodeType == 3 && this.textContent
}).wrap('<span />');
});
#container > ul > li > span {
color: red;
display: inline-block;
transform: scaleY(2);
margin: 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
</div>

Show/Hide Submenu in wordpress

I know there's tons of pages dedicated to this on SO but my piece of code just doesn't seem to work. I keep getting a "Uncaught ReferenceError: $ is not defined". I've made use of jquery to show/hide my wordpress submenu when a user hover over the parent. (See code below)
Javascript
<script type="text/javascript">
$('.menu .nav li > .sub-menu').parent().hover(function() {
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});
HTML
<div id="masthead" class="menu navbar navbar" role="banner">
<div class="logo-navbar container-logo">
<div class="container-fullwidth">
<div class="navbar-header">
<div class="menu-left-container"><ul id="menu-left" class="nav navbar-nav"><li id="menu-item-184" class="menu-item">Item 1</li>
<li id="menu-item-239" class="menu-item"> Item 2
<ul class="sub-menu">
<li id="menu-item-238" class="menu-item">Sub-Item 1</li>
<li id="menu-item-237" class="menu-item">Sub-Item 2</li>
<li id="menu-item-240" class="menu-item">Sub-Item 3</li>
<li id="menu-item-241" class="menu-item">Sub-Item 4</li>
</ul>
</li>
</ul></div><a href="#" class="navbar-brand">
<img src="logo.png">
</a>
<div class="menu-right-container"><ul id="menu-right" class="nav navbar-nav"><li id="menu-item">Item 3 Illustrations</li>
<li id="menu-item-189" class="menu-item">Item 4</li>
</ul>
</div>
</div>
</div>
</div>
I guess im not referencing the right function. Hope somebody helps me out!
Cheers!

You need to make sure:
1.- You have included jQuery on the header/footer of your page.
2.- If you are using native jQuery from WordPress is defined as jQuery not as $.
3.- You should wrap your code inside of a $(document).ready function.
Example:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.menu .nav li > .sub-menu').parent().hover(function() {
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});
});
})( jQuery );
</script>
Reasons:
1.- You can test this on the chrome console by typing $ or jQuery in the console, and you should have and output like:
function (a,b){return new e.fn.init(a,b,h)}
2.- If you are using the jQuery included by WordPress you need to use jQuery instead of $ as mentioned before to avoid conflicts with other libs.
3.- Since otherwise the code is executed as soon as the document is ready if not your code can be executed before the DOM elements are on the document.

Are you importing jQuery properly? If not add this to the header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
If that isn't the issue you can also try to see if adding $ = jQuery to the top of your script does the trick.

show and hide list items on hover

I have an unordered list looking like this
HTML
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
So my question is of course, how can I make this script to work for all items.

I'd suggest:
$('#pop li').hover(
function() {
$('div.info').eq($(this).index()).show();
}, function() {
$('div.info').eq($(this).index()).hide();
});​
Working with slightly-changed HTML:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>​
JS Fiddle demo.
What I forgot to say is that this will show the .info element that corresponds to the same index as the currently hovered-over li element, so hovering the first li will show the first .info, and so on. So it's dependant on maintaining a predictable relationship between the li and the .info elements.
As an aside, it's possible to replicate this interaction using just CSS, albeit it requires a click rather than a hover event, so long as you amend the li HTML to include a link that points to the id of the relevant div:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>​
And the CSS:
.info {
/* hides by default */
display: none;
}
.info:target {
/* shows when targeted */
display: block;
}
JS Fiddle demo. ​
Incidentally, quoting attributes is optional (though if it's an attribute that contains white-space it must be quoted), but if you quote you must have a quote at both ends of the value you're quoting: <div id="info-1></div> is not valid HTML (since the string isn't closed until the next line at the beginning of the next attribute); use: <div id="info-1"></div>.
And, further, your posted jQuery:
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
This can't work, because:
the selector won't match any elements, you're trying to target an a element inside of a pop element (which, obviously, doesn't exist). What you need to do is preface the id with a # (as you do in the next line, so I'm assuming a typo there), to give: $('#pop a'). But,
there are no a elements in the #pop element, therefore no events will be, or can be, bound.
If you need to use that form, however, then a couple of adaptations can make it work:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).text().match(/(\d+)/)).show();
},function(){
$('#info-' + $(this).text().match(/(\d+)/)).hide();
});
});
JS Fiddle demo.
References:
eq().
hide().
hover().
index().
match().
show().
text().

try this :
$(function(){
$('#pop li').hover(function(){
$('#info-'+$(this).index()+1).show();
},function(){
$('#info-'+$(this).index()+1).hide();
});
});

you've binded an hover event on all a tags inside pop element (though you have syntax error, you should always add '#' when addressing an element by id) and you don't have them
what you''re looking for is :
$('#pop li').hover(function() {
});

Here is sample http://fiddle.jshell.net/7QmR5/
HTML:
<div id="pop">
<ul>
<li id="li1">Item 1</li>
<li id="li2">Item 2</li>
<li id="li3">Item 3</li>
</ul>
</div>
<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>
JavaScript:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).attr('id').replace('li','')).show();
},function(){
$('#info-' + $(this).attr('id').replace('li','')).hide();
});
});​

I've got an easier solution:
CSS
#info-1{
display:none;
}
ul > li:hover #info-1 {
display:block;
}
giving the li elements an id will make it easier to select them using CSS unless you want to use pseudo I believe it's called.
Or the jQuery if needed:
$('li:eq[0]','#pop').hover(function(){
$('info-1').show();
});

Making parent link unclickable in a drop-down menu with jQuery

I have a drop-down menu that are dynamically added through WordPress. It looks like this:
Pictures
Sea
Forest
City
"Sea", "Forest" and "City" is categories with "Pictures" as parent category.
My question is:
How do I make the "Pictures" category unclickable?
I did this with jQuery:
$(document).ready(function(){
//Make parent links unclickable
$(".page-item-3").click(function(){
return false;
});
});
...and this with CSS:
li.page-item-3 a {
cursor:default;
}
.page-item-3 ul li a {
cursor: pointer;
}
Markup looks like this:
<div id="menu" class="jqueryslidemenu">
<ul>
<li class="cat-item cat-item-1 current_page_item">Blabla</li>
<li class="page_item page-item-2">Blabla
<ul>
<li class="page_item page-item-28">Blabla</li>
<li class="page_item page-item-30">Blabla</li>
<li class="page_item page-item-39">Blabla</li>
</ul>
</li>
<li class="page_item page-item-3">Blabla
<ul>
<li class="page_item page-item-5">Blabla 1</li>
<li class="page_item page-item-7">Blabla 2</li>
<li class="page_item page-item-9">Blabla 3</li>
<li class="page_item page-item-11">Blabla 4</li>
<li class="page_item page-item-13">Blabla 5</li>
</ul>
</li>
<li class="page_item page-item-15">Blabla
<ul>
<li class="page_item page-item-222">Blabla</li>
<li class="page_item page-item-224">Blabla</li>
<li class="page_item page-item-226">Blabla</li>
</ul>
</li>
<li class="page_item page-item-17">Blabla</li>
<li class="page_item page-item-36">Blabla</li>
</ul>
</div>
This almost works But the jQuery code makes all the drop-down links unclickable too.
It would be great if anyone knows how to remove the status bar url while hover the "Pictures" link. But I don't think that is possible to make in moderns browsers such as Safari och Firefox?
Thanks!

I don't know what control you have because of Wordpress but you're having this problem because everything is contained in the title list item (page-item-3) and you're cancelling the click on this item. If you can apply a class to the title link itself, you can apply the jQuery to that directly.
Unfortunately you can't say ".page-item-3 a" because this apply to all links in the list.
Re-Edit - This should select the first link in the list and cancel the click value of that. You may need to apply this for each 'title' link you have.
$(".page-item-3 a:first").click(function() {
return false;
}

$(".page-item-3").children("a").click(function(e) {
e.preventDefault();
});
*****or with CSS*****
.unclickable {
z-index:-1;
}
$(".page-item-3").children("a").addClass("unclickable");

just replace the href attribute value with #. That way when the user clicks on it, the page goes to #, which is the same page they are on, and nothing happens. Keep the CSS you wrote so the hand pointer does not appear when they hover it, but remove the jQuery code.
Using jQuery:
$(".page-item-3>a").attr("href", "#")

Try this:
$(document).ready(function(){
//Make parent links unclickable
$("div > ul > li > a").click(function(){
return false;
});
});
This will disable all the first links in your list without needing the class name.

I use this :
$j = jQuery.noConflict();
$j(document).ready(function(){
//Make parent links unclickable
$j("div[id='nav'] > ul > li > a ").removeAttr("href");
});