We Keep Coding

Navigation links do not load correctly

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);

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);
});

Javascript not always running

I have a div set to display:none on pageload, and a button to open that div on click with this script.
<script>
$(document).ready(function(){
$('.buttonmain').click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
It works sometimes, but not every time.
I tried to put the script on the top, on the main page etc. Its all the same.
Its build on Bootstrap.
Any ideas someone?
Go to my site www.pb-studios.com, and click FIRMENKUNDE or PRIVATKUNDEN, doesnt matter. there is a button there under the intro text that says "Mehr über Uns". thats the button that is suppose to show/hide the div.

Try putting the script in the body, at the very bottom.

Twitter Bootstrap Modal scrolling the page up on show

Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.
Here is a demonstration page:
http://www.turizmburosu.com/test2.aspx
The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).
I am use the following function to trigger the display of the Modal:
function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}
and the links are of the form:
Test Link ###
I am seeing this behavior in Chrome 22.0.1229.94 m.
Any suggestions/ideas as to why this is happening and how to prevent it?
Additional Example
This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.
Once on the page, simply override the existing data-api to use the JavaScript api instead:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.
Again, this is using Chrome.

Fixed (10/29/2012)
This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.
(original answer)
This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that
the browser supports CSS transitions (and you are using bootstrap-transition.js);
the modal has the class fade; and
when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).
It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.
More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.
A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.
Here is a demo using the patch bootstrap-modal.js:
JSFiddle

Same problem. It is caused by "#" in and the anchor is doing to scroll.
I fixed that by deleting the anchor tag and place this:
<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

I had a similar issue on my site, which was caused by another jquery plugin (sidr).
When the sidebar was present and I opened a modal window, I would be sent back to top.
In jquery.sidr.js I changed line 102-106 from:
// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
To:
// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
If you are using this plugin along with twitter bootstrap's modal, maybe this can help you.

I had the same problem because of these lines of CSS which were thought to permantly display scrollbars in the browser. Removing the two lines solved the problem:
html,
body {
min-height: 100%;
height: 101%;
}

to bring the focus back on close
var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
var animationTime=1;
$('html, body').animate({
scrollTop: (triggerOffset)
}, animationTime);
});

I had been having this issue for so long but my solution was to remove href from the anchor tag
i.e.
<a onclick="test();return false;">Test Link ###</a>
I get no jump now
Hope this helps someone in the future

Reload Animation with JavaScript/Tabs/Iframe

I´m having a problem. I make 4 tabs using jquery, and on each tab, i open an iframe, calling another html, that have a javascript code with css3 animation.
But, there is my problem. Once you load the page, the first tab is already "open", so, that animation starts rolling. But, when i change tabs or come back to the first one, all the animations are already done...
I need the animations, to start ONLY when i open the tab, and, start over again when i come back to another tab that has already been seen.
Since the css3 code and js are too big, there´s the link to my working(problem) tabs.
http://efdutra.com/testes/abas_final.html
ps: only works on SAFARI (i´m made it that way, i just need to get it working on safari).
Thanks!!
Update
Ok, now this just start when i click on the Tab, i add this on my parent code:
function divStart1(){
document.getElementById('teste1').contentWindow.start();
};
function divStart2(){
document.getElementById('teste2').contentWindow.start();
};
function divStart3(){
document.getElementById('teste3').contentWindow.start();
};
function divStart4(){
document.getElementById('teste4').contentWindow.start();
};
And in the html i add this:
<img src="img/001_a.png">
<img src="img/002_b.png">
<img src="img/003_b.png">
<img src="img/004_b.png">
But, when i come back to a tab that have already been opened, it dont do the animation again.... what can i change now??
The new code url:
http://www.efdutra.com/testes/new/abas_final.html
Thanks!

If you move your animation script into a function, you can call that from parent window.
/* This is in your child page */
function Animate(){
// Do animation
// To restart css animation I assume you have to remove a class and add it again?
}
$(document).ready(function(){
Animate();
}
Then you can bind an event when the user changes tabs on the parent window
function OnTabSelected(){
document.getElementById('ID of iframe here').contentWindow.Animate();
}
you will need to add id's to the iframes so you can select them using this method.