Jump to content

Heretic86

Members
  • Posts

    36
  • Joined

  • Last visited

Everything posted by Heretic86

  1. I put together a small gif, the visual may explain better what Chrome is doing... Notice the 2nd row, how it goes back and forth between "o foo" and just "foo" as I use the Inspector to change the size. I need for that SPACE in front of "foo" to NOT COLLAPSE... How do I make that space NOT COLLAPSE?
  2. Exactly what Chrome is doing to me also. Trying that code, still having no effect. How about a Javascript solution? At least it would be consistent across browsers?
  3. Try toggling it from the Elements Console in Firefox when you have content that word-wraps and you should see the difference. Toggling in Chrome didnt do anything for me either. Use this text: "foo foo foo foo foo foo foo foo foo foo foo foo" without the quotes...
  4. Also very close. Only thing I see in your suggestion is "white-space: break-spaces;" is missing. From my tests it appears to be necessary. Did you get anything by removing that line? I cant ignore the seemingly arbitrary 43 character limit. If it goes over the character limit, the end result is the words run off the area. Text the user enters in this example box is saved and displayed multiple times in other places. Its a hard limit from the way everything else has turned out so far. The CSS solution would be simple. Javascript solution is gonna be a nightmare.
  5. Mostly the rest of the CSS is experimental, trying to figure out the combination of things that would give me the effect that I was looking for, so everything except the monospace font family can go if it gives the functionality I am looking for. So change from px fixed width to em? --- Oops: forgot to post link to Demo Page... https://www.webucate.me/textarea.htm
  6. I have a Textarea that I want to behave like a Console / cmd.exe prompt. I have applied a cols and rows to control the size, and the following CSS rules: word-break: break-all; white-space: break-spaces; The use of width and height properties is also fine, but inconsistent across browsers on Textarea elements, much like <pre> elements work, but <pre> elements do not have additional characteristics that I need. Works exactly as I want in Firefox, but not in Chrome: Firefox (works like I want) Chrome (does NOT work like I want, notice that "foo" is word broken at 42 chars) In Chrome, the issue is that it breaks in the middle of the previous word at the same size, but adjusting that size a bit, the spaces are retained on the previous line and collapsed, which is NOT what I want. I want the space characters after the word is wrapped to the next line. I would like to do so without having to replace User Text with Javascript or additional elements. Each line must display all characters, especially spaces, uncollapsed Each line can not have any more than 43 characters so they should wrap to the next line uncollapsed Line Wraps should NOT occur in the middle of the previous word Line Wraps should NOT wrap spaces to the last line as it exceeds 43 characters Line Wraps should NOT collapse spaces In Chrome, the previous line is not wrapped in the correct location. The user should NOT have to hit ENTER, so it should automatically wrap the space to the next line, like a Console. How can I make my Textarea break at 43 characters and wrap \n Newlines and preserve Spaces to the next line in consistently?
  7. You can also try applying "display: inline-block;" to your div classes.
  8. That was the only thing that I could do that worked as far as Browser Controls go, so I marked this as the "Correct Answer". Unfortunately, I was not really thrilled with the way the Browser handled it. Make several changes, use the Browser Undo, and it undoes ALL the text in one foul swoop. So I wrote my own. This was necessary because there are too many variations in browser behaviors, and I dont think users would be thrilled with hitting CTRL + Z and have an all or nothing approach, and expect to have that important "something several steps back but they dont know how many". Requesting a bunch of custom code to handle those steps between is definitely beyond the scope of my request, but it was the only way to have the fine grain control that I thought browsers did a better job with. I think this goes to show that browsers still have quite a way to go. For those of you who read this, let this be an important lesson as to the importance of YOUR skills when putting together a decent website that also does "simple" things, like undo stuff in a text box in "stages". This is how important your skills are. You make the web a better place when you put in good control systems into your web pages.
  9. I think this one ought be pretty easy for the pros... I have a Text Area that I need to set to use a Custom Event Handler to modify the way that text is pasted. That all works fine. function doPasteThingy(e){ e.preventDefault(); // Do stuff to get clipboardData and modify it document.getElementById('myTextArea').value = modifiedString; } document.getElementById('myTextArea').addEventListener('paste', doPasteThingy); Like I said, this works for what I want it to do. Now, a "normal" browser feature is to type or paste something in a text input or text area, and you can press CTRL + Z to Undo the last changes. What is throwing me off is once I do preventDefault and set the value to my modified string, CTRL + Z no longer works, and I am not sure why. I think it may have something to do with either DOM Mutation, or new CustomEvent? Any help?
  10. No it is not. I am thankful for this site but your answers are not helpful, it should be part of standard class definition using syntax that I am unfamiliar with.
  11. Telling me what my priorities are isnt helping to make sure it works. And I am not using a proxy to do something that is part of the syntactical sugar of the language. If you dont know, say you dont know, because what you are telling me is not helping.
  12. Im gonna need a lot of classes and trying to keep code clean and minimal. Proxies just make a basic class look... well, messy. What about something like this? class Game_Var { constructor(){ this._data = [null]; const _self = this; _self.__proto__.value = function(id){ // do stuff here; } } } How do I define Getters and Setters in this? Or something similar... Edit: Let me be clear here. I dont want to call the property name from the outside, only the class instance and braces: //... some class definition var foo = new MyClass(); foo[1] = "bar"; if (foo[1] == "bar") alert("ok here");
  13. I need a Wrapper or a Class that can control the Max Length of an Array on setting a value... It might be possible with a Prototype too, which is fine... let myArray = new ArrayClassThing(); myArray.setMax = 50; // should be a const value set in Constructor or Prototype myArray[50] = "Foo"; // This should work fine, I know index starts at 0, but I am not using 0 so total of 50 myArray[51] = "Bar"; // Need to do nothing Javascript is different than Ruby where you can use special characters to define Getter and Setter methods: # Ruby Code class Array_Wrapper def initialize @data = [] end # Getter def [](id) if id <= 50 and @data[id] return @data[id] end end # Setter def []=(id,value) if id <= 50 @data[id] = value end end As far as I understand, cant use a "[]" as a Getter or Setter Method, and I need something that can do exactly that, just to control a Static Maximum Can anyone help out with this?
  14. Thank you! That's all I needed to know! It seemed to me that what was being sent was just a JSON Object and not the instance object I was thinking. And Im not gonna pressure to change a thing as I think having that open could be a security hole... And yes, the class definition is in a Module, and page code is all contained in an anonymous constructor, which makes debugging a bit more difficult... I will be sure to leave the name parameter wide open and allow all characters to be set just to be sure it can be used to run unwanted scripts, and make sure to not use CORS at all just so any remote code can also be downloaded and executed! Kitchen, if you recall, this is part of what i want my users to have access to, so they can create new instances of this class with that CORS code you helped with! Thank you again!
  15. I have two pages, in order to visually organize data. There is a LOT of data, so different pages are needed. I am using window.postMessage(msg) to transfer data between two open pages. // One page class MyClass { constructor(name, value){ this.name = name; this.value = value; } sayName(){ console.log(`name is ${name}`); } } const foo = new MyClass("Bob", 123); foo.sayName(); // works fine window.postMessage({myMsg : foo}); // Other Page ... function processMsg(msg){ msg.data.myMsg.sayName(); // no worky } As near as I can tell, it is treating my instance of my class as an object with no methods. What do I need to do for posting the instance of the object to the other page? Im hoping you guys are a bit more helpful than you've been on my other questions...
  16. Really? No one? Is this perhaps a bug in Firefox itself?
  17. How do I implement both Analyzer and set playbackRate in Firefox which works in Chrome?
  18. I am playing around with the Web Audio API now. I set up a test application to play back an audio file. One of my desired options (at least currently) is to shift the pitch. An easy way to do this is to adjust the playbackRate property. So, it seems to work fine in Chrome and Firefox. Great, lets make it awesomer! Is that a word? I call to preservePitch elsewhere in the code. I threw in the following code for a Canvas Spectrum Analyzer, which works great: function graphAnimator(){ requestAnimationFrame(graphAnimator); let fbc_array = new Uint8Array(analyzer.frequencyBinCount); analyzer.getByteFrequencyData(fbc_array); ctx.clearRect(0, 0, graph.width, graph.height); ctx.fillStyle = "#00FFAA"; for (let i = 0; i < 100; i++){ let x = i * 3; let h = -(fbc_array[i * 8] / 12); ctx.fillRect(x, 20, 2, h); } } function setupGraph(){ graph.width = 222; graph.height = 20; ctx = graph.getContext('2d'); aCtx = new window.AudioContext(); analyzer = aCtx.createAnalyser(); audio_source = aCtx.createMediaElementSource(audio); audio_source.connect(analyzer); analyzer.connect(aCtx.destination); graphAnimator(); } Now, once I do this, and I grab my slider and play with it (ok, that sounded better in my head just now) to adjust the Playback Rate, it works in Chrome but not in Firefox? Honestly I love the Spectrum Analyzer Canvas more than the rest of what I have so I am open to scrapping that stuff because I would rather be able to adjust the Pitch without having to adjust the Playback Rate. Ive seen a few scripts out there that can do that, but Im pretty well clueless on how to get them set up! Essentially, a Slider (Range) and adjust the Pitch without messing with the Playback Rate. I really want to dump the Playback rate and strictly ONLY adjust a Pitch. Any suggestions / samples to adjust the Pitch of a MP3 / Ogg / Oga file without needing to revert to adjusting the Playback Rate consistently on every browser? (Well... except Internut Exploder)...
  19. Hot Dog! (*bark bark*) It works now! Thank you very much! I knew it would be one small thing that I had missed! Ive been banging my head against a wall for weeks on this, and you got it fixed!
  20. I will put it back in. I had it in there initially. And this is posted above, but this is the error Im getting now: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.webucate.me/cors_csp/jsondata.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://www.webucate.me’). This is my Content Security Policy: <?php header('Cross-Origin-Resource-Policy: same-origin', false); header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); function csp_policy(){ header("Content-Security-Policy: " . "default-src 'none';" . "sandbox allow-scripts;" . "base-uri 'none';" . "img-src 'self';" . "style-src 'self' css/*;" . "navigate-to 'none';" . "form-action 'none';" . "script-src 'report-sample' 'unsafe-inline' 'unsafe-eval' " . "https://" . $_SERVER['SERVER_NAME'] . "/cors_csp/js/video.js " . "https://" . $_SERVER['SERVER_NAME'] . "/cors_csp/jsondata.php " . "data: ;" . "worker-src 'self';" . "media-src https://" . $_SERVER['SERVER_NAME'] . "/cors_csp/playvideo.php;" . "connect-src https://" . $_SERVER['SERVER_NAME'] . ";" . "child-src 'none';" . "report-uri https://" . $_SERVER['SERVER_NAME'] . "/cors_csp/csp_violation/index.php;" . "report-to {\"group\" : \"default\", \"max_age\" : 1800, \"endpoints\" : [{ \"url\" : \"https://" . $_SERVER['SERVER_NAME'] . "/cors_csp/csp_violation/index.php\"}]};" . ""); } ?> What I would really like is a SIMPLE EXAMPLE that WORKS. So, Sandboxed Iframe, XHR or Fetch, and PHP must to read a cookie. I just cant seem to get a handle on the numerous headers that are all involved, and despite all the googling, I cant find any real working examples intended for demonstration purposes. Think you could help with that?
  21. I fingered it out. Wait, that came out wrong. Take Two, Action! I figured it out! Apparently this works much more way lots gooder-er... audio.ontimeupdate = function(){ audioController.value = audio.currentTime * (100 / audio.duration); currentTime.innerHTML = Math.floor(audio.currentTime / 60) + ":" + ("0" + Math.floor(audio.currentTime) % 60).slice(-2); totalTime.innerHTML = Math.floor(audio.duration / 60) + ":" + ("0" + Math.ceil(audio.duration) % 60).slice(-2); }
  22. I tried loadedmetadata too but not really getting very far. Format doesnt matter to me much, so I could care less if its an MP3, OGG, or a freakin 8 Track Tape, but I dont think the metadata on 8 Track Tapes is easily readable by Javascript. *idea* If I use a constant bit rate, could I use a Loaded and Total property?
  23. It seems like that would work but it does not work as expected Console log. console.log("Duration changed " + audio.duration); Duration changed 11.174603 Duration changed 21.363809 Duration changed 31.107482 Duration changed 41.431655 Duration changed 51.494603 Duration changed 61.37034 Duration changed 65.159546 Perhaps I need to look at another property? What I am looking for is the total duration of an .ogg file, not how much can currently play. Is there a better way to do this?
  24. Ok, let me try to explain my goal again. I want users to upload their own scripts that they can run in an iframe. Since that is pretty dangerous to other users, I think the best thing to do is sandbox scripts in an iframe. Perhaps I am wrong. And I can not simply say "never let users run their own scripts" because it directly contradicts my goals. Running user scripts safely is the MAIN GOAL. I think it is a good idea to also use CORS so that those scripts do not try to make calls to anything EXCEPT one specific location on my server where their scripts are loaded from. This includes Inline Scripts. To load those scripts, I need to be able to send an Ajax / Fetch request to that specific page to load their scripts, which requires a cookie to access which scripts are theirs, and ultimately edit and save those scripts. Since other users will run those scripts, the Cookie has to be HTTPONLY so one user can not read another users cookies. But when I send the Ajax / Fetch request to get their data, I cant read their cookie! I think it is something either in CORS or in the way that I making my javascript requests. Is this a better explanation?
  25. How would I write an async function that checks the value of an Audio Object has a duration that is not Infinity? async () => { let duration = await whatGoesHere?(); setDuration(duration); } Obviously the above code wont work. Im getting an Audio object back, but when I first get it, the audio.duration is Infinity and comes down later with metadata which also appears unreliable. So how can I use an async function without writing 300 lines of .then setTimeout .catch and do this rather simply?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.