Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble

alexitiris

Members
  • Content count

    14
  • Joined

  • Last visited

  • Feedback

    N/A

Community Reputation

3 Neutral

About alexitiris

  • Rank
    Newbie
  1. Modal dialog

    Ξέχασα να πω. Στο spyvasilas.000webhostapp.com έχω ανεβάσει το project
  2. Modal dialog

    Σωστό και αυτό. Ορίστε ο κώδικας. <!doctype html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Audio Recorder</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="js/audiodisplay.js"></script> <script src="js/recorderjs/recorder.js"></script> <script src="js/main.js"></script> <script src="js/recorderjs/recorderWorker.js"></script> <style> html { overflow: hidden; } body { font: 14pt Arial, sans-serif; background: lightgrey; display: flex; flex-direction: column; height: 100vh; width: 100%; margin: 0 0; } #controls { display: flex; flex-direction: row; align-items: center; justify-content: space-around; height: 20%; width: 100%; } /*#record { height: 15vh; } #record.recording { background: red; background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); }*/ #save, #save img { height: 10vh; } #save { opacity: 0.25;} #save[download] { opacity: 1;} /*#viz { height: 80%; width: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } @media (orientation: landscape) { body { flex-direction: row;} #controls { flex-direction: column; height: 100%; width: 10%;} #viz { height: 100%; width: 90%;} }*/ </style> </head> <body> <div id="controls"> <div class="circle" onclick="toggleRecording(this);"> <div class="mc"> <canvas id="analyser"></canvas> <canvas id="wavedisplay"></canvas> </div> </div> <a id="save" href="javascript:void(0)"><img src="img/save.svg"></a> </div> <script src="js/bootstrap.min.js"></script> <div style='text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;'><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website_spyvasilas&utm_content=footer_img"><img src="https://cloud.githubusercontent.com/assets/23024110/20663010/9968df22-b55e-11e6-941d-edbc894c2b78.png" alt="www.000webhost.com"></a></div></body> </html> .circle{ position:relative; margin: 5% auto; background-color:gray; border-radius:50%; width:10em; height:10em; box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.3); } .circle1{ position:relative; margin: 5% auto; background-color:#00c1f8; border-radius:50%; width:10em; height:10em; box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.3); transition:.2s all ease-in; } :before, :after{ content:''; position:absolute; background-color:#fff; } .circle:after{ top:30%; left:43%; height:15%; width:14%; border-top-left-radius:50%; border-top-right-radius:50%; } .circle:before{ top:40%; left:43%; height:15%; width:14%; border-bottom-left-radius:50%; border-bottom-right-radius:50%; } .mc{ position:absolute; top:50%; left:37%; height:24%; width:26.5%; overflow:hidden; } .mc:before{ bottom:50%; width:100%; height:100%; box-sizing:border-box; border-radius:50%; border:0.5em solid #fff; background:none; } .mc:after{ top:50%; left:40%; width:20%; height:25%; } Audiodisplay.js function drawBuffer( width, height, context, data ) { var step = Math.ceil( data.length / width ); var amp = height / 2; context.fillStyle = "silver"; context.clearRect(0,0,width,height); for(var i=0; i < width; i++){ var min = 1.0; var max = -1.0; for (j=0; j<step; j++) { var datum = data[(i*step)+j]; if (datum < min) min = datum; if (datum > max) max = datum; } context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp)); } } recorder.js /*License (MIT) Copyright © 2013 Matt Diamond Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ (function(window){ var WORKER_PATH = 'js/recorderjs/recorderWorker.js'; var Recorder = function(source, cfg){ var config = cfg || {}; var bufferLen = config.bufferLen || 4096; this.context = source.context; if(!this.context.createScriptProcessor){ this.node = this.context.createJavaScriptNode(bufferLen, 2, 2); } else { this.node = this.context.createScriptProcessor(bufferLen, 2, 2); } var worker = new Worker(config.workerPath || WORKER_PATH); worker.postMessage({ command: 'init', config: { sampleRate: this.context.sampleRate } }); var recording = false, currCallback; this.node.onaudioprocess = function(e){ if (!recording) return; worker.postMessage({ command: 'record', buffer: [ e.inputBuffer.getChannelData(0), e.inputBuffer.getChannelData(1) ] }); } this.configure = function(cfg){ for (var prop in cfg){ if (cfg.hasOwnProperty(prop)){ config[prop] = cfg[prop]; } } } this.record = function(){ recording = true; } this.stop = function(){ recording = false; } this.clear = function(){ worker.postMessage({ command: 'clear' }); } this.getBuffers = function(cb) { currCallback = cb || config.callback; worker.postMessage({ command: 'getBuffers' }) } this.exportWAV = function(cb, type){ currCallback = cb || config.callback; type = type || config.type || 'audio/wav'; if (!currCallback) throw new Error('Callback not set'); worker.postMessage({ command: 'exportWAV', type: type }); } this.exportMonoWAV = function(cb, type){ currCallback = cb || config.callback; type = type || config.type || 'audio/wav'; if (!currCallback) throw new Error('Callback not set'); worker.postMessage({ command: 'exportMonoWAV', type: type }); } worker.onmessage = function(e){ var blob = e.data; currCallback(blob); } source.connect(this.node); this.node.connect(this.context.destination); // if the script node is not connected to an output the "onaudioprocess" event is not triggered in chrome. }; Recorder.setupDownload = function(blob, filename){ var url = (window.URL || window.webkitURL).createObjectURL(blob); var link = document.getElementById("save"); link.href = url; link.download = filename || 'output.wav'; } window.Recorder = Recorder; })(window); main.js /* Copyright 2013 Chris Wilson Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ window.AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); var audioInput = null, realAudioInput = null, inputPoint = null, audioRecorder = null; var rafID = null; var analyserContext = null; var canvasWidth, canvasHeight; var recIndex = 0; /* TODO: - offer mono option - "Monitor input" switch */ function saveAudio() { audioRecorder.exportWAV( doneEncoding ); // could get mono instead by saying // audioRecorder.exportMonoWAV( doneEncoding ); } function gotBuffers( buffers ) { var canvas = document.getElementById( "wavedisplay" ); drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffers[0] ); // the ONLY time gotBuffers is called is right after a new recording is completed - // so here's where we should set up the download. audioRecorder.exportWAV( doneEncoding ); } function doneEncoding( blob ) { Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" ); recIndex++; } function toggleRecording( e ) { if (e.classList.contains("circle1")) { // stop recording audioRecorder.stop(); e.classList.remove("circle1"); //kai stis 3 parenthesis poy einai to circle1 itan to recording audioRecorder.getBuffers( gotBuffers ); } else { // start recording if (!audioRecorder) return; e.classList.add("circle1"); audioRecorder.clear(); audioRecorder.record(); } } function convertToMono( input ) { var splitter = audioContext.createChannelSplitter(2); var merger = audioContext.createChannelMerger(2); input.connect( splitter ); splitter.connect( merger, 0, 0 ); splitter.connect( merger, 0, 1 ); return merger; } function cancelAnalyserUpdates() { window.cancelAnimationFrame( rafID ); rafID = null; } function updateAnalysers(time) { if (!analyserContext) { var canvas = document.getElementById("analyser"); canvasWidth = canvas.width; canvasHeight = canvas.height; analyserContext = canvas.getContext('2d'); } // analyzer draw code here { var SPACING = 8; //Arxiki timi 3 var BAR_WIDTH = 4; //Arxiki timi 1 var numBars = Math.round(canvasWidth / SPACING); var freqByteData = new Uint8Array(analyserNode.frequencyBinCount); analyserNode.getByteFrequencyData(freqByteData); analyserContext.clearRect(0, 0, canvasWidth, canvasHeight); analyserContext.fillStyle = '#F6D565'; analyserContext.lineCap = 'round'; var multiplier = analyserNode.frequencyBinCount / numBars; // Draw rectangle for each frequency bin. for (var i = 0; i < numBars; ++i) { var magnitude = 0; var offset = Math.floor( i * multiplier ); // gotta sum/average the block, or we miss narrow-bandwidth spikes for (var j = 0; j< multiplier; j++) magnitude += freqByteData[offset + j]; magnitude = magnitude / multiplier; var magnitude2 = freqByteData[i * multiplier]; analyserContext.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)"; analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude); } } rafID = window.requestAnimationFrame( updateAnalysers ); } function toggleMono() { if (audioInput != realAudioInput) { audioInput.disconnect(); realAudioInput.disconnect(); audioInput = realAudioInput; } else { realAudioInput.disconnect(); audioInput = convertToMono( realAudioInput ); } audioInput.connect(inputPoint); } function gotStream(stream) { inputPoint = audioContext.createGain(); // Create an AudioNode from the stream. realAudioInput = audioContext.createMediaStreamSource(stream); audioInput = realAudioInput; audioInput.connect(inputPoint); // audioInput = convertToMono( input ); analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; inputPoint.connect( analyserNode ); audioRecorder = new Recorder( inputPoint ); zeroGain = audioContext.createGain(); zeroGain.gain.value = 0.0; inputPoint.connect( zeroGain ); zeroGain.connect( audioContext.destination ); updateAnalysers(); } function initAudio() { if (!navigator.getUserMedia) navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (!navigator.cancelAnimationFrame) navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame; if (!navigator.requestAnimationFrame) navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame; navigator.getUserMedia( { "audio": { "mandatory": { "googEchoCancellation": "false", "googAutoGainControl": "false", "googNoiseSuppression": "false", "googHighpassFilter": "false" }, "optional": [] }, }, gotStream, function(e) { alert('Error getting audio'); console.log(e); }); } window.addEventListener('load', initAudio ); recorderWorker.js /*License (MIT) Copyright © 2013 Matt Diamond Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ var recLength = 0, recBuffersL = [], recBuffersR = [], sampleRate; this.onmessage = function(e){ switch(e.data.command){ case 'init': init(e.data.config); break; case 'record': record(e.data.buffer); break; case 'exportWAV': exportWAV(e.data.type); break; case 'exportMonoWAV': exportMonoWAV(e.data.type); break; case 'getBuffers': getBuffers(); break; case 'clear': clear(); break; } }; function init(config){ sampleRate = config.sampleRate; } function record(inputBuffer){ recBuffersL.push(inputBuffer[0]); recBuffersR.push(inputBuffer[1]); recLength += inputBuffer[0].length; } function exportWAV(type){ var bufferL = mergeBuffers(recBuffersL, recLength); var bufferR = mergeBuffers(recBuffersR, recLength); var interleaved = interleave(bufferL, bufferR); var dataview = encodeWAV(interleaved); var audioBlob = new Blob([dataview], { type: type }); this.postMessage(audioBlob); } function exportMonoWAV(type){ var bufferL = mergeBuffers(recBuffersL, recLength); var dataview = encodeWAV(bufferL, true); var audioBlob = new Blob([dataview], { type: type }); this.postMessage(audioBlob); } function getBuffers() { var buffers = []; buffers.push( mergeBuffers(recBuffersL, recLength) ); buffers.push( mergeBuffers(recBuffersR, recLength) ); this.postMessage(buffers); } function clear(){ recLength = 0; recBuffersL = []; recBuffersR = []; } function mergeBuffers(recBuffers, recLength){ var result = new Float32Array(recLength); var offset = 0; for (var i = 0; i < recBuffers.length; i++){ result.set(recBuffers[i], offset); offset += recBuffers[i].length; } return result; } function interleave(inputL, inputR){ var length = inputL.length + inputR.length; var result = new Float32Array(length); var index = 0, inputIndex = 0; while (index < length){ result[index++] = inputL[inputIndex]; result[index++] = inputR[inputIndex]; inputIndex++; } return result; } function floatTo16BitPCM(output, offset, input){ for (var i = 0; i < input.length; i++, offset+=2){ var s = Math.max(-1, Math.min(1, input[i])); output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true); } } function writeString(view, offset, string){ for (var i = 0; i < string.length; i++){ view.setUint8(offset + i, string.charCodeAt(i)); } } function encodeWAV(samples, mono){ var buffer = new ArrayBuffer(44 + samples.length * 2); var view = new DataView(buffer); /* RIFF identifier */ writeString(view, 0, 'RIFF'); /* file length */ view.setUint32(4, 32 + samples.length * 2, true); /* RIFF type */ writeString(view, 8, 'WAVE'); /* format chunk identifier */ writeString(view, 12, 'fmt '); /* format chunk length */ view.setUint32(16, 16, true); /* sample format (raw) */ view.setUint16(20, 1, true); /* channel count */ view.setUint16(22, mono?1:2, true); /* sample rate */ view.setUint32(24, sampleRate, true); /* byte rate (sample rate * block align) */ view.setUint32(28, sampleRate * 4, true); /* block align (channel count * bytes per sample) */ view.setUint16(32, 4, true); /* bits per sample */ view.setUint16(34, 16, true); /* data chunk identifier */ writeString(view, 36, 'data'); /* data chunk length */ view.setUint32(40, samples.length * 2, true); floatTo16BitPCM(view, 44, samples); return view; } save.svg <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="document-save.svg" sodipodi:docbase="/home/jimmac/gfx/ximian/tango-icon-theme/scalable/actions" inkscape:version="0.42+devel" sodipodi:version="0.32" id="svg2913" height="48px" width="48px"> <defs id="defs3"> <linearGradient inkscape:collect="always" id="linearGradient6925"> <stop style="stop-color:#204a87;stop-opacity:1;" offset="0" id="stop6927" /> <stop style="stop-color:#204a87;stop-opacity:0;" offset="1" id="stop6929" /> </linearGradient> <linearGradient inkscape:collect="always" id="linearGradient6901"> <stop style="stop-color:#3465a4;stop-opacity:1;" offset="0" id="stop6903" /> <stop style="stop-color:#3465a4;stop-opacity:0;" offset="1" id="stop6905" /> </linearGradient> <linearGradient inkscape:collect="always" id="linearGradient4991"> <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0" id="stop4993" /> <stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop4995" /> </linearGradient> <radialGradient inkscape:collect="always" xlink:href="#linearGradient4991" id="radialGradient4997" cx="23.447077" cy="6.4576745" fx="23.447077" fy="6.4576745" r="19.0625" gradientTransform="matrix(-1.314471,-1.006312e-2,-1.022964e-2,1.336221,46.22108,-4.909887)" gradientUnits="userSpaceOnUse" /> <linearGradient id="linearGradient2187" inkscape:collect="always"> <stop id="stop2189" offset="0" style="stop-color:#ffffff;stop-opacity:1;" /> <stop id="stop2191" offset="1" style="stop-color:#ffffff;stop-opacity:0;" /> </linearGradient> <linearGradient inkscape:collect="always" xlink:href="#linearGradient2187" id="linearGradient1764" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.914114,1.412791e-16,-1.412791e-16,0.914114,-3.868698,-2.706902)" x1="33.059906" y1="27.394117" x2="12.624337" y2="12.583769" /> <linearGradient inkscape:collect="always" id="linearGradient8662"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop8664" /> <stop style="stop-color:#000000;stop-opacity:0;" offset="1" id="stop8666" /> </linearGradient> <radialGradient inkscape:collect="always" xlink:href="#linearGradient8662" id="radialGradient8668" cx="24.837126" cy="36.421127" fx="24.837126" fy="36.421127" r="15.644737" gradientTransform="matrix(1.000000,-7.816467e-32,-1.132409e-32,0.536723,-5.897962e-14,16.87306)" gradientUnits="userSpaceOnUse" /> <linearGradient id="linearGradient2555"> <stop id="stop2557" offset="0" style="stop-color:#ffffff;stop-opacity:1;" /> <stop style="stop-color:#e6e6e6;stop-opacity:1.0000000;" offset="0.50000000" id="stop2561" /> <stop id="stop2563" offset="0.75000000" style="stop-color:#ffffff;stop-opacity:1.0000000;" /> <stop style="stop-color:#e1e1e1;stop-opacity:1.0000000;" offset="0.84166664" id="stop2565" /> <stop id="stop2559" offset="1.0000000" style="stop-color:#ffffff;stop-opacity:1.0000000;" /> </linearGradient> <linearGradient id="linearGradient4274"> <stop style="stop-color:#ffffff;stop-opacity:0.25490198;" offset="0.0000000" id="stop4276" /> <stop style="stop-color:#ffffff;stop-opacity:1.0000000;" offset="1.0000000" id="stop4278" /> </linearGradient> <linearGradient id="linearGradient4264" inkscape:collect="always"> <stop id="stop4266" offset="0" style="stop-color:#000000;stop-opacity:1;" /> <stop id="stop4268" offset="1" style="stop-color:#000000;stop-opacity:0;" /> </linearGradient> <linearGradient id="linearGradient4254" inkscape:collect="always"> <stop id="stop4256" offset="0" style="stop-color:#ffffff;stop-opacity:1;" /> <stop id="stop4258" offset="1" style="stop-color:#ffffff;stop-opacity:0;" /> </linearGradient> <linearGradient id="linearGradient4244"> <stop id="stop4246" offset="0.0000000" style="stop-color:#e4e4e4;stop-opacity:1.0000000;" /> <stop id="stop4248" offset="1.0000000" style="stop-color:#d3d3d3;stop-opacity:1.0000000;" /> </linearGradient> <linearGradient id="linearGradient4236" inkscape:collect="always"> <stop id="stop4238" offset="0" style="stop-color:#eeeeee;stop-opacity:1;" /> <stop id="stop4240" offset="1" style="stop-color:#eeeeee;stop-opacity:0;" /> </linearGradient> <linearGradient id="linearGradient4228"> <stop id="stop4230" offset="0.0000000" style="stop-color:#bbbbbb;stop-opacity:1.0000000;" /> <stop id="stop4232" offset="1.0000000" style="stop-color:#9f9f9f;stop-opacity:1.0000000;" /> </linearGradient> <linearGradient id="linearGradient4184"> <stop id="stop4186" offset="0.0000000" style="stop-color:#838383;stop-opacity:1.0000000;" /> <stop id="stop4188" offset="1.0000000" style="stop-color:#bbbbbb;stop-opacity:0.0000000;" /> </linearGradient> <linearGradient gradientTransform="translate(0.795493,3.799180)" y2="35.281250" x2="24.687500" y1="35.281250" x1="7.0625000" gradientUnits="userSpaceOnUse" id="linearGradient4209" xlink:href="#linearGradient4184" inkscape:collect="always" /> <linearGradient gradientUnits="userSpaceOnUse" y2="40.943935" x2="36.183067" y1="28.481176" x1="7.6046205" id="linearGradient4234" xlink:href="#linearGradient4228" inkscape:collect="always" gradientTransform="translate(0.000000,5.125000)" /> <linearGradient gradientUnits="userSpaceOnUse" y2="33.758667" x2="12.221823" y1="37.205811" x1="12.277412" id="linearGradient4242" xlink:href="#linearGradient4236" inkscape:collect="always" gradientTransform="translate(0.000000,5.125000)" /> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.286242,0.781698,-0.710782,1.169552,-2.354348,0.248140)" r="20.935817" fy="2.9585190" fx="15.571491" cy="2.9585190" cx="15.571491" id="radialGradient4250" xlink:href="#linearGradient4244" inkscape:collect="always" /> <linearGradient gradientUnits="userSpaceOnUse" y2="47.620636" x2="44.096100" y1="4.4331360" x1="12.378357" id="linearGradient4260" xlink:href="#linearGradient4254" inkscape:collect="always" gradientTransform="translate(0.000000,5.125000)" /> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.000000,0.000000,0.000000,0.651032,-2.885063e-16,9.455693)" r="23.555494" fy="27.096155" fx="23.201941" cy="27.096155" cx="23.201941" id="radialGradient4270" xlink:href="#linearGradient4264" inkscape:collect="always" /> <linearGradient gradientUnits="userSpaceOnUse" y2="26.357183" x2="23.688078" y1="11.318835" x1="23.688078" id="linearGradient4272" xlink:href="#linearGradient4274" inkscape:collect="always" gradientTransform="translate(0.000000,5.125000)" /> <linearGradient inkscape:collect="always" xlink:href="#linearGradient2555" id="linearGradient2553" x1="33.431175" y1="31.964777" x2="21.747974" y2="11.780679" gradientUnits="userSpaceOnUse" /> <linearGradient inkscape:collect="always" xlink:href="#linearGradient6901" id="linearGradient6907" x1="14.751649" y1="15.868432" x2="8.8953285" y2="16.743431" gradientUnits="userSpaceOnUse" /> <linearGradient inkscape:collect="always" xlink:href="#linearGradient6925" id="linearGradient6931" x1="12.25" y1="18.25" x2="7" y2="21.118431" gradientUnits="userSpaceOnUse" /> </defs> <sodipodi:namedview inkscape:window-y="178" inkscape:window-x="462" inkscape:window-height="907" inkscape:window-width="999" inkscape:document-units="px" inkscape:grid-bbox="true" showgrid="true" inkscape:current-layer="layer1" inkscape:cy="11.891468" inkscape:cx="28.318495" inkscape:zoom="16" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="0.22745098" bordercolor="#666666" pagecolor="#ffffff" id="base" inkscape:showpageshadow="false" fill="#3465a4" stroke="#204a87" /> <metadata id="metadata4"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title>Save</dc:title> <dc:creator> <cc:Agent> <dc:title>Jakub Steiner</dc:title> </cc:Agent> </dc:creator> <dc:subject> <rdf:Bag> <rdf:li>hdd</rdf:li> <rdf:li>hard drive</rdf:li> <rdf:li>save</rdf:li> <rdf:li>io</rdf:li> <rdf:li>store</rdf:li> </rdf:Bag> </dc:subject> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/" /> <dc:identifier /> <dc:source>http://jimmac.musichall.cz</dc:source> </cc:Work> <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/"> <cc:permits rdf:resource="http://web.resource.org/cc/Reproduction" /> <cc:permits rdf:resource="http://web.resource.org/cc/Distribution" /> <cc:requires rdf:resource="http://web.resource.org/cc/Notice" /> <cc:requires rdf:resource="http://web.resource.org/cc/Attribution" /> <cc:permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" /> <cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike" /> </cc:License> </rdf:RDF> </metadata> <g inkscape:label="pix" id="layer2" inkscape:groupmode="layer"> <path transform="matrix(1.052533,0.000000,0.000000,0.363113,-0.511757,31.99486)" d="M 46.757435 27.096155 A 23.555494 15.335379 0 1 1 -0.35355377,27.096155 A 23.555494 15.335379 0 1 1 46.757435 27.096155 z" sodipodi:ry="15.335379" sodipodi:rx="23.555494" sodipodi:cy="27.096155" sodipodi:cx="23.201941" id="path4262" style="opacity:0.56000001;color:#000000;fill:url(#radialGradient4270);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" sodipodi:type="arc" /> <path sodipodi:nodetypes="cccsccccccccc" id="path4196" d="M 11.28569,13.087628 C 10.66069,13.087628 10.254441,13.377808 10.004442,13.931381 C 10.004441,13.931381 3.5356915,31.034938 3.5356915,31.034938 C 3.5356915,31.034938 3.2856915,31.706497 3.2856915,32.816188 C 3.2856915,32.816188 3.2856915,42.466156 3.2856915,42.466156 C 3.2856915,43.548769 3.943477,44.091158 4.9419415,44.091156 L 43.50444,44.091156 C 44.489293,44.091156 45.09819,43.372976 45.09819,42.247406 L 45.09819,32.597438 C 45.09819,32.597438 45.204153,31.827015 45.00444,31.284938 L 38.28569,14.087631 C 38.101165,13.575725 37.648785,13.099533 37.16069,13.087628 L 11.28569,13.087628 z " style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#535353;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccccccccc" id="path4170" d="M 3.2735915,32.121812 L 4.0381936,31.429597 L 41.647883,31.492097 L 45.11029,31.809395 L 45.11029,42.247927 C 45.11029,43.373496 44.503272,44.091258 43.518419,44.091258 L 4.9354314,44.091258 C 3.9369667,44.091258 3.2735915,43.549207 3.2735915,42.466594 L 3.2735915,32.121812 z " style="fill:url(#linearGradient4234);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.02044296px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path sodipodi:nodetypes="csccccccs" id="path3093" d="M 3.5490842,31.039404 C 2.8347985,32.50369 3.5484686,33.432261 4.5847985,33.432261 C 4.5847985,33.432261 43.584797,33.432261 43.584797,33.432261 C 44.703844,33.408451 45.430035,32.420356 45.013368,31.289403 L 38.299082,14.078704 C 38.114558,13.566798 37.64432,13.090606 37.156225,13.078701 L 11.299083,13.078701 C 10.674083,13.078701 10.263369,13.382274 10.01337,13.935847 C 10.01337,13.935847 3.5490842,31.039404 3.5490842,31.039404 z " style="fill:url(#radialGradient4250);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <rect y="36.299183" x="7.857996" height="5.5625" width="17.625" id="rect4174" style="opacity:1;color:#000000;fill:url(#linearGradient4209);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.40899992;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /> <path sodipodi:nodetypes="cscc" id="path4194" d="M 7.8579947,41.86168 C 7.8579947,41.86168 7.8579947,37.850195 7.8579947,37.850195 C 9.6935221,41.029421 16.154485,41.86168 20.795492,41.86168 C 20.795492,41.86168 7.8579947,41.86168 7.8579947,41.86168 z " style="opacity:0.81142853;fill:url(#linearGradient4242);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path sodipodi:nodetypes="cccccccc" id="path4201" d="M 44.796162,30.753688 C 44.859684,32.003662 44.382159,33.069528 43.474046,33.097438 C 43.474046,33.097438 5.3553296,33.097437 5.3553297,33.097438 C 4.0660978,33.097438 3.4875937,32.772491 3.271279,32.229382 C 3.3630404,33.173714 4.0970964,33.878688 5.3553297,33.878688 C 5.3553296,33.878687 43.474046,33.878688 43.474046,33.878688 C 44.550053,33.845617 45.226851,32.454664 44.82621,30.883897 L 44.796162,30.753688 z " style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path4211" d="M 10.96875,15.28125 C 10.922675,15.481571 10.78125,15.668047 10.78125,15.875 C 10.78125,16.823605 11.37223,17.664474 12.125,18.46875 C 12.365268,18.314675 12.490117,18.114342 12.75,17.96875 C 11.809691,17.152746 11.196604,16.252168 10.96875,15.28125 z M 37.625,15.28125 C 37.396273,16.250866 36.782988,17.153676 35.84375,17.96875 C 36.117894,18.122332 36.247738,18.33699 36.5,18.5 C 37.257262,17.693344 37.8125,16.826956 37.8125,15.875 C 37.8125,15.668047 37.670906,15.481571 37.625,15.28125 z M 39.8125,23.71875 C 39.198709,27.758861 32.513887,30.96875 24.28125,30.96875 C 16.068996,30.968751 9.4211001,27.775964 8.78125,23.75 C 8.7488928,23.947132 8.65625,24.141882 8.65625,24.34375 C 8.6562503,28.661697 15.645354,32.187501 24.28125,32.1875 C 32.917146,32.1875 39.937499,28.661698 39.9375,24.34375 C 39.9375,24.130826 39.848449,23.926394 39.8125,23.71875 z " style="opacity:0.69142857;color:#000000;fill:url(#linearGradient4272);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /> <path transform="translate(8.838843e-2,5.301780)" d="M 8.5736699 25.593554 A 1.3700194 1.016466 0 1 1 5.833631,25.593554 A 1.3700194 1.016466 0 1 1 8.5736699 25.593554 z" sodipodi:ry="1.016466" sodipodi:rx="1.3700194" sodipodi:cy="25.593554" sodipodi:cx="7.2036505" id="path4224" style="opacity:1;color:#000000;fill:#ffffff;fill-opacity:0.45762706;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" sodipodi:type="arc" /> <path sodipodi:type="arc" style="opacity:1;color:#000000;fill:#ffffff;fill-opacity:0.45762706;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" id="path4226" sodipodi:cx="7.2036505" sodipodi:cy="25.593554" sodipodi:rx="1.3700194" sodipodi:ry="1.016466" d="M 8.5736699 25.593554 A 1.3700194 1.016466 0 1 1 5.833631,25.593554 A 1.3700194 1.016466 0 1 1 8.5736699 25.593554 z" transform="translate(33.96705,5.213390)" /> <path style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient4260);stroke-width:1.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 11.642515,13.540723 C 11.040823,13.540723 10.649724,13.820081 10.409049,14.35301 C 10.409048,14.35301 3.9940341,30.943732 3.9940341,30.943732 C 3.9940341,30.943732 3.7533573,31.590247 3.7533573,32.658555 C 3.7533573,32.658555 3.7533573,41.948651 3.7533573,41.948651 C 3.7533573,43.303391 4.1974134,43.57555 5.3478414,43.57555 L 43.034746,43.57555 C 44.357872,43.57555 44.569062,43.259153 44.569062,41.738058 L 44.569062,32.447962 C 44.569062,32.447962 44.671072,31.706271 44.478807,31.184409 L 37.885616,14.378434 C 37.707973,13.885617 37.334964,13.552184 36.865071,13.540723 L 11.642515,13.540723 z " id="path4252" sodipodi:nodetypes="cccsccccccccc" /> <path style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" d="M 40.5,36.554166 L 40.5,41.575101" id="path4282" /> <path id="path4284" d="M 38.5,36.613943 L 38.5,41.634878" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" /> <path style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" d="M 36.5,36.613943 L 36.5,41.634878" id="path4286" /> <path id="path4288" d="M 34.5,36.613943 L 34.5,41.634878" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" /> <path style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" d="M 32.5,36.613943 L 32.5,41.634878" id="path4290" /> <path id="path4292" d="M 30.5,36.613943 L 30.5,41.634878" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.42372885" /> <path id="path4294" d="M 39.5,36.604065 L 39.5,41.625" style="opacity:0.09714284;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" /> <path style="opacity:0.09714284;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 37.5,36.663842 L 37.5,41.684777" id="path4296" /> <path id="path4298" d="M 35.5,36.663842 L 35.5,41.684777" style="opacity:0.09714284;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" /> <path style="opacity:0.09714284;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 33.5,36.663842 L 33.5,41.684777" id="path4300" /> <path id="path4302" d="M 31.5,36.663842 L 31.5,41.684777" style="opacity:0.09714284;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000048px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path4572" d="M 7.875,36.3125 L 7.875,41.84375 L 20.4375,41.84375 L 8.21875,41.5 L 7.875,36.3125 z " style="opacity:0.43999999;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path sodipodi:type="arc" style="opacity:0.20571427;color:#000000;fill:url(#linearGradient2553);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.93365198;stroke-linecap:square;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.42372879;visibility:visible;display:inline;overflow:visible" id="path2545" sodipodi:cx="25" sodipodi:cy="19.5625" sodipodi:rx="14.875" sodipodi:ry="6.6875" d="M 39.875 19.5625 A 14.875 6.6875 0 1 1 10.125,19.5625 A 14.875 6.6875 0 1 1 39.875 19.5625 z" transform="matrix(1.037815,0.000000,0.000000,1.060747,-1.632878,3.030370)" /> </g> <g inkscape:groupmode="layer" id="layer1" inkscape:label="down"> <path transform="matrix(1.130190,1.178179e-16,7.918544e-17,-0.759601,-3.909725,53.66554)" d="M 40.481863 36.421127 A 15.644737 8.3968935 0 1 1 9.1923885,36.421127 A 15.644737 8.3968935 0 1 1 40.481863 36.421127 z" sodipodi:ry="8.3968935" sodipodi:rx="15.644737" sodipodi:cy="36.421127" sodipodi:cx="24.837126" id="path8660" style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" sodipodi:type="arc" /> <path style="opacity:1;color:#000000;fill:url(#linearGradient6907);fill-opacity:1.0;fill-rule:nonzero;stroke:url(#linearGradient6931);stroke-width:0.99999982;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible" d="M 3.2034501,25.835194 C 2.1729477,-5.3853369 28.741616,-0.4511153 28.582416,15.788689 L 35.89533,15.788689 L 24.517652,28.774671 L 12.585426,15.788689 C 12.585426,15.788689 20.126859,15.788689 20.126859,15.788689 C 20.583921,4.8193225 3.4092324,1.6100346 3.2034501,25.835194 z " id="path1432" sodipodi:nodetypes="ccccccc" /> <path sodipodi:nodetypes="ccccccc" id="path2177" d="M 7.6642103,9.1041047 C 12.40638,-0.0400306 28.122336,2.7175443 27.761604,16.579393 L 34.078976,16.579393 C 34.078976,16.579393 24.513151,27.536769 24.513151,27.536769 L 14.41668,16.579393 C 14.41668,16.579393 20.87332,16.579393 20.87332,16.579393 C 21.144975,5.0041615 10.922265,5.5345215 7.6642103,9.1041047 z " style="opacity:0.47159091;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient1764);stroke-width:0.99999934;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:block;overflow:visible" /> <path style="opacity:0.49431817;color:#000000;fill:url(#radialGradient4997);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.9999997;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" d="M 34.767155,16.211613 L 32.782979,18.757322 C 27.372947,17.241029 24.896829,21.486664 17.109284,20.489112 L 13.247998,16.080077 L 20.434468,16.162862 C 20.483219,4.3164571 8.3443098,4.998966 5.0292663,13.627829 C 8.8372201,-1.2611216 27.893316,0.8064118 28.28332,16.114112 L 34.767155,16.211613 z " id="path4989" sodipodi:nodetypes="cccccccc" /> </g> </svg>
  3. Modal dialog

    Καλημέρα σε όλους :). Θέλω την βοήθεια σας παρακαλώ. Όπως θα δείτε στο link έχω ένα voice recoder, που αυτό το παραμετροποίησα. Πως λειτουργεί. Όταν κάνεις κλικ στο μικρόφωνο και γίνει μπλε τότε ενεργοποιήτε η ηχογραφή. Μέτα όταν κάνεις πάλη κλικ και γίνει γκρι κλείνει το μικρόφωνο και μετά ενεργοποιήτε το εικονίδιο που είναι ο σκληρός δίσκος για να αποθηκεύσουμε το αρχείο wav. Εγώ θέλω να καταργήσω το εικονίδιο που είναι σε svg και θέλω άλλο τρόπο αποθήκευσης αρχείου. Δήλαδη όταν κλείσει το μικρόφωνο από το κουμπί "από μπλε γίνεται γκρί" τότε αυτόματα θέλω να μου εμφανίζει ένα παραθύρο με το εξής μήνυμα "Θέλετε να αποθηκεύσετε το αρχείο ήχου" και από κάτω με 2 buttons (Ναι) (Όχι). Αν πατήσει Ναι αποθηκεύει το αρχείο του στο pc. Αν πατήσει Όχι τότε κλείνει το παράθυρο και παραμένει στο περιεχόμενο. Τέλος, θα χρησημοποιήσω bootstrap και βρήκα αυτά εδώ https://v4-alpha.getbootstrap.com/components/modal/#how-it-works https://getbootstrap.com/docs/3.3/javascript/ αλλά δεν ξέρω πολύ προγραμματισμό. Μπορώ να έχω την βοήθεια σας παρακαλώ? spyvasilas.000webhostapp.com
  4. CSS animation and JS onclick

    Γεια σας φίλοι μου. Θα ήθελα την βοήθεια σας παρακαλώ. Έχω μια πρόταση πχ "Web Developer" και 3 εικονες. Η πρώτη εικόνα (test1) αριστερα και η τρίτη (test2) εικόνα δεξια θα είναι σταθερές. Στην δεύτερη εικόνα (test3) μεσαία θελω να κάνω animation. Θέλω το εξής να κάνω. Πρώτον, οι τρεις εικόνες θα έχουν opacity 0. Δεύτερον, όταν ο χρήστης κάνει κλικ στην πρόταση τότες θα ακούσει την πρόταση και η πρώτη εικονα θα γίνεται opacity 1 και μετά από 2 δευτερολεπτα να γίνονται οι άλλες εικόνες 2 opacity 1 και η δεύτερη εικόνα να κάνει animation προς τα δεξια για να πάει απάνω στην εικόνα τρίτη. Έχω κάνει την CSS αλλά έχω κολησει στην JS. Μπορείτε παρακαλώ να με βοηθήσετε? .test1image{ max-width: 10%; margin: 4% 0 3% 30%; } .test2image{ max-width: 15%; margin: 8% 0 3% 20%; } /*// Star: Element to animate //*/ .test3image{ max-width: 15%; margin: 2% 0 3% -36%; animation-name: test3motion; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 0.5s; } /*// Keyframes //*/ @keyframes test3motion{ from{ transform: translateX(20px)} to{ transform: translateX(230px)} } .sntc-img { height: auto; opacity: 0; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; z-index: 1; } .sntc-img--show { position: relative; opacity: 1; z-index: 99; }
  5. Γεια σας φίλοι μου. Θα ήθελα την βοήθεια σας παρακαλώ σχετικά με την test1js.js και test1css.css που αντιμετωπίζω το εξής πρόβλημα. Πρώτον, σας αναρτώ το κώδικα για το test1js + test1css και πως λειτουργεί. <h1 id="lettersound" onclick="PlayDing()" onmouseover="" style="text-align: center;"></h1> /*Αρχείο test1js*/ var audioletter = document.getElementById("audiolettersound"); // Original String var letterstring = "WEb Developer."; // Replace string letterstring=letterstring.replace(/(e)/gi,'<span class="Char" onclick="PlayDing();">$1</span>'); //Insert String document.getElementById("lettersound").innerHTML=letterstring; // Audio Function function PlayDing(){ audioletter.pause(); audioletter.play(); audioletter.currentTime = 0; } /* Αρχείο test1css */ .Char:Hover{text-decoration:underline;cursor:pointer;} Όταν χρήστης πάει με το mouse απάνω στο γράμμα το e του εμφανίζει το underline και όταν κάνει κλικ θα ακούσει τον ήχο του γράμματος. Τρίτον, το πρόβλημα μου είναι ότι, όταν το τρέχω στο mac (firefox, chrome) δεν μου εμφανίζει το underline όταν πάω με το Mouse απάνω στο γράμμα. Μπορείτε σας παρακαλώ να με βοηθήσετε; Ευχαριστώ
  6. Click γράμματος σε πρόταση

    Μέτα από ψάξιμο το βρήκα. Αλλά θέλω μια άλλη βοήθεια. Πως μπορώ να του προσθέσω όταν ο χρήστης πάει απάνω στο γράμμα να του εμφανίζεται ένα underline και το cursor pointer. Πως το κάνω αυτό? Αλλά βλέπω δεν λειτουργεί σωστά. Δηλαδή όταν πατάω με την σειρά το γράμμα e παίζει κανονικά αλλά όταν το πατάω πάλη από την αρχή δεν μου παίζει. Δηλαδή πρέπει να το πατήσω 2 φορές για να παίξει ή φορές. Μπορούμε να το διορθώσουμε αυτό φίλοι? var letterstring = "web developer"; var audioletter = document.getElementById("audiolettersound"); document.addEventListener('click',function(){ var letter = window.getSelection(); if(letter.focusNode.data[letter.focusOffset].toLowerCase()=='e'){ audioletter.play(); } },false); document.getElementById("test").innerHTML=letterstring;
  7. Click γράμματος σε πρόταση

    Ωραία. Άλλαξα τον ήχο σε mp3 δικο μου και δεν μου παιζει.
  8. Click γράμματος σε πρόταση

    Ναι. Όταν ο χρήστης πατήση το γράμμα e θα ακούγετε ένας ήχος. Το έχω μέσα σε h1 την πρόταση.
  9. Γεια σας σε όλους και καλή εβδομάδα. Θέλω την βοήθεια σας παρακαλώ. Έχω μια πρόταση πχ Web Developer. Και θέλω όταν χρήστης κάνει κλικ στο γράμμα e να ακούγεται. Αυτό πως μπορώ να το κάνω με την JS? Ή υπάρχει κάποια βιβλιοθήκη jQuery?
  10. JavaScript expain

    Αυτό το έκανες με jQuery?
  11. JavaScript expain

    Τώρα κατάλαβα. Απλός είχα μπερδευτεί με τα data types. Γι' αυτό. Σε ευχαριστώ πολύ για το χρόνο σου.
  12. JavaScript expain

    Τα έχω διορθώσει αυτά. Απλός θέλω μια εξήγηση σχετικά με την JS!!!!!
  13. JavaScript expain

    Το έχω βρει εδώ http://stackoverflow.com/questions/41973990/two-click-differnets-text-and-image-and-play-audio/41974611?noredirect=1#comment71128718_41974611 Απλός θα ήθελα την βοήθεια σας αν μπορείτε να μου εξηγήσετε γιατί έβαλε το null? Και + αυτό που ρωτάω απάνω.
  14. JavaScript expain

    Γεια σας φίλοι μου. Θα ήθελα την βοήθεια σας παρακαλώ. Είμαι αρχάριος και θα ήθελα την βοήθεια σας παρακαλώ. Σε αυτό εδώ κάνεις το εξής: Όταν ο χρήστης πατήσει την λέξη τεστ θα ακούσει ένα ήχο. Μετά αν πατήσει την εικόνα σταματάει ο ήχος από την πρόταση και παίζει ο ήχος στην εικόνα. <h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1> <img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test"> Επειδή δεν καταλαβαίνω κάποια πράγματα θα ήθελα να εξηγήσετε λίγο την λογική της σας παρακαλώ δηλαδή πως λειτουργεί εδώ η JS. var audio1 = document.getElementById("audio1"); var audio2 = document.getElementById("audio2"); var whoIsPlaying = null; //Εδώ δίνει μια μεταβλητή και της εκχωρεί με null. function clickOnH1() { /*Στην if τι ελέγχει το είδος ή κάτι άλλο? Δηλαδή στο Data types που έχω διαβάσει από το w3schools το null είναι object και τα '' είναι sting. Ισχύει αυτό που λέω? */ if (whoIsPlaying != 'H1') { audio2.pause(); audio1.play(); whoIsPlaying = 'H1'; //Εδώ γιατί έβαλε ότι η μεταβλητή εκχωρείται με ''? } } function clickOnIMG() { if (whoIsPlaying != 'IMG') { audio1.pause(); audio2.play(); whoIsPlaying = 'IMG'; } }
  15. Hello alexitiris,

    Welcome to designhost.gr.

    Feel free to browse our community accessing all sorts of information and getting to know our members.

    Do not hesitate to ask anything in our forums.

    designhost.gr

×