Solved

Simple html5/javascript question

Posted on 2014-11-02
6
114 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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 
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 109

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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

825 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