Jan Posted September 18, 2015 Share Posted September 18, 2015 I am completely new to HTML5 and jQuery. Busy converting from ActionScript to HTML5 and JavaScript. I am building a page with menu list that loads two sets of images. Occasionally I need the 2nd image to be clickable to load new content. Please see attached code. I do not get the click on the 2nd image to activate the alert. Any help would be greatly appreciated. <html> <head> <title>Frames Test</title> <script type="text/javascript"> function LoadContent(id1, id2, id3, id4, id5, id6, id7, id8){ var img01 = document.getElementById('BlowoutImage'); var img02 = document.getElementById('BackgroundImage'); paragraph01 = document.getElementById('title'); paragraph02 = document.getElementById('footnote'); var heading = id2; img01.src = id1; img02.src = id5; img02.style.top = id7; img02.style.left = id8; paragraph01.innerHTML = heading paragraph01.style.left = id3 paragraph01.style.top = id4 paragraph02.innerHTML = id6 if(id5=='images/systemboard_btn_01.png'){ $(document).ready(function(){ $("#BackgroundImage").click(function () { alert("CLICKED") }); }); return false; } } </script> </head> <body id="mainbody"> <p id="title" style="position: absolute; top:30px; left:400px; "></p> <p id="footnote" style="position: absolute; top:650px; left:600px; "></p> <p> <ul id="menubar"> <li ><a id="item10" class="list-group-item" href="#" onclick = "LoadContent('images/pun_6u_background2_500W.png', 'System board', '550', '140', 'images/systemboard_btn_01.png', '', '550', '650')">System board</a></li> </ul> <img id="BlowoutImage" STYLE="position:absolute; TOP:50px; LEFT:20%;" src="" > <img id="BackgroundImage" STYLE="position:absolute; TOP:30%; LEFT:18.5%;" src="images/cr2_front_open_500W.png" > </p> </body> </html> Link to comment Share on other sites More sharing options...
davej Posted September 18, 2015 Share Posted September 18, 2015 That's a horrible looking mess. You didn't load jQuery. Link to comment Share on other sites More sharing options...
number47 Posted September 25, 2015 Share Posted September 25, 2015 is the overall goal to make it the most complicated means of communication, or is there a great reason to use a new difficult to understand language or "framework"? could the same (thing so as it is) be done with html + javascript or is there a need to have new different stuff. I mean that sincearily, I would imagin the same page could be made with older style simple coding and writing. is there a gain that is easiliy discribable to using a different method like in the example of "discussion above"? also if that is answerable, is it; what percent would you guess of the pages made use multiple types of document html, like html, html5? jQuery, Javascript, xhtml, like do they mix and match at the same site well? is there reasons why you would need to use multiple? what are the base nescesities for making a site? any of them obsolete? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2015 Share Posted September 25, 2015 HTML coding is basically the same, xhtml uses closing tag of '/>‘ for self closing elements such as img, br, hr and meta tags, whereas html (both html4) just uses '>‘ depending on doctype for x/html there are standards set out for what html elements can be used, which you can validate by using https://validator.w3.org/.HTML5 is the new doctype and introduced new elements and rules, and if i remember correctly will forgive you for closing tags using normal html or xhtml method, you can validate your code also at address mentioned above, to check if you are following the rules correctly.JQuery is javascript with predefined libraries to make it easier to enhance your website.So you basically have to first decide what doctype to use x/html4 (transition or strict) and follow there rules, or follow the latest HTML5 with new elements and rules. With JavaScript/jQuery you WILL use both but you can just use JavaScript on its own, but probably end up reinventing the wheel on features/enhancements that can be found within jQuery. Link to comment Share on other sites More sharing options...
davej Posted September 25, 2015 Share Posted September 25, 2015 The apparent goal of using javascript to embed the styling in the function parameters is just a horrible idea. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now