Whenever this site is viewed on a mobile device, it has unstable scrolling. Whenever the users try to enter their details in the contact form the site automatically scrolls upwards.
Scrolling downwards is also quite difficult with this automatic upscrolling.
I thought that the yellow "back to the top" button may have been causing the issue, so I deleted the code for that button to try and see if that was the cause- but it was not the case.
I don't exactly know what else that could be causing this issue...
Code for the "back to the top" button:
<div id="hs-back-top" class="animated bounceInRight">
<i class="fa fa-angle-up">
::before == $0
</i>
</div>
The page will scroll up to the top regardless of if the details have been added into the form that was created to enquire -
I wouldn't be able to say more without seeing all the code but what I can theorise is happening is:
When the code has completed running a function is being triggered that sends the page to the top:
This might be if the onclick function that the to top element is being triggered -
I had a issue like his before and had to pass the onClick or EventListener('click', function(){
})
to return a function that would take the page back to the top -
Sorry that's not more help but I can't make more comment on what is provided,
Hope this helps,
W
Related
My project has a script on the landing page that repositions the footer when certain buttons are clicked and another script that positions it back to its original starting point when certain other buttons are clicked.
A script on a subordinate page (not the landing page) submits a file to upload, and on the click of that button, the code to position it back to its original starting point (RestoreFooter) is called.
I considered that the submit button click causes a page reload, and that may cause the footer to reposition to its starting point, but that's not the problem (as far as I could tell).
Here is the script to reposition the footer, and the script to set it back to its starting point:
<script>
function MoveFooter() {
document.getElementById("footer_x").style.visibility = "hidden";
document.getElementById("footer_y").style.visibility = "visible"; }
</script>
<script>
function RestoreFooter() {
console.log("here_RF");
document.getElementById("footer_y").style.visibility = "hidden";
document.getElementById("footer_x").style.visibility = "visible";}
</script>
Here is the button script:
It has no call to execute either of the two functions above, but it does call RestoreFooter -- I know because the console.log function does log "here_RF" when the submit button is clicked
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn" type="submit" value="Submit" onsubmit="submit_btn.disabled = true; return true;">Create extension</button></div>
I also tried making it an ordinary button, not a submit button, but still the same problem:
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn">Create extension</button></div>
What causes this strange performance?
This is a fairly large project, so I've posted enough code to understand the problem. If more code is needed, I'll post more.
Thanks very much.
EDIT: I made a comment below about the likely source of this problem. I'll post back later.
There are not enough informations about the code, and you should post more details.
Suggests that add debugger to Step into the handler function line by line.
I suppose some code elsewhere might override the handler.
As I mentioned in my edit above, the button is in a div, and the div has a handler that calls a function to make certain changes in the DOM when a user clicks anywhere within the div region. That propagates to children like my button. I solved it by eliminating the function that fires whenever the region (div) is clicked. If I needed that functionality in some situations and not others I would need to specify all places where that function should be called.
I hope that clarifies the problem. Thanks.
I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.
On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.
I'm using Bootstrap 4.1.
Here is my button code, but there's nothing unusual about it:
<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>
I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).
I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.
$(".btn").mouseup(function(){
$(this).blur();
});
Suggestions? Thanks!
Update
So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(
.btn.btn-info {
background-color: #17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
background-color: #117a8b;
border-color: #10707f;
}
You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:
document.querySelector(".btn").onmouseup = function(){
this.blur();
});
or:
document.querySelector(".btn").onmouseup = function(){
document.body.focus();
});
my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..
I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.