based on the custom-player-examples im building my own player.
i used the minimal-player template.
after i set up the player like i want it to be, i started to customize the design (color.css, structure.css, standard,css)
but now i am stuck badly..
i found out that i cant change the background-color of the waveforms unless i use a webkit or the waveform.js.
the webkit should do just fine for me...
my only problem is,
i dont know how to acess the track.waveform_url in neither my index.html or *.css files.
i know its inside waveform-container div but i need the url
.wavekit{
-webkit-mask-box-image: url(**IN HERE!!!**);
background: #81D8D0;
height: 280px;
width: 100%;
bottom: 0px;
position: fixed;
}
inside my stylesheet..
sadly i cant provide a link because its only on my hard drive yet
can somebody please help me out here?
thank you verymuch
Well, this is very hacky, but after a couple of attempts I haven't found a better way to get waveform URL.
Idea is that for first play there is an event of 'ajaxSuccess' that is firing and for the next ones there is 'scPlayer:onAudioReady' event. The point being that image’s DOM is being generated by the plugin only at some point, so we need a certain “hook” like an event to know for sure the image will be already present in DOM.
$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
// get image from DOM of player
// it will be re-set every next play
console.log($('.sc-waveform-container > img').attr('src'));
$('.wavekit').style({
'-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
});
});
Here's working example http://jsbin.com/uhofom/2/edit (only tested in Chrome)
Custom player project is outdated and will probably not get much attention. Its current state is not very extendable from the JavaScript point of view.
My suggestion would be to use something like Audio5JS or SoundManager2 to play music and to have custom HTML and CSS UI. To get actual sounds or sets data you could query our HTTP API or use SoundCloud JavaScript SDK. Then you'd have proper object with all data including waveform API and would control the process much better.
Related
I have a webpage that loads caller data when a caller calls. I am trying to parse the element ids but they are loaded in an iframe. How would i go about doint this?
The iframe is and the elements are on default.html <iframe onload="UserFrameLoaded();" name="cmUserFrame" id="view_cmUserFrame" style="display: block; overflow: scroll;" marginheight="0" width="100%" height="1415px" frameborder="0" marginwidth="0" src="./CallManager_files/default.html"></iframe>
the code im using is
Dim firstNameText As String = Await WebView21.ExecuteScriptAsync("document.getElementById('m.first_name').textContent")
i tried
Dim firstNameText As String = Await WebView21.ExecuteScriptAsync("document.getElementById('view_cmUserFrame').contentWindow.document.getElementById('m.first_name').textContent")
Im not sure if the iframes source is on another domain. Im hoping not...
I can probably just save the webpage locally and then load default.html directly but i am not sure how to save the webpage with webview either.
You pretty much are asking a Javascript question, however, things might be easier for you if you understand a little more about Webview2 and how you can access those frames.
First option is FrameCreated Event which will fire when the cmUserFrame is created in the top document. From this you get a frame and you can then use ExecuteScriptAsync from that frame object.
Next up you have AddScriptToExecuteOnDocumentCreatedAsync with this it will inject your script into each document that is created. In this case you could have Javascript that checks the name of the document/Frame and then if it is the right frame continues with your javascript.
With respect to you actual Javascript, without knowing the actual page it is difficult to know. open the Dev tools of either Chrome or edge and then the console and copy past your javascript into there to see if it works there first. If it works there then you have a timing issue. If it does not work then you need to work on what is not being found.
Updated From Comments
To help you understand the Webview2 frame events here is an Issue from Github
One more link from Webview2 GitHub issues.
Specifically to answer your questions.
Implement FrameCreated
Wait for the frame with the name you want
Wait for DomContentCompleted event
Call ExecuteScriptAsync ONE THE FRAME you get from 2
Code would then be assuming that that frame's document is as you have in your js
Dim firstNameText As String = Await WebView21FRAME.ExecuteScriptAsync("document.getElementById('m.first_name').textContent")
After doing quite a bit of research on the topic, I am attempting to figure out how to achieve BarbaJS-like page transitions with Vue/Nuxt.
My goal is to have the URL change upon the dynamic transition of, for example, a portfolio project. So, sort of like an expanding grid layout that also changes the URL when clicked. Examples of what I am trying to achieve are at the following two websites:
https://strakzat.com/
https://infinum.co
The first website actually uses BarbaJS, but the second just uses pushState to achieve the desired effect. When you click on the examples of their work, the project element does an expanding effect into a new page, along with the URL change.
I do know that this is much simpler to achieve using Vue/Nuxt but I cannot seem to figure out how I would go about it within the test project I am working on. In Nuxt, my assumption would be to use a combination of page transitions along with middleware, which would "catch" the data while undergoing the transition and then
the router would take care of the URL change. But then again, maybe it is even much simpler than this.
Any ideas or help would be appreciated.
If you are implementing your VueJS project as a Single Page Application or SPA.
You would probably use vue-router.
Vue-router has explained in their documentation how to add a transition when you navigate from one page to another. It is as simple as wrapping the <router-view> component with <transition> just like the example below:
<transition>
<router-view></router-view>
</transition>
For Future Googler. Just add these in default .vue in layout.
<style>
.page-enter-active {
transition: all 0.25s ease-out;
}
.page-leave-active {
transition: all 0.5s ease-in;
}
.page-enter,
.page-leave-active {
opacity: 0;
}
</style>
That's all. Keep experimenting with it to get the desired effect.
There is a great article here by Sarah Drasner that explains how you can do it either with simple CSS transitions or with more complex transitions using libraries like GSAP.
When implementing a gadget, is there a setting that would tell blogger to display the gadget in a post (or on a homepage) only?
I know that one can add conditional tags to the template html but that's NOT what I'm after. I need to figure out a way how to do this via the gadget's code so that the end user doesn't need to interfere with any code to achieve the effect.
I've figured that this isn't possible.
A workaround I've come up with is to set the gadget's default height to 0, then use javascript to find out whether we're on a homepage or an individual post and then, depending on the requirement, resize the gadget to the desired height. In such case, it is necessary to include the <Require feature="dynamic-height"/> in the ModulePref section of the xml file and use the gadgets.window.adjustHeight() function.
The caveat with this workaround is that the gadget, event when its height is set to 0, will take at least 10px in height.
I think the title of my question accurately describes what I think I want to know.
I would like to be able to emulate/reproduce the exact scrolling functionality of this site https://dotvita.com/.
It seems the background is fixed but only scrolls to a point. Or, more clearly, it scrolls simultaneously with the rest of the content but only to a point. When I looked at the html source, here is what I saw:
<body>
<div id="background"></div>
<body>
and the CSS for the background is:
#background {
position: fixed;
top: -458px;
}
Can you guys tell me what is going on here? Does the above code produce what we see on that site or is there something else going on?
Thanks!
There is indeed something else going on in the background. It looks like they are using Jquery and perhaps a custom script to produce this effect.
For many browsers, you can inspect individual elements or the entire site and see what files are being used. In Google Chrome, you can do this by pressing CTRL+SHIFT+I and clicking the "Resources" tab. Here you can use the file tree on the left to go into Frames > [website name] > Scripts and see the various script files loaded up.
Here is the file that appears to be causing this cool effect:
https://dotvita.com/php/min/?f=js/core/jquery.retina.js,js/core/jquery.resize.js,js/core/jquery.equalHeights.js,libs/qtip/js/jquery.qtip.js,libs/colorbox/js/jquery.colorbox.js,js/plugins.js,js/script.js
In order for this to work, the site needs to have Jquery installed, which is this file:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
This has been an effect I've been meaning to recreate myself for a while now. Good luck!
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.