fullPage js scrolls wrong height in IE - javascript

I am developing a website with fullPage js to create a scrolling site.
The scrolling works fine in Chrome and Firefox but in Internet Explorer it is completely off.
The scroll goes in between pages and to the wrong pages and you can't use the site much at all. I don't know why this is happening.
www.mpaccione.com/correlation-one/index.html

In the fullpage.js documentation you can read the following:
Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
Looking your resulting HTML code I can see how you use the anchor Employers and the id employers:
<div id='employers' class='howWorks grayBg'></div>
IE might not be case sensitive.

Related

jQuery one-page scroll not working

I'm using this jQuery plugin to get a one-page scroll effect.
However, as you can see on this page, it doesn't work and instead just locks the scroll.
jQuery is working fine - I can run an alert for example. Might the CSS file that comes with the plugin be conflicting with my existing one?
Thanks in advance for your help!
If you want more compatibility with old browsers such as IE8, 9, Opera 12... and some more functionalities, here's another great plugin for it, is called fullPage.js:
Demo
Page
Some features it adds to the one you are using:
Use it over IE 8 and old browsers with no CSS 3 support.
Compatibility with touch devices
Plenty of more options and functions
Scroll bar for a better UX experience
Use of anchors in the URL
Add a live menu.
Slide throw the page using the keyboard shorcuts (arrows, spacebar, pageUp/pageDown, home, end...)
Add horizontal sliders.
please try to call these two files from your server
https://raw.github.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.min.js
https://raw.github.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.js
It is to prevent XSS (cross-site scripting) attacks Check more details about it

trouble with if iemobile

I'm having a bit of trouble with an if statement.
I've got a little lightbox popup error message running on the site. It works fine across everything except my windows phone where the popup load at the top of the screen (apparently ie mobile doens't like absolute positioning).
My solution is to simply scroll to the top of the page to display this (but only on ie-mobile.
Here's my code:
function checkiemob()
{
if (navigator.userAgent.match(/iemobile/i))
{
window.scrollTo(0,0);
}
}
If I remove the if statement this works fine. I've also tested the if statement with simply inserting text and that works too.
Cheers
I've been working some time on Hybrid applications, and i can tell that it's not worth it if you're not CSS professional and know everything about differences in browsers.
Don't know about absolute, but maybe it will give you a hint:
position:fixed - attaches element to the specified position on the page. ( HTML standart ). Works fine in Safari and Google Chrome.
But in IEmobile this position fixes the element to the display!
I think there might be same problem with you'r absloute
That means if i try to move whole page - in google and safari this fixed element will move along with the page, remaining on the same place, but in IEmobile it will stay on the same place

Unwanted Page Jump when using hash URLs

I've checked out the other page jump questions here on SO and I haven't found anything that matches, so here we go...
I'm working on building a website that uses CSS3 transitions and a bunch of hash-links as opposed to using jQuery to load/transition different pages/elements (just for fun/to prove that I/CSS can). The problem I'm having is that when I click on one of my links, the scrollbar automagically jumps down about 100px for no apparent reason.
I don't recall it doing this the entire time, so maybe something in my CSS went weird. I also added some <a name> tags at the top to try to pull it back up, but that's not working either. I also tried putting onclick="window.scrollTo(0,0);" in the links as well and that doesn't work either :(
Any ideas/help would be awesome, as it's really annoying/poor usability to have to scroll every time you navigate to the page. You can view the page here.
System Info:
Browser(s): Chrome 16.0.912.75, FireFox 9.0.1, Opera 11.6
OS: Windows 7
I'm not familiar with CSS3 transitions, so I don't fully understand what you're doing. However:
I assume this behavior that you find undesirable has something to do with the browser's native behavior of scrolling an element into view based on the fragment identifier in the URL. I'm not sure if overriding that with <a name> elements would work, but in any case you've incorrectly set the name values by prefixing them with a hash. E.g should be <a name="about"></a> not <a name="#about"></a>.
At least for debugging purposes, I'd try adding a click event listener and calling preventDefault() in it to see if it stops the scrolling.
It would be helpful to state what browser (including OS and version) you're experiencing the issue in.
Notice that it is not just jumping down to a random place, it is jumping down to the element that has the ID of the hash. (Try adding #footer to the end of your url) I do not think you can get around that without using preventDefault in JavaScript.

How to view javascript generated html for Internet Explorer?

I am looking for a way in IE to view the html source generated from jQuery code.
Ex.
HTML:
<div id="myDiv"></div>
jquery:
var wrapper = $("myDiv");
var generated = $("<div>Hello world</div>");
wrapper.append(generated);
I'd like to be able to examine and hopefully tweak the source generated by appending the generated element, not in Chrome or Firefox, but in IE 8 (where the problem is). I think that IE Developer Tools only shows the downloaded source, not what is generated.
Thanks.
Try going to the HTML tab in IE developer tools and press the refresh icon (next to the save icon), it will show the latest DOM.
Example:
Go to script tab and do:
document.body.appendChild( document.createElement("div") );
Then go to the HTML tab and hit the refresh icon and open the body tag, it should show the appended div now.
I recommend Firebug Lite - http://getfirebug.com/firebuglite (it's Firebug for IE, sort of)
You should get Firebug Lite. You can check the code that jQuery does and much more.
Anyway, I recommend that you put Google Chrome Frame compatibility on your site, it will eliminate plenty of problems with your site (with the people that have Google Chrome Frame installed).

Why wont this js code work in Chrome and Safari?

I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.

Categories

Resources