I have two elements that have the same event onmousedown.
The elements also have a Cursor: move property set in the CSS style.
The elements are empty, and need be be empty, or at least transparent, except for the border.
In IE 6 the only the border registers the cursor change or activates the javascript event handler. IE6 treats the empty div's like they don't exist. If you hover or click on the border, it changes the cursor and can activate the onmousedown event.
This is not a problem in FF... Anyone know what's going on?
Example Fiddle
It's because IE6 hates web developers.
Make it happy by forcing the div to be non-empty, with a as content.
<div id="ie6-hates-you"> </div>
It works in ie6 if you remove position:absolute;top:0;left:0 from both containers.
Add float:right to #container2 and you get the same layout.
Wrap a container around the 2 divs and set it to position:relative;
<div id="test-container">
<div id="container1"><div id="container2"></div></div>
</div>
css
#test-container{position:relative;width:300px;height:300px}
This works in ie6.
Updated fiddle
that is becouse the absolute positioning..
you must set the width to 100%
width: 100%;
Related
I want to have the "Kontakt" button in the right cornor at the front. So, this button is supposed to be above everything else. I already set the z-index to z-index: 99999999999 !important; but it doens't effect anything...
On desktop the button is above everything except the footer at the bottom. On mobile its a disaster... Its behind everything... Try yourself..
But why and how can I fix that? - Here the site: https://j-trier.de
Code:
<button onClick="location.href='#kontakt'" type="button" id="kontakt_button" class="cl-popup-trigger type_btn cl-btn">Kontakt</button>
Greetings
just put your button code direct inside of body tag.
You have used Z-index property in right way. But there is a problem in CSS file “us-base.min.css” . On class “l-canvas class” there is a property “overflow: hidden” which is making it invisible. So remove this property. If you want to use it so use it in such way ”overflow-x: hidden; overflow-y: visible;
Happy Coding!
I'm currently designing a Chrome Extension
and I want to make the size of the popup itself changeable by user.
popup.html is the content that goes inside the popup.
So in order to do something with the popup itself,
I think I'll have to work with the codes in popup.js,
but before starting, I want to know if this is possible.
Thank you in advance.
Besides #wOxxOm's answer, you could also add a div inside popup body and set its resize CSS property both.
style:
div {
resize: both;
overflow: auto;
}
HTML:
<body>
<div>
I am div
</div>
</body>
Borders of the extension toolbar popup aren't resizable, but you can implement the functionality yourself by adding 3 thin div elements (4px x 100%, for example) on sides of the popup except for the top, add mousedown event listener on each one that will set a global boolean flag, which will be used in mousemove handler, and unset in mouseup. To actually resize the popup simply set document.body.style.width = newWidth + 'px', for example. To provide visual cues add :hover CSS on those div elements with corresponding cursor: .... rule.
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
Look at this example
Here is the code:
CSS:
div {
position:fixed;
top:100px;
left: 320px;
border: solid 1px blue;
}
Javascript:
var i = 1;
$(document.body).mousemove(function () {
$("#text").html(i++);
});
HTML:
<body>
<div>
<span>Test Text: </span>
<span id="text"></span>
</div>
</body>
This code just updates the span while mouse is moved over the body. It works fine in Google chrome but in Firefox the span is only updated when mouse moves over the div, To debug I looked into firebug and found that the height of the body is 0, so the mouse is actually not moving over the body, but in Google chrome body covers whole document.
So My question is:
Which is the right behavior?(chrome's or firefox's)?
Is the right behavior documented somewhere?
Also surprisingly when I added this code in jsfiddle, chrome started behaving like firefox, can someone explain me this unusual behavior also?
EDIT: I know I can make the code work in both browser by adding height:100% to body, I want to know why this different behavior in browsers and the right one.
You can see what's going on if you add this css:
body { border: 1px solid red; }
I'm not entirely sure of the reasoning, but Chrome decides that the 'body' element should be the full height of the window, whereas Firefox collapses the body element to a single line. I believe the body collapsing is the correct behavior, because a 'block' element (such as <body> or <div>) should only be as tall as necessary to contain its contents (and since you made the inner div absolutely positioned, it won't take this into account in calculating its height).
The correct fix depends on your intended outcome, but you could use document or window instead of document.body because they represent the entire viewable window instead of just the actual <body> element.
You could also set your body to a specific height like 100%. Alternatively, once you add more content to the body (stuff that isn't absolutely positioned), it will "fill out" and cause the mousemove event to fire properly anyway, so you won't need any of these fixes.
Additional to Alex's answer I was still interested in the different behaviour. I found the solution: in jsfiddle you are not supposed to add the 'body' element in the html. If you remove that then you get the same behaviour as with the stand-alone page.
UPDATE:
That wasn't the case. The real reason is that the stand-alone page missed the
<!DOCTYPE html>
declaration which caused a HTML version difference.
I don't know why but this works
Replaced document.body with document in
$(document.body).mousemove(function () {
This also works on Firefox.
I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?