I have an image icon in an HTML page that should show right to a label only when some condition is true. If the condition is false, it should not show, but it should still take up the same space.
I'm sure most of you have done something like this and I got a couple of solutions.
Put the img tag as usual but add to its style attribute visibility: hidden when the condition is false.
Specify the width and height style attribute for the img tag and use a transparent 1 X 1 image when the condition is false.
I don't like either since it seems like pre-CSS 3. Does anyone know the best practice of doing this?
EDIT: When the image does not show, I don't need the image, but I need its space not to disrupt the positioning of the rest of the elements.
CSS 3 isn't really supported all that well and still includes most things from 1 and 2 anyway. I see absolutely nothing wrong with your first option.
option 2 is not as clean but certainly viable if you're expecting it to be viewed by something that doesn't support CSS.
Create div with the size of the image e.g. width/height and show or not the image in the div
The "best practice" here would mean not printing the image at all, if there is no reason to be printing an image. I assume since you mention a 1x1 pixel, that you are simply trying to hide the image altogether. So don't print it!
If your layout needs the image to exist though (let's say you have a link gallery where every link has an image) then you need some sort of icon/picture that indicates there IS NO picture -- something generic like a silhouette or question mark.
Related
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.
It must look like this because the form may be printed on paper for people to write in.
I see three approaches to this method:
Table row with 'border-bottom' on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
This method is probably not very accurate.
Drawing absolute-positioned lines beneath the div/textarea that contains the text.
Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
. This method is only compatible with modern browsers though.
Which method is the best and why?
Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.
In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.
It’s most similar to your #2 but a little simpler.
The CSS3 method is best I think. As a fallback for browser that don't support it, you could put a background image of a line there, repeat it both horizontally and vertically, and use CSS to set the font size and line height so the typing aligns with the background image lines.
Well, the CSS3 method would at least let you use relative sizing like ems so people who've resized their fonts will still be ok. If it's not available in older browsers, I don't think that's hugely important, as it's an enhancement to make things easier if people print, rather than something that is essential to people interacting with the textarea.
Absolutely positioned lines might get un-aligned if the user resizes their browser/fonts/etc, although I haven't tested this to confirm. The Javascript seems like overkill for what is just a decorative effect unless the page is printed. And I'm not sure if you can even put tables inside a text-area, although again I haven't tested that.
This question already has answers here:
How can I print background images in FF or IE?
(8 answers)
Closed 9 years ago.
I'm trying to print a web page form in IE with a background-image; now the issue is that it is not showing background-image in its print. Is there a way to fix it because I tried lots of tricks but none of them are actually working. if any one of you fixed it before please share.
This is just for people who may try to spend a lot of time to print css background images.
This may not be 100% working, but you may pick from here.
Solution: not possible (if overlapping images are present in UI)
$('#rootdiv').find('div').each(function(){
if( $(this).css("background-image") != "none"){
$(this).css("overflow" ,"hidden").css("position", "relative");
$(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');
$(this).css("background",'..');
}
});
P.S.: To have sliced half image print on the page, we need to set a width for the div ( i.e., $(this) ) less than actual width of background-image( specified by src in dynamically created img tag above) , it will show sliced image
Here are two really good posts, previously asked in stackoverflow:
Print webpage with background images and colors?
https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
They both reference list style usage.
Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images".
This instruction is for IE 8.0, but should be somewhat the same for older versions.
This is default to unchecked because not everyone wants to print the fancy stuff but only the text.. But nowadays, its quite a norm to want everything in the printing!
If it's only for the background image, you could try and right click the background, and select something like 'show background-image.'
But, if you want the web page as a whole, you could always try to 'print the screen' and open the newly made bitmap in paint and print that.
By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.
Apart from telling your users to change this setting, the only thing you can do about this is to use real image elements instead of background-images and position your text in front with CSS.
Why do you need the background-image to print out? If it is because the background image is dark and the text in front is light (and therefore unreadable when printed), then what you can do is have a print-only stylesheet that sets darker text.
First hit in google:
http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm
Just checked and the option is still in IE8.
The default is to not print background colors and images, probably to save ink.
Check this article:
http://webdesign.about.com/cs/css/a/aa042103a.htm
I use it to make custom print page ,different from the one from screen.
After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.
The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.
The problem:
Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.
This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).
I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.
Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.
(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).
Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.
The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.
This only works if the position is set to absolute.
Edit: How did you position the tooltip when showing it:
I positioned the tooltip by changing the css values of "top" and "left".
box.css("left, e.pageX+1);
box.css("top", e.pageY+1);
Where 'e' is my event variable from:
mousemove(function(e){});
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.