I have created <div> element, i am doing show/hide that <div> using java script..
but the problem is that the position of that varies on all different browsers
javascript is as follows
< script language="JavaScript" type="text/javascript">
var abc=false;
function showHide()
{
var a=document.getElementById("MainDiv");
var b=document.getElementById("myTestDiv");
if(abc==false)
{
abc=true;
b.style.top = a.offsetTop;
b.style.left = a.offsetParent;
b.style.display = "inline";
}
else{
abc=false;
b.style.display = "none";
}
}
</script>
html is as follows
<div id="myTestDiv" style="border: 2px solid rgb(100, 149, 237); color:#23238e; background-color:#FFFFFF; position:absolute; width:14%; height:17%; display:none" >
Why b.style.left = a.offsetParent; ? https://developer.mozilla.org/en/OffsetParent
I think you want b.style.left = a.offsetLeft;. Anyway, why you use JavaScript for this? Can't you set position: relative; of MainDiv and top: 0; left: 0; of myTestDiv?
Please try with installing BluePrint CSS Framework and retry your action again again!
Or deliver us some more information about your issue...
You've not provided enough information here, but I'll take a few guesses anyway..
b.style.display = "inline";
Instead of inline, you probably want to be setting it to block, what with the fact that divs are block-level elements.
Something else to try, append px:
b.style.top = a.offsetTop + "px";
b.style.left = a.offsetParent + "px";
Also, make sure you have a proper doctype as the very first line:
<!DOCTYPE html>
Without that, Internet Explorer in particular will be hopelessly broken.
Related
I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:
LastPass iFrame
<iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&add=1" scrolling="no"
style="height: 27px; width: 1263px; border: 0px;"></iframe>
The CSS:
.button-bar {
width: 175px;
float: left;
top: 113px;
text-align: right;
right: 20px;
position: absolute;
}
Image: http://i.stack.imgur.com/Rq5Z5.png
How can I avoid this case? Thanks so much!
I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.
<div id="lptopspacer48468746" style="height: 27px;"></div>
It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.
Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.
Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.
So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.
<script>
var log = function(msg) {
if (console && console.log){
console.log(msg)
}
};
$(document).ready(function(){
var maxTry = 5, lptopHideTimeout;
var clearLptop = function(delay) {
var $lptop = $("div[id^='lptopspacer']");
if (lptopHideTimeout) {
window.clearTimeout(lptopHideTimeout);
}
if ($lptop.length && $lptop.is(':visible')) {
log("** Hiding lastPass lptopspacer...");
$lptop.css( "display","none" );
}
else {
maxTry -= 1;
if (maxTry > 0) {
log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
lptopHideTimeout = window.setTimeout(function(){
clearLptop(delay);
},delay);
}
else {
log("## Giving up after too much attempts.");
}
}
};
clearLptop(500);
});
</script>
Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.
Uninstalling Mcafee safekey solved it for me.
Is there a way to hide a whole div if part of it is empty? For example if "dd" is empty as shown below can I hide the whole class "test" so the keyword Restrictions does not show either. I tried .test dd:empty { display: none; } but this does not work. thanks!
<div class="test"><dt>Restrictions:</dt>
<dd></dd></div>
I don't think there's any easy way to do what you're talking about with just CSS. Better to test it server-side if you can. But if you can't here's some JS that will do the job.
<script type="text/javascript">
// handles multiple dt/dd pairs per div and hides them each conditionally
function hideIfEmpty() {
// get all the elements with class test
var els = document.getElementsByTagName('dl');
// for every 'test' div we find, go through and hide the appropriate elements
Array.prototype.map.call(els, function(el) {
var children = el.childNodes;
var ddEmpty = false;
for(var i = children.length - 1; i >= 0; i--) {
if(children[i].tagName === 'DD' && !children[i].innerHTML.trim()) {
ddEmpty = true;
} else if(children[i].tagName === 'DT') {
if(ddEmpty) {
children[i].style.display = 'none';
}
// reset the flag
ddEmpty = false;
}
}
});
}
window.addEventListener('load', hideIfEmpty);
</script>
<div class="test">
<div style="clear: both;"></div>
<dl>
<dt>Restrictions:</dt>
<dd></dd>
<dt>Other Restrictions:</dt>
<dd>Since I have content, I won't be hidden.</dd>
</dl>
</div>
Just a fair warning: the code uses some functions that may not exist in older IE, such as Array.prototype.map, String.prototype.trim, and addEventListener. There are polyfills available for these and you could also write your own pretty easily (or just do it with a for loop instead).
CSS alone can't do that. Either, you need a javascript to retrieve empty elements and hide their parents, or your CMS applies special CSS classes if there's no content.
Put as an answer as requested by #Barett.
You could update your CSS to be
.test{
display: none;
color: transparent;
}
This would make the text transparent too, but display:none should hide it anyway.
To make the div with the id test ONLY show when the dd tag is EMPTY, and you can use jQuery, try the following JavaScript along with the CSS:
if($("dd").html().length ==0)
{show();
}
Note: this solution requires jQuery, which is a JavaScript library.
I'm trying to make an image fit nicely on different screen sizes without breaking the layout. The following bit of CSS helps:
.viewer .main img {
max-width: 100%;
height: auto;
}
But the trouble is this image changes. I use a bit of Javascript to create a new img element each time the image changes, instead of reusing the existing one. (This seems a little more reliable for what I'm doing). The browser doesn't know the image's size until it is loaded, creating an obvious flicker in the interim. I deal with that by setting the image's width and height attributes in HTML. Without the above CSS rule, that works fine.
With that CSS, the flickering is still there. For some reason, when I create a new img element, the CSS seems to be causing the browser to ignore its width and height attributes, so. It ends up as ignorant of the aspect ratio as it was before.
Here's a jsfiddle to illustrate the situation:
http://jsfiddle.net/7sDtN/
One of the images in there is very very big (138 MB), so be careful if you're on a metered connection :)
What I would love is to get the image to scale according to those dimensions I set in HTML. Preferably in a nice way. A Javascript solution isn't the end of the world (I'm already using it, for course), but if there's an elegant CSS solution that would be very nice.
I ended up solving this in a roundabout way by wrapping the image in a dedicated container, along with some strange looking javascript to keep it in place as the image loads. The dimensions for that container are calculated as in Sven's answer, but ultimately it lets the browser take over. This way layout changes are kept fairly minimal and we end up only doing this crazy stuff for the bit of time between images.
Here's a big wad of code, for completedness:
function Viewer(container) {
var viewer = this;
container = $(container);
var pictureBox = $('.picture', container);
var img = $('<img>').appendTo(pictureBox);
var hide = function() {
/* [snip] */
}
var getPictureDisplayHeight = function(picture) {
var ratio = picture.data.h / picture.data.w;
var displayWidth = Math.min(pictureBox.width(), picture.data.w);
var displayHeight = Math.min(displayWidth * ratio, picture.data.h);
return displayHeight;
}
var stopLoadingTimeoutId = undefined;
var stopLoadingTimeout = function() {
container.removeClass('loading');
}
var showPicture = function(picture) {
var imgIsChanging = img.data('picture') != picture;
container.show();
/* This code expects to be cleaned up by stopLoadingTimeout or onImgLoaded, which will not fire if img src doesn't change */
if (imgIsChanging) {
container.addClass('loading');
window.clearTimeout(stopLoadingTimeoutId);
stopLoadingTimeoutId = window.setTimeout(stopLoadingTimeout, 3000);
}
pictureBox.css({
'min-height' : pictureBox.height()
});
var displayHeight = getPictureDisplayHeight(picture);
if (displayHeight > pictureBox.height()) {
/* Grow pictureBox if necessary */
pictureBox.stop(true, false);
pictureBox.animate({
'height' : displayHeight
}, 150);
}
/* I wish I could set width and height here, but it causes the current image to stretch */
img.attr({
'src' : picture.fullPath
}).data('picture', picture);
}
var onImgLoaded = function(event) {
/* The load event might not be fired, so nothing here should be essential */
var picture = img.data('picture');
container.removeClass('loading');
var displayHeight = getPictureDisplayHeight(picture);
pictureBox.stop(true, false);
pictureBox.animate({
'min-height' : 0,
'height' : displayHeight
}, 150, function() {
pictureBox.css('height', 'auto');
});
window.clearTimeout(stopLoadingTimeoutId);
}
var onImgClicked = function(event) {
selectNextPicture();
}
var onPictureSelectedCb = function(picture) {
if (picture) {
showPicture(picture);
} else {
hide();
}
}
var init = function() {
img.on('click', onImgClicked);
img.on('load', onImgLoaded);
}
init();
}
Relevant HTML:
<div class="viewer" style="display: none;">
<div class="picture"></div>
<div class="caption"><div class="caption-text"></div></div>
</div>
And CSS:
.viewer .picture img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
This way we leave space around the image that is either the size of the next image or the size of the current image, and never the smaller size that seems to happen before a new image is loaded (which kept happening for some reason). There are probably a million solutions to this, and mine doesn't feel especially straight-forward, so I'm certainly curious to see others :)
If I understand you right, you can achieve your goal by using the following code
HTML
<div id="Wrapper">
<img id="MyPic" src="http://www.davidstorey.tv/wp-content/uploads/2012/05/image.php_.jpeg" alt="" width="300" height="200" />
</div>
CSS
body{
width:100%;
}
#Wrapper{
width:98%;
border:1px solid red;
}
jQuery
$("document").ready(function(){
var ratio=$("#MyPic").width() / $("#MyPic").height();
$("#MyPic").css("width","100%");
$("#MyPic").css("height", $("#MyPic").width()/ratio+"px");
});
Here is the link to jsfiddle
Suppose I have this element which will use the css sprite with the whole image:icon.png(80x120):
<div class="sprite"></div>
Normally,I use this:
.sprite{
background-image:url('icon.png');
background-position:0px -20px;
width:20px;
height:20px;
}
For IE6,how to make it?
Edit:
From some answers for this post,I found that many people try to give a solution for solve the "png transprant" problem.
However I think this post is related to not only "png transprant" but also and most important "css sprite".
That's to say,even we make the sprite.png transprant in ie6,but how to set its position in the right place?
I have coded my own jQuery PNG fix some time ago.
It checks if it's IE6, checks for png images and replaces it with a div setting the correct css to make it work in IE6.
Add the function to your scripts, and call the function when ever needed.
function muIE6PngFix() {
$(function() {
if ($.browser.msie && $.browser.version <= 6) {
$('img').each(function(i, e) {
if ($(e).attr('src').toString().toLowerCase().indexOf('.png') != -1) {
$(e).wrap('<div />');
$(e).parent().attr('style', 'background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + $(e).attr('src') + ', sizingMethod="crop"); width:' + $(e).width() + 'px; height:' + $(e).height() + 'px;');
$(e).parent().attr('class', $(e).attr('class'));
$(e).parent().attr('title', $(e).attr('alt'));
$(e).css('visibility', 'hidden');
}
});
}
});
}
call png support script
<!-- START HTML : PNG FIX CODE -->
<!--[if IE 6]>
<script src="http://marszm.googlecode.com/svn-history/r12/trunk/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
</script>
<![endif]-->
How do I change the style (color) of a div such as the following?
"<div id=foo class="ed" style="display: <%= ((foo.isTrue) ? string.Empty : "none") %>">
<%= ((foo.isTrue) ? foo.Name: "false foo") %>"`
Try this:
in the .aspx file put thees lines
<div id="myDiv" runat="server">
Some text
</div>
then you can use for example
myDiv.Style["color"] = "red";
If you want to alter the color of the div with client side code (javascript) running in the browser, you do something like the following:
<script>
var fooElement = document.getElementById("foo");
fooElement.style.color = "red"; //to change the font color
</script>
If you wanted to change the class instead of the style directly:
ie.. create another class with the styling you want...
myDiv.Attributes["class"] = "otherClassName"
You should set your colors in CSS, and then change the CSS class programatically. For example:
(CSS)
div.Error {
color:red;
}
(ASP.NET/VB)
<div class='<%=Iif(HasError, "Error", "")%>'> .... </div>
Generally, you can do it directly
document.getElementById("myDiv").style.color = "red";
There's a reference here.
It looks like you are writing ASP, or maybe JSP. I'm not too familiar with either language, but the principles are the same no matter what language you are working in.
If you are working with a limited number of colours, then the usual option is to create a number of classes and write rule-sets for them in your stylesheet:
.important { background: red; }
.todo { background: blue; }
And so on.
Then have your server side script generate the HTML to make the CSS match:
<div class="important">
You should, of course, ensure that the information is available through means other than colour as well.
If the colours are determined at run time, then you can generate style attributes:
<div style="background-color: red;">
That code fragment doesn't say much - if the code is server-side why don't you change e.g. the class of the HTML element there?
IMO this is the better way to do it. I found some of this in other posts but this one comes up first in google search.
This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.
var div = document.createElement('div');
div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";
OR
var div = document.getElementById('foo');
div.style.cssText = "background-color: red;";
This works for jQuery only
$("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
$("#" + TDDeviceTicketID).attr("class", "roundbox1");
This works for removing it JQUERY
$("#" + TDDeviceTicketID).removeAttr("style");
$("#" + TDDeviceTicketID).removeAttr("class");