I am using
window.history.pushState
and popstate functions for getting the previous page url's while clicking on back button of browser and i want to reload the page every popstate function calls.
My code is..
function refresh_results() {
page_link = $("#form").serialize();
if(page_link!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
}
In popstate function
$(document).ready(function($) {
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
if (window.history && window.history.pushState) {
$(window).bind('popstate', function(e) {
var initialPop = !popped && location.href == initialURL;
popped = true;
if (initialPop) return;
pageurl = location;
console.log(pageurl);
window.location = location.href;
//window.location = pageurl;
return e.preventDefault();
});
}
});
But, for every time when i click on back button page is refreshing continuosly in chrome,but in firefox it's fine.
Can u suggest me how my functionlity will workable, and suggest me if i am missing anything
I'm trying to display a hyperlink that has a colorbox popup associated with it.
The javascript is:
function bid() {
var bid = document.getElementById("bid").value;
if (bid>0 && bid<=100) {
var per = 3.50;
} else if (bid>100 && bid<=200) {
var per = 3.40;
} else if (bid>200 && bid<=300) {
var per = 3.30;
}
var fee = Math.round(((bid/100)*per)*100)/100;
var credit = 294.9;
if (fee>credit) {
var message = 'Error';
} else {
var message = '<a class="popup" href="URL">The link</a>';
}
document.getElementById("bidText").innerHTML=message;
}
The javascript works fine and displays the link in the right conditions, the problem however is that when clicking the link, the Colorbox isn't being applied and the page loads as a normal hyperlink.
I have the following code in the header:
jQuery(document).ready(function () {
jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });
});
If I output just the hyperlink in the standard html source, it works fine and displays correctly in the Colorbox.
Any help would be greatly appreciated :)
You need to wait until you've appended the link before you call the colorbox() method on it.
Move your colorbox() method so that it comes after your innerHTML.
jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });
when adding html dynamically you, the event added already can not be triggered.
try the following code
jQuery(document).ready(function () {
$("a.popup").on("click", function(event){
applycolorbox($(this));
});
function applycolorbox($elem) {
$elem.colorbox({ opacity:0.5 , rel:'group1' });
}
I am submitting some data to my database then reloading the same page as the user was just on, I was wondering if there is a way to remember the scroll position the user was just on?
I realized that I had missed the important part of submitting, so, I decided to tweak the code to store the cookie on click event instead of the original way of storing it while scrolling.
Here's a jquery way of doing it:
jsfiddle ( Just add /show at the end of the url if you want to view it outside the frames )
Very importantly, you'll need the jquery cookie plugin.
jQuery:
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When a button is clicked...
$('#submit').on("click", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
Here's still the code from the original answer:
jsfiddle
jQuery:
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When scrolling happens....
$(window).on("scroll", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
#Cody's answer reminded me of something important.
I only made it to check and scroll to the position vertically.
(1) Solution 1:
First, get the scroll position by JavaScript when clicking the submit button.
Second, include this scroll position value in the data submitted to PHP page.
Third, PHP code should write back this value into generated HTML as a JS variable:
<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>
Fourth, use JS to scroll to position specified by the JS variable 'Scroll_Pos'
(2) Solution 2:
Save the position in cookie, then use JS to scroll to the saved position when page reloaded.
Store the position in an hidden field.
<form id="myform">
<!--Bunch of inputs-->
</form>
than with jQuery store the scrollTop and scrollLeft
$("form#myform").submit(function(){
$(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");
$(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});
Than on next reload do a redirect or print them with PHP
$(document).ready(function(){
<?php
if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
echo "window.scrollTo(".$_REQUEST["scrollLeft"].",".$_REQUEST["scrollTop"].")";
?>
});
Well, if you use _targets in your code you can save that.
Or, you can do an ajax request to get the window.height.
document.body.offsetHeight;
Then drop them back, give the variable to javascript and move the page for them.
To Remember Scroll all pages Use this code
$(document).ready(function (e) {
let UrlsObj = localStorage.getItem('rememberScroll');
let ParseUrlsObj = JSON.parse(UrlsObj);
let windowUrl = window.location.href;
if (ParseUrlsObj == null) {
return false;
}
ParseUrlsObj.forEach(function (el) {
if (el.url === windowUrl) {
let getPos = el.scroll;
$(window).scrollTop(getPos);
}
});
});
function RememberScrollPage(scrollPos) {
let UrlsObj = localStorage.getItem('rememberScroll');
let urlsArr = JSON.parse(UrlsObj);
if (urlsArr == null) {
urlsArr = [];
}
if (urlsArr.length == 0) {
urlsArr = [];
}
let urlWindow = window.location.href;
let urlScroll = scrollPos;
let urlObj = {url: urlWindow, scroll: scrollPos};
let matchedUrl = false;
let matchedIndex = 0;
if (urlsArr.length != 0) {
urlsArr.forEach(function (el, index) {
if (el.url === urlWindow) {
matchedUrl = true;
matchedIndex = index;
}
});
if (matchedUrl === true) {
urlsArr[matchedIndex].scroll = urlScroll;
} else {
urlsArr.push(urlObj);
}
} else {
urlsArr.push(urlObj);
}
localStorage.setItem('rememberScroll', JSON.stringify(urlsArr));
}
$(window).scroll(function (event) {
let topScroll = $(window).scrollTop();
console.log('Scrolling', topScroll);
RememberScrollPage(topScroll);
});
I had major problems with cookie javascript libraries, most cookie libraries could not load fast enough before i needed to scroll in the onload event. so I went for the modern html5 browser way of handling this. it stores the last scroll position in the client web browser itself, and then on reload of the page reads the setting from the browser back to the last scroll position.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
$(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
}
$(window).on("scroll", function() {
localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
});
});
</script>
I tackle this via using window.pageYOffset . I saved value using event listener or you can directly call window.pageYOffset. In my case I required listener so it is something like this:
window.addEventListener('scroll', function() {
document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
})
And I save latest scroll position in localstorage. So when next time user comes I just check if any scroll value available via localstorage if yes then scroll via window.scrollTo(0,myScrollPos)
sessionStorage.setItem("VScroll", $(document).scrollTop());
var scroll_y = sessionStorage.getItem("VScroll");
setTimeout(function() {
$(document).scrollTop(scroll_y);
}, 300);
I have put javascript and css pop up in my magento application. I can close the pop up by clicking on close button on pop up, but if user clicks elsewhere(out of pop up window) on the page pop up should be closed.
See this question:
Use jQuery to hide a DIV when the user clicks outside of it
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
So you check if the mouse is inside your popup div, and when it is not, you will close it onclick. If you provide some more code we can help you get that set up
maybe this helps you. I would recommend jQuery but as far as you can't use it maybe thats the solution for you.
<script type="text/javascript">
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('body');
if(target!=obj){obj.style.display='none'}
}
</script>
And if you have to "toggle" it maybe this helps you:
<script type="text/javascript">
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
var obj2 = document.getElementById('sho');
if(target!=obj&&target!=obj2){
obj.style.display='none'
}
else if(target==obj2){
obj.style.display='block'
}
}
</script>
I have a jquery colorbox (lightbox) that pops up when users click a button on my page. Under certain conditions though i want this colorbox to appear without the user having to click a button. For example when the page is loaded and variable is passed in the query string I want to pop up the colorbox.
For example the following code shows how when user clicks the signup button the colorbox appears (this is for a page called example.php)
<p class="signup_button"><img src="images/buttons/sign_up_now.gif" alt="Sign Up Now"></p>
<script type="text/javascript">
$('.free_signup_link').colorbox({href:"signup.php?type=5"});
</script>
What I want to do is if the page is loaded with a variable in the query string then the colorbox is automatically shown (eg for example.php?show=1)
if($_GET['show'] == "1") {
// show the color box
}
Anyone know how to do this?
thanks
This should work, it's probably considered a bit "dirty" however.
<?php
if($_GET['show'] == "1") { ?>
<script type="text/javascript">
$.colorbox({href:"signup.php?type=5"});
</script>
<?php } ?>
Why not just use jQuery?
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var show = getUrlVars()["show"];
if(show == 1) {
$.colorbox({href:"signup.php?type=5"}).click();
}
Reference: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
How about this?
if($_GET['show'] == "1") {
echo '
<script type="text/javascript">
$.colorbox( ... ); // or whatever that triggers the colorbox
</script>
';
}