So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
Related
So keeping it simple, I am trying to add a background image to the entire body of a basic software I am designing.
From what it seems, when I use Adobe Dreamwaver (which allows you to see both the code and the live page), there seems to be no issue with the background image, however, when I open the file using localhost (via XAAMP) on Google Chrome, it doesn't load the image.
The specific piece of code, is as follows:
<!doctype html>
<html>
<head>
</head>
<body style="background: url('file:///C:/xampp/htdocs/Mind%20Notes/gradient.jpeg')no-repeat
center center fixed;">
</body>
</html>"
Really basic, but just to illustrate. I have tried using the body-style segment in my main code, but it didn't work. I tried the code, as above, and still got nothing.
I suspect, its an issue with my browser, not any conflicting code, otherwise the simple code above would have worked.
Many thanks
T
I have used the carousel example on Bootstrap3 to make a simple gallery website. On a desktop, it appears as I want, and shrinking the browser causes the navbar to collapse as expected. But it won't collapse on the phone. Instead the whole menu appears as a small version of the desktop view. From reading the docs, I thought it would start collapsed on the mobile view by default.
Since I followed the example code closely and all the bootstrap nav examples appear closed, I'm not sure what piece I'm missing. The site is up: http://artbymanisha.com
Add the following meta tag to in the <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1">
I want to know if it is possible to let apache substitue a link in the html I return to the client with the html of the site behind the link.
So instead of
<html>
<head>
</head>
<body>
Link
</body>
</html>
I want something like this:
<html>
<head>
</head>
<body>
// the html of the page behind the link
</body>
</html>
I can´t use javascript or php or anything, let´s assume I only have html.IFrames are as well no solution for my problem.
Just for everyone that comes to a similar situation, Ulrich Schwarz gave a good hint with SSIs, which is in this scenario the only way that could work. However, due to cancelling the project, I was not able to validate the usage of SSI for this scenario.
This can be little painful to do and might not be suitable for all cases but you can maintain a plaintext file for every html page you want to show source of and add a link to that file instead.
For eg: Instead of <a href='somefile.html'>Click</> do <a href='somefile.source'>Click</>
where somefile.source is the copy of the somefile.html. Add triple qoutes """ in the first and the last line of the file. I didn't try a lot of combinations but this works for fairly decent html codes.
I am struggling to understand the scope of resources defined with the Grails resources plugin.
I have created a small project (Grails 2.0.4) with a single domain item of Book and generated the associated Controller and Views.
I have then modified the main layout as follows:
<html>
<head>
<g:layoutTitle/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
When I run the app I get no styling as expected.
I now add the following to the head list.gsp
<head>
<meta name="layout" content="main"/>
<r:require modules="jquery-mobile"/>
</head>
When I go to the list page now I correctly get the jquery-mobile styling as expected but when I go to the create page I also get jquery-mobile styling but was expecting no styling, as this page does not contain the tag.
It seems that the resources selected for one page are being used for all other pages. Is this expected behaviour?
Thanks,
Kim
Use Resources 1.2, it sounds like this might be an old bug.
I've setup my Rails 3 app with only
<%= yield %>
in the application.html.erb and pages.html.erb layout files (Pages is my controller), and I have a view with only the following:
<!DOCTYPE html>
<html>
<title>My Title</title>
<body>
<iframe src="http://myiframesource.com" seamless="seamless" width="100%" height="1949px"></iframe>
</body>
</html>
But the iframe still has a border around it and does not completely fill the page when I look at it in my browser (I tried several). According to W3Schools http://www.w3schools.com/html5/att_iframe_seamless.asp
the seamless attribute should have no borders nor scrollbars and " should look like it is part of the parent document."
I'd also like to not have to tell the iframe what width/height to be, and just have it take up as much space as it needs.
Why does the seamless attribute seem to not be working right?
That's probably because your browser doesn't support seamless iframes. As far as I know it doesn't work in either Firefox 4 or Google Chromium 11, you'll have to wait until someone actually implements it. As for the iframe taking as much space as it needs I don't think that there is currently a way to do this without JavaScript. For a JavaScript solution just search the web, there are several tutorials about this.