I'm currently editing a wordpress template - http://edenmuzik.ca/ and I'm having troubles with the soundcloud player. The code I have now is contained within a wordpress page that the template loads with ajax(i'm assuming)
<iframe src="https://w.soundcloud.com/player/url=https%3A//api.soundcloud.com/users/39874306&auto_play=false&hide_related=false&visual=true" height="450" width="100%" frameborder="no" scrolling="no"></iframe>
The player contained within the music section resizes automatically once that page finishes loading but it keeps its high which I specify as 450 up until the page finishes loading.
I checked all css rules to make sure nothing is conflicting there... Any help would be much appreciated.
If you want it to display 450px high, you need to set 450px in your inline style.
Based on the question I read above, are you saying you want it to be 450px?
It would appear you are attempting to load the iframe with improper HTML, so your 450px value isn't actually being applied.
Here to help further if you'd like.
Related
I'm trying to make an iframe that embeds on any web page where it only shows up as a button on the bottom right of a webpage and when clicked open an about 100px by 100px box that is also embeded on the web page in the bottom right corner. The issue is that every time I put the iframe on the page, the middle of the page where their was content before goes blank. Here is the code for the iframe:
<iframe src="ka.html" title="KA"
style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px"
height="100%" width="100%">
</iframe>
I've tried editing the style but I'm not sure that the style is the problem. The iframe uses an html file and js code. I could use some help in figuring out where the problem is coming from and how I can fix it. I really appreciate any help I can get.
The style is the cause, if I’ve understood your description of the problem.
The combination of position: absolute and zero for top/left/bottom/right will cause the iFrame to cover the first ancestor element that has position: relative (or the body element if there is none).
I'm getting a uncaught InvalidStateError, from soundcloud embedded profiles from (https://w.soundcloud.com/player/widget-6c3640e3.js & https://w.soundcloud.com/player/multi-sounds-0e392418.js) on my site pullup.club it's hosted off of github.io and is open source...
I have two embedded soundcloud profiles in a modal popup
<iframe width="35%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/5142431&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
and when my site is loaded I get errors and a bit of lag, not sure how to get rid of this error, and was wondering if it was because I have the embedded players in a popup, or if I need to somehow specify the canvas size?
I'm completely clueless, so all help is greatly appreciated!
The reason is loading it in an invisible popup indeed.
So at the time soundcloud's js code is called within the iframe there is no space for the canvas to spread in and so the width of it is 0.
Solution1: create the iframe on the fly using jquery after the popup is shown. (assuming your site uses jquery, which the one you mentioned in the question does)
Solution2: Let the div containing the soundcloud frames render outside the screen, then move it into visible area
Possibly the problem can be that the containing <div> is a flexible width without min-width.
One fix for this error is to change the width of the <iframe> to px value rather than a % value, as the width of the <div> is determined by its content.
Example:
<iframe width="350px"...>
The other fix is to establish the width the <div> containing the % <iframe> to a px/vw value.
There's a <iframe> element from external site, containing a textarea, in one of my blogger posts. I already added couple more posts after that. But when I open the site, the blog scrolls down to the <iframe> becuase it posseses the focus. How to prevent this so that when the blog is opened, the latest post can be seen?
This is how I added the iframe in the blog post.
<iframe border="no" allowtransparency="true" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="some external site reference" width="100%">
</iframe>
FYI, the blogger has dynamic views template.
I tried using scrollTo(), focus() to the latest post header. But it didn't work. I found that even if I print the count of article headers inside $(document).ready(), it returns 0. After the page fully loads, if I go to the console and re-print the length, only then it gives 10. Quite confused about how the blogger handles its posts.
<script>
$(document).ready(function(){
console.log( $('div.article-header').length ); // returns 0
});
</script>
Update
It looks like Blogger Dynamic Views loads the blog posts using AJAX. As a consequence, the document ready() gets called before the actual blog contents are fully loaded. 'Jeffery To' has given a good explanation about this below:
prettyPrint() doesn't get called on page load
Thanks.
$('body').scrollTo('#foobar');
Would a tabindex=1 in your blog title suffice?
Or add?
$(function() {
$("h1").first().focus()
});
H1 being your page title
[edit]
It's not blogger that is setting the focus on this textarea but it's the code within this iframe. It appears to be a big pain to prevent this behaviour due to cross domain scripting.
My advise? Alter your post by replacing the iframe with a simple hyperlink.
I am using an iframe in my application, where I am trying to display a pdf in that iframe.
If i open the application on Ipad pdf is not scrolling. so i got a thought that if i apply a total pdf height to the iframe and putting in a div and trying to apply the overflow to that div but my problem is how to get the height of document which is in iframe.
<div>
<iframe id="miscLinkFrame" src="holiday.pdf" scrolling="no" frameborder="0" height="500" width="760" allowtransparency="true"></iframe>
</div>
in simple way its not possible
may be this logic work but not sure
1st capture document's size with jscript which is called in
2nd then change iframe size with/from jscript which is captured before (in 1st step)
try it may be this work
regard
you can use following code :
$('#iframeid')[0].height="600px";
for reference please see link
Just to summarize, I'm trying to make a live page render (browse websites) while having an overlaying menu for functionality.
I may have made a mistake in how I designed my application and need an alternative to frames. Any advice is appreciated on this.
So the goal of the application is analyzing web content. Its got a global menu with the usual stuff: profile, sign out, settings. A global footer with the standard legal stuff and in the middle is where all the functionality comes in.
I knew that one of the functionality was a live render of the site with a menu overlaying at the bottom. With it, they could view elements and write up comments on what was there.
Each function was embedded inside a frame so if i clicked the page view button, the frame would shoot off to the frame page and relay it. Heres the problem. In order to get a live render of a site and using it this way, I had to put a frame inside a frame and thus duplicate scroll bars were born.
If anyones confused as to how the layout works there are 2 shots here.
http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=pageviewlayout.jpg
And a cleaner designer model (mainly just global menu)
http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=globalview.jpg
I've got the coding it and for the overlaying menus, I tried both an accordion and a css style thing that slides. You can take a look at the code here.
GLOBAL MENU:
save this as global.html.erb
http://paste.ubuntu.com/648135/
PAGE VIEW:
save this as pageview.html.erb
http://pastebin.ubuntu.com/648146/
Once you've done this, it should work as you'd expect.
The technology or way its done is option but the design is not.
Just looking now, on the page view at the bottom of live website but above the footer. There needs to be an overlaying menu that slides in an out. If anyone has any ideas on how to implement a live view of a site and an overlaying menu, I'm all ears.
Thank you
Quick Summary:
What I'm trying to achieve is an application that has a global menu that stays consistent across all pages. In the middle of this global menu is a frame that goes to other pages that I've created, e.g list view, statistics and page view.
Page view is the one I'm working on at the moment. In the page view there are 2 components,
Live view of website (whatever page they want) and an overlaying menu at the bottom. Think like youtubes playlist on bottom of page. The problem is that in order to put this live render of a website in the frame, you have an iframe within an iframe and I;m trying to resolve that.
But rather than treat it as a bug, I'm looking for alternatives to how I can achieve the above
My final solution available on pastebin:
page view:
http://paste.ubuntu.com/648246/
Global view:
http://paste.ubuntu.com/648250/
Basically this
jQuery('#iframeWrapper').height('61%');
This is a quick demo of CSS and divs - you might be able to do what you want using this method.
<style type="text/css">
#holder {position:absolute;left:0;top:0;width:425px;height:350px;z-index:1;}
#menu {position:absolute; left:0;top:300px;height:50px;background-color:#f0f;width:425px;z-index:10;}
</style>
<div id="holder">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=firebox&aq=&sll=53.800651,-4.064941&sspn=17.72791,44.736328&ie=UTF8&hq=firebox&hnear=&z=5&iwloc=A&cid=2836054255231781537&ll=51.386465,-0.138487&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
<div id="menu">Nav / whatever goes here</div>
Also there is he option of using ajax to call content into the #holder div rather than using an iFrame too