I'm using shadowbox to open a page when a link is clicked and it does open the page when the link is clicked.
The problem is that "Loading ..." icon appears for 1 second then disappears whereas my page takes about 5 seconds to load.
How to keep the "loading ..." div displaying until the page is fully loaded and ready?
Many thanks,
Shadowbox.init({
onFinish: shadowboxFinish
});
then
function shadowboxFinish() {
$("#sb-loading").show();
$("#sb-player").load(function () {
$("#sb-loading").hide();
});
}
Related
I'm trying to click this href to download a file and it does that just fine, but the click also triggers an page to load. The page is blank and then after the page load times out, it breaks the test.
cy.get(the href).click();
Is there a way to click the href without triggering the page load?
I did this to download the file and it is working:
cy.get("a")
.should("have.attr", "href")
.then(href => {
cy.request(href).then(response => {
if (response && response.body) {
cy.writeFile("filePath", response.body);
}
});
});
There is an issue with javascript and links. Typically:
hit me
Clicking the link could do two things: load the current page (say index.html) with an empty anchor (index.html#), and execute the javascript, that does the download.
The solution would be to tell the browser not to follow the link.
function f() {
...
return false;
}
But if the function takes long, the browser might preload the page.
What went wrong I do not know, and on testing your hands are tied.
Alternative:
hit me
I did not do JavaScript the last two years, so do not take only my word for these troubles. I hope someone else comes up with a more founded answer, and a better solution.
I am using UberGallery for my site:
http://www.ubergallery.net/
Here is a sample of the page with Uber Gallery called directly in the HTML
http://www.goloyal.com/clients/dealers-mlm.php
If you click on a thumbnail it opens the popup div.
Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time:
/old-dealers-mlm.php
The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)
I am calling THIS div in my ajax
/div-dealers-mlm.php
Which also has the popups showing correctly.
I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?
THANKS!
The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:
$(document).ready(function(){
$(document).on("click", "a[rel='colorbox']", function(e){
e.preventDefault();
var url = this.href;
$.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});
});
});
This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.
So I've decided to use the jQuery Mobile framework to build my new mobile website. It has this feature of loading any local href link by ajax, which is great. But the new page that loads doesn't respond to any of the javascript. I've got a home page and page 2, both of which have the same html layout which a few changes in the content, I'll give an example.
I have made a navigation menu that slides in from the left and pushes the main content to the right. When I click on a page link, it loads the new page through ajax, but then on the new page, if I click the menu button, jQuery doesn't pick this up and so nothing happens (the menu doesnt slide out).
$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
console.log("1")
if ($( 'nav' ).hasClass('navTransform')) {
console.log("2")
$( 'nav' ).removeClass('navTransform');
$( 'article' ).removeClass('articleTransform');
}
else {
console.log("3")
$( 'nav' ).addClass('navTransform');
$( 'article' ).addClass('articleTransform');
}
});
});
This jQuery script is in a seperate .js file thats included in the header of both the pages. I know the script works normally because when i refresh the page, the menu trigger works. Is there a known work around for this?
The workaround for this is to use appropriate jQM handler pageinit() instead of jQuery ready handler.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
So, your code might look like this:
$(document).on("pageinit", "#page1", function(){
//Your init code for page 1 goes here
});
$(document).on("pageinit", "#page2", function(){
//Your init code for page 2 goes here
});
I'm using .changePage
$.mobile.changePage($nextPage.attr('href'), { transition: 'slide', showLoadMsg: false });
Which is working ok. The page changes and slides in. The only problem is that on the new page there is an image at the top of the page that is not shown during the animation and then "pops" in after the animation.
I thought that changePage would get the page via ajax and load the result into the dom and when thats done do the animation?
It seems like changePage is getting the page and inserting it into the dom but NOT waiting tell that "page" is done loading before doing the animation.
Any one have any thoughts as to how to wait tell the new page and its various assets (an image in this case) is done loading before animating?
In the end the only way I was able to solve this was by pre-loading the page using $.mobile.loadpage
Unfortunately I am using Joomla on localhost and cannot provide a webpage link.
I have a webpage that navigates through the use of smoothscrolling to anchor links.
The menu is fixed on the left and makes use of simple
top
section1
section2
section3
My problem occurs when i activate any jQuery accordion extension into any of the sections.
(i have downloaded and tried them all)
If i place the accordion in section 1, all page jumps except to section 2 & 3 do not work.
If i place the accordion in section 2, the page anchor to section 3 does not work.
I tried removing the return false; to no avail:
jQuery(document).ready( function () {
//Set default open/close settings
jQuery('.xac-container').hide(); //Hide/close all containers
jQuery('.xac-trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
jQuery('.xac-trigger').click(function(){
if( jQuery(this).next().is(':hidden') ) { //If immediate next container is closed...
jQuery('.xac-trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
jQuery(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
else{
jQuery('.xac-trigger').removeClass('active');
jQuery(this).next().slideUp();
}
// return false; //Prevent the browser jump to the link anchor
});
});
I saw some CSS tutorials to make the accordion but it create pagejumps for each accordion item that is clicked, and it adds unnecessarily to the browser history.
I hope I am being clear enough. It seemed like it would be a common problem but my lengthy search was fruitless.
Right answer from Lodder's comment.
I had loaded multiple jQuery libraries.
Be wary of copy-pasting random code.