Inspired by the new User Flair, but the question applies to the general case as well.
Let's say I want to include something like this on a site that doesn't allow me to specify external styles or use any JavaScript code. The only thing I can do is paste in an object, embed, or iframe, and some other simple HTML. Additionally, the width of the space is only 160 pixels, rather than the 200 needed by default for the flair badge.
To fix this, I want to set styles for the valuable-flair class in the iframe, namely change width to be 160px instead of 200px. Then things will be fine, as long as the username doesn't overlap (and even then, once I figure this out I can use the same technique to play with that as well).
How can it be implemented?
There is no way you can alter the design of the Iframe using CSS if you can't control the page in the SRC attribute.
I recommend you read the src of the iframe on the server side instead (using PHP, Python or what you fancy), e.g. fopen() the src and fread() into a variable, than do some str_replace on this variable (to extract contents, remove < body >,< / body >...) play with the design and place the result in your page.
This way you can control the design.
If the CSS for the width and height were expressed as percentages rather than absolute values, you could adjust the width by adjusting the IFrame. However, if hosting a custom implementation is not possible for you, you are out of luck without JavaScript.
Related
I'm trying to style a list of content generated by Drupal Views. I can edit the HTML output of fields but have no access to the CSS. The content includes an image which needs floating/aligning to the left so that text flows around it. The original image files are a variety of sizes. The HTML I'm using for the image field is:
<img src="[image url]" width="220" height="auto" align="left" />
However, in some cases where images are longer than others, I get an overlapping effect like this:
What I want is for them all to display like this:
How can I do this?
Drupal provides by default feature of cropping/scaling images. There's no point of providing larger images and scaling them down or cropping them with CSS. That's waste of resources (bandwidth).
Go to Configuration -> Media -> Image styles (from admin menu) and define style you need. It's super easy - you just need to name your style and the pick effect you want (i.e. "Scale & crop"), set dimensions you need and save new style.
Then you should start using that style. If your page is generated by view the find and edit that view. Find that image field and set it to use your new style.
Other way is to force displaying of images in your style from template file directly. Find where image is printed and use:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
First parameter is style name, so put name of style you just created. Other parameter is URI (not path, as mentioned on that page!). Print out (print_r or var_dump whole image object you have in template file and see how can you access image URI. It should be something like:
$node->field_my_image['und'][0]['uri'])
So pass that as second parameter.
Even if you don't have access to the CSS you can still use CSS by adding style in your HTML tags.
As to your overlapping problems, assuming that you have a div that contains your images use can set that div's styleto style="overflow:hidden". You can also just give enough space to the div that contain your image.
With html I can scale an image's width to a percentage of the available window like this:
<img src=whatever.png width=50% />
With mediawiki this seems to be impossible (if you do not allow html injections). Is it really? Don't tell me I have to write a mediawiki extension ;)
Note the CSS answer from Is there a way automatically to resize MediaWiki images depending on screen size? is not a solution. I want to have different images in one page with different percentages.
It should be possible to apply the CSS solution to specific images by tagging them with a custom class name. That is, you'd add something like the following to your MediaWiki:Common.css page:
img.halfwidth {
width: 50%;
height: auto;
}
and then use wiki markup like this:
[[File:Myimage.jpg|class=halfwidth]]
(Note that specifying a class name on an image like this requires MediaWiki 1.20+. If, for some reason, you need to do this on an older MediaWiki version, you can instead change the CSS selector to e.g. .halfwidth img, and the wiki syntax to <div class="halfwidth">[[File:Myimage.png]]</div>.)
To make it easier for myself I wrote a mediawiki extension that allows
alignment
relative size
links under images
captions like for thumbnails
It's here: https://github.com/tstaerk/adaptivethumb
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I want to build a 10 x 10 thumbs of pictures in html page. (aspx)
there is a lot of options how to do it.
my question is : which html tag( which will contain the picture - is being rendered the most fastest !!
p.s.:
a) the picture is not pressable :
b) I dont have the ability to create sprite image.
options :
1) div with background image
2) img tag
3) maybe other option ?
Since this is a tabular format, you should use a table.
To avoid reflows use the width and height attributes for the rows and columns to ensure the browser renders the container table correctly to begin with. This also means setting width and height on the img elements.
So, use a table with img elements in each cell.
Opinion:
From my experience background images tend to load faster, altough images with height and width specifed can load faster, but I don't think you have that option. I also know you don't have the option for sprites, which are actually good because the image is loaded once.
It depends a lot on how big the files are, but I'd go with img tags for simplicity and flexibility.
The best performace all around would be to use a sprite, i.e. combine all the images in one (there are online tools to do that), then use css to show only the section that you need.
Loading images in the background renders faster than using an image element, but the difference would hardly be noticeable in this case. Also semantically it sounds like image elements would make more sense - if you turn off images then the page wouldn't make sense, they are not just decorative elements.
I have a bunch of HTML divs of the format:
<div style="left:162;vertical-align:top;color:#000000;top:126;position:absolute;font-family:Times;font-size:14;">
BLAH BLAH BLAH
</div>
What I'd like to do is extract from that div the expected width of the text. I know I can do this in Javascript with stuff like obj.offsetWidth(), and was wondering if there's any similar CPAN module that can do that for Perl, or if anyone has any ideas on algorithms I can code that will give me the information I need. I feel like all the information necessary for calculating what the width ought to be is contained in the style tag, so this should be doable.
Thanks!
[EDIT] Adding a bit more background to my question, what I really want to do is take an HTML page that's passed to my module offline, and resize that HTML so that its width does not exceed 800px in most-to-all standard browser configurations. The HTML I'm passed is entirely made up of divs with absolute position, so I figured if I could make a reasonable low-ball guess about the width of each div, I'd know approximately by what factor I'd need to make each one's font size smaller. [/EDIT]
Perl typically runs on the server, not in the browser, and the information you seek is not directly accessible from the server in any language. If you really need that information on the server (and I can't easily imagine any scenario where you would...), you'll have to send some JavaScript to the client, which would obtain the info and send it back to the server, probably via AJAX.
none of your numeric properties are valid; all require specification of units; for example:
<div style="left:162px;vertical-align:top;color:#000000;top:1.26in;position:absolute;font-family:Times;font-size:14pt;">
Better, specify the font size and top:property (top: 1.26em) in ems (font-size: 1.4em;) as use of absolute units is deprecated.