We Keep Coding

jQuery Two Tabs

I have two tabs: login & register. It's simple, hide login section when register tab is clicked and vice versa. When I click on register tab, login section is hidden and it's working, but when I try click again on login tab, everything is messed up.
Here is code:
jsfiddle.net/gdc5ryqj/

I created a fork of your fiddle here:
http://jsfiddle.net/fn5yjrgw/
It appears you are using bootstrap, so I would recommend using bootstrap tabs if possible and just applying your styles, but if that's not an option, here is an example (Link above to jsfiddle).
HTML:
I changed the element the tab uses to determine active state to the <div>, rather than the <p>, and put a class 'active' on the login tab to make it the one shown by default.
I added a couple of lines to your CSS at the very end:
/*** Additional Styles (ryantdecker) ***/
#tab-login, #tab-register {display:none;}
#tab-login.tab-active, #tab-register.tab-active {display:block;}
.login-reg-tab {}
.login-reg-tab.active p {
color: #E76E5D;
border-bottom: 3px solid;}
Lastly, the jQuery is simply removing the active and tab-active classes from the tab and panel areas respectively, and then adding them back to the appropriate ones based on the element clicked, so that the CSS takes care of the hiding and showing
$(document).ready(function(){
$('.login-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-login').addClass('tab-active');
});
$('.register-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-register').addClass('tab-active');
});
});
(There are definitely ways to make this even simpler, but not without reworking the markup and classes quite a bit, and I see you have a crazy big CSS file that would probably need to be refactored.)

you forgot to add the class for "tab-active"
$(".register-button").click(function () {
if ($("#tab-login").hasClass("tab-active")) {
$("#tab-login").removeClass("tab-active");
if($(".login-button p").hasClass("login-reg-text-active")){
$(".login-button p").removeClass("login-reg-text-active");}
$("#tab-login").toggle();
}
if($('#tab-login').hasClass('tab-active')) {
$('#tab-register').hide();
}
$("#tab-register").show();
$(".register-button p").addClass("login-reg-text-active");
$("#tab-register").addClass("tab-active")
});
$(".login-button").click(function () {
if ($("#tab-register").hasClass("tab-active")) {
$("#tab-register").removeClass("tab-active");
if($(".register-button p").hasClass("login-reg-text-active")){
$(".register-button p").removeClass("login-reg-text-active");}
$("#tab-register").hide();
//$("#tab-register").toggle();
}
if($('#tab-register').hasClass('tab-active')) {
$('#tab-login').hide();
}
$("#tab-login").show();
$(".login-button p").addClass("login-reg-text-active");
$("#tab-login").addClass("tab-active")
});

jquery not resetting menu navigation trigger

Currently I have this script that allows a button to open and close a menu whilst also changing it's class to do a little animation state change depending on open/close,... simple but effective.....
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
within the menu is a list with some options (standard) and when one is clicked it performs the following script based on its tag in the list... here's the html and js for that....
html
<li>
<i class="fa fa-briefcase"></i>Who are Musability?
</li>
JS
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.1)');
$(".tile-area-main").css({width: "720px"}).load("content.html");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
});
all functions work great separately but when i introduce the functions for the button click fa-briefcase it wont allow me to open the menu again why is this ?
... on another note (therefore probably a new question at another time) this code is repetitive for all buttons and wonder if there is a way of standardizing the stuff that is repeated into one big function ? not sure about how i would go about it but it isn't the focus of this question , although any advice greatly recieved.

What does your content.html file contain?
Because if it contains other JavaScript it could be messing with it.
i.e.
Instead of $(".tile-area-main").load("content.html");
Try $(".tile-area-main").load("content.html#div");
Where #div is the div with the contents you want to load() in
EDIT: Just noticed your comments, seems like you've fixed it yourself, but glad my method worked :)

Emberjs - Creating a button using Views/Handlebar Helpers that focuses on itself

I have a Handlebars helper view that uses Em.Button(I know it's deprecated) to make a Deactivate Button that focuses on itself when the button appears. Clicking the button triggers the 'delete' action and focus-out uses an action to 'cancelDelete'
The problem is that handlebar helpers do not have a closing {{ / }} handlebar, preventing me from putting an text inside of the button, the button just ends up being an empty shell. How do I give this button a text value? OR Is there an easier way of making this button without Em.Button?
The green check will go to the answer that makes this button work.
The handlebar helper looks like this
{{delete-recordCategory class="" value=recordCategory focus-out="cancelDeactivate" insert-newline="cancelDeactivate"}}
In the view is where i added the focus and the click 'deactivate' action using
VpcYeoman.DeleteRecordCategoryView = Em.Button.extend(Ember.ViewTargetActionSupport, {
click: function() {
this.triggerAction({
action: 'deactivateCategoryNow'
}); // Sends the `save` action, along with the current context
// to the current controller
},
didInsertElement: function() {
this.$().focus();
}
});
Ember.Handlebars.helper('delete-recordCategory', VpcYeoman.DeleteRecordCategoryView);
The ember site suggested Ember.ViewTargetActionSupport as the way to add actions to this view.
Ember v. 1.0

Ember.Button isn't just deprecated, it's been completely removed from newer versions. Definitely not something you want to keep around. Try writing your own. Here's a quick example of a component that might do what you want:
App.FocusButtonComponent = Ember.Component.extend({
didInsertElement: function() {
Em.run.later(function() {
this.$('button').focus();
}.bind(this), 1);
},
actions: {
click: function() {
this.sendAction('click');
}
}
});
focus_button.hbs
<button {{action 'click' on='click' bubbles=false}}>
{{yield}}
</button>
Then, you could use it like this:
{{focus-button click='deactivateCategoryNow'}}
Text Goes Here. Could be anything. <strong>Anything.</strong>
{{/focus-button}}

One Page Checkout scrolling to the bottom of screen on next

On my magento site, I am getting a strange behaviour in onepagecheckout that I’d like to fix. Basically, on Step 2, after entering all the data required and I click on the continue button, the page automatically scrolls down to the bottom of the screen so instead of seeing the shipping option, you see the footer and have to scroll up to choose the shipping. So my question is how can I keep the forms in onepagecheckout “focused” so that the screen stays on it when the continue/next button is clicked. I’ve tried changing the shipping.save() function on the onclick event to something like:
function test() {
shipping.save();
document.getElementById('checkoutSteps').scrollIntoView();
}
But that clearly did not work. So how can I set the page to stay on the onepagecheckout when next is clicked?
Sorry I forgot to add, the button already has an existing click event. Basically, the button looks like this:
<button type="button" class="button" title="<?php echo $this->__('Continue') ?>" onclick="shipping.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
I'm not sure if this matters but whenever I try to add a second function onclick (onclick="shipping.save(); testFunction();"), the second function is automatically removed.

I encountered the same problem.
In your checkout/onepage.phtml, add this code:
checkout.gotoSection = function (section, reloadProgressBlock) {
Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
$('opc-' + section).scrollTo();
};
below
var checkout = new Checkout(....);
Hope this help.

$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

In addition to Williams answer:
Most custom templates do not "rewrite" base/default/template/checkout/onepage.phtml so it would be some overhead to copy this file to your template just to add this ...
You still can use this with adding a new template file:
For your templates layout local.xml add this:
<checkout_onepage_index>
<reference name="before_body_end">
<block type="core/template" name="checkout.scroll" as="checkout.scroll">
<action method="setTemplate">
<template>checkout/onepage/scroll.phtml</template>
</action>
</block>
</reference>
</checkout_onepage_index>
Create .../template/checkout/onepage/scroll.phtml with this content:
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
if (typeof checkout !== 'undefined') {
checkout.gotoSection = function (section, reloadProgressBlock) {
Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
$('opc-' + section).scrollTo();
};
}
});
//]]>
</script>
Same result, just without editing base template files.

This can also help, I simply add this code in my checkout.gotoSection and it worked fine.
gotoSection: function (section) {
section = $('#opc-' + section);
section.addClass('allow');
// added this line
section.get(0).scrollIntoView();
},

Open page in modal box

I have a script that restrict the click on a href link if there;s no checkbox selected. I want the editpr.php open in modal box. The problem is I'm not familiar with modalbox. Any help?
<a class="button edit" style="cursor:pointer;" ><span><b>Edit Purchase Request</b></span></a>
<a class="button remove" style="cursor:pointer;" name="remove"><span><b>Remove Purchase Request</b></span></a>
This is my script
jQuery(function ($) {
$('a.button.edit, a.button.remove').click(function () {
if ($('input[name="checkbox[]"]:checked').length == 0) {
return;
}
if (!confirm('Do you want to continue?')) {
return
}
var frm = document.myform;
if ($(this).hasClass('edit')) {
frm.action = 'editpr.php';
}
if ($(this).hasClass('remove')) {}
frm.submit();
})
})

You can't open a page in a modal box just with pure javascript, as "alert()" or "confirm()".
To do what you want you need to put your 'editpr.php' content inside a div, and make it modal with CSS.
Actually we have a lot of libraries that make it happen easily, I think that most used is: http://www.jacklmoore.com/colorbox/
Check the "Outside HTML (Ajax)" and "Outside Webpage (Iframe)" on this example page, probably is the same thing that you want to do: http://www.jacklmoore.com/colorbox/example1/

There are some useful jQuery plugins that can make your job really easy. I suggest you give them a try. Here you have an example.

Since you are already using jQuery you could use jquery-ui.
They have an exmple of what you want to do here:
http://jqueryui.com/dialog/#modal
Once you get your modal dialog element setup, all you have to do is make and XHR for editpr.php, load the result into the elements innerhtml, then display the dialog.
// setup your modal dialog
var el = $( "#editpr-dialog" ).dialog({
// ... (other config options)
modal: true
});
// XHR editpr.php and show the dialog box
$.get('editpr.php', function(data){
el.html(data).dialog('open');
});

The custombox plugin has a lot of beautiful features and works amazingly with Jquery: http://dixso.github.io/custombox/