We Keep Coding

FAQ page shows answers automatically

I'm trying to create a drop down FAQ page with jQuery and for some reason the answers are showing when I load the page.
I have my jQuery script on my page
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
And my javascript page:
<script src="js/threecatsdesign.js"></script>
My full javascript is this:
$(document).ready(function() {
$("#categories h3").click(
function() {
$(this).toggleClass("minus");
if ($(this).attr("class") != "minus") {
$(this).next().hide();
}
else {
$(this).next().show();
}
$("#image").attr("src", "");
// needed for IE so a placeholder isn't displayed for the image
$("#image").attr("style", "display:none;"); }
); // end click
}); // end ready
My HTML is this code:
<main id="categories">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
<h3>If you hold contests on the site, how do I enter?</h3>
<div>
<ul id="java_images">
<li>Go to our page called contests in the nav bar and you will need to fill out the form in order to enter.</li>
</ul>
</div><p>
<h3>I have a tutorial I would like to suggest or put up my own. How do I do that?</h3>
<div>
<ul id="net_images">
<li>Please go fill out our contact form and you will be contaced with 24 hours or less on how to proceed.</li>
</ul>
</div>

You need to add some css to hide the questions to begin with.
<style>
.faq-question div {
display:none;
}
</style>
I suggest putting this in a different file, but inline styles like this work for a quick and dirty solution.
You also should wrap each question and answer in a tag like this
<div class="faq-question">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
</div>
And change your JS to reflect the change in elements.
$(".faq-question").click(

Change html content and url without reloading the page

I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...

You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.

You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.

You have to check/set the value of your variable on the event onload of the page.

Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.

How to run javascript code on menu click

I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!

window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.

Content is being loaded successfully via ajax. but not showing

I am playing around with djax when I click an anchor tag the url changes and when I view the page source it also changes but the page itself did not change its contents even if I view the page source it has change up any ideas why?
Here's a snippet of the markup
<body>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</body>
When I click that the url changes but the result is not showing but when I view the page source it displays the proper markup(or should I say the markup of thankyou.jsp)
here is the code that Is js code
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});

I've had the exact same problem as you and discovered your question while I was looking for an answer. It may be too late for you but according to your markup I believe you ran into the same problem as me which is actually on the issue-list of the plugins Github site (at least right now).
You need to place your updateable div inside a wrapping div. For some reason exchanging content seems not to work for direct children of body. See https://github.com/beezee/djax/issues/22
So your HTML should look like this
<body>
<div id="djaxWrap>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</div>
</body>
While jQuery remains the same
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});

How to pass a javascript/jquery function from one html page to another

I have this page articles
In this page i have nav links on the left, and content loading on the right.
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
my nav looks like this
<ul>
<li><a id="myHeader1" href="javascript:showonlyone('articles');" >ARTICLES</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('whitepapers');" >WHITE PAPERS</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('brochures');" >BROCHURES</a></li>
</ul>
and my content is in div like the following
<div id="articles" name="newboxes" style="display:none;">
<div id="whitepapers" name="newboxes" style="display:none;">
<div id="brochures" name="newboxes" style="display:none;">
Basically this page, is an interior page.
I have a home page, that i would like to have links to each section on, so the section i want shows up already so user doesn't have to click again.
Any idea how i do this?
Thank you for any help, and I apologize if i'm not using correct terminology.

if I well understood your question, on page "articles" just call showonlyone function
$(function() { // DOMready
showonlyone('articles');
});
and repeat this code for every internal page, changing the parameter

going by what i understand from your question is that..
u have links on home page..
when user clicks these links you want that particular section to be already opened when the interior page opens
like when user click "articles" then in the interior page the articles div should be visible
for this you will have to use hash tags in the following manner
on your home page..
provide the links with a hash tag like this
http://agencystudy.com/eic/microsites/microsites-02/articles.html#articles
then in your interior page in document ready event
$(document).ready(function(){
$(window.location.hash).show(200);
});