1

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.
Improve this question
3
  • 2
    Can't you just change the host? No JS is NOT an option would mean to me: This very Hosting company is NOT and option to me. Commented Feb 9, 2012 at 9:38
  • Your page contains links to stylesheets, javascript and jquery but you say you can't do that. Don't understand. Commented Feb 11, 2012 at 13:19
  • @Rob, all of those nice links are provided within my host company's templates. But on the user end, one cannot utilize such links or jquery for non-template elements. (They even have popup contact form templates that are great if you don't need to edit them at all). There's a valid reason; my host company specializes in "easy, unexperienced-user friendly" design. So while designing using my host's site builder is extremely easy and requires no knowledge of coding, the downside is that those who do want to do custom/complex editing are hindered by the builder's limitations. Commented Feb 11, 2012 at 22:17

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

IE 9 has transform but no transition
oh yes. In short without using javascript with pure CSS, only this you can offer.
@ParagGajjar....Clarification: I can use JS, I just can't link to external JS files. My current code, if you view the "popupdiv.txt" file I linked to at the bottom of my initial question post, contains a decent amount of JS that was in popup div template I used. So how would I adjust my existing JS to comply with HTML5 rules?
@yunzen I completely get what you're saying. But my funds are limited right now and I get a full year of free basic/limited hosting with this company, which is good enough for now. I have plenty of experience in working around limited funds/resources in various situations, so this is just another one of those situations I must work through
Also, I tried for a quick moment to experiment with CSS transitions/animations, but with no luck. I do emphasize that it was a very quick experiment, but animation is not a necessity so I didn't spend much time on it. If CSS animation code (such as fade in) is indeed a simple task however, please do tell me how to add it to my existing CSS....Animation isn't a priority though. Adjusting my JS to work with HTML5 is my top concern, so that I can get my popup div to work again. Popup div properly functioning, 1st; aesthetic CSS animation, 2nd.....THANKS!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.