CEMETECH
Leading The Way To The Future
Login [Register]
Username:
Password:
Autologin:

Don't have an account? Register now to chat, post, use our tools, and much more.
Latest Headlines
» HP Prime Multitouch Graphing Calculator: The Scoop
» More Details on the Casio fx-CP400 Touchscreen Calculator
» Editorial: On Choosing and Shelving Projects
» Presenting Graph3D v4.1, a Color 3D Grapher
Online Users
There are 111 users online: 6 members, 81 guests and 24 bots.
Members: JosJuice, lafferjm, NETWizz, nsg, shkaboinka.
Bots: VoilaBot (1), Magpie Crawler (3), VoilaBot (2), Googlebot (18).
RSS & Social Media
[t] Follow @cemetech
[t] 'Like' Cemetech
[RSS] News Headlines
[RSS] Latest Posts
SAX
You must log in to view the SAX chat widget
Inlining Javascript and HTML
» >
    » Goto page 1, 2  Next
» View previous topic :: View next topic  
Author Message
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 09 Mar 2011 10:25:39 am    Post subject: Inlining Javascript and HTML
ok, I am totally clueless when it comes to Javascript, but I really need to get this page out. Can someone tell me what I am doing wrong?


Code:
<head><title>The Scarlet Letter</title>
<marquee>The Scarlet Letter chapter one and two</marquee>
</head>

<script type="text/javascript">

function Definition(word define) {

<form>input type="button" value=word onClick="alert(define)"</form>

}

</script>



<body>

<p style="font-size:35px;"> Chapter 2, The Market-Place </p>

 

   The grass-plot before the jail, in Prison Lane, on a certain summer morning, not less than two centuries ago, was occupied by a pretty large number of
the inhabitants of Boston, all with their intently fastened on the iron-clamped oaken door. Amongst any other population, or at a later period in
the history of New England, the grim Definition("rigidity" "stiff or unyielding; not pliant") that petrified the bearded of these good people would have augured some awful business in hand. It could have betokened nothing short
of the anticipated execution of some rioted culprit, on whom the sentence of a legal tribunal had but confirmed the verdict of public sentiment. But, in that early severity of the Puritan character,
an inference of this kind could not so indubitably be drawn. It might be that a sluggish bond-servant, or an undutiful child, whom his parents had
given over to the civil authority, was to be corrected at the whipping-post. It might be that an Antinomian, a Quaker, or other heterodox religionist,
was to be scourged out of the town, or an idle or vagrant Indian, whom the white man's firewater had made riotous about the streets, was to be driven
with stripes into the shadow of the forest. It might be, too, that a witch, like old Mistress Hibbins, the bitter-tempered widow of the magistrate, was to
die upon the gallows. In either case, there was very much the same solemnity of demeanour on the part of the spectators, as befitted a people among whom
religion and law were almost identical, and in whose character both were so thoroughly interfused, that the mildest and severest acts of public discipline
were alike made venerable and awful. Meagre, indeed, and cold, was the sympathy that a transgressor might look for, from such bystanders, at the scaffold.
On the other hand, a penalty which, in our days, would infer a degree of mocking infamy and ridicule, might then be invested with almost as stern a dignity
as the punishment of death itself.

</body>









_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 10:27:19 am    Post subject:
What are you trying to do? The code is nonsensical as posted.
Back to top
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 09 Mar 2011 10:28:52 am    Post subject:
well I am making a function that has a button and when the button is pressed an alert comes up...
_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 10:33:32 am    Post subject:
You can't mix HTML into JavaScript blocks like that.

Here's what I think your function should look like:

Code:
<script type="text/javascript">
var Definition = function(define) {
    alert(define);
}
</script>


(function Definition(define) { ... } does much the same thing, but I prefer the above syntax as it emphasises the way that functions are just regular variables in JavaScript).

Your button could then look like this (it doesn't necessarily need to go in a form):


Code:
<input type="button" value="Click me" onClick="Definition('Hello, world')" />


It would be easier to help if we had a better idea of what you were aiming for, though. Smile
Back to top
Dalton


Newbie


Joined: 09 Mar 2011
Posts: 31
Location: US, SC
Posted: 09 Mar 2011 10:49:30 am    Post subject:
I sat here for 20 minutes trying to figure out what we are missing. He didnt tell us what define is supposed to define when you click the button. Are we supposed to assume its that big text block in the body?
Back to top
lafferjm


Calculator Deity


Joined: 14 Mar 2006
Posts: 1528
Location: at my house
Posted: 09 Mar 2011 11:31:06 am    Post subject:
If i understood your question correctly, define is the parameter to the function. So if you do Definition("Some Text") then an alert will come pop up with Some Text in it. As benryves shows in the bottom of his post.
_________________
Back to top
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 09 Mar 2011 01:30:36 pm    Post subject:
Ok, now that I have a good coputer let me tell you what I am trying to get the code todo

I want it so that in the text, there are certian words that are in buttons that when you press the buttons, an alert comes up with the definition of the word. At first I had it so that there were the method to do so each time, but now I see that was dumb so I made it just a general method and the word/definition will be different each time the method is called

I am pretty sure I made no sense... Sad
_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 01:39:18 pm    Post subject:
You could use the <dfn> element to attach definitions to words:

Code:
<p>This is a <dfn title="a group of words, usually containing a verb, which expresses a thought">sentence</dfn> with a defined word in it.</p>

If you wanted a dialog box to appear when the definition was clicked on, you could do something like this (this requires MooTools):

Code:
window.addEvent('domready', function() {
        $$('dfn').each(function(dfn) {
                dfn.addEvent('click', function() {
                        alert(dfn.get('title'));
                });
        });
});
Back to top
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 09 Mar 2011 01:44:23 pm    Post subject:
cannot use libraries and frameworks sadly, more blocks Very Happy
_________________
Back to top
comicIDIOT


Guru


Joined: 01 May 2006
Posts: 5106
Location: SFBA, California
Posted: 09 Mar 2011 02:22:26 pm    Post subject:
Couldn't you look at each word as a string, and when that string was clicked fetch that definition from a source? It'd be hard to do I imagine, but what if you put every word in <span> or <a> tags? Or, is it possible without doing that?
_________________


-Alex
Back to top
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 55741
Location: Earth, Sol, Milky Way
Posted: 09 Mar 2011 02:33:21 pm    Post subject:
comicIDIOT wrote:
Couldn't you look at each word as a string, and when that string was clicked fetch that definition from a source? It'd be hard to do I imagine, but what if you put every word in <span> or <a> tags? Or, is it possible without doing that?
You could do that programmatically with Javascript very easily, actually.
_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 03:12:28 pm    Post subject:
One way that avoids browser-specific functionality (and also does not require additional libraries) is as follows:


Code:
<script type="text/javascript">
var makeDefinitionsClickable = function() {
   var definitions = document.getElementsByTagName('dfn');
   for (var di = 0; di < definitions.length; ++di) {
      var definition = definitions[di];
      definition.onclick = function() {
         alert(definition.title);
      }
   }
}
</script>


You will also need to change your <body> element to <body onload="makeDefinitionsClickable()">.

Note that body onload is a fairly lousy event to handle - it is only fired when everything in the page has downloaded, including images (this causes notable issues on Cemetech, for example, as source blocks aren't highlighted if someone has a broken image in their signature). Handling DOM readiness (as per the MooTools example) is rather more awkward if you want to support multiple browsers, though.
Back to top
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 09 Mar 2011 03:17:19 pm    Post subject:
Well, the problem HERE is that now I do not know what the hack the code means, I rather loose my sanity writing out 20 different buttons and alert boxes then just take code I have no idea what it does Sad

are you sure I cannot just made a method that makes an alert with a definition after pressing a button, and then just call on the method replacing the name of the button and the text on the alert?
_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 03:23:40 pm    Post subject:
I suppose you could:

Code:
<p>This is a <dfn onclick="alert('a group of words, usually containing a verb, which expresses a thought')">sentence</dfn> with a defined word in it.</p>

You should be able to look up things you don't understand online, though. For example, getElementsByTagName returns an array of all elements that match the specified tag name.
Back to top
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 55741
Location: Earth, Sol, Milky Way
Posted: 09 Mar 2011 07:52:29 pm    Post subject:
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?
_________________
Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 09 Mar 2011 08:01:23 pm    Post subject:
KermMartian wrote:
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?

When the DOM is ready. How you determine this varies wildly by browser, unfortunately; in jQuery you use .ready() and MooTools you use the domready event to avoid having to write several different implementations for different browsers manually. I can understand why you wouldn't want to add a JavaScript framework to Cemetech just for that, so a crude hack may be a script tag right at the very bottom of the page that uses setTimeout() to run the prettifier a few milliseconds later (by which point one would hope the DOM had loaded).
Back to top
Kllrnohj


/=\ PH34R |\/|3


Joined: 24 May 2005
Posts: 8189
Posted: 09 Mar 2011 11:06:10 pm    Post subject:
benryves wrote:
KermMartian wrote:
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?

When the DOM is ready. How you determine this varies wildly by browser, unfortunately; in jQuery you use .ready() and MooTools you use the domready event to avoid having to write several different implementations for different browsers manually. I can understand why you wouldn't want to add a JavaScript framework to Cemetech just for that, so a crude hack may be a script tag right at the very bottom of the page that uses setTimeout() to run the prettifier a few milliseconds later (by which point one would hope the DOM had loaded).


FYI, here is what JQuery does:


Code:
   bindReady: function() {
      if ( readyBound ) {
         return;
      }

      readyBound = true;

      // Catch cases where $(document).ready() is called after the
      // browser event has already occurred.
      if ( document.readyState === "complete" ) {
         // Handle it asynchronously to allow scripts the opportunity to delay ready
         return setTimeout( jQuery.ready, 1 );
      }

      // Mozilla, Opera and webkit nightlies currently support this event
      if ( document.addEventListener ) {
         // Use the handy event callback
         document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

         // A fallback to window.onload, that will always work
         window.addEventListener( "load", jQuery.ready, false );

      // If IE event model is used
      } else if ( document.attachEvent ) {
         // ensure firing before onload,
         // maybe late but safe also for iframes
         document.attachEvent("onreadystatechange", DOMContentLoaded);

         // A fallback to window.onload, that will always work
         window.attachEvent( "onload", jQuery.ready );

         // If IE and not a frame
         // continually check to see if the document is ready
         var toplevel = false;

         try {
            toplevel = window.frameElement == null;
         } catch(e) {}

         if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
         }
      }
   },


Only need two "hacks" - one for everyone, one for IE (just like, well, everything else).

But most browser trigger onload whenever the hell they want, not once the entire page has fully loaded.

Then again, JQuery is so awesome, you really should just include it and then *start using it* for other things as well (*cough, sax, cough*).
_________________
There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)
Back to top
qazz42


Vampire Killer


Joined: 07 Apr 2010
Posts: 4177
Posted: 10 Mar 2011 10:27:25 am    Post subject:
Ok, new problem


Code:


<script language="javascript">

function NewColor() {
   color = "#";
   for (i = 0; i < 6; i++) {
      hex = Math.round(Math.random() * 15);
      if (hex == 10) hex = "a";
      if (hex == 11) hex = "b";
      if (hex == 12) hex = "c";
      if (hex == 13) hex = "d";
      if (hex == 14) hex = "e";
      if (hex == 15) hex = "f";
      color += hex;
   }
   document.bgColor = color;
   setTimeout("NewColor();",10);
}
<form> <input type="button" value="Warning, clicking may cause seizure" onClick="NewColor()"> </form>


</SCRIPT>


this is supposed to make a button that, when clicked, causes a rather epiliptic flashing sequence, the flashing method is fine, but when I add the button, the button never appears, help?
_________________
Back to top
elfprince13


OVER NINE THOUSAND!


Joined: 23 May 2005
Posts: 10228
Location: A galaxy far far away......
Posted: 10 Mar 2011 10:37:17 am    Post subject:
For starters, you probably shouldn't have your <form>...</form> inside your script tags.
_________________
StickFigure Graphic Productions || VSHI: Vermont Sustainable Heating Initiative


Back to top
benryves


Cemetech Expert


Joined: 12 Aug 2008
Posts: 1357
Location: London, United Kingdom
Posted: 10 Mar 2011 11:12:04 am    Post subject:
Indeed. In addition, rather than using setTimeout() inside NewColor(), consider just doing setInterval(NewColor, 10) (don't pass a string to setTimeout/setInterval, either - just pass the function directly). setTimeout runs once; setInterval runs periodically. You don't need that form, and language="javascript" should be type="text/javascript":


Code:
<script type="text/javascript">

var NewColor = function() {  // remember, functions in JavaScript are just regular variables.
   color = "#";
   for (i = 0; i < 6; i++) {
      hex = Math.round(Math.random() * 15);
      if (hex == 10) hex = "a";
      if (hex == 11) hex = "b";
      if (hex == 12) hex = "c";
      if (hex == 13) hex = "d";
      if (hex == 14) hex = "e";
      if (hex == 15) hex = "f";
      color += hex;
   }
   document.bgColor = color;
}
</script>

<input type="button" value="Warning, clicking may cause seizure" onclick="setInterval(NewColor,10)" />
Back to top
Display posts from previous:   
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Inlining Javascript and HTML
    » Goto page 1, 2  Next
» View previous topic :: View next topic  
Page 1 of 2 » All times are GMT - 5 Hours

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

© Copyright 2000-2013 Cemetech & Kerm Martian :: Page Execution Time: 0.041772 seconds.