Please note: With my site host company, jQuery (very unfortunately) is NOT an option for me and I cannot link to external JS or CSS files. My popup div contains the CSS AND JS code in the "head" section of my webpages as a workaround.
My problem hopefully requires just a simple update/adjustment of my existing JS. The popup Div (for the Contact Form) on my site which was functioning 100% correct (except for position:fixed issues in IE I had gave up on for the moment) just a week ago. Well my hosting company just switched over to HTML5 (from "DTD 4.01 Transitional" I believe) and now my popup div is no longer functioning correctly in ANY browser (IE9, FF, Chrome, Safari), some worse than others.
The issues to fix are (please go to my website http://solitairethahalo.com to see it in action):
FIXED (all 4 browsers) "line-height" html tag I used to format the contact form instructions/info no longer works; as a result the "Form" div class is now larger than the div container height
75% FIXED (Firefox & IE) positioning is incorrect; popup appears at bottom of screen so that only a small portion of the popup's header is visible
50% FIXED (all 4 browsers) my existing popup never had the code for it, but I would like for the popup div to remain centered/fixed when the browser window is resized if possible
I can't paste my existing code properly, so I made it accessible thru my website: http://solitairethahalo.com/popupdiv.txt
Please provide (you can email me as necessary) a revised HTML5-compliant version of my existing code if possible.
Thanks!
UPDATES:
Line-height: After looking it up and getting an idea, I fixed the problem by simply changing to . Glad it was simple.
Popup positioning & resizing: The positioning error is fixed with a slight adjustment to my existing code. Using js code from a comment below allowed me to get the desired re-positioning of the popup upon window resizing. However, I've been unable to make the modal window function with that code. So for now, I've reverted to my own revised code that currently lacks the re-size re-position functionality, but I'm working on it still.
If you can't use any JS then its possible in only one way.
You can do one thing, Either for popup replace it with sliding panel.
Add your popup div inside "contact" div. And from CSS3 on mouseover of your "contact" div, use css3 transition and set its position left to show popup.
This will work in all browsers. Animation wont work in IE8 or lesser.
Related
We got a list of cards that show a small part of a textbox. That textbox is limited in height via CSS. When a user clicks on "Details" the textboxes height is changed via javascript to the real height of the content.
The problem is, that when the viewport / window is scrolled and the cards height increases, it pushes itself out of the viewport. When the window is not scrolled at all, it works.
Please see the following video: https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv
0:00 -> 0:08 is the desired opening / closing behavior that I want
0:09 -> 0:16 is the behavior I do not want, as the top text is moved out of the viewport.
Is there a way to keep the viewport, preferably without JS?
Edit: This happens only in Chrome (84.0.41), in Firefox and Safari it works as expected.
I can send you a link to the staging environment if necessary, please contact me via info#felixhagspiel.de
Looks it's done more logical that you want to be. As control placed in a bottom element (bad UI) better keep this control in viewport (strange that chest Crome thinks so).
So just display:flex build all this magic :)
Please look examples
https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing
UPDATE: also please remove
tabindex="0"
And use button instead div to get the same logic with the keyboard navigation.
On Video last Chrome
Google Chrome is up to date
Version 84.0.4147.89 (Official Build) (64-bit)
I have a page where necessary elements are repositioned over some extra html attributes.
For example:
<div class="contentplate" relativePosition="top-left" relx="1" rely="3" relw="14" relh="8" relFontSize="80"></div>
is repositioned by class 'contentplate'. It is positioned to a raster related on the actual windowsize. It's child elements are processed recursively to get the relative positioning also working inside this containers. All of this works as expected.
The trouble begins when using jQuery('parentcontainer').animate( {left:0},100 ) or something:
in some way repositioning the elements leads, jquery to animate only the parent element and not the childs.
the funny part is after te animation is done, the position of the childs is corrected somehow by jQuery but as told not animated.
All the elements are styled position:absolute, overflow:hidden
and no, the repsotion algorithm only runs if the window is resized, or after the page has been loaded once.
I have 3 Test for you if you are interested:
the site fully dynamically repositioning (animation is failing, except in firefox)
http://www.bourier.org/demos/jquery_animation_failure/test_2.html
a snapshot of a repositioned site without active repositioning (all browsers, all good)
http://www.bourier.org/demos/jquery_animation_failure/test.html
a fully dynamically repostioning site with a yellow grid you can see enabled
http://www.bourier.org/demos/jquery_animation_failure/test_3.html
a screenshot where you can see the dynamic page with grid enabled
thanks for your time
As it seems, it is a bug in the browser Engine correlated to usage of a canvas and CSS modifications of div's z-ordered above.
The canvas is there only for checking the grid features are correct e.g. debugging purposes.
I removed the canvas and everything is working now as expected.
There is something very wrong, can be shown here using the chrome developer tools:
The elements are detected in the correct position by the debugger, and mousepointer, but they are not displayed there. very odd this.
i don't want to digg deeper than this, but in my opinion the Firefox behaviour is correct and Chrome and Safari are doing something very wrong.
If i should post a issue report to chrome developers leave a comment and i will.
I'm having a problem related to WebKit:
http://demo.frojd.se/webkit/index.html
When you click "Menu item 1" it shows it's children.
This renders fine in Firefox 3.5, IE8 and in Opera 10.
In WebKit-browsers (Safari 4 and Chrome 3) it doesn't.
However, if I preset all the different classes and css-settings in the
html, it renders correctly (without the javascript click events). I've got an URL to show you, but can't since this is my first post.
Any ideas on why this might be?
Cheers,
Robin.
I really haven't looked at the code closely, but something to look at in this situation is the padding or margin set on the menu item divs. In Safari, those are not taken into account with respect to width, so they may make the div or contents of the div expand wider than you expect, and that would cause the next element to be pushed to somewhere you don't expect it.
Not sure if that'll help, but it's some place you can look if you're still stuck.
Edit: After looking at the source using Web Inspector, it seems the divs with class = 'parentHook' are not wide enough after getting clicked on. After getting clicked on the class changes to 'parentContainer', which sets 'margin-left:-18px; margin-top:-15px;', and that seems to throw off the width of that div. In Web Inspector I changed the width of that div to 150px, and it worked as expected.
A true and ugly hack- but hey it works.
try hiding and showing on the click of the <li>
for a simple test: try this in console
$('#nav li:first').hide(50).show(50)
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.
I have a page using <ul> lists for navigation (Javascript changes the styling to display or not on mouseover).
This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.
In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.
I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <div>, not an <iframe>.
Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?
I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.
I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:
$(function () {
$("#primary-nav").appendTo("#footer");
});
Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.
The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.
I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.
Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.
I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.
If you want to check out what CSS hacking is about: click here
If you want to check out some pure CSS menu examples: click here
Hope this helps!
According to this google maps thread, you are correct - an IFrame is inserted by the google code.
You'll need to use the solution which Dan mentioned,
you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists
Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.
Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.
An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.
I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.