Develop Reference

Any idea why this javascript preventDefault function is not being called in this scenario?

I have some HTML that should respond to user interaction. It is a page that I am trying to get to work offline. After I load the page while online I end up with fully rendered HTML. Some of the HTML contains show/hide functionality, and is meant to prevent deafult action of an element click. For instance, see this:
<div id="area49253971_6938" class="component interaction-component float-none clear-none interaction_booted">
<div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
<div>
<div class="data-field interaction-type">RevealContent</div>
<div class="interaction_title"></div>
<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
<div class="pointer">
<td>
<div id="area49253971_6940" class="component image-component float-left clear-none booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
<p class="body" id="area49253971_6941"><em><strong>Some question</strong></em></p>
</td>
</div>
<div style="display: block;">
<td>
<p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
</td>
</div>
</div>
<div class="interaction_data" style="display: none;">
<div id="area49253971_6939" class="component table-component float-none clear-none ">
<div class="component_caption"></div>
</div>
</div>
</div>
</div>
The app's code is not working offline (I think due to app's ajax calls and a bunch of other dependencies and app-specific stuff). (By the way, you can see the app code I am trying to rewrite into pure jQuery here: https://jsfiddle.net/0s6xdk9q/1/). So I decided to rewrite the app functionality like so:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = ($(this).find('.RevealContent')).children()[1];
var initialContent = ($(this).find('.RevealContent')).children()[0];
$(contentToReveal).slideToggle('slow');
var a = initialContent.find('a');
a[0].addEventListener("click", function(e){
e.preventDefault();
}, false);
});
});
Something is not quite right. Maybe because I have multiple click events. In any case, I confirmed by stepping through the code in Chrome that the variable a is indeed the element I expect. All element selectors are working fine. But nothing I do is resulting in this preventDefault from working. I have a feeling there is a simple answer, just not seeing it. Also, I am trying to do this in a way that doesn't require me to add anything to the HTML.
Thoughts?
thanks,
Brian

Can <a href> accept multiple parameters?

I've 5 different static pages: index.html syllabus-link.html advanced-linux.html contact.html gallery.html.
The functionality is quite simple - User clicks on one of the syllabus type and the user is presented with a `word file' having 2 options:
1) Download
2) View its contents.
The syllabus menu-header is not clickable, but when the user hovers on it, it would list the syllabus types in its dropdown-menu.
Let's say, I'm on index.html page and being there, I decided to click on "Linux" option from the dropdown-menu of syllabus page. The Linux word file gets displayed on the screen with options for the user to either view it's contents or download the word file(based on jQuery condition written in syllabus page). Now that I've landed on the syllabus page and this time when I try clicking on other options viz.., "Hadoop" or "CCNA", nothing shows up. But had I tried clicking either of "Hadoop" or "CCNA" option being on index.html page, it displays the correct "word file".
From external page ==> click works
Being on syllabus page ==> click doesn't work
Functionality is similar to what is shown ==>> https://www.atcs.com/ ABOUT US
section
I understand that if I write <a href="#">in syllabus page, then the current issue can be fixed, but I would lose the current working functionality. How do I achieve both?
Any help would be highly appreciated !!!
index.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">Home</li>
<li><a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>Advanced Linux</li>
<li>Contact Me</li>
<li>Personal Gallery</li>
</ul>
</nav>
</div>
</div>
syllabus-link.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">
Home
</li>
<li>
<a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>
Advanced Linux
</li>
<li>
Contact Me
</li>
<li>
Personal Gallery
</li>
</ul>
</nav>
</div>
</div>
<div id="linuxSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="hadoopSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="ccnaSyllabus" style="text-align: center;">
<font color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>View
</blink></font>the complete CCNA syllabus:<br><br>
<a href="documents/2- CCNA-Syllabus.pdf" target="_blank">
<img border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75" height="75">
</a>
</b>
</h5></font>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>Download
</blink></font> the complete CCNA syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/2- CCNA-Syllabus.pdf" download> <img
border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
JS file within syllabus-link.html
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
if (document.getElementById(anc) == linuxSyllabus) {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (document.getElementById(anc) == hadoopSyllabus) {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (document.getElementById(anc) == ccnaSyllabus) {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
});
</script>

Thanks for making it more clear on what you are trying to accomplish, the html and javascript you added helps significantly. The issue you are seeing is the javascript is only being run once on page load. I would recommend wrapping that up in a function, that way you can call it on page load, as you are doing now, as well as every time one of those links is clicked.
js file within syllabus
<script type="text/javascript">
$(document).ready(function() {
// this will get called when you want to swap the visible div
function updateVisibleDiv(viewName) {
// we are going to pass in a string as viewName, we want to check it against a string
// also, I added show for each syllabus, since we will be calling this to change
// which syllabus is visible, we have to show the one they select
if (viewName == 'linuxSyllabus') {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (viewName == 'hadoopSyllabus') {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (viewName == 'ccnaSyllabus') {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
}
// this will get run on page load - I like wrapping it in a function to make
// it more clear what we are doing on page initialization
function init() {
var syllabus = window.location.href.split('#')[1];
// syllabus should equal one of ['linuxSyllabus', 'hadoopSyllabus', 'ccnaSyllabus']
// we pass it in to our function, and it loads the correct screen
// up to this point, the page will work the same as it always has, this is just a refactor
updateVisibleDiv(syllabus);
}
// this will be the new functionality that updates which syllabus is visible
// this will be called when a link is clicked
function updateView() {
// get the value in your href from the clicked link
var syllabus = this.getAttribute('href').split('#')[1];
// now we will just update the visible div
updateVisibleDiv(syllabus);
}
// we are going to attach a click event to those three links
// this is selecting all 3 links by their id, and adding an on click event handler
$('#linux, #hadoop, #ccna').on('click', updateView);
// call the init function to initialize the page
init();
});
</script>
Disclaimer: I wasn't able to test this myself, let me know if you have any issues and I can try to help you work through them.

One big problem is that your conditionals within the if and else if statements should be using strings.
eg. if (document.getElementById(anc) == 'linuxSyllabus')
Secondly, you are using selectors within each conditional, and as far as I can tell those id's do not exist in the html. Your id's are linux, hadoop, and ccna.
You will want to select those as $('linux') OR by the href like this:
$("a[href='#linuxSyllabus'")
I'm somewhat unsure of the problem you are actually looking to solve, but those are some code issues that jump out at me. Also try checking the console in your browser and you'll surely see some errors.

I don't know it is what you looking for or not. I just give a solution whatever I can understand from your description.
You can use a common class for every syllabus container in syllabus like .syllabusContainer and change js like below
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
$(".syllabusContainer").hide();
$("#"+anc).show();
});
</script>
in syllabus page use same menu link as index.html

Web Page Script to Sort Order of Columns (not order of rows)

(Searched the web and here for a couple hours with no success...novice level programmer)
What I have: Table with single row, containing many short columns. The columns are entered chronologically in the HTML, adding new columns to the right. (This long row is in a short height, wide width page displayed in an iframe, and is manually scrolled left/right.)
What I want to do: Create a toggle-link reverse column display order so that the newest columns appear to the left and oldest to the right when desired.
Since my membership is new, I can't post a screenshot. So here's my best work-around attempt:
The web page this solution is to be applied to is found at:
thetransformer.us (home page, in the upper area iframe file)
A screenshot of a text illustration of desired output of a solution is found at:
thetransformer.us/images/reverse-col-order-illustration.jpg
CODE_BELOW: (Main page:) & (iframe file code (not scrollable DIV as I indicated earlier)
Many lines of the same type of code blocks omitted.
<div>
<iframe src="gallery.html" scrolling="yes" width="645" height="300" class="rounded10"></iframe>
</div>
<body style="margin:15px; background-image:url(images/bgrepeat.png)">
<div id="pl_main">
<button onclick="reverseOrder()">Reverse</button> <span style="color:white;">The horizontal link list is currently unavailable. Use View <span style="color:#99ccff;">Table of Contents</span> below.</span>
<table class="gallery">
<tr id="tableRow">
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br /><img src="pl_thumbs/1985-07_thumb.jpg" />
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br /><img src="pl_thumbs/1986-01-02_thumb.jpg" />
</a></td>
<td valign="top" id="19862"><a href="86-0304.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Mar-Apr<br /><img src="pl_thumbs/1986-03-04_thumb.jpg" />
</a></td>
<td valign="top" id="19863"><a href="86-0506.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> May-Jun<br /><img src="pl_thumbs/1986-05-06_thumb.jpg" />
</a></td>
</tr>
</table>
</div>
</body>
</html>
Thanks, Doug

[EDIT]: Here is the solution of reversing the column in JQuery.
<body>
<button onclick="sortReverse()">Click</button>
<table class="gallery">
<tbody><tr id="tableRow"><!-- id for test code, may remvoe later -->
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br><img src="pl_thumbs/1985-07_thumb.jpg">
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br><img src="pl_thumbs/1986-01-02_thumb.jpg">
</a></td>
</tr>
</tbody></table>
// Remember to include JQuery library.
<script>
function sortReverse(){
// Select the parent element by id.
var row = $("#tableRow");
// Get all the children (columns)
var columns = $.makeArray($("#tableRow > td"));
// empty the parent content
row.empty();
// Append the reversed children array to the parent
row.append(columns.reverse());
}
</script>
</body>

jQuery on click select first class and not all classes

I have this jQuery function :
$(".clack").hide();
$('.click').click(function(){
$(".clack").fadeThenSlideToggle();
});
Works great except all clack classes are toggled now.
Any idea how to open only the first class .clack after the clicked class .click?
I tried .clack:first but this results in only the first instance of class .clack being opened.
I want to open the first class .clack found after the clicked class .click.
I know I can rewrite my html and jQuery function with other solutions but the problem is the amount of data already existing for this function is very big.
My HTML :
<img class="click" style="cursor: pointer;" src="someimg.jpg"/>
<div class="clack">TEST TEXT1</div>
<img class="click" style="cursor: pointer;" src="someimg2.jpg"/>
<div class="clack">TEST TEXT2</div>
<img class="click" style="cursor: pointer;" src="someimg3.jpg"/>
<div class="clack">TEST TEXT3</div>
EXACT HTML EXAMPLE :
<strong>
<span>
<img class="aligncenter click" src="img1.jpg" alt="vesteging" width="436" height="36" />
</span>
</strong>
</p>
<div class="clack">
<center>
<span style="font-size: 10pt;">DATA TEXT 1</span>
</center>
</div>
<p> </p>

You can target only the .clack that comes immediately after the clicked .click
$('.click').click(function(){
$(this).next(".clack").fadeThenSlideToggle();
});

Rollover javascript for div display

I am trying to complete a rollover or hoverover for a few links to display a div with a few screenshots. How should I go about writing this script?
Here is my HTML
<section class="tabs-content">
<table class="imagetable" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan="2" class="reportname">Exam Reports</th>
</tr>
<tr>
<td valign="top" class="formlabel" width="50%"><p><strong>For Faculty</strong><br />
</p>
<ul>
<li><strong>Exam Summary</strong><br />
<em>Colorful and attractive end-of-exam report provides a clean summary from Learning Outcomes to At-Risk students<br />
</em><br />
</li>
<% if session("medical") = 1 then %>
<li><strong>Category Analysis</strong><br />
<em>Learning outcomes performance breakdown</em><br />
<br />
</li>
<% end if %>
<li><strong>Item/Question Analysis</strong><br />
<em>Take an in-depth look at each item and its' performance</em><br />
<br />
</li>
<li><strong>List of Students Scores</strong><br />
<em>Simple list of every exam takers performance…configurable</em></li>
</ul>
<p> </p>
<p><strong>For Students</strong><br />
</p>
<ul>
<li><strong>Release results directly to students</strong><br />
<em>Make results available to students…configurable from simple to colorful</em></li>
</ul></td>
<td valign="top" class="formfield" width="50%"><p><strong>Misc Administrative Reports<br /> <!--this section will be hidden and an image placeholder will display the images from the above report links-->
</strong></p>
<ul>
<li>ET Elapsed Time</li>
<li>Backward Navigation</li>
<li>Unanswered Essays</li>
<li>Mid-Exam Restart</li>
<li>Hardware Comparison</li>
<li>Absentee Report</li>
<li>Missing Keywords</li>
</ul></td>
</tr>
</table>
</section>
</div>
</div>
Ideas? I wan the last list to be replaced by an image on rollover of the above links.
Chris

Use jQuery's .hover() method. It allows you to define a method that fires when the user hovers over a selector. It also has a hoverOut event handler where you define a method to address as user leaving the selector.
jquery hover api
this would be relevant for you:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
so you sould do something like:
$('yourLinkSelector').hover(function(){
//handle the user mouseover here..
//remove last list
//show your screenshot div
}, function(){
//handle the mouseout here..
//do whatever div removal you need for the screenshot div
//show last list again...
});