Navigation links do not load correctly - javascript

I want to open a page studio-x.net.au then after waiting for 5 seconds js setTimeout opens about section of page incorrectly as https://www.studio-x.net.au/#about and in wrong position.
I have tried:
setTimeout("window.location.href=\"#about\";", 5000);
and this
setTimeout(function(){
window.top.location.href="/#about"
} , 5000);
and currently Eric's suggestion
setTimeout(function () {
window.location.replace('#about');}, 5000);
all seem to work to open but does not display as desired.
Are my navigation links the problem? ie. href="#about"
The behavior that I have issue with is when js triggers page opens on https://www.studio-x.net.au/#about in incorrect position.
When you use click on mouse or click on nav, about page opens as intended on the about page and shows only https://www.studio-x.net.au in url,
likewise on other sections such as portfolio, pricing, contact sections showing only https://www.studio-x.net.au in url.
Once triggered the https://www.studio-x.net.au/#about in incorrect position continues possibly cached.

setTimeout(function () {
window.location.replace('#about');
}, 5000);

Related

How to delay background to show after the popup appear and disappear

I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.
This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.
Looking at your sample site, you will have to hide the content and unhide it when you hide the popup.
The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.
There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site.
body.elementor-page-10 .jupiterx-site {
display: none;
}
And your Javascript should unhide it after 7 seconds
jQuery(document).ready(function(){
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
jQuery('.eael-lightbox-popup-window').fadeOut('slow');
jQuery('.jupiterx-site').show();
}, 7000);
});

How can a page be refreshed every 5 secconds only when tab/window has focus?

I have a iframe that I would like to refresh every 5 seconds, but only if the window or tab is active.
I was doing this with META Refresh, but I cant figure out a way to make this conditional to the page being active, so I have tried javascript, but without success. This is what I have tried, but it is not working:
<SCRIPT>
$(window).focus(function(){
setTimeout(function(){
window.location.reload(1);
}, 5000);
});
<SCRIPT>
Am I headed in the right direction, or is there a cleaner way to do this?
You may use the page visibility API and check every 5 seconds the visibility state of your page: if it's not hidden then refresh the page
$(function() {
window.setInterval(function() {
if (!document.hidden) {
window.location.reload(1);
}
}, 5000)
});
where hidden here means
the page content is not visible to the user. In practice this means
that the document is either a background tab or part of a minimized
window, or the OS screen lock is active.

Scroll to div on page load while using pjax

So i'm using pjax so when a user clicks a link instead of loading a new page it will drag the content in. The content has a navigation bar at the top with the content underneath. Upon click the navigation bar it hides and displays certain contents.. that is working fine.
My problem. When the content is dragged in, I want the page to scroll straight to the navigation bar instead of sticking at the top of the page and the user needs to scroll to it. I've used:
$(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
});
To scroll to the div on the page load, and it works fine when I refresh the page. But doesn't work when pjax pulls the content into the page.
Any help i'd be really grateful, thank you!
You could do your animation in the pjax:success event. pjax:success is fired:
after replacing HTML content loaded from the server
Example
$(document).on('pjax:success', function() {
// Your scroll animation here.
})
See Pjax events for more details.
FIXED
Okay so I'm not sure if anyone has/had this problem but just for reference sake and if anyone comes across this problem heres what I did:
I looked at pjax documentation;
complete - When AJAX request has completed
success - When AJAX request has completed successfully
are two of the callbacks which can be used.
pjax.connect({
'success': function(e){
window.location.hash = $('#in-page-nav a').eq(0).attr('href');
// $(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
},
});
So my previous code which animate scroll to a div on page load copied that and placed this within the pjax.connent and used the success callback. This works perfectly. I kept the code to animate on page load as well so if a user bookmarks the link or sends it and uses the link directly. Then the page will load the same.
Thanks for the quick responses!

jQuery delay and javascript settimeout won't work with facebook button

I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).
I'm calling Socialite.load($('#social'));
and nextly want to show this div after some delay,
I tried:
$('#social').delay(4000).fadeIn(400);
and:
timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);
It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.
Except without timeout:
$('#social').fadeIn(400);
this works great in every browser.
Any idea, please?
Facebook button won't load if the container div is hidden.
Try this:
Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div.
Now You can show or hide it whenever you want.
timeoutID = setTimeout(function(){
$('#social').css("display", "none");
$('#social').css("opacity", "1.0");
$('#social').fadeIn(500)
}, 3000);
Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?
Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.

A really weird problem - site works in FF3.0 not in FF3.5

Can someone please look into this.
Click on showcase, then on the logo it should open a modal window with the logo, everything works fine in FF 3.0 but in FF 3.5 the tab switches from showcase to home after clicking the logo.
But wait it is more weirder, if you observe, the first time you click on the thumbnail it instantly changes to home, but if you go back to showcase and then click on the thumbnail the second time it wont change until you click close.
This is driving me nuts, please help!
You need to change some of your jQuery arround, I had a similar problem using jQuery inside of tabs. I was using the accordion plugin inside of a tab, you have to set it up to do this:
$("#tabs").tabs(
{
load: function(ui)
{
var edata = $('#accordion');
if(edata==undefined)
{
if(edata[0].clientHeight > 0)
{
edata.accordion(
{
autoHeight: false
});
}
}
},
show: function(ui)
{
if(edata==undefined)
{
var edata = $('#accordion');
edata.accordion(
{
autoHeight: true
});
$('#accordion').fadeTo(200,1);
}
}
});
I also used an additional fade with mode code inside of the page being loaded by the tabs function, to prevent a FOUC (Flash of unstyled content).
That is all inside of the document ready function. From what I gathered it won't run right because it's trying to run the code before the content finishes loading, and the connection is "missed", causing it to kind of half-work only one time.

Categories