Jump to content

Jan

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

Jan's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Jan

    HTML5 Drag options

    Jan replied to Jan's topic in HTML/XHTML

    What I basically need to do is set the image to be draggable in a scrollpane simmilar to Flash scrollPane object. I am converting Flash templates to HTML5.
  2. Jan
    I am developing a HTML5 interaction that reacts as follows: User click on a link and image is loaded in a specific area. 4 buttons appear below image. Each of these buttons zoom (resize) the image accordingly 2x. 3x etc. When image are zoomed in, it must be draggable in the specific area only. Thus some sort of mask needs to be applied. As I am very new to HTML5 I would appreciate any help to point me in the right direction. At the moment I am at the point of being able to load the image, set its initial size, display the buttons to activate the zoom effect. All I need is help with the actual dragging, but more importantly the masking of image to be only draggable and visible within a certain area. Hope this makes sense.
  3. Jan
    I am a total HTML newbie and need some help. I am converting from flash ActionScript to HTML 5. Building a interactive application with menu buttons on the left that loads content dynamically. These are mostly just images created in Photoshop and positioned with CSS. However one of the options needs to create additional buttons for user to click on in combination with loading some graphics. Below is my code up to now. Not even sure if this approach to creating dynamic content is correct. This is going to be used as template so it needs to be edited quite easily. index.html style.css
  4. Jan
    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>
×
×
  • Create New...