We Keep Coding

Ubuntu HTML5 App: Change Tab on JS command

First Question here, too! Yay! Just moved this from AskUbuntu.
I am just about to finish a little private project for gaining some experience where i try to change the app layout so it works as a normal website (on Jimdo, so it was quite of a challenge first) without much JavaScript required but is fully functional on mobile view.
Since Jimdo serves naturally only the actual site, I had to implement an
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
redirect into the __doSelectTab() function in tabs.js . (In js I took the values from the jimdo menu string to build the TABS menu with this link attribute)
Now everything works fine exept at page load the first tab is selected. I got it to set the .active and .inactive classes right easily, but it is not shifted to the left.
So my next idea is to let it initialize as always and then send a command to change to the current tab.
Do you have any idea how to manage this? I couldn't because of the this.thisandthat element I apparently don't really understand...
Most of you answering have the toolkit and the whole code, but I am listing the select function part of the tabs.js:
__doSelectTab: function(tabElement, forcedSelection) {
if ( ! tabElement)
return;
if (tabElement.getAttribute("data-role") !== 'tabitem')
return;
if (forcedSelection ||
(Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) {
window.clearTimeout(t2);
activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
offsetX = this.offsetLeft;
this._tabs.style['-webkit-transition-duration'] = '.3s';
this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
this.__updateActiveTab(tabElement, activeTab);
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
e.classList.remove('inactive');
});
var targetPageId = tabElement.getAttribute('data-page');
this.activate(targetPageId);
this.__dispatchTabChangedEvent(targetPageId);
} else {
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
el.classList.toggle('inactive');
});
var self = this;
t2 = window.setTimeout(function () {
var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)');
[].forEach.call(nonActiveTabs, function (el) {
el.classList.toggle('inactive');
});
}, 3000);
}
},
...and my app.js hasn't anything special:
var UI = new UbuntuUI();
document.addEventListener('deviceready', function() { console.log('device ready') }, true);
$(document).ready(function () {
recreate_jimdo_nav();
UI.init();
});

So meanwhile found a simple workaround, however I'd still like to know if there is another way. Eventually I noticed the __doSelectTab() function is the one that executes the click, so it does nothing but to show the other tab names when they are hidden first. so I added the global value
var jnavinitialized = false;
at the beginning of the tabs.js and run
var t = this;
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 0);
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 1);
setTimeout(function(){jnavinitialized = true;}, 10);
at the top of the __setupInitialTabVisibility() function. Then I changed the location.href command to
if (activeTab.getAttribute('jimdo-target') != null && jnavinitialized)
location.href = activeTab.getAttribute('jimdo-target');
And it works. But originally I searched for a way to change the tab on command, not to run the command for selecting twice. So if you know a better or cleaner way, you are welcome!

click event delay and pre loader animation

I want to combine two techniques in page transition. first, when user click a link , the click event should be delayed about 200ms and displaying css animation (ex: fading), after that the new page will be loaded normally. Then, for visitors with slow internet connection, they will be presented with pre-loader right after the first animation. The problem is, it seems both techniques doesn't fit each others. Any advice guys?
PS: Actually I inspired by these guys website : http://rsq.com/
here's my code:
$body = $("body");
$(document).on({
ajaxStart: function () {
$body.addClass("loading"); //for slow connection, visitors with faster connection may not notice this...
},
ajaxStop: function () {
$body.removeClass("loading");
}
});
$('a').on("click", function () {
if ($(this).attr('href') != '#') {
var href = $(this).attr('href');
$('#wrapper').addClass('fade_animation'); //animation right before new page request
setTimeout(function () {
window.location = href
}, 200);
return false;
$.post($(this).attr('href'));
}
});

I think this is enough:
Instead of:
return false;
$.post($(this).attr('href'));
do this
$.post($(this).attr('href'));
return false;
So the $.post gets executed.

I think i found a solution , but don't know if it's a good way, but it works.
$('a').on("click", function(){
if($(this).attr('href') != '#')
{
var href = $(this).attr('href');
$('#wrapper, footer').addClass('fading animation');
setTimeout(function() {
// window.location = href
$.post(window.location = href) // this line works :)
}, 200);
return false;
// $.post($(this).attr('href'));
}
});

scroll to bottom of the div doesn't work

function ereja(){
var newscrollHeight2 = $("#messages")[0].scrollHeight;
return newscrollHeight2;
}
var newscrollHeight = ereja();
var oldscrollHeight = $("#messages")[0].scrollHeight;
function merrmesazhet(){
$('#messages').load(
"nxirr_mesazhet.php?room=<?php echo urlencode($dhoma24); ?>"
);
setTimeout(ereja, 1000);
if( newscrollHeight != oldscrollHeight ){
$("#messages").scrollTop($("#messages")[0].scrollHeight);
}
}
What's wrong with this code? Why it doesn't work? I am trying to scroll to bottom of the div when a user writtes a new message. Any idea?

Assuming you are actually calling merrmesazhet() and that you are testing on IE>=8 as lower versions don't support scrollHeight. Then your main issue is the use of setTimeout which is essentially calling ereja every second and doing nothing.
Indeed you do not even need the JS timer - you are using jQuery which supports a callback in it's load function (which executes once on a successful load rather than repeatedly). Your if-statement in it's current form will always evaluate to false as it isn't within the function executed on the timer anyway.
Something like this may work for you:
var oldscrollHeight = $("#messages")[0].scrollHeight;
function merrmesazhet(){
$('#messages').load(
'nxirr_mesazhet.php?room=<?php echo urlencode($dhoma24); ?>',
function(){
var newscrollHeight = $("#messages")[0].scrollHeight;
if( newscrollHeight != oldscrollHeight ){
$("#messages").scrollTop($("#messages")[0].scrollHeight);
}
}
);
}
jsFiddle

Javascript Queue commands

I have a Tab widget set up on my website using JQuery 1.7.2 and JQuery UI 1.10.3.
I have written a JavaScript that parses the hash part of a URL in order that I can open a tab, load content into a div and scroll to a named anchor.
I can get the tab to open and content to load fine, however, scrolling to the anchor is proving to be a real pain.
I can get it to work if I trigger an alert before the scroll to the anchor (forcing you to click 'OK', but if I disable the alert (which I want to), it doesn't work.
I am guessing that it has something to do with waiting for the functions to finish processing first? But I'm quite inexperienced with JavaScript so would appreciate any help anyone could could give.
URL example: http://www.mysite.com/abc.html#tab=tab-3&#srv=includes/xyz&#anc=myanchor
My JavaScript is as follows:
$(document).ready(function () {
var parts = location.hash;
parts = parts.split('&'); // Hash parts of URL.
for (var i = 0; i < parts.length; i++) // Loop to separate variables.
{
if (parts[i].substr(1, 4).toUpperCase() == "TAB=") {
var tab = parts[i].substr(5).split("-").pop() - 1
} // Tab no. part from tab name.
if (parts[i].substr(1, 4).toUpperCase() == "SRV=") {
var srv = parts[i].substr(5)
} // Path to content to load.
if (parts[i].substr(1, 4).toUpperCase() == "ANC=") {
var anc = parts[i].substr(5)
} // Named anchor to locate.
};
// Tab found in URL so we'll check it exists and open it.
if (tab == -1) // Tab not found?
{
tab = 0 // Default to 1st tab if not.
};
$("#tabs").tabs("option", "active", tab); // Select the tab.
// Load content if provided in URL.
var href = $('.list li a').each(function () {
var href = $(this).attr('href');
if (srv == href.substr(0, href.length - 5)) {
var toLoad = srv + '.html .maint_content';
$('.maint_content').load(toLoad)
}
});
// Load content when selected from list.
$('.list li a').click(function () {
var toLoad = $(this).attr('href') + ' .maint_content';
$('.maint_content').fadeOut('normal', loadContent);
$('#load').remove();
$('.maint_content').fadeIn('normal', loadContent);
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);
function loadContent() {
$('.maint_content').load(toLoad, '', showNewContent());
}
function showNewContent() {
$('.maint_content').show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
// Scroll to locate anchor.
//alert(anc);
$('html, body').animate({
'scrollTop': $('#' + anc).offset().top
}, 1000);
});
Thanks

I'm assuming the anchor you want to jump to is in the loaded content?
If so, just add a callback to the ajax call and do the jump there:
$('.maint_content').load(toLoad,'',showNewContent()).done(function () {
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
});

You are ajaxing the content of the div. This means it is loading asynchronously. The animate function is thus called before the loading of the content has finished, and the anchor you are looking for is not yet there.
In order to fire the animation when the loading is complete, you can pass a function to .load()
$('.maint_content').load(toLoad,'',showNewContent());
so you allready got that: showNewContent is fired when the loading finishes.
So all you have to do is move your animation line to the end of that function.
function showNewContent()
{
$('.maint_content').show('normal',hideLoader());
$('html, body').animate({'scrollTop': $('#'+anc).offset().top}, 1000);
}

Rookie: window.onresize needed

I'm a rookie when it comes to programming, so I really need your help here. I need to change some code to fulfil my needs and I can't seem to do it in a proper way. What I need right now, is to take this script and make it work when the $(window).width > 480 . Also, I need this script to run every time the user resizes the window.
I apologise for my silly question, but I'm just starting to learn the basics about Javascript and Jquery, and I can't seem to find the answer to this question this time.
Here is the code
$(window).load(function(){
(function($) {
$.fn.eqHeights = function() {
var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function() {
el.eqHeights();
});
el.data('eqHeights', true);
}
return el.each(function() {
var curHighest = 0;
$(this).children().each(function() {
var el = $(this),
elHeight = el.height('auto').height();
if (elHeight > curHighest) {
curHighest = elHeight;
}
}).height(curHighest);
});
};
$('.articles_container').eqHeights();
}(jQuery));
});

The window has an .innerWidth property which I presume is still accessible through jQuery. so your code might be something like this:
$(window).resize(function() {
if($(window).innerWidth < 480) return;
$('.articles_container').eqHeights();
})

To execute it on window resized, do this:
$(window).resize(function() {
$('.articles_container').eqHeights();
}
Also, if you want to execute javascript upon media queries events, then use the sweet enquire.js javascript library.