Solved

Simple html5/javascript question

Posted on 2014-11-02
6
109 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
Comment Utility
0
 

Author Comment

by:mdoland
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 24

Assisted Solution

by:mankowitz
mankowitz earned 125 total points
Comment Utility
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 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 125 total points
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now