Record the html changes when the screen load? - html

I'm using chrome, is there a way to record the html behavior/changes whenever I load a page, or whenever I click a button, so that I can analyse the loading pattern of the html?
I need to do this is because I'm using a scrollbar plugin, and whenever the page load, if the plugin is currently loading there will be a class name attach to the html tag (e.g. scrollLoad). Once the plugin is loaded, the class will be removed.
The problem is I need to get the right class name so that I can target it inside my css..., I'm wondering is there a way to preview the loading of a html page.

you can add a script, that is triggered on each page load.
With jQuery you could check if a page is loaded completely. You could go the other way arround and add the loading class by default and remove it, as soon as the loading is completed
$(function(){
console.log("DOM ready");
$('#element').removeClass('scrollLoad');
});

Maybe you can use the on() with the 'change' attribute?
http://api.jquery.com/on/

Related

Is there any way we can directly connect to the function without wanting to click the button i.e., when ever the page loads the function gets called

here is the Html button i want to disable the click function, reducing the extra step so that the function gets called whenever the page gets loded in the browser.
i want to scrape the data(info that comes after clicking the button) from this html file.
OR
Suggest me if we can dirctly call this JS function In Python
I tried Js2Py but cannot translate the Js File.
i have not tried anything as im not fimailar with html.
i'm supposed to modify the code according to my preferences and im a novoice in html.
i searched in google but couldnt find any relaiable source.
the answer is onload function on the Body tag of html instead for onclick it took a while to figure out.
before:
After:
.
.

How to append the Smooch web-messenger-container element to a custom element

I want to be able to append the #web-messenger-container element to an element instead of the document.body.
I've tried using Smooch.render without setting the embedded attribute to true and it works fine on some browsers, but on others, the smooch CDN calls are cancelled. It is related with this issue: https://github.com/smooch/smooch-web/issues/666
I don't want to use embedded mode, I just want to move the Smooch button to another container. I've tried moving the iframe element with JS but it causes the iframe to reload and the Smooch window disappears.
I would say if you want to append #web-messenger-container to a different element, embedded mode is the way to do that. Without embedded mode Smooch's host JS will call render() to append the iframe on it's own so trying to call it second time will give you nothing but grief I think.
If all you want is to render your own open/close button, that's pretty straightforward. You can specify a custom button width and height of '0', and trigger Smooch.open() / Smooch.close() however you like.
For example:
https://jsfiddle.net/alavers/ve5uhjnd/

Global popup in jqm

I want to make a global popup, so I can access it from different pages. I was reading about this and the solution was to add it directly to body tag in index.html tag, so I did that and now I can open it from my other page (page in which html this popup is not added) using this code
$("#about-create-new-game-popup" ).enhanceWithin().popup();
setTimeout(function(){
$('#about-create-new-game-popup').popup('open');
}, 2000);
The problem is this popup is shown during the application load as it is added to index.html page. Can someone please tell me what am I doing wrong here. Thanks.
I have had this problem before.
What you have to do is define it as a popup before the page is loaded.
A popup will only show when you open it, but in the beginning when the page is loaded it's just another div that's why it's shown. Define it as a popup as soon as possible and it should be hidden.
simply add this code in the beginning:
$("#about-create-new-game-popup" ).popup();

loading the appended data by ajax

Hello all i want to ask how to reload the appended data ..
Actually i am having a page which goes infinite scrolling ..
and i need to reload the appending elements when clicked on a particular element ..
the loading is fine for the elements that are not appending (previously present when the page loads) .
loading by ajax is working fine (checked)
just wana ask how to use load method of ajax for the divs in the appended data..
$("#abc").load("load.php #abc");
I think you have a problem with your events. If you are using the .click or .bind event handler of jQuery, the new added elements will not be targeted. Try $(".clickable").live("click", function()); to make also the newly added elements clickable.
As jQuery documentation says:
http://api.jquery.com/live/
Attach an event handler for all elements which match the current selector, now and in the future.

Detect element I click in UIWebView

How I can detect element I click in UIWebView. I have simple html, but I want differ elements, so I want get for example "alt" from the element I click.
In points:
User click one of images loaded in WebView.
It calls function that has info which about clicked element.
Is it possible?
You should add some bindings between your webview and your Objective-C. You can do this using javascript.
You pretty much inject javascript into the webview so you will get a event when some HTML element is touched. Then your javascript will communicate to Objective C, to trigger some action.
This is technique is described pretty well here: http://blog.techno-barje.fr/post/2010/10/06/UIWebView-secrets-part3-How-to-properly-call-ObjectiveC-from-Javascript/