Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Simple html5/javascript question

Posted on 2014-11-02
6
Medium Priority
?
123 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 500 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 24

Assisted Solution

by:mankowitz
mankowitz earned 500 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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 500 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 500 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

722 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