Solved

Simple html5/javascript question

Posted on 2014-11-02
6
116 Views
Last Modified: 2014-11-30
I am working with jsfiddle and wonder how I am supposed to put the html and javascript areas into files.

For instance, the html in the html part canot stqnd on its own. For instance it lacks the <html> tag. Also, there are no reference to the javascript part from the html part. What do I need to do to get it to work?
0
Comment
Question by:mdoland
6 Comments
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418079
0
 

Author Comment

by:mdoland
ID: 40418084
What I mean is what I need to do with the html and javascript if I want to put the working things  on a classic web-server. I guess I put it in a index.html file and a foobar.js file. However, I miss the glue to get it together.
0
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 125 total points
ID: 40418094
You would get both example over there
I hope you mean to say you written code in jsfiddle and want to integrate it in html page

If possible please provide jsfiddle link so that it would be easy for me to guide your more properly

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript">
 function updateAll() {
var val = 	$('input[name=test]:checked').val();
if(val =='off' )
		{
          $('.off').attr("checked", "checked");  
         
		}
		else
		{
		      $('.on').attr("checked", "checked");  
    }
	
}
  </script>
 </head>

 <body>
  <label >Profile Visibility: On </label>
  <input type="radio" id="MasterVisibility" name="test"  value="on" onClick='updateAll()'> </br> Off 
  <input type="radio" id="MasterVisibility2" name="test" value="off" onClick='updateAll()'> 
    </br>
    <hr>
        <label> My Story: On </label> <input type="radio" class="on" name="story" value="on">
        <label> Off </label> <input type="radio" class="off" name="story" value="off"> </br>
        <label> My Inspiration: On </label> <input type="radio" class="on" name="inspi" value="on">
        <label> Off </label> <input type="radio" class="off" name="inspi" value="off"> </br>
        <label> My Struggles: On </label> <input type="radio" class="on" name="stuggle" value="on">
        <label> Off </label> <input type="radio" class="off" name="stuggle" value="off"> </br>
  
 </body>
</html>
                                          
                                        

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 24

Assisted Solution

by:mankowitz
mankowitz earned 125 total points
ID: 40418120
ok, put the html into a file called index.html
The javascript can be either inline within the html or linked separately
the css can be either inline within the html or linked separately.

to include as inline:
<head>
  <script>
     var j=3;
     j+=3;
   </script>
   <style>
      .h2 {
         width: 23;
     }
    </style>
</head>

or, to link to an external file:
<head>
   <script src="./foobar.js" type="text/javascript> </script>
   <link rel="stylesheet" type="text/css" href="theme.css">
</head>
0
 
LVL 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 125 total points
ID: 40418128
I use a template for this sort of thing because it helps me keep my work organized.  I sometimes use JSFiddle, but more frequently I just put the scripts on my server and test there.  Example of a valid HTML5 template.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
/* JQUERY CODE HERE */
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<!-- HTML DOCUMENT HERE -->

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

</body>
</html>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 125 total points
ID: 40418197
Assuming you are just wanting to get the page markup with all the css and js in a single file then after saving the fiddle append the url with
show/

e.g.
http://jsfiddle.net/GaryC123/3tqs77m4/
becomes
http://jsfiddle.net/GaryC123/3tqs77m4/show/

View the source and there you have all the markup for your page.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question