My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/
I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.
Related
i implemented a site (through small JS code) in my original website.
Everything works fine but yesterday i found out that when i first load the page, there is no scroll bar. If i refresh the page, its possible. I played a bit with the parameter 'height' but it didnt work.
Body-Code: <heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>
The page: https://entiac.com/erp-stellenanzeige/
PS: Im not deep into coding
I'd advise you to, first of all, add a css file or <style> tag in your index file, which will contain
body{
overflow: visible; !important
}
so you will be sure that isn't an issue. The site has some sort of scrollbar issue even on PC browser, so it would be better to set height:100%- hardcoded values like body height 2000px aren't a good solution.
Other good thing which you could do is divide your site in <section> your code </section>, give them height: 100vh; and make sure your js file loads in one of these sections. This way every section will be full height of your display (100vh = 100 view height). Such a split will make your site bit easier to manage.
Cheers!
I am going to get roasted for this but I've searched on StackOverflow and tried to implement the suggestions provided to no avail. Whenever I am using the menu on my website (on mobile devices) the main page still scrolls when I move my thumb and it causes glitches with the display. I cannot get it to lock in place when the menu is open.
Here's what I've tried
Position: relative (on body)
Height: 100% (on body)
Overflow: Hidden (applied to Body when you click to open menu)
None of those have worked. As you can see, the page still scrolls on mobile. Currently my live example shows this:
https://www.brotherhoodgaming.net
Any suggestions are welcome. I'd prefer a CSS solution to this rather than Javascript or Jquery (although Jquery toggleClass is fine as long as CSS is the baseline solution).
I have been working on a website and I'm very happy with the results.
The menu works quite well on mobile. However, I decided that I wanted to try a menu that disappears when viewd on smaller screens.
Here is the javascript plugin I used [Responsive-Nav][1]
I followed the directions, and when I finished, it messed up my navigation and didnt work.
Here are both versions
[Site before plugin][2]
[Site after plugin][3]
Im not sure what is causing
You must also define the rules for different screen sizes in css.
In responsive-nav.css line 11:
.nav-collapse li { width: 100%;
For desktop browser set width: auto. This way the menu items will be displayed inline.
I've exhausted my understanding of CSS and JS while tackling this issue.
On this website: http://glorydayssports.net/blog/featured-game-dodging-bullets-vs-cash-paid-dodgeball
When the Disqus comments load below, they do not push down their container. This happens in Safari and Chrome, but looks just fine in Firefox and acts as I imagined it would. I contacted Disqus about it and they said that it's possible I have JavaScript somewhere on the page that is not allowing the height to expand, but I've tried disabling all the other JS except for Disqus and it still occurs.
Has anyone seen this happen before? None of the container elements have a fixed height on them.
give div#dsq-content a height: auto;. Currently it's using .clearfix's height of 1px.
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.