We Keep Coding

How can i improve my personnal jQuery Dialog plugin

I've been coding my own dialog system for exercising and to be able to customize it as i want. Here is what i've done.
$(function(){
$.fn.window = function(attr){
var $self = this;
if(!attr)
attr = {};
$.extend({
autoOpen:false
}, attr);
/**
* Create the window by updating the current jQuery block
* And adding the required classes
*/
this.create= function(){
// Already created
if($self.hasClass('window-window'))
return;
$self.addClass('window-window');
// Creating the header and appending the title
var $windowHeader = $('<div class="window-header"></div>');
var $title = $self.attr('title');
$windowHeader.html($title);
$windowHeader.append('<div class="loading-item loading-item-footer round-loading25" ' +
'data-loading-item="window" style="display:none"></div>');
// Wrapping content in a window-content class
// So the window has the proper format
$self.children().wrapAll('<div class="window-content"></div>');
$self.prepend($windowHeader);
};
/**
* Open the window in a blackish div
* With the events to close it
*/
this.open = function(){
// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');
// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());
$self.detach().appendTo($backgroundDiv);
// The window is hidden by default, showing it
$self.show();
$('html').prepend($backgroundDiv);
// Handling closing the window
$backgroundDiv.click(function(e){
var $target = $(e.target);
if(!$target.hasClass('window-background'))
return;
$self.hide();
$self.detach().appendTo('html');
$backgroundDiv.remove();
});
};
this.create();
if(attr.autoOpen){
this.open();
}
};
});
For now i have doubt about the fact that i'm putting the window out of his native block, in the end of the html document. I wish to put it back to his position but i have no idea yet how to do it. Any idea ?

First of all, you create a jQuery function, but you do it on document.ready $(...). You should just create it, otherwise the function will not be available for other code until document has loaded.
Then you want to insert the window in the same place as the original element, for that you have insertBefore and insertAfter in jQuery. You use prepend, but that inserts it as the first element of $self.
I would urge you to look at the method chaining of jQuery which may make your code much more readable. Instead of:
// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');
// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());
use
// Creating the background
var $backgroundDiv = $('<div></div>')
.addClass('window-background')
// Making it take the size of the page
.css({
height:$(window).height(),
width:$(window).width()
});
for example.
You also use CSS classes to store information, like if something had been clicked or not. That may be OK, but consider that you may want change the CSS classes and suddenly the functionality of your code is strongly linked to the design. Maybe using .data() instead would be better, even if you add more code to also style your elements.
You use .wrap to take the original content and put it in the window. That may be what you wanted all along, but also take a look at https://api.jquery.com/clone/ which allows you to get the elements without removing them from their original source. Again, only if it works better for you.
As a last advice, use http://jsfiddle.net to share your working code, so other people may not only comment on it, but see it in action as well.

Adding a class while looping to an array

I have a list composed by some divs, all of them have a info link with the class .lnkInfo. When clicked it should trigger a function that adds the class show to another div (like some sort of PopUp) so it is visible and when clicked again it should hide it.
I am quite certain this must be a very basic thing and most likely I will get some scoffs...but hey! Once I have this down that's one thing less I will ever have to ask again. Anyway I am starting to leave the safety of html and css to start learning JS, PHP and the like and I came to a bit of a problem.
When testing it before it was working, that was until I added another div, it only worked with the first one, reading a bit and with some suggestion I realized it must be something related to a array, the problem is that I am not quite certain of the syntax for accomplishing what I am visualizing.
Any help would be deeply appreciated.
This is my JS code and below I will attack a Fiddle of how the html looks just in case.
var infoLab = document.getElementsByClassName('lnkInfo'),
closeInfo = document.getElementById('btnCerrar');
infoLab.addEventListener('click', function () {
for (var i = 0 ; i < infoLab.length; i++) {
var links = infoLab[i];
displayPopUp('popUpCorrecto1', 'infoLab[i]');
};
});
function displayPopUp(pIdDiv, infoLab[i]){
var display = document.getElementById(pIdDiv),
for (var i = 0 ; i < infoLab.length; i++) {
infoLab[i]
newClass ='';
newClass = display.className.replace('hide','');
display.className = newClass + ' show';
};
}
JSFiddle.
Thanks a lot in advance and sorry for any facepalms!
EDIT:
This a jQuery function (in another file) that I need to call using the link because it fetches the data that will be inside the div, thus why I wanted to just add a hide/show.
$(".lnkInfo").click(function() {
var id = $('#txtId').val();
var request = $.ajax({
url: "includes/functionsLabs.php",
type: "post",
data: {
'call': 'displayInfoLabs',
'pId':id},
dataType: 'html',
success: function(response){
$('#info').html(response);
}
});
});
EDIT 2:
To a future reader of this question,
If you managed to find this answer throughout space and time, know that this is how the solution ended being, may it help you in your quest to stop being a noob.
SOLUTION

Here is a rudimentary working example of how to make a popup appear after clicking on a specific element given your current code. Note that I added an id to your link element.
// Select the element.
var infoLink1 = document.getElementById('infoLink1');
// Add an event listener to that element.
infoLink1.addEventListener('click', function () {
displayPopUp('popUpCorrecto1');
});
// Display a the popup by removing it's default "hide"
// class and adding a "show" class.
function displayPopUp(pIdDiv) {
var display = document.getElementById(pIdDiv);
var newClass = display.className.replace('hide', '');
display.className = newClass + ' show';
}
Fiddle.
There are various ways to generalize this to work for all links/popups. You could add a data-link-number=1, data-link-number=2, etc to each link element (more on data-). Select an element containing all of your links. Bind to that element an event listener that, when clicked, detects the link element that was clicked (see event delegation / "bubbling"). You can determine which link was clicked based on the value of your data-link-number attribute. Then show the appropriate popup.
You may also want to use jQuery for this. Changing an element's class by setting it's className property makes for brittle DOM code. There is an addClass and a removeClass method available. jQuery's events also work cross-browser; element.addEventListener() will not work in IE8 which still has a significant market share.

Reload DOM after changes

I have a small problem with SVG in an embed tag. I update the source of an embed tag with an SVG file path with javascript. Then I have to update the viewbox attribute to resize correctly the SVG.
The problem is that the SVG tag is not available because the javascript execution is too fast.
An example :
//Creation and insertion by JQuery
var EmbedTag = $("<embed id='zoomSVG' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);
//This doesn't work : svgDoc is null
//SVG document recovery
var svgDoc = document.getElementById('zoomSVG').getSVGDocument();
This work :
setTimeout(function(){
//SVG document recovery
var svgDoc = document.getElementById('zoomSVG').getSVGDocument();
},100);
I would like to not use the setTimeout function because the timeout value depend on hardware. Sometimes 100 ms works fine but I have to find an universal solution.
After embed tag insertion, could I reload the DOM by javascript ? Is an existing event for embed tag when the load of the embedded object is done ?
Thanks for your help

Use the »onload« event of the tag to delay your function until it is loaded, than the should be available.

Call the code from the onload of the embed e.g.
var EmbedTag = $("<embed id='zoomSVG' onload='init()' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);
and then implement your code in init (or whatever you want to call it)

First, you create the element and then you trying to find it again in the DOM.
Second, javascript cant block until something happen, use callbacks insteed.
Something like that:
var svgDoc = false;
// Create an element
var EmbedTag = $("<embed id='zoomSVG' type='image/svg+xml' width='500px' height='500px' />");
// Append it to the dom
EmbedTag.appendTo(zoomGalleryHisto);
// Load the svg file
$.get('file.svg', function() {
// And then add it to the created element
EmbedTag.attr('src', 'file.svg');
svgDoc = EmbedTag.getSVGDocument();
});

change the position of div tag dyanmically with javascript

I have an ASP button in a div to the right side of a page. I want to change the position to the left in the same row dynamically with onchange event of a dropdown.
I did this way:
document.getElementById('divButtonGo').style.Paddingleft="80px"
How do I do this with Javascript?

The example you have provided already is javascript. If you want to change what triggers the code to run, change where you place it.
from an onchange event, into a function in a script tag that is called by something else.
example
<input type="button" onclick="movediv()" />
<script>
function movediv(){
document.getElementById('divButtonGo').style.Paddingleft="80px"
}
</script>

There's several things wrong here. In order of increasing importance:
You're missing the closing slash from your i tag.
I don't see a "divButtonGo" in your html. If it's not there at all, obviously it won't work. If it is, include it in your code snippet.
I'm pretty sure to set the style you're going to need elem.style.paddingLeft, not elem.style.Paddingleft
Your script isn't wrapped inside <script> tags. All Javascript has to be wrapped in these tags, and, in order for that code to operate sucessfully, it's going to have to be placed after the "divButtonGo", or you'll have to wire up an onload event, like window.onload = function() { /* Bombs away! */ };
Your final result should look something like...
<div id="divButtonGo">
My Awesome Content
</div>
<script type="text/javascript">
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
</script>
Also, to note, padding wont' exactly change the position of the div, only the position of the content inside. If you want to change the position of the div, use margin-left (in JS, element.style.marginLeft, i believe)
EDIT:
I forgot you wanted it in the onchange event of a dropdown; so you'd do somethign like:
var dropdown = document.getElementById("MyDropDown");
dropdown.onchange = function() {
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
};

goto HTML document location dynamically

My page adds # to the html programatically and have this in the tag
function InsertTag(){
//Add <a name="spot"></a> to the middle of this document
}
window.addEventListener('load', InsertTag, false);
my question is how can I make the document then jump to #spot?

Here's a suggestion: use id's instead. If you have:
<div id="something">
Then page.html#something will take you straight to that div. It doesn't have to be a div, it can be used on any element. If you can manipulate the DOM to add that anchor, I am pretty sure you'll be able to do this.
Now... To get there, you can use:
// this approach should work with anchors too
window.location.hash = 'something';
// or scroll silently to position
var node = document.getElementById('something');
window.scroll(0, node.offsetTop);
See it in action here: http://ablazex.com/demos/jump.html
There are subtle differences between the methods. Eg: The first one will cause the location on the address bar to be updated, the second one won't.
If you want it to look nicer you can use a jQuery plugin, like ScrollTo.

Try
window.location = currentUrl+'#spot';
where currentUrl is a variable having the address of the current url

You can try this.
var el = document.getElementById('spot');
var eloffsetTop = el.offsetTop;
window.scroll(0,eloffsetTop);