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.
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
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)
Is there any way of capturing web screnshot in the way that the output will look like the way a website would look using a mobile device, such an iphone?
Iv'e tried using an iphone user-agent, and to use the exact same resolution, but the result is not the same.
Im trying to render a simple page using this html:
<html>
<head>...</head>
<body>
<img src="..." style="400px;height:300px" />
</body>
I know that this code is not responsive. though I would expect phantomjs to render it the way the device renders it.
Thanks
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
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.