I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!
It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.
Related
I'd like to style a lengthy HTML document I intend to print (/ convert to a PDF) so that, on a particular physical page, the body is styled in one way, while on every other page, it is styled another way. Specifically, I want the page which contains a particular paragraph (say <p id="dramatic-scene">) to have a different background image from the other pages.
(The document itself is not structured for particular pages - instead of having a div for each page, we have a single container for the full content of the piece. If it were, we could probably just make the div for the page cover the entire dimensions of the page and give it the image - but I'm hoping to avoid having a rigid structure for the pages.)
In Selectors Level 4, there's a :has() pseudo-class (although part of a working draft, so it's not supported anywhere yet). Is there anything similar which could specify a page to apply CSS to? Something like #media print and (page-has: #dramatic-scene) {}. I doubt there is - some quick searching didn't find anything - but I figure it's worth asking here.
More realistically, is there any way I could simulate that with JavaScript? That'd be a fine solution for my use case. I couldn't find any info about that in searching though - any JS discussion related to printing seems to be about making buttons to print, swapping screen for print stylesheet before printing, etc, not making the page style react to the visible content.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I'm trying to set up a Github page and I'm using the Tactile Theme template by Jason Long. I'd like to add a vertical sidebar like the one shown in this page.*
I'm 100% new to HTML, Javascript, CSS and everything related with page development but I know my way around python (a bit) so I'm not completely code illiterate.
All I'd need is to be pointed to the snippets of code and files I must add to the template mentioned above to display such a vertical bar and with some luck I can take it from there.
*In that page the vertical bar is not static, ie: it hides when one scrolls down the page (perhaps I'm using static wrong, forgive me if I am and please do correct me) and I'd also like it to always show if possible.
You're looking for the position:fixed property.
I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.