Develop Reference

Click handler inside Iframe is not working after content is being inserted

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.

Why is the jQuery function showHide() undefined?

I'm really new at trying to use jQuery, so please forgive me for asking what is likely a simple question. Perhaps it isn't even related to jQuery, but anyway, here's the scenario. I'm trying to put in a hidden div which I only want to show up when the user hovers their mouse over the Learner's anchor tag on the page. I've started with only one anchor tag, to get it working first before implementing the rest of them. I've downloaded a jQuery library and included a reference to it, so here's some of what I've got in my page's head section:
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>
Next I've defined an unordered list, using the styling above to make it horizontal, and I've got a hidden div after it, which I want to show when the user moves their mouse over the first anchor in the unordered list. Here's the relevant HTML from within the body tag:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
However, when I run this from within the browser (IE11) nothing happens. Using the F12 web developers tools built into IE11 I learn that it giving an error of "showHide is undefined". Why is it doing that? The showHide() function is most certainly in the jquery-1-11.1.js file, which most certainly is in my js folder. What have I done wrong, or failed to take into account?

jQuery works kinda different than that. You have to make it look like this:
$("#dropdown1").toggle()
You better make a javascript file and separate the JS from the HTML:
HTML:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
The JS
$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});
What this does is on the navcontainer li click, we make a handler, which does something if it contains a #. Then we select that element #container1 which is in the href, also is the selector for the element which we want to show. And we toggle that element.

There is no such function as showHide you could use toggle() or show() or hide()
in you current scenario uou would couple them with $(this). or your chosen selector.
As an example of targetting a particular element with jQuery we have added the class hover-learners and target it with the selector below.
HTML:
<div id="navcontainer">
<ul>
<li>Home
</li>
<li>Learners
</li>
<li>Teachers
</li>
<li>Businesses
</li>
<li>Contact Us
</li>
</ul>
<div id="dropdown1">
<ul>
<li>Description A
</li>
<li>Description B
</li>
<li>Description C
</li>
</ul>
</div>
Add the below javascript as a file or within <script type="text/javascript"> code here</script> after including your jQuery library file.
Javascript:
// wrap everything in jQuery's ready function to make sure the page has fully loaded before executing the javascript
$(document).ready(function () {
//select learners and apply mouseover event
$('.hover-learners').on('mouseover', function () {
$('#dropdown1').show();
});
//select learners and apply mouseout event
$('.hover-learners').on('mouseout', function () {
$('#dropdown1').hide();
});
});
Also since the show and hide methods manipulate the display CSS property I have added
CSS:
#dropdown1 {
display:none;
}
and remove the inline style="visibility:hidden" from the #dropdown1
Working demo here: http://jsfiddle.net/robschmuecker/J6U7d/

Get value of list item

I have a list like so:
<div class="navigation">
<ul id="navigation">
<li>About</li>
<li>Procedures</li>
<li>Consultations</li>
<li>Gallery</li>
<li>3D Library</li>
<li>Contact Us</li>
</ul>
</div>
I am trying to use Javascript to get value of the first <li> and alert it out...like so:
alert(document.getElementById('navigation').options[1]);
Can someone tell me what I am doing wrong and how to fix this?

The .options property is for select elements.
You should use .children[0] and then .textContent or .innerText for older IE.
Start by defining a variable at the top of your application for browser support:
var text = "textContent" in document ? "textContent" : "innerText";
Then use it like this:
alert(document.getElementById('navigation').children[1][text]);
DEMO: http://jsfiddle.net/4ec4R/

Is my slide-to-anchor jQuery routine a correct use of JavaScript, or is there a better way?

I'm currently working on a project with a one page design that'll slide up and down between sections on an <a href> link...
Currently, i have it written as follows:
<ul>
<li>home</li>
<li>artist's materials</li>
<li>picture framing</li>
<li>gallery</li>
<li>contact us</li>
</ul>
...with the most relevant portion being the links:
<a href="javascript:void(0)" onClick="goToByScroll('contactus')">
Then in a .js file I have:
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Is this ok? Or should this be done a different way?

A better approach would be to not use anchors in this case, you can simplify your markup and code like this:
<ul id="scrollMenu">
<li rel="top">home</li>
<li rel="artistsmaterials">artist's materials</li>
<li rel="pictureframing">picture framing</li>
<li rel="gallery">gallery</li>
<li rel="contactus">contact us</li>
</ul>
And then this script:
$(function() {
$("#scrollMenu li").click(function() {
$('html,body').animate({scrollTop: $("#"+$(this).attr("rel")).offset().top},'slow');
});
});
This adds a click handler to your <li> elements telling them to use their rel="" property to know where to scroll to. Just change your CSS around to point to the <li> elements instead of <a> and you're all set.

jQuery drop-down navigation using unordered lists

I'm trying to make a navigation dropdown with jQuery that looks like this:
<ul id="home" >
<li class="navtab">TABANME</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
</ul>
The <li> .navtab is visible at all times - the sub-menu items start out hidden. I've attached the .hover() to the <ul> element (#home), but when the cursor enters the sub-menu <li> elements, the mouseout for #home fires, and the sub-menu items hide.
I know this has to do with event bubbling and mouseover/mouseout, but I can't figure out the logic of how to keep the menu open while the cursor is over the entire <ul>. The jQuery I currently have is:
$('#thome').hover(
function(){
tabShowSubnav($(this).attr('id'))
},
function(){
tabHideSubnav($(this).attr('id'))
});
function tabShowSubnav(menu){
var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';
$(tb).css('height','239px');
$(sb).show();
}
Any suggestions?

Do yourself a huge favour and change how you structure your menu markup to:
<ul id="home" >
<li class="navtab">
TABANME
<ul class="submenu">
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
</li>
</ul>
And put the hover event on li.navtab to make the submenu visible. You'll find this much easier to do. For example, the CSS:
ul.submenu { display: none; }
with:
$(function() {
$("li.navtab").hover(function() {
$(this).children("ul.submenu").show();
}, function() {
$(this).children("ul.submenu").hide();
});
});
and you're most of the way there.
That all being said, I'd highly suggest using an existing jQuery menu plugin. There are lots of these about. I've had relatively good experience with superfish. There's little point reinventing this particular wheel.