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.
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")
I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
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!
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx
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.