Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Graham Davidson
Courses Plus Student 14,966 PointsStange links to an Iframe
Hi all - bit of a random question but I am stuck.
I have this site which has had some media queries popped into it. However when you link from the home page to the dining page it links to the Iframe which has been put on the site rather than the top of the page - there is nothing in the link to make it do this - so I was wondering why it might be?
6 Answers
Dave O'Dwyer
1,680 PointsI can't see why not, but I would be afraid there would be an initial jump on the page for the end user.
If this is something that wouldn't be too much of a problem or you would like to test such a functionality, you could try adding the below code.
<script>
$(document).ready(function() {
$(window).scrollTop(0);
});
</script>
Sean T. Unwin
28,690 PointsG'day Graham,
To recify this you could add the following to your $(document).ready in scripts.js:
$('#BTNAVAILABILITY').blur();
window.scrollTo(0,0);
Graham Davidson
Courses Plus Student 14,966 PointsHi Dave - I am using Chrome as well - it happens when you have the DEV tools open and the viewport at about 320px - also it happens on IOS on my IPhone
G
Dave O'Dwyer
1,680 PointsIt looks to me like there is a script that is focusing the user to the submit element. If you look closely, you can see that the submit button in the iFrame has a light border around it, as if it is the selected element. To show what I mean, load the page up and just hit enter.. You'll see that the iFrame reloads with a message 'We could not find any availability for the date you requested.'
If an element is focuses on and the element in question is not in the viewport, the viewport will move to the element in question. This is why the page is jumping down.
I tried looking for something in the JS files that would cause this, but can't find anything.
Dave O'Dwyer
1,680 PointsAlso, just to add, the 'focus' functionality is coming directly from the JS relating to the iFrame, not your JS.
Graham Davidson
Courses Plus Student 14,966 PointsHi Dave
Thanks for that, how frustrating. Do you think it would be possibly to write some JS that acted as an override for the JS providing the IFrame functionality.
G
Sean T. Unwin
28,690 PointsThat is a pretty deceptive practice for a 3rd party service and, in a general sense, horrible UX consideration. They deserve to get an email stating so as well, in my opinion.
Graham Davidson
Courses Plus Student 14,966 PointsThanks both I will give that a go and see how I get on.
G
Dave O'Dwyer
1,680 PointsNo worries Graham! Let us know how you get on!
Graham Davidson
Courses Plus Student 14,966 PointsHmmmm JS not my strong point - I have added
$(document).ready(function() { $('#BTNAVAILABILITY').blur(); window.scrollTo(0,0); $(window).scrollTop(0); });
to my scripts.js file but its still not happy - am I doing something wrong?
G
Dave O'Dwyer
1,680 PointsYou are adding both native JavaScript AND jQuery code.
Simple adding the below should work.
<script>
$(document).ready(function() {
$(window).scrollTop(0);
});
</script>
The above code tells the browser to scroll to the very top of the page. Your refereence to #BTNAVAILABILITY won't work because you cannot reference an element inside an iFrame from outside of said iFrame. Hope this makes sense.
Dave O'Dwyer
1,680 PointsDave O'Dwyer
1,680 PointsWhat browser are you experiencing this problem in? I am testing in Chrome and can't replicate. When I click on 'Dining' I am brought to the top of the Dining page. I can see that the iFrame you are talking about is the 'Make a booking' script, but it doesn't seem to be causing any problems on my side.