Solved

Simple html5/javascript question

Posted on 2014-11-02
6
122 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 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
Industry Leaders: 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

623 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