Develop Reference

Migration from windows.showModalDialog to window.open

I need help ... I have a javascript code that was written for IE10 / IE11 now I have to implement some function in Google Chrome but in code I have the function windows.showModalDialog which as I know does not work on chrome currently, I need to migrate this code so that it works on window .open, could anyone help?
function ShowContactSearch() {
var windowWidth = 800, windowHeight = 600, centerWidth = (screen.availWidth - windowWidth) / 2, centerHeight = (screen.availHeight - windowHeight) / 2 - 20;
var result = window.open('/Contact.aspx', null, 'dialogWidth:1300px; dialogHeight:720px; center:1; resizable:1; status=1');
if (result != null) {
ContactChosen(result, '1');
}
function ContactChosen(contactId, cType) {
var ct = document.getElementById("<%=hfChosenContactId.ClientID %>");
if (contactId == null || contactId == "" || ct.value == "" || contactId.toLowerCase().indexOf(ct.value.toLowerCase()) < 0) {
ct.value = contactId;
document.getElementById("<%=hfCType.ClientID %>").value = cType;
document.getElementById("<%=bChosenContactId.ClientID %>").click();
}
return false;
}

Parallax Background Positioning Scrolling

I have just developed a new parallax scrolling script. I have it working just the way I want however there is just 1 issue with it currently.
I want the script to start scrolling the background image at the y coord that is specified in the css stylesheet by default. Instead my script seems to be resetting the CSS y coord to 0 before scrolling the image. This is obviously undesired behavior.
// Parallax scripting starts here
$.prototype.jpayParallax = function(userOptions){
var _api = {};
_api.utils = {};
_api.utils.isElementInViewport = function(el){
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
_api.utils.debounceScrollWheel = (function(){
$(function(){
var $window = $(window); //Window object
var scrollTime = 0.3; //Scroll time
var scrollDistance = 50; //Distance. Use smaller value for shorter scroll and greater value for longer scroll
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
autoKill: true,
overwrite: 5
});
});
});
})();
_api.selector = 'data-jpay-parallax';
_api.methods = {};
_api.methods.checkForVisibleParallaxEls = function(){
$('['+_api.selector+']').each(function(){
var instanceObject = $(this);
var origBgPos = $(this).css('backgroundPosition').split(' ');
var options = $(this).data('jpay-parallax');
console.log(origBgPos)
if (_api.utils.isElementInViewport(instanceObject)){
_api.methods.doParallax(instanceObject, options);
}
});
}
_api.methods.doParallax = function(instanceToManip, userOptions){
var direction = userOptions.settings.direction;
var orientation = userOptions.settings.orientation;
var speed = userOptions.settings.speed;
var type = userOptions.settings.type;
var speedInt;
var getSpeed = (function(){
if (speed){
switch(speed){
case 'slow':
speedInt = 10;
break;
case 'fast':
speedInt = 5;
break;
case 'faster':
speedInt = 1;
break;
default:
throw new TypeError('Unknown speed parameter added to module instructions');
}
}
})();
var distToTopInt = function(){
if (typeof speedInt === 'number'){
return $(window).scrollTop()/speedInt;
}
else {
return $(window).scrollTop();
}
}
var origPos = instanceToManip.css('backgroundPosition').split(' ');
var origPosX = parseInt(origPos[0]);
var origPosY = parseInt(origPos[1]);
var newPosY = origPosY += distToTopInt();
var newPosX = origPosX += distToTopInt();
if (orientation === 'vertical' && direction !== 'reverse'){
instanceToManip.css('backgroundPositionY', newPosX+'px');
}
else if (orientation === 'vertical' && direction === 'reverse'){
instanceToManip.css('backgroundPositionY', -newPosX+'px');
}
else if (orientation == 'horizontal' && direction !== 'reverse'){
instanceToManip.css('backgroundPositionX', newPosX+'px');
}
else if (orientation == 'horizontal' && direction === 'reverse'){
instanceToManip.css('backgroundPositionX', -newPosY+'px');
}
}
$(window).on('scroll', _api.methods.checkForVisibleParallaxEls)
};
$.fn.jpayParallax();
Here is the pen:
http://codepen.io/nicholasabrams/pen/OPxKXm/?editors=001
BONUS: Why does this script also mess with the css set backgroundSize property when the script never accesses it?
I am looking for advice in where in the script to cache the original CSS background image y coord value so that it becomes incremented from there instead of starting at 0px /0 for each instance. Thanks again for the help!

jQuery does not adjust scroll position

Basically, I want to have certain points on my website, that act like "magnets". If you are near one of these, the window should scroll to the top, similar to this jQuery plug-in : http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
The problem is, that the window does not scroll, even though the page is in range of a "magnet".
here is the jQuery:
$(document).ready( function() {
var magnets = [];
var range = 200;
var active = true;
$('.container').each(function(i,obj) {
magnets.push($(this).offset().top);
});
console.log(magnets);
var attract = function(where,time){
$('html, body').animate({
scrollTop: where
}, time);
active = false;
};
//checks the range of a magnet
var magnetic = function(what){
var top = $(window).scrollTop();
var min = top - range;
var max = top + range;
if( (min <= what) && (max >= what) ){
return true;
} else{
return false;
}
}
//returns, wether you are in range of a magnet from your magnets array or not
var inRange = function(){
var magnet = -1;
for(var i=0; i<magnets.length; i++){
if( magnetic(magnets[i]) == true){
magnet = i;
}
}
return magnet;
}
$(window).scroll(function() {
$('.counter').html("");
$('.counter').append("<p>"+inRange()+"</p>");
if(active == true && inRange != -1){
attract(magnets[inRange()]);
}
else if(active == false && inRange() == -1){
active = true;
}
else if(active == true && inRange() == -1){
console.log("fuck");
}
});
});
alternative codepen link: http://codepen.io/NiclasvanEyk/pen/jEMrZr

There is a mistake in your code:
if(active == true && inRange != -1){
attract(magnets[inRange()]);
}
Should be
if(active == true && inRange() != -1){
attract(magnets[inRange()]);
}

How to collect characters/word typed next to # or # in div

I have a div with its contenteditable property set to true. When user types '#' or '#', I would like to get whatever he/she type until spacebar is pressed. This way, I can bring suggestions from db according to the word he/she may type.
Please have a look at example below,
<div id="editableDiv" contenteditable="true">
I may tweet from #twitter in the near #future
<ul id="suggestUL"></ul>
</div>
As soon as user type '#' or '#', I must be able to collect whatever he/she may type (according to above example, after # t, tw, twi, twit, twitt, twitte and twitter. And after # f, fu... future). After 'twitter', user typed spacebar so, the word collection must stop and must start from # again.
Edited
Code to get the pixel where I could display suggestion list
function getCaretPixelPos($node) {
var offsetx = 0;
var offsety = 0;
var nodeLeft = 0,
nodeTop = 0;
if ($node) {
nodeLeft = $node.offsetLeft;
nodeTop = $node.offsetTop;
}
var pos = { left: 0, top: 0 };
if (document.selection) {
var range = document.selection.createRange();
pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
pos.top = range.offsetTop + offsety - nodeTop + 'px';
} else if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0).cloneRange();
try {
range.setStart(range.startContainer, range.startOffset - 1);
} catch (e) { }
var rect = range.getBoundingClientRect();
if (range.endOffset == 0 || range.toString() === '') {
// first char of line
if (range.startContainer == $node) {
// empty div
if (range.endOffset == 0) {
pos.top = '0px';
pos.left = '0px';
} else {
// firefox need this
var range2 = range.cloneRange();
range2.setStart(range2.startContainer, 0);
var rect2 = range2.getBoundingClientRect();
pos.left = rect2.left + offsetx - nodeLeft + 'px';
pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px';
}
} else {
pos.top = range.startContainer.offsetTop + 'px';
pos.left = range.startContainer.offsetLeft + 'px';
}
} else {
pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px';
pos.top = rect.top + offsety - nodeTop + 'px';
}
}
//console.log('pos left : ' + pos.left + ' pos top : ' + pos.top);
//console.log($('#suggestUL'));
$('#suggestUL').css('left', pos.left);
$('#suggestUL').css('top', pos.top);
//console.log('suggestUL left : ' + $('#suggestUL').css('left') + ' suggestUL top : ' + $('#suggestUL').css('top'));
};
This is how I am calling above function
var event = e || window.event;
var keyCode = event.keyCode || event.which;
if (keyCode == 35 || keyCode == 64)
getCaretPixelPos($('#editableDiv')[0]);
PS: I don't know why I have been fined by -2 reputation for Title. Anyway I edited title for more clarity. I am a learner, If I do any mistake in choosing title or asking question, kindly do suggest.
Thanks in advance.

You can use following script, along with this you need to use some UL/LI element combination which will show one suggestion per line, once data is fetched from the sever. You can use the jQuery Ajax to to fetch the data from sever and create the ul/li list dynamically.
var fetchData = false;
var suggestionChar = '';
$('#editableDiv').on('keypress',function(event){
var keyCode = event.which || event.keyCode.
var hashKey; // Set keyCode for #
var atKey; // Set keycode for #
var spaceKey //SpaceKey code
if(keyCode == hashKey || keyCode == atKey){
fetchData = true
suggestionChar = '';
return; //flag is set now look out for next key cod.
}
else if ( keyCode == spaceKey ){
fetchData = false;
suggestionChar = '';
}
if( fetchData){
var data = String.fromCharCode(keyCode);
suggestionChar = suggestionChar + data;
// use "suggestionChar" for fetching the data from server.
// fetch suggestions from Server.
// On success call back create the dynamic list of ul/li which will show the suggestion to user. You need to bind the user click event and/or keypress event for ul/li so that user can select the suggestion using mouse and keyboard along with 'Space' key.
}
})

I've made this stuff (textarea only) : http://jsfiddle.net/wared/sL2sZ/. I've tried to match your requirements but it's a bit more time-consuming to make things work using an editable DIV. I've decided to give up and to take inspiration from StackOverflow. You might pick up some ideas from my code in order to achieve your goal, hopefully.
More on getCaret() here : https://stackoverflow.com/a/263796/1636522.
Shirt-tail...
Currently, you are able to get the pixel position of the caret, while my code brings you a way to get the word around the current caret index. The missing link is a cross-browser solution to get the caret index from an editable DIV (this is where I gave up, too much work for me), indeed, the current version of getCaret() only accepts a textarea.
In other words, all you have to do is to modify the body of getCaret() in order to make it work with an editable DIV. Once you have the index, you have the word around it through getWord(), so, you can check if it's prefixed with "#", then display appropriate suggestions using getCaretPixelPos().
$('textarea').on('click keyup', function isAt() {
var idx = getCaret(this),
text = $(this).val(),
word = getWord(text, idx);
$('p').html([
'"', word, '" ', word.charAt(0) === '#'
? '<span style="color:blue">is prefixed</span>'
: '<span style="color:red">is not prefixed</span>'
].join(''));
}).focus();
function getWord(s, i) {
var r = /\s/g;
if (!i || r.test(s[i - 1])) return '';
while (i && !r.test(s[--i])) {}
r.lastIndex = i && ++i;
return s.slice(i, (
r.exec(s) || { index: s.length }
).index);
}

Try this:
var str = '';
$('#editableDiv').keyup(function(e){
if($(this).val() == '#' || $(this).val() == "#"){
if(e.keyCode !=32){
str += String.fromCharCode(e.keyCode);
}
}
});
alert(str);

I was finally able to solve the issue from all of your inputs.
Here is the code
Function called on KeyDown
var fetchSuggestions = false;
var suggestForString = '';
function fnShowSuggestionUL(e) {
var event = e || window.event;
var keyCode = event.keyCode || event.which;
// KeyCode = 35 -> #
// KeyCode = 64 -> #
// KeyCode = 32 -> space
// KeyCode = 13 -> Enter (Carriage Return)
if (keyCode == 35 || keyCode == 64) {
fetchSuggestions = true;
suggestForString = '';
$('#suggestUL').css('display', 'block');
fnPositionSuggestUL();
}
else if (keyCode == 32 || keyCode == 13) {
fetchSuggestions = false;
suggestForString = '';
$('#suggestUL').css('display', 'none');
return;
}
if (fetchSuggestions == false)
return;
var data = String.fromCharCode(keyCode);
suggestForString = suggestForString + data;
// TODO: bring suggestions from database and append them as list items to "suggestUL"
}
Position suggestUL at character '#' or '#'
function fnPositionSuggestUL() {
var $node = $('#editableDiv')[0]
var offsetx = 0;
var offsety = 0;
var nodeLeft = 0,
nodeTop = 0;
if ($node) {
nodeLeft = $node.offsetLeft;
nodeTop = $node.offsetTop;
}
var pos = { left: 0, top: 0 };
if (document.selection) {
var range = document.selection.createRange();
pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
pos.top = range.offsetTop + offsety - nodeTop + 'px';
} else if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0).cloneRange();
try {
range.setStart(range.startContainer, range.startOffset - 1);
} catch (e) { }
var rect = range.getBoundingClientRect();
if (range.endOffset == 0 || range.toString() === '') {
// first char of line
if (range.startContainer == $node) {
// empty div
if (range.endOffset == 0) {
pos.top = '0';
pos.left = '0';
} else {
// firefox need this
var range2 = range.cloneRange();
range2.setStart(range2.startContainer, 0);
var rect2 = range2.getBoundingClientRect();
pos.left = rect2.left + offsetx - nodeLeft;
pos.top = rect2.top + rect2.height + offsety - nodeTop;
}
} else {
pos.top = range.startContainer.offsetTop;
pos.left = range.startContainer.offsetLeft;
}
} else {
pos.left = rect.left + rect.width + offsetx - nodeLeft;
pos.top = rect.top + offsety - nodeTop;
}
}
//Create suggestUL if does not exist or destroyed
fnCreateSuggestUL();
$('#suggestUL').css('left', pos.left + 'px').css('top', (pos.top + 18)+'px');
};
I would like to thank one and all who answered/commented here.
Please optimize above code as much as possible so that one who in need gets perfect code.
PS: Works perfect in Chrome and firefox. suggestUL is not properly positioning in IE.
Happy Coding!!

retaining select table value after refresh

Basically the code below works just as it should: it refreshes the page base on value of 'rate' and maintains page scroll position after page refresh.
What I am trying to do is add a select table to adjust the rate of refresh, or in other words the value of 'rate'. with my little experience in js I was able to add the select table and set the rate by the selected value, problem is that when the page refreshes the value in the select table defaults to first value in the table, in my case '5'. Second problem is that when i change the value in the table, page scrolls to the top each time a new value is selected.
var rate = 10; // refresh rate
function refresh() {
document.cookie = 'scrollTop=' + filterScrollTop();
document.cookie = 'scrollLeft=' + filterScrollLeft();
document.location.reload(true);
}
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if (((!start) && (name != document.cookie.substring(0, name.length))) || start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
function deleteCookie(name) {
document.cookie = name + "=" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}
function setupRefresh() {
var scrollTop = getCookie("scrollTop");
var scrollLeft = getCookie("scrollLeft");
if (!isNaN(scrollTop)) {
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
}
if (!isNaN(scrollLeft)) {
document.body.scrollLeft = scrollLeft;
document.documentElement.scrollLeft = scrollLeft;
}
deleteCookie("scrollTop");
deleteCookie("scrollLeft");
setTimeout("refresh()", rate * 1000);
}
function filterResults(win, docEl, body) {
var result = win ? win : 0;
if (docEl && (!result || (result > docEl))) result = docEl;
return body && (!result || (result > body)) ? body : result;
}
// Setting the cookie for vertical position
function filterScrollTop() {
var win = window.pageYOffset ? window.pageYOffset : 0;
var docEl = document.documentElement ? document.documentElement.scrollTop : 0;
var body = document.body ? document.body.scrollTop : 0;
return filterResults(win, docEl, body);
}
// Setting the cookie for horizontal position
function filterScrollLeft() {
var win = window.pageXOffset ? window.pageXOffset : 0;
var docEl = document.documentElement ? document.documentElement.scrollLeft : 0;
var body = document.body ? document.body.scrollLeft : 0;
return filterResults(win, docEl, body);
}​
I did not include my attempt at it but I can included it if need be, basically I am just looking for the right way to go about it,
thanks

You could use one of the HTML5 specs for client side storage for this.