I have a named anchor situation that is working in IE but for some reason is not working in Firefox or Chrome. This set of pages is loaded within a Blogger frameset but hosted externally so I can control everything with the page's coding.
The link to the page where the issue resides is here:
http://www.gmvemsc.org/p/vdb-index.html
If you click the first link in the page titled "Main Compartment", the issue is obvious when you click on the third photo down with the tan medication boxes. Here is the code for the link:
<img src="images/pouchmain2.JPG" alt="Main Compartment Contents" width="500" height="254">
The anchor that I have just inside the body tag of the "Epinepherine" page is this:
<a id="pagetop"></a>
If you click on the photo link in IE you are taken to the top of the Epinepherine page where the named anchor resides. If you click on the photo link in Firefox or Chrome the Epinepherine page loads but the frameset stays scrolled about halfway down the page.
Is there a better way to load each page with the browser pointed to the top of the content that resides within this frame?
The problem is that the #pagetop anchor is in another frame. It is scrolled to the top, in its own frame, but the parent frame stays in scroll position.
You should try something like this:
<!-- this goes to the <head> of the <iframe> -->
<script>
// give an ID to the link, so you can do this:
document.getElementById("someID").addEventListener("click", function(e)
{
// stop the link from opening (for now)
e.preventDefault();
// scroll to the top of the page
window.scrollTo(0, 0);
// manually open the link
window.location = e.target.href;
});
</script>
Tell me if it's working!
Related
I have a fixed header in my website, when i try scrolling to a section with anchor links (href="#id_of_the_section") in my main page (where the section actually exists) everythng works fine using :
<style>
#documents, #team {
scroll-margin-top: 110px;
}
</style>
but when i try to go to that section from an external page not the main page as mywebsite.com/#id_of_the_section there is a problem.
The position where the scroll stops is not the same as when i click the anchor link in the main page
I am very confused on how to add a button that shows up when you scroll and then onclick takes you to the top of the page again.
Here is an example of such button from the tutorial at w3school using html and css:
https://www.w3schools.com/code/tryit.asp?filename=G6H468JIUSF0
However, if I embed it in google sites with "embed" functionality it will just scroll to the top of the element and not to the top of the page.
I also tried putting html tag and linking it with :
<a name='top'></a> at the top of the page
<a href='#top'>Top</a> at the bottom
But this gives an error and redirects to :
https://524942313-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.y5hhWjOdu80.O%2Fam%3DwQE%2Fd%3D1%2Frs%3DAGLTcCNsKzxWFhezE2KkFP7auTmVDBiNEQ%2Fm%3D__features__#top
try this
at the top of the page
<a name='top' id="top></a>
at the bottom
<a href='#top'>Top</a>
I'm inserting a jsp page on an existing jsp page (left menu) to simplify my deployment and mutualize my menu in any page of my site.
Here is the insertion I'm performing:
<body>
....
<div style="overflow-y:scroll;" id="leftMenu"></div>
....
<script>
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
.....
</script>
insertion is working well but I would need to get the y scroll available systematically but it is not working properly (on Chrome and Firefox and IE). Sometimes when I refresh the page I can see the vertical scrolling but this is not systematic.
I also tried to insert as well tag
height: 100%
but same result, how can I get the vertical scrolling on this jsp page I'm inserting ?
If I am right then:
If you always want a scrollbar whether it’s needed or not,
use overflow:scroll.
Change the styles overflow style when you loading new JSP page
Keep the style "overflow: hidden". If you don't want to scrollbar initially
eg. when loading the new jsp
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
$("#leftMenu").css("overflow-y", "scroll");
I have a form inside a modal and has reCAPTCHA in it. But when I click the I am not robot button, the box where you select images goes up to high in the browser, high enough that i can't select anyting.
Attached is the screen shot, I viewed the css inside it and seems like this is auto genereted by google? Is there anyway to fix this or override via css?
I tried searching net but all I see is just resizing the reCAPTCHA box not the image selection box
My code is this, this is inside a modal body tag:
<div class="g-recaptcha" data-size="compact" ></div>
My js:
var CaptchaCallback = function(){
$('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {'sitekey' : 'mycode'});
console.log("Re-capcha loaded");
});
};
This worked fine with all my popups which are having Google Recaptcha.
<div class="g-recaptcha"
style="transform:scale(0.77);
-webkit-transform:scale(0.70);
transform-origin:4% 0 ;
-webkit-transform-origin:7% 0;
"data-sitekey="Your Site Key">
</div>
Generally Recaptcha screen (with Images) starts exactly next to Recaptcha checkbox.
I also tested your code with my popups and it worked well. There might be problem with your popup css. Have a look on it and then give it a try.
I am working on a mobile application using HTML5, CSS3, JqueryMobile, which requires a screen to be blocked from all events as soon as submit button is clicked.
I have 2 div in the body as follows:
<div data-role=page id=p1>
content of the page goes here
</div>
<div id=inputBlocker> </div>
This input blocker is added on fly to the body when submit button is clicked on page p1.
The CSS for inputBlocker is as follows:
#inputBlocker {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:99999999;
}
This solution helps me with blocking any input events when submit button is clicked.
But the problem is that if page p1 has more content that does not fit into the screen, it scrolls. Now, when the user taps on submit button, page p1 is disabled by the input blocker, but still the user is able to scroll page p1. Is there a possiblity to stop this scroll effect?
I see you have a creative solution, to put something in front and therefore block all inputs...
Consider this more built in solution:
pointer-events="none"
as an attribute to an HTML div, or to the html or body tag itself. You can use javascript to enable it. I am pretty sure you can use it as a CSS property too.