I'm using a podsnack mp3 player. However, every page refresh, refreshes random numerical div ID codes such as id="cover#some-random-number#
So it'll show up like this
covercontainer80191
covercontainer36190
And so forth. What I wanted to do is a display:none to hide the cover side and just display the song titles instead. Is there a way to do this in the CSS?
The code I'm using is actually an <iframe/>.
<iframe style="border:none;margin-bottom: 5px" src="http://files.podsnack.com/iframe/embed.html?hash=ah3fblli&t=1369709402" width="425" height="320" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>
If it's in an iframe I don't think there's much you can do with only CSS. It's a separate document and won't inherit styles from the parent document.
However, in your case you can do a little trick to accomplish your goals. Wrap the iframe in another element with overflow:hidden, then position the iframe in a way that hides the unwanted content:
<div>
<iframe></iframe>
</div>
You'll have to tweak the numbers here, but this seemed good for your case:
div {
overflow:hidden;
width:199px;
height:260px;
position:relative;
}
iframe {
position:absolute;
top:-43px;
left:-200px
}
Demo, with just the playlist displayed: http://jsfiddle.net/sxyXF/
However, the "cover side" also contains the play button, so there's no way to play the tracks.
If i'm understanding your question you want to hide all of these instances...if that's the case you can do this in your CSS to hide them
div[class~="covercontainer"]{
display:none;
}
Related
Is it possible to specify ¶mters=whatever type stuff for <iframe> in CSS?
I want to embed multi-track audio from archive.org. So for example, something like this:
<iframe src="https://archive.org/embed/art_of_war_librivox&playlist=1&list_height=200" width="100%" height="200"></iframe>
These bits are easy to do in CSS
.multitrack iframe {
width: 100%;
height: 200px;
}
But what about &playlist=1&list_height=200? Does that have to be done in HTML every time? I want to get it down to just:
<div class="multitrack">
<iframe src="https://archive.org/embed/art_of_war_librivox"></iframe>
</div>
I want to embed it on AO3.org, which is extremely stringent about what we're allowed to use. So please no "use this entirely other tool to solve your problem!" this time. If I can't do it with CSS, I'm pretty sure I can't do it at all.
I don't think there is a CSS based solution to your problem.
Your &playlist=1&list_height=200 is telling the iframed site iself (via GET request) that you want the first playlist and a playlist height of 200px to be rendered.
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
So I'm busy with my first webpage and after a while added an audio element that works perfectly,
The only problem I'm having is that I can't lower the element in that way that it is on the bottem of my page.
I tried:
Googling for a very long time,
asking other people with more knowledge then me,
(worked but make a mess) Use <br> alot of times
These are my HTML and CSS code, if you need more please ask ;)
Also i dont want to know more then that, im busy learning and the best way to do that is doing it yourself. only with this i got very stuck.
HTML
<audio src="music.mp3" controls>
<embed
src="music.mp3"
width="300"
height="90"
loop="true"
autostart="false" />
</audio>
CSS
audio {
top:1200px;
vertical-align: bottom;
}
BTW: also tried margin-bottom, but it didn't work
Just use margin-top to lower the element:
audio {
margin-top:50px;
Example:
http://jsfiddle.net/CTD58/
top:1200px; only works when you declare position:absolute, position:relative or position:fixed.
Either add one of these positions declarations, or add margin-top instead of top.
Alternatively, wrap the audio element in a div and position that div how you want.
hi guys can i change the height of black box(black border in given image).
I read that it is control by fb.
I tried changing its height(320px) from firebug and it does in browser but i can't change in real css code.I even tried using dom method to access the div(class="_4s7c") in my case but failed.Is it really,we cant do anything about that.Please suggest me.Thanks
<style>
._4s7c{height:320px !important}
</style>
here is what i did in my view page
<div id="fb-root" style="background: #fff;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>`<fb:like-box href="http://www.facebook.com/EverestWomenTreksdotcom/" width="200" show_faces="true" border_color="#FFFFFF" stream="false" header="false"></fb:like-box>
</div>
I have changed the iframe height but i need to change the height of the divs that comes insdie the frame.
Try this,
#facebookID iframe {
height:300px !important;
}
or
#facebookID iframe[style] {
height:300px !important;
}
change the "#facebookID" with your real id from the html code.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements