When closing certain modal popups, page jumps to top.
Note:
I've built this page with Wordpress, using a combination of custom HTML and the Beaver Builder website builder. Wordpress theme is Astra.
Link to page with issue:
http://retirementinsuranceoptions.com/consuelo-avila
Once you get to web page, click on the "Book" option to navigate to the section that I'm having issues with. You'll notice that when you click on "Book an Appointment" or "Schedule a Chat", then close these popups, the page will jump to the top of the screen.
But, if you click on "Ask Consuelo a Question", then close the popup, the page doesn't scroll (which is what I'm interested in achieving for all other modal popups).
All buttons you see are styled anchor tags with href="#0".
I do notice a pattern...
The popup for the "Ask A Question" button contains a Form (from a Wordpress Plugin, Ninja Forms) which is a local asset on my site's server.
The popup content for "Book an Appointment" and "Schedule a Chat" are <iframe>s and <script>s that are provided from an outside source (Acuity Scheduling). I'm just embedding their code for the modal popup content. (provided below, but censored for privacy).
I'm not sure if/why this would make the page jump but thought it's worth mentioning because of how these popups are the only ones that make the page jump.
Lastly, I use a Wordpress plugin called "page scroll to id" on the page as well, but I've tried deactivating it and it didn't make any difference, so I think it's safe to say that this plugin isn't affecting this issue.
The HTML for the buttons:
<div id="button-only-div">
<a id="bio_book" class="ask-a-question push_button red" style="text-align: center;" href="#0">Book An Appointment</a><br />
<a id="bio_chat" class="ask-a-question push_button red" style="text-align: center;" href="#0">Schedule A Chat</a><br />
<a id="bio_question" class="ask-a-question push_button red" style="text-align: center;" href="#0">Ask Consuelo A Question</a>
</div>
The code for the Acuity Scheduling embedding:
<iframe src="https://app.acuityscheduling.com/schedule.php?(censored)" width="100%" height="800" frameBorder="0"></iframe> <script src="https://(censored).acuityscheduling.com/js/embed.js" type="text/javascript"></script>
Expected/Desired Result:
No "scroll to top" when modal popup is closed out.
Actual Result:
Some popups cause the page to scroll to top, some don't.
(I've been learning to code for the past year or so now. I love it, but I still have lots to learn! Thanks in advance S.O.!!)
This is a pretty redundant feature! It's not worth your trouble
Related
I have a pretty strange Sharepoint 2010 problem. I have a webpart, which outputs the content of a list.
The webpart has a title with a styled background.
When I edit the webpart, it looks like it should. It has the nice background color, it shows the text ect. However, when I go to the page where the webpart should be, the webpart title is gone. It is not rendered in the HTML code (and therefore, I guess it's not a styling issue).
This is the rendered HTML while editing the page:
<td id="WebPartTitleWPQ6" class="ms-WPHeaderTd" title="Documents">
<h3 class="ms-standardheader ms-WPTitle" style="text-align:justify;">
<a href="link" accesskey="W">
<nobr>
<span>Documents</span>
<span id="WebPartCaptionWPQ6"></span>
</nobr>
</a>
</h3>
</td>
And when not editing, this td is never rendered.
The content in the webpart, is shown.
It shouldn't be a security problem, as I've moved the web part around so i've tried different zones. I've also tried different css classes.
Last of all, i've made sure the Chrome isn't none. I've tried all.
Any ideas why the webpart title is not shown?
Follow the stpes given below may be it can solve your problem :
Open Sharepoint Designer 2010.
Open the Masterpage in Advanced mode.
Located the <title> tag. It contained an <asp:ContentPlaceHolder> tag.
Remove any spaces between the <title> and </title> tags.
That means, the title tag started and ended in the same line.
Save and Publish.
Let me know the outcome.
Thanks
<iframe id="myFrame" runat="server" name="main" width="100%" src="http://www.somewebpage.com/" />
This is simple iFrame I put on my webpage. After I click on couple of buttons on that website, iframe source remains the same. But I want to be able to retrieve the changed source every time I click on buttons, links etc...
How can I achieve this?
Edit: This is the screenshot of my work. When I click on "Git" button, webpage loads on the iFrame. However, when I surf on the website, I want textbox to be updated to the source of the iFrame.
Ok, here is an idea that I test it now and its work. You change the input box after the iframe loads using the onload event of the iframe
<script>
function HasChange(me)
{
document.getElementById("WhereIamId").value =
document.getElementById("WhatIShowID").src;
return false;
}
</script>
and the html
<input type="text" id="WhereIamId" value="" />
<iframe src="page1.aspx" onload="return HasChange(this);" id="WhatIShowID" ></iframe>
You can use also the document.getElementById("<%=myFrame.ClientID>") to get the rendered id. After your iframe loads you update the text box with the current url.
I have a problem with placing Facebook Like Button inside a DataList control. I want to dynamicly create a Like Button for every DataList element. The problem is that it does show up only in IE. It doesn't work in other browsers.
Here is the code placed inside DataList control:
<fb:like href="<%#"http://www.mojsekret.net/Komentarze.aspx?ID=" + Eval("ID")%>" send="false" layout="button_count" width="450" show_faces="true" font="">
<br>
</fb:like>
And here is the script attachment:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
So it is basic stuff generated from facebook dev site. Has anyone encountered similar problem? Please guys, help me.
BTW: I did the same thing with Google +1 button and it's working. Code:
<g:plusone href='<%#"http://www.mojsekret.net/Komentarze.aspx?ID=" + Eval("ID")%>'></g:plusone>
Try removing the <br> inside the fb:like tag. Also make sure you are only rendering one <div id="fb-root"> on your whole page.
I am designing a website. I have created a simple menu(without sitemap) in master page and a web page called home.
The problem is that when I hosted this website submenu's of the menu control are hide behind the images of home webpage and if the any webpage has no image all Submenus are appears.
Have any problem in my menu creation. I have copy my code in this window but due to some reason it not shown.
Please help to shortout my problem
Here is my code:
<dynamichoverstyle BackColor="LightBlue" Font-Bold="true" />
</asp:Menu>
Difficult to help without the source code but did you try playing with the z-index :
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
I need to display a submission form inside a lightbox of an ASP.NET page.
If there is an error in the submission form such as user name not being unique, the postback then renders the ASP.NET page outside the lightbox.
How can I solve that problem?
Here is a code snippet of the .aspx page that includes the lightbox:
<...>
<p>
QunatumMotors is located in Detroit. Please use the link below to contact us.</p>
<p>
<!--START CONTACT FORM OVERLAY-->
<!-- first overlay. id attribute matches the selector -->
<a href="**../informational/contactform.aspx"** rel="#overlay" style="text-decoration:none">
> Click here to contact us
</a>
<div class="simple_overlay" id="form_contact">
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
</div>
<!--END CONTACT FORM OVERLAY-->
<p> </p><p> </p>
<...>
contactform.aspx is just a standard .aspx page with form fields, field validators, label to display errors (e.g. username not unique) and submit button.
When a postback occurs on contactform.aspx then (of course) it is rendered outside the lightbox. How can I display the postback of contactform.aspx inside the lightbox?
Thanks for your help!
The lightbox content isn't like another tab or window: it becomes part of the host page.
In other words, it incorporates the HTML generated by contactform.aspx into the host page's document object model (DOM). Activating the lightbox adds a form to the host page that posts to the contact page:
<html><body>
<!-- host page content here -->
<!-- contact form content -->
<form action="contactform.aspx">
<!-- text boxes, buttons, etc. -->
</form>
</body></html>
When the user submits, their browser issues a new request: a POST to contactform.aspx. That request returns the contact form's HTML.
There are several ways you might work around that:
Use ajax to perform the update asynchronously. (You might even be able to do this by using an UpdatePanel in contactform.aspx, but I don't use them much anymore and haven't though that through).
Convert contactform.aspx into a control (if you're using it in several places) and embed it in the host page.
At the end of the contact form's submit handler, redirect to the host page with a flag that instructs the page to immediately activate the lightbox. (This has numerous issues and sounds pretty fragile ... but it's plausible.)