Develop Reference

Tizen Selector touch event

I want to open different pages from a popup-selector menu in Tizen.
I have 8 menu items and each should open a different page in the same HTML using the active-ui-page class.
I tried doing it using the code mentioned here.
But then when I transfer back to the selector, them indicator-name doesn't change.
Please help me on this.

Try to make sure you are not closing the popup or destroying the Selector. In such way your selector is may be getting nonfunctional. tau.closePopup() will close the popUp window, thus selector won't appear back.
elSelector.addEventListener("click", function(event) {
var target = event.target;
if (tau.support.shape.circle) {
if (target.classList.contains("ui-selector-indicator")) {
tau.closePopup(popupCircle); //**comment out this line**//
//your code
}
}
});
selector.destroy() destroys & removes event listener, which might be the case in your situation, that's why indicator-name isn't changing.
selector.destroy(); //**comment out this line**//
Vice versa for solution try calling the popUp window again using tau.openPopup() :
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
}
otherwise call the selector again with tau.widget.Selector()
if (tau.support.shape.circle) {
var radius = window.innerHeight / 2 * 0.8;
selector = tau.widget.Selector(elSelector, {itemRadius: radius});
}
Code souce : 'TAUUIComponents' (Tizen Sample Web app)
Thank you.

"Skip Navigation" Link without anchors

I am trying to create a "skip navigation" link without being able to use anchors. The site is built in a peculiar way, where anchor link formatting has been re-purposed. So, I am attempting to allow people to skip the navigation by using focus. However, it isn't working.
HTML code for the skip navigation link itself:
<!-- Start Top Left in Nav Bar -->
<aside>
Skip Navigation
</aside>
<!-- End Top Left in Nav Bar -->
Code to Change the Focus
var nav = document.getElementById('#skipNav');
nav.onclick=skipNav();
function skipNav(){
document.activeElement.blur();
if ($('#linkHome').hasClass('current')==true)
{
$('#homeFocus').focus();
}
if ($('#linkTeam').hasClass('current')==true)
{
$('#teamFocus').focus();
}
if ($('#linkTraining').hasClass('current')==true)
{
$('#trainingFocus').focus();
}
if ($('#linkTesting').hasClass('current')==true)
{
$('#testingFocus').focus();
}
if ($('#linkRemediation').hasClass('current')==true)
{
$('#remediationFocus').focus();
}
if ($('#linkContact').hasClass('current')==true)
{
$('#contactFocus').focus();
}
};
Script to Change Pages and Mark Current Page
var FluidNav = {
init: function() {
$('a[href*="#"]').click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$("nav ul li").removeClass("current");
nav_item.parent().addClass("current");
FluidNav.resizePage((next_page.height() + 40), true, function() {
$(".page").removeClass("current"); next_page.addClass("current");
});
$(".page").fadeOut(500);
next_page.fadeIn(500);
document.activeElement.blur();
$('#'+page+'Focus').focus();
FluidNav.centerArrow(nav_item);
},
centerArrow: function(nav_item, animate) {
var left_margin = (nav_item.parent().position().left + nav_item.parent().width()) + 24 - (nav_item.parent().width() / 2);
if(animate != false) {
$("nav .arrow").animate({
left: left_margin - 8
}, 500, function() { $(this).show(); });
} else {
$("nav .arrow").css({ left: left_margin - 8 });
}
},
resizePage: function(size, animate, callback) {
if(size) { var new_size = size; } else { var new_size = $(".page.current").height() + 40; }
if(!callback) { callback = function(){}; }
if(animate) {
$("#pages").animate({ height: new_size }, 400, function() { callback.call(); });
} else {
$("#pages").css({ height: new_size });
}
}
};
$("nav select").change(function() {
if(this.options[this.selectedIndex].value != "#") {
var page = this.options[this.selectedIndex].value.split("#")[1];
FluidNav.goTo(page);
$("html,body").animate({ scrollTop:$('#'+page).offset().top }, 700);
}
});
Any ideas?

Sounds like you're trying to do a 'dynamic skiplink', where you determine the target at runtime?
Skip Navigation
The problem is that when you click a link, navigation happens. A href="" doesn't prevent navigation, it just means that you end up navigating to the current page - and that's going to reset the focus. This happens after your click event handler. So even though you may correctly set the focus where you want to, it ends up being 'lost' when the page reloads.
There's a couple of ways to prevent this: one is to use href="javascript:void(0)" - href specifies where to navigate, and if it evaluates to void, the browser won't navigate at all.
A somewhat cleaner way is to tell the browser not to carry out the default action in the event handler:
function skipNav(e)
{
e.preventDefault(); // prevent default action - link navigation - from taking place
...
--
Couple of other issues with the code:
Don't bother with role="link" on the A - save these attributes for when you are doing something out of the ordinary. The key thing to know is that screenreaders already know how to deal with all the standard HTML elements when they are used in a standard way. So if you are using an as a link, or a as a button, then you don't need to add a role.
But if you are creating a new control of of plain DIVs, or if you are repurposing a HTML element for a different use, then you need a role attribute to tell the screenreader how you are actually using the element.
For example, a DIV that's had an onclick handler and is behaving like a button would need role="button", otherwise a screenreader might ignore it or just say something generic like 'element'. Or if you are creating a button from an A tag, and it ends up behaving like and looking like a button from a user's point of view, then you'd need role="button" so that a screenreader will announce it as a button rather than as a link.
--
Watch for mixing plain DOM vs jQuery conventions - only jQuery uses # to find elements by ID, so use either:
var nav = document.getElementById('skipNav'); // plain DOM way, no #
or
var nav = $('#skipnav'); // jQuery way using selector
--
Watch for functions as values vs calls:
nav.onclick=skipNav();
This will actually call skipNav(), and assign the return value - null! - to onclick. Don't use ()'s when you're setting a callback. You don't need this code anyhow, since you're setting the handler using onClick in the tag anyhow.
Also, note that as your code stands, when skipNav() is called, it tries to call document.activeElement.blur() - but at that point in time - document is still loading - there's no activeElement, so calling blur() on null generates an exception - which you should see in your browser's console/debugging window.
--
Don't use .blur() - there's no need to do this:
document.activeElement.blur();
Instead, just focus the element you want to have focus. The danger with doing .blur() is that if the code after it fails to set the focus somewhere reasonable, focus will end up getting 'lost', which is very inconvenient for a keyboard user, since they have to tab from the start of the page.
--
Javascript coding practice: don't bother with == true in the if() expressions; and unless you expect you expect more than one of the elements to have the 'current' class, use else if instead of plain if: this makes it clear in the code that you're expecting only one branch to be used.
--
Finally, make friends with the browser's debugger (F12 in most): you'll learn some of the above by putting breakpoints in the event handler and your initialization code, and stepping through it to ensure it's behaving as you expect.

How can I use javascript to detect an inline link?

Say I have a web page index.html. Suppose the client goes to index.html#section2. This should take the client to the section of the page with a block-level element having a name attribute of section2.
How do I detect this inline link in javascript? Specifically, if the user goes to index.html#section2, I want to run a certain function in javascript.
I am open to using jQuery as well. Thank you!

Use jQuery with this jQuery plugin
http://benalman.com/projects/jquery-hashchange-plugin/
Then you can do:
$(window).bind( 'hashchange', function( event ) {
if(window.location.hash === "#section2"){
// What you want to do
}
})
Or if you dont want to use jQuery just use onclick events.
JS:
function changed(){
setTimeout(function(){
if(window.location.hash === "#section2"){
// What you want to do
}
})
}
window.onload = changed; // In case user starts on #section2

Do a switch on the window.location.hash property.
switch(window.location.hash) {
case '#section1':
foo();
case '#section2':
bar();
}
Note - The hash property is supported in all major browsers.
Edit -
#IvanCastellanos is right about the new hashchange event and the lack of support in down-level browsers. If the OP needs to handle this situation then the overhead of the plugin may be necessary - as pointed out in his answer...

Changing image source with Jquery

Using Jquery, I've managed to make a dropdown login form triggered by clicking a button. However, I am also trying to change the direction of the arrow next to it by replacing the src image, and it appears to do nothing.
$("#login_panel").slideToggle(200).toggle(
function() { $("#arrow").attr('src', '/src/east.gif';) },
function() { $("#arrow").attr('src', '/src/south.gif';) }
);
This can be seen at:
http://dev.mcmodcenter.net (The 'Login' button)
$(document).ready(function() {
$("#login_panel").slideToggle(200).toggle(
function() { $("#arrow").attr('src', '/src/east.gif';) },
function() { $("#arrow").attr('src', '/src/south.gif';) }
);
for (var i = 0; i < 2; i++) {
$(".mod").clone().insertAfter(".mod");
}
$(".mod").lazyload({
effect: "fadeIn"
});
});

You can directly access this.src - no need to create a new jQuery object for that:
$('#arrow').toggle(
function() { this.src = '/src/south.gif'; },
function() { this.src = '/src/east.gif'; }
);
And if you prefer to do it via .attr() at least use $(this) (DRY - don't repeat yourself - in this case, don't specify the selector more often than necessary)

$("#arrow").toggle(
function(){$("#arrow").attr("src", "/src/south.gif");},
function(){$("#arrow").attr("src", "/src/east.gif");}
);
You left off the "#" in the handler functions. By just referring to "arrow", you were telling jQuery to look for (presumably absent) <arrow> tags.
Now, as to the larger situation, what you're setting up there is something that'll make the image change when the image itself is clicked. Your description of your goal makes me think that that's not quite what you want, but it's hard to tell. If you want some other element to control the changes to the image, then you'd attach the handler(s) elsewhere.
Is the image you want to change that little black arrow next to the login button? If so, then what should happen is that the code to set the image should be added to the existing handler that slides the login form up and down. (By the way, in Chrome the login box shows up in what seems like an odd place, far to the left of the button.)

looks like you forget to put the # before the arrow in $("arrow")
it should be like this
$("#arrow").toggle(
function(){$("#arrow").attr("src", "/src/south.gif");},
function(){$("#arrow").attr("src", "/src/east.gif");}
);

$("arrow") will match <arrow>, you lost the #
Also, the toggle method does not take two functions as its arguments, it works in a completely different way to what you are trying to do with it. Yes, it does, there are two different toggle methods for jQuery (insert rant about awful API design)
And now you have completely edited the code…
Your code now immediately assigns strings to the this.src (where this is (I think) the document object), and then passes those two strings as arguments to the toggle method (which are not acceptable arguments for it)
And now you have completely edited it again…

This code should work:
$('#login_button').click(function() {
$(this).find('#arrow').attr('src', function(i, v) {
return v.indexOf('east.gif') < 0 ? '/src/east.gif' : '/src/south.gif';
});
$('#login_panel').slideToggle(200);
});

How do I write my script for each link I want to redirect

So I'm trying to redirect users from html links and element id tags, to other pages with javascript. I've figured out how to do one singular redirect but having trouble writing the code for multiple links heres what I have so far:
HTML:
<head>
<script type = "text/javascript" src="script2.js"></script>
</head>
<body>
NickName
Salestax
W 3 Schools
</body>
</html>
My external script so far for just one link:
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
confirm("Go to Salestax page?");
window.location="salestax.html";
return false;
{
Do I just crank out more functions and change the location value, getElementById value and the onclick value?

A nice thing about onclick events is that if you return false it'll stop the browser from going to the link defined in the HREF. If you return true it'll keep going through with the navigation. You don't need to worry about the window.location in your function if you use this method, which will simplify things a lot. So you can just do:
Salestax
I'll prompt them if they want to continue. They click yes it'll keep going as if they clicked the link normally, they click no it'll stop them from navigating away. This way you don't have to duplicate the link's HREF in both your HTML and javascript.
You could still dynamically bind this, but if you're doing it by ID I don't really see any advantage vs just defining the onclick in the HTML.

First off, unless you're trying to prevent a user from losing changes that they've made on the current page, it's not clear why you would want to create this functionality. But at any rate, here's a standard/basic approach:
window.onload = function() {
document.getElementById("redirect").onclick = redirectConfirmation("Go to Salestax page?");
document.getElementById("redirect1").onclick = redirectConfirmation("Go to Nickname?");
};
redirectConfirmation = function(msg, urlOverride) {
return function() {
if ( confirm(msg) ) {
window.location = urlOverride || this.href || "#"
}
return false;
};
};
redirectConfirmation optionally takes a second parameter which can be used to explicitly set the url that the page is redirected to; otherwise, it will default to the URL specified by the href attribute of the anchor tag being acted upon (and if all else fails, it will fail gracefully with "#").
If you're using a common library, like jQuery, you can simplify your event registration as follows:
$(function() {
$("#redirect").click( redirectConfirmation("Go to Salestax page?") );
$("#redirect1").click( redirectConfirmation("Go to Nickname?") );
});

A far better approach would be to do something like the below - that way the logic for redirecting the user stays reasonably close to the link, and so people looking at the source wont become incredibly confused when the page takes people elsewhere.
Some link
External script:
function initRedirect(message, url)
{
confirm(message);
window.location = url;
return false;
}