I noticed that I cannot choose any width and height combo I want for the Spotify Play Button. If I use the generator tool and increase the width, it automatically increases the height field to match some arbitrary aspect ratio. So, I can never truly get the exact width and height I need (even within the min and max values specified on the developer page).
What I need is a width of 440px and height of 720px. When I set the width and height in the iframe to 440 x 720, it actually renders at 440 x 520.
Any plans to fix?
I had the same problem to customize the spotify play button.
I solved the problem by passing a custom style to the iframe object :
style="width:480px; height:480px; margin-top:5px; margin-left:15px; margin-bottom:21px;"
for instance :
<iframe src="https://embed.spotify.com/?uri=spotify:user:sharemyplaylists.com:playlist:0QoIyI6lLs5IfZMjOf5aNK&theme=white" frameborder="0" allowtransparency="true" style="width:600px; height:680px; margin-top:5px; margin-left:15px; margin-bottom:21px;"></iframe>
I know it's not documented that way, but it works for me.
I don't believe this is actually a bug; you could - as jackj4ck says - add the style attribute to the embed code or simply change the height and width attributes that the embed code gives you.
EG:
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
Would become:
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="440" height="720" frameborder="0" allowtransparency="true"></iframe>
Related
I created a geo map(world map).I try to stretch my map based on screen width.svg don't support width:100% so that i created a parent div width:100% for svg.
Sample Code
<div id="world-placeholder" style="width:100%;height:100%;">
// svg part goes here
</div>
Also, I tried svg attribute like viewBox and preserveAspectRatio.But Still i can't able to create.
I added my fiddle link below so kindly take a look and help me.
Fiddle Link - http://jsfiddle.net/acvefmhz/1/
Map is working fine.But i need show my map as a full screen(Need to stretch full window)
var width = window.innerWidth,
height = window.innerHeight;
http://jsfiddle.net/acvefmhz/4/
(Pre-posting update to my question: I figured it out before posting, but am posting anyways for the public's information-- even though this is pretty obscure stuff.)
I'm working on a new scrolling site for a game here's the working page: http://pman.mindevo.com/
I have been able to get all the backgrounds matched up and scrolling together for a parallax effect, but now I'm working on getting an animation that moves across the screen (eventually I'll work more on using SVG sprites to actually have the character animated), but I can't seem to get the pixel sizes to match up properly.
My latest and best working solution so far is to make the SVG the same height as the rest of the background images. The problem I'm having is at different browser widths the character's 'pixels' (I use this term loosely because it's vector) do not match up with the background's 'pixels'.
Does anyone have any suggestions in keeping him the same pixel-by-pixel size as the backgrounds at different browser widths?
Here's some information about the background SVGs (the SVG open tag):
This is one of the tree background parallax layers:
<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">
Here's the character's ('Potatoman') svg header:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">
Originally it was embedded in the page as just an <img> by itself. Like so:
<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
<h2> Some dialogue and potatoman animation happens in this section</h2>
<img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>
With the CSS like so:
#theMan {
position:absolute;
left: 0;
bottom:1.3em;
height:100%;
width:4%;
}
I had trouble getting it spaced properly vertically once it changed width.
Now that you've read this post, I figured out while doing it just how to make it work. If anyone has better ideas I will accept them as well. Otherwise I'm going to post my own answer to this question as I figured it out, but if anyone else is every working with Pixel graphics and wants to do what I'm doing, they have all the information right here.
So Here's how I had to change things around. First I removed the width property on the image (#theMan) and let it fall back to my basic img CSS like so
#theMan {
bottom:0;
height:100%;
left: 0;
position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}
Then I had to change my data attributes to manipulate the browser wide and browser high img to this:
<img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">
Since the image ended up centered in the page because it's width became 100%, shifting the entire image only 50% instead of 100% worked out, now when it scales it scales at the same rate as the background images as it's the same dimensions.
I'm trying to create a responsive version of the zoomable treemap example. What needs to be added so that the treemap resizes with the window?
When I try to change treemap.size() in an update method on $(window).resize(), nothing seems to happen.
I'm setting the svg to style="width: 100%; height: 100%" and the svg resizes, but the layout of the treemap does not. I also tried using viewbox and preserveAspectRatio per this answer and the treemap looks initially correct, however the zooming functionality no longer works correctly because the treemap layout doesn't know its correct size.
One way to handle this is as Lars Kotthoff told you can redraw the treemap.
For that first you should specify the width and height parameters as your graph containers width and height before that you should specify container width and height in percentage. And wrap the zoomable map drwing script inside a function (Let's call it as zoomabletreemap())
Then you should call the zoomabletreemap() function for the window resize event using JavaScript. Before calling the javascript you should remove the old graph also.
$(window).resize(function () {
var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg
div.parentNode.removeChild(div);
ZoomableTreeMap();
});
Here is the working example for the same I explained above
I have a problem with absolute positioning in XSL FO. When creating a document I have to add a table to the bottom of a page. The problem is that the height of the table is not known.
The following example shows my effort, but still the table is aligned to the top of the page.
<fo:block-container
bottom="1cm"
left="0"
width="100%"
height="auto"
position="absolute">
<fo:table
border="0.5pt solid black"
border-collapse="collapse"
text-align="left"
table-layout="fixed"
width="100%"
background-color="white"
font-size="7pt">
<fo:table-column column-width="60%"/>
<fo:table-column column-width="40%"/>
<fo:table-body>
<fo:table-row border="0.5pt solid black">
<fo:table-cell
border="inherit"
display-align="center"
padding="1pt"
padding-left="2pt">
<fo:block>abcde</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row border="0.5pt solid black">
<fo:table-cell
border="inherit"
display-align="center"
padding="1pt"
padding-left="2pt">
<fo:block>abcde</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block-container>
So the question is: Is there any solution how to align table to bottom of the page without knowing the height of the table?
I tried also to put the table in a footer, but if I don't know the hieght, I can't set the extent of the region-after.
Note: I have a block-container that has the same width and height as the page. The code above is in this container.
Note 2: I use fop 1.1
Throw it into a footnote. That grows up from the bottom of the body region to an arbitrary height. I tell my students this technique is useful for things like disclaimers at the bottom of the last page of a legal document. No block containers are needed; no measurements needed.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!