Jump to content

Search the Community

Showing results for tags 'html5'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 146 results

  1. Keep in mind I am not a web designer or PHP or Smarty developer. So, I have this smarty.tpl script that I am trying to figure out how the code flows. It uses smarty for creating templates. Within the file is an <i html tag. Researching it at https://www.w3schools.com/tags/tag_i.asp tells me it is used for styling text. However, I have the following: <i class="fa fa-video fa-fw js_x-uploader" data-handle="publisher" data-type="video"></i> {__("Add Video")} </span> My question is: It appears that the js_x-uploader affects what happens when I click on a link. The button is the "Add Video" button in a drop down menu. When I click the "Add Video" button a windows explorer pops and I pick a mp4 video to post to a page timeline. When I change the js_x-uploader to something else, arbitrarily, the win explorer does not pop. I am confused as to why js_x-uploader acts like this. There is nothing in w3school that explains this action for the <i tag? I hope I articulated my question enough? Thanks, Ray
  2. AARRGGHHH

    Can't Get Canvas To Rotate

    This seems so simple: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.drawImage(img, 225, 225); context.rotate(90 * Math.PI / 180); But the canvas never rotates. Also tried: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.rotate(90 * Math.PI / 180); context.drawImage(img, 225, 225); But here, the canvas never even shows up. I could use some help with the correct syntax. Thank you!
  3. AARRGGHHH

    Does an HTML5 Control Have Focus?

    I'm having a problem determining if a given control has focus. It seems to me that: if (form.password.focus() == true) ... should tell me if the form's password control has focus. But, it's returning "false" even while I'm typing into the control. So, what is the correct way to determine whether a control has focus? Thank you!
  4. I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue. This works properly, it accesses 13 canvases named canvas1 through canvas13: for (i = 1; i < 14; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); ... } However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text. for (i = 1; i < 14; i++) { document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; } Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text. Right now I'm typing out 13 lines of code: document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)"; ... document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)"; which is inefficient, to say the least. So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text? Thank you!
  5. Hello I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas. I tried this: var hue = document.getElementById('canvas1').style.filter('hue-rotate'); and it did not work, several variations on that theme also failed. What is the correct syntax? Thank you very much PS: this could apparently also work var hue = getComputedStyle(canvas1).filter But it will not retrieve just the hue. Thank you
  6. I have a form written using HTML5 and CSS3, final validation is performed on submit with JavaScript. Then, the form will be sent to the server, most likely using PHP's mail() function. I don't recall how to include two items such as these in a form's action="...", I'd deeply appreciate if someone could refresh my memory! Thank you
  7. I'm trying to use Base64 to compare two images to see if they are identical. The images are accessed using: var thumb5Original = ""; var thumb5Edited = ""; thumb5Original = canvas5.toDataURL('image/png'); thumb5Edited = canvas5.toDataURL('image/png'); I then check them using this: if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; The problem is, I'm getting "Edited Image" even when the images are identical. Is there an error in the way I'm comparing the images? Thank you
  8. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  9. This should be so simple... I am using a canvas variable here (i) without any problems: for (i = 1; i < 10; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); context.drawImage(image,0,0,c.width,c.height); } But I cannot seem to get it right here: function clicked(thumbNumber) { //drawImage() in canvas5 using canvas1 as the source var canvasNumber = "canvas" + thumbNumber.toString(); canvas5.getContext('2d').drawImage(canvasNumber, 0, 0); } When I step into it and pass ""canvas" + thumbNumber.toString()" it's correct (for example, "canvas1"). But when it hits the next line, where "canvas1" is used, it grinds to a halt with the error: "color.html:332 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at clicked (color.html:332) at HTMLTableCellElement.onclick (VM548 color_balance.html:769) So, apparently it's not recognizing "canvas1" which is on line 332. If I hard code "canvas1" it works fine, but that's not practical here. I have tried at least a half dozen variations on a theme at "canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);" but nothing seems to make any difference, I'm not giving the browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit) on Windows 7 Pro) what it wants to see. Thank you in advance
  10. alessiopaoletti

    How to start animation html 5 canvas

    Hello, I'm new, I have realized an animation with Adobe Animate CC in HTML 5 canvas format and now I need help for a snippet code for start/play the animation when it is visible on the browser or vertical pixel and then I'll export it how .oam. the file example: AnimateBar Illustrator.fla thanks for help Illustrator_res.oam AnimateBar Illustrator.html
  11. I have resized an image to fit inside a canvas without any problems. However, now I need to resize a canvas without resizing the image that it contains. How do I do this? Thank You
  12. Left

    Links inside :after CSS

    I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one. I want to make the content Labels links. CSS: *,*:before,*:after { box-sizing: border-box; } :after { content: ""; link: ""; } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li:after { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } MENU HTML: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <div style="font-size: 1.25rem;" class="icon-notebook"></div> </li> <li> <div style="font-size: 1rem;" class="socicon socicon-play"></div> </li> <li> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> </li> <li> <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div> </li> </ul> </nav> </section>
  13. Hello there, I am looking for assistance making the HTML5 Audio tag appear consistent within mobile as it does on desktop browsers. I have not been able to find much information about this and any help whatsoever is much appreciated. The audio section of the site on desktop looks as intended you can find that here. You can also veiew the live Website. The issue lies within mobile, when someone first opens the site on mobile the audio buttons are bunched together and overlapping, clearly not where they should be, Normal View on mobile. However when someone zooms in slightly on their device it appears closer to normal, When Zoomed in on mobile. My question is, how can I set it so that the mobile audio buttons are fixed in the way that they are supposed to be. If this is not possible, what are my options. Thanks!
  14. My canvas z-index is not working, the canvases are both showing up. Canvas1 displays then canvas2 displays beneath it. HTML: <!-- Canvas locations --> <div id="canvasDisplay" style="position:relative;"> <canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> <canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> </div> This displays canvas1 properly. However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. JavaScript: cnv1.style = "z-index:2; position:relative;" cnv2.style = "z-index:1; position:relative;" I'd appreciate any assistance. Thank you
  15. I've been using HTML_CodeSniffer to do accessibility testing of web pages. I have been successful reducing errors to 0 but I get lots of warnings about color ratio, text on background images. My page is primarily white background with black or blue (links) text. Is there something I can do to get rid of the warning? If you are familiar with accessibility test, do warnings count against you? Basically, I'm ignoring warnings.
  16. We're a small manufacturer. We need to create a form that allows a visitor to pick a few machine options and the form would generate the specs based on those choices. The customer wouldn't be ordering online -- it's just for reference purposes. I know it's embarrassingly simple but I've spent two hours digging around and I don't even know what you would call that type of form let alone find any examples. We, of course, need it to look good on a mobile device. Does anyone know of a site that I might find an example or what you would call a form like that so I can find one myself? Any help would be greatly appreciated. For example: 1. Choose series: Medium Duty Heavy Duty 2. Choose Equipment: Modular Complete T-14 R-10 T-24 R-15 T-34 R-25 Output based on the above choices: Capacity = Stroke = Thrust=
  17. The syntax <input type="file"> is used to create a file open button and dialog box. What can I use to create a file save dialog box? Using HTML5, CSS3, and JavaScript (no libraries). Thank you
  18. I should specify in advance "Using pure JavaScript: I'm working on bare-bones HTML5 / CSS3 / JavaScript image editor and I'm ready to add a fileSave function. I'm going to use toDataURL() to allow the user to (1) save the file with a new JPG quality setting, or (2) save the file to PNG (I'm not aware of any options for PNG), or (3) save the current file format (typically JPG) and current quality setting. This last option will basically be the same thing as "right click" and "save file", but I would prefer something that will work from a button. How would I go about doing this? A code sample would definitely be helpful Thank you
  19. It seams that "Code in ASP (VB) (demo_sse.asp)" block needs correction in the article HTML5 Server-Sent Events. Original string does not return data to client browser: Response.Write("data: The server time is: " & now()) Line feeds ("\n\n")are missing. This works: Response.Write("data: The server time is: " & now() & vbLF & vbLF)
  20. The example shown on fillStyle for patterns is wrong: This: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill(); Should be this: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.fillStyle=pat; ctx.fillRect(0,0,150,100); This is the only way the repeat keywords work as they should. p.s. didn't know where else to give feedback on this.
  21. SLiM

    ONLINE VALIDATOR

    I use the W3C validator religously but is there a bug in it? When I check my code it displays a "duplicate id" error. However, a duplicate id is required to connect the audio tag and javascript. I've uploaded the validator screen capture and a portion of my offending HTML5 and javascript code. Thoughts anyone... SLiM
  22. I am helping a friend who has a website, which I have made some years ago in Html and css. She would like to add a page, where users can get a logon and then be able to add some posts everyday. The posts are then visible for all the users. I have no idea about how to do this and would be very grateful, if someone could point me in the right direction.. Greetings from Lars Denmark
  23. Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore... I have to refresh in order to see the countdown running. Here is what I did: <div id="after"> <span id="dhour"></span>:<span id="dmin"></span>:<span id="dsec"></span> </div> <div id="count2">Texte à afficher</div> <div class="numbers" id="dday" hidden="true"></div> <script> var ladate = new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var year=ladate.getFullYear(); var month=ladate.getMonth()+1; var day=ladate.getDate(); var hour=14; var minute=20; var tz=0; var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); function countdown(yr,m,d,hr,min){ theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min; var today= new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var todayy=today.getYear(); if (todayy < 1000) {todayy+=1900; } var todaym=today.getMonth(); var todayd=today.getDate(); var todayh=today.getHours(); var todaymin=today.getMinutes(); var todaysec=today.getSeconds(); var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec; var todaystring=Date.parse(todaystring1)+(tz*1000*60*60); var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min); var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60)); var dd=futurestring-todaystring; var dday=Math.floor(dd/(60*60*1000*24)*1); var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){ document.getElementById('count2').style.display="inline"; document.getElementById('after').style.display="none"; document.getElementById('dday').style.display="none"; document.getElementById('dhour').style.display="none"; document.getElementById('dmin').style.display="none"; document.getElementById('dsec').style.display="none"; document.getElementById('days').style.display="none"; document.getElementById('hours').style.display="none"; document.getElementById('minutes').style.display="none"; document.getElementById('seconds').style.display="none"; return;}else { document.getElementById('count2').style.display="none"; document.getElementById('dday').innerHTML=dday; document.getElementById('dhour').innerHTML=dhour; document.getElementById('dmin').innerHTML=dmin; document.getElementById('dsec').innerHTML=dsec; window.location.reload(); setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);}} countdown(year,month,day,hour,minute); </script> Thank you.
  24. This is my site: http://feriapixel.cl/cleanway/index.php As you can see, if you are using Chrome, it has a video background at the beginning, but when i view it with Firefox, the video doesn't appear at all. This is the HTML and javascript of my video: <video id="my-video" class="video" muted loop> <source src="videos/Clean_Way.mp4" type="video/mp4"> <source src="videos/Clean_Way.webm" type="video/webm"> </video><!-- /video --> <script> (function() { /** * Video element * @type {HTMLElement} */ var video = document.getElementById("my-video"); /** * Check if video can play, and play it */ video.addEventListener( "canplay", function() { video.play(); }); })(); </script> I need to add something for Firefox?
  25. Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much
×