We Keep Coding

Changing an object properties then calling a function inside a custom function with javascript

Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.

Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.

How to initialise a lightbox

I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl

This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);

Browser State - Javascript/JQuery

I am trying to find a way to detect when my browser is loading and show a loading icon.
Also, is this the correct way to go about it or is there a 'standard' practice to accomplish something like that?
Edit: This functionality will be used for one of my sites during database transactions / table building.

I like the JQuery loadmask plugin for this. Apply a mask over the element that is waiting to load some stuff (say via AJAX) on page load:
$('#containerid').mask("<img src='loadinganim.gif'/> Waiting...");
Then when everything is loaded and the user can interact with the element, remove the mask overlay (typically in a callback for an AJAX call after successful completion):
$('#containerid').unmask();

I took a slightly different approach to this problem and this is what I came up with.
Code to reset my loading icon when the page is ready
$(document ).ready(function() {
$('#test').hide();
});
The function that shows the loading icon
$('.loadState').click(function () {
$('#test').show();
});
HTML Code
<div id="test">
<h3> <i class='icon-spinner icon-spin icon-large'></i> Compiling Requested Data </h3>
</div>
And I'm calling the show function my adding this class='loadState' on my submit button.
Edit: Cleaned the mixing between js and jQuery code.

Try an onPage load event listener. Im kind of new to js so I may be off a little.

How to check progress of pageload?

How can I check the window load progress?
I know there is a jquery event for when the page fully loads but I also want to be able to track the percentage of its load progress.
Something like (just pseudocode)
$(window).load_change(function(){
set_progress_bar(window.load_percentage);
});
and this will get the progress of the page load and change the progress bar accordingly.
Is this possible?

To see how much of the DOM is loaded, you can strategically check for the existence elements on the page. The following post is a good reference for doing so, but simply having an array of the IDs of the elements you want to check and then using setTimeout() to call an update function every 200ms or something should allow you to see what has been loaded and update your progress bar accordingly.
How to check if element exists in the visible DOM?

As Hanlet mentioned, there are some commom scenarios that this can be used:
You have a website and your page has a lot of images;
You have a web app and your page has a lot of processes or ajax requests; or
Both.
For number 1, I've seen people using image pre-loaders with two major benefits, first is that when page loads, all the images will just be there, and second is that images are usually the heavier part of a page load, so a basic percentage calculation on these would almost illustrate it. A simple javascript image pre-loader algorithm would loop through every img tag that are on the document and create an Image object, setting its src atribute before inserting it on the page.
For number 2, I would make a observer-like Progress object like this:
var Progress = {
processes:{},
// Adds a process to keep track on
addProcess:function(name){
this.processes[name] = false; // false for non-completed
},
// Sets a process as completed, calls redrawProgress
setCompleted:function(name){
this.processes[name] = true;
this.redrawProgress();
},
redrawProgress:function(){ /* Updates the progress bar */ }
};
And then, inside each process, you should register it in the progress bar with the Progress.addProcess('myprocessname'); and call Progress.setCompleted('myprocessname'); when it finishes.
For number 3, I would try some way to know all the page's requests (including images, ajax data requests, external javascript calls, and the other processes), and mix it with the Progress object solution in number 2, but I never tried this one.

Preloader does not preload and loads the page a second time

I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.

I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...

Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>