Winston
-
Posts
50 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by Winston
-
I'm still having issues getting this to work; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .mix { background-color: black; position: absolute; top: 0; left: 0; } .redx { position: absolute; top: 0; left: 0; } .redx img{ mix-blend-mode: lighten; } .greenbluex { position: absolute; top: 0; left: 0; } .greenbluex img{ mix-blend-mode: lighten; } </style> </head> <body> <div class="mix"> <div class="redx" id="reds"> <img src="MyRed.jpg" width="300" height="300"> </div> <div class="greenbluex" id="greenblues"> <img src="MyGreenBlue.jpg" width="300" height="300"> </div> </div> <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="RRR"> <feColorMatrix type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 "/> </filter> <filter id="CCC"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 "/> </filter> </svg> <script> document.getElementById("reds").style.filter = "url(#RRR)"; document.getElementById("greenblues").style.filter = "url(#CCC)"; </script> </body> </html> The colors won't blend to make the color, the Green-Blue is refusing to blend the Red through. Do you see something I don't?
-
If not CSS, Could you give me an example in JS and/or <canvas>? All I want to do is take 3 1-channel pictures and combine them in different colors (Stereochrome, RGB, or RGBA) to make a color image. A link with an example may also be helpful on how to do this.
-
<style> #mySTEREOCHROME { width: 400px; height: 400px; background-image: url("red.jpg"), url("cyan.jpg"); background-blend-mode: lighten; background-color: #FF0000, #00FFFF; } </style> I'm trying to use 2 or more grayscale picture files to make a color one. This is my example of trying to make "red.jpg" in the red pixels, and "cyan.jpg" in both green and blue. How to do this in 2 (Stereochrome), 3 (Color) and 4 (Color-And-Alpha) picture files? I spent maybe an hour and a half on the internet trying to find a code that works, and I can't seem to find a way to get this working. Can anyone help? (Because reverse is slower than forward; it is speed in the negative.)
-
So I ran into a problem... When I try to edit the code to change the frequency of sound in https://mdn.github.io/voice-change-o-matic/ , the webapp does nothing. I tried something like; biquadFilter.frequency(2000); To increase it by 2000Hz. Am I missing something, do I need to get and set frequencies? How, if so? "Because reverse is slower than forward; reverse is below stopping time." (Yes, I made up that quote. Do you like it?)
-
I looked for code that changes the pitch of sound, even with speed, but none of the code I found online works. How would I program a page to have that ability? We already have volume, and speed, but pitch or frequency is refusing, and I wonder if old browsers had it, but was discontinued...? People on other Forums are ASKING THIS SAME QUESTION, and they DID GET CODE; THAT DOESN'T WORK ON MY COMPUTER! So what is the WORKING code?
-
Some people online say that negative numbers in "playbackRate" would play backwards. Others say it doesn't work. More say it is only certain browsers that supports it. If you have the problem, and if it helps anyone, here is a reverse video player (Even though it glitches a little, similar to how a rewinding DVD glitches); <!DOCTYPE html> <html> <head> <video id="theVideo"> <source src="example/video.mp4" type="video/mp4" id="theVideo"> </video><br> <button id="" class="backpoint" onmousedown="setReverse()" onmouseup="setForward()" ondrag="setForward()">Hold me to reverse/Release me to forward</button> <script> var vid = document.getElementById("theVideo"); function setReverse() { vid.pause(); myVar = setInterval(function() { vid.currentTime = vid.currentTime - 0.025; }, 25); } function setForward() { vid.play(); clearInterval(myVar); } </script> </head> </html> When you hold the button, it plays in reverse, and when you release the button, resumes forward. Just replace "example/video.mp4" with your video location. However, the video will be muted because it thinks it's paused, but jumps backward repeatedly to appear in reverse. If this gets moved, please tell me where it is moved to.
-
How do I check in Notepad++? I can't find the error manually.
-
I got this error message; This site can’t be reached localhost refused to connect. Try: Checking the connection Checking the proxy and the firewall ERR_CONNECTION_REFUSED
-
I tried this link I found in Help, to get instructions, but is unavailable. How do you run a page?
-
How do I open the page? I don't see "PHP" when it runs... Ingolme I noticed your user picture looks almost like Tails from Sonic The Hedgehog, just have to ask; Is it?
-
I put files on a virtual hard disk, but when I try to run it from the browser, the PHP code comes up as text, and does not run the commands. What do I do to turn "O:\" (or any other drive) into a unshared virtual server? Or another fix, how do I run PHP on Chrome for Windows 10 period?
-
The other still pointers work fine, it's just when I try to animate one and sync it to the video. I managed to make the pointer animate somewhat, but not in sync with anything: <!DOCTYPE html> <html> <body> <p>Flipping diagonal pointers.</p> <script> var myVar = setInterval(setColor, 300); function setColor() { var clickthis = document.body; clickthis.style.cursor = clickthis.style.cursor == "sw-resize" ? "nw-resize" : "sw-resize"; } </script> </body> </html> Hover over the text and it changes. Is it possible to make an If-Then-Else version of animated cursors and stay working (without glitching and resetting automatically in background) and sync the cursor to the timeline of a video? If so, what would I write to do that? (Would it be similar to my first post with If-Then-Else?)
-
let a = document.getElementById("clock"); a.style.cursor = timecursors[index]; Wouldn't this replace all <a> elements? it says "a".
-
Just thought about this: Does it not work on updating text? Is there a way around? As it counts (or whenever more specifically), I try to hover over it, but the pointer remains showing the "select" cursor.
-
I hate to say it, but it still isn't working, can I have an alternate code (like an "if-then-else" statement or something)?
-
I have tried setting it up like this: <style> .clocksper {cursor: timecursors[index],auto} </style> <a id="" class="clocksper" onmouseover="" style="cursor:timecursors[index];">...</a> <script> clocksper.ontimeupdate = function() {timeCursor()}; function timeCursor() { const timecursors = [ "url(point/Percent00.cur)", "url(point/Percent05.cur)", "url(point/Percent10.cur)", "url(point/Percent15.cur)", "url(point/Percent20.cur)", "url(point/Percent25.cur)", "url(point/Percent30.cur)", "url(point/Percent35.cur)", "url(point/Percent40.cur)", "url(point/Percent45.cur)", "url(point/Percent50.cur)", "url(point/Percent55.cur)", "url(point/Percent60.cur)", "url(point/Percent65.cur)", "url(point/Percent70.cur)", "url(point/Percent75.cur)", "url(point/Percent80.cur)", "url(point/Percent85.cur)", "url(point/Percent90.cur)", "url(point/Percent95.cur)", "url(point/Percent00.cur)", ]; let index = Math.floor(20 * vid.currentTime / vid.duration); document.getElementsByClassName("clocksper").style.cursor = document.getElementsByClassName("clocksper").style.cursor == timecursors[index]; } </script> I'm stuck, I can't seem to show the cursor at a specific video time. I tried rephrasing in If-Then-Else, Tried using "?" and ":", Tried renaming Id, Tried even resetting the browser, nothing worked. Could you please give me code to do it in an named <a> element? (<a id=""> <a class=""> <a onmouseover="">) And disable it when off the element?
-
Is it possible to link something in <style> from/to <script>?
-
Ingolme Are you busy? I'm sorry if I am not being specific, I was up since Midnight trying to figure this out, so I'm probably a bit confused to the point I'm not adding enough detail. Would you like to see the entire page to correct the mistake?
-
I meant a specific <a>, like <a id="example"> or <a class="example">, not all of them.
-
Sorry, I wrote it twice. Ignore that. I meant just one code, not two.
-
Silly me, I had the names wrong. I had Percent00 - Percent10 instead of Percent00 - Percent90. (And I added more cursors for 5, 15, 25...) Could you give me an update, something like...?: setInterval(timeCursor, 200); function timeCursor() { const timecursors = [ "url(point/Percent00.cur)", "url(point/Percent05.cur)", "url(point/Percent10.cur)", "url(point/Percent15.cur)", "url(point/Percent20.cur)", "url(point/Percent25.cur)", "url(point/Percent30.cur)", "url(point/Percent35.cur)", "url(point/Percent40.cur)", "url(point/Percent45.cur)", "url(point/Percent50.cur)", "url(point/Percent55.cur)", "url(point/Percent60.cur)", "url(point/Percent65.cur)", "url(point/Percent70.cur)", "url(point/Percent75.cur)", "url(point/Percent80.cur)", "url(point/Percent85.cur)", "url(point/Percent90.cur)", "url(point/Percent95.cur)", "url(point/Percent00.cur)", ]; let index = Math.floor(20 * vid.currentTime / vid.duration); a.clocksper.style.cursor = timecursors[index]; } setInterval(timeCursor, 200); function timeCursor() { const timecursors = [ "url(point/Percent00.cur)", "url(point/Percent05.cur)", "url(point/Percent10.cur)", "url(point/Percent15.cur)", "url(point/Percent20.cur)", "url(point/Percent25.cur)", "url(point/Percent30.cur)", "url(point/Percent35.cur)", "url(point/Percent40.cur)", "url(point/Percent45.cur)", "url(point/Percent50.cur)", "url(point/Percent55.cur)", "url(point/Percent60.cur)", "url(point/Percent65.cur)", "url(point/Percent70.cur)", "url(point/Percent75.cur)", "url(point/Percent80.cur)", "url(point/Percent85.cur)", "url(point/Percent90.cur)", "url(point/Percent95.cur)", "url(point/Percent00.cur)", ]; let index = Math.floor(20 * vid.currentTime / vid.duration); a.clocksper.style.cursor = timecursors[index]; }
-
How to do it in an element name? For example, I don't want all <a> to be effected, but just <a id="example">
-
How do I do that? I tried this... <a id="clocksper" class="clocksper" element="clocksper"><a>...</a></a> <script> setInterval(timeCursor, 200); function timeCursor() { const timecursors = [ "url(point/Percent00.cur)", "url(point/Percent01.cur)", "url(point/Percent02.cur)", "url(point/Percent03.cur)", "url(point/Percent04.cur)", "url(point/Percent05.cur)", "url(point/Percent06.cur)", "url(point/Percent07.cur)", "url(point/Percent08.cur)", "url(point/Percent09.cur)", "url(point/Percent00.cur)", ]; let index = Math.floor(10 * vid.currentTime / vid.duration); clocksper.style.cursor = timecursors[index]; } </script> This is part of the code, what I think I need to change, but as you can see, I tried using "clocksper" in "id", "class" and "element". None of them worked; still shows the "Select Text" cursor. Do you need more code?
-
Sorry if I wasn't clear, but to answer the questions... Do I want the cursor to appear on the video itself or on this <a> element? In the <a> element. Do I actually want the cursor image to update or do I just want to update value of the text inside the <a> element? The cursor image, I eventually already did the text. Am I trying to have the <a> element follow the mouse pointer? No, just show the custom cursor in the <a>, and when I hover-out of the <a>, return to normal. Please reply, soon.
-
I noticed I accidently used "vid.duration" on both at the beginning, I meant one to be "vid.currentTime".