Develop Reference

Concatenating a function in JavaScript

I have the following two JavaScript function:
JS 1
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate");
});
JS 2
$( ".show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-section-rotate");
});
Is there a way to concatenate the two functions into one? I tried the following, but the functionality seems to only be working for the last listed element:
JS - Failed attemp at concatenating
$( ".show-more, .show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate, show-more-section-rotate");
});

See comments inline:
// bind event on both the elements
$(".show-more, .show-more-section").on('click', function (event) {
// ^^^^^^ Add this
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
// Remove `,` from toggleClass
});
EDIT
You can also chain the methods as:
$(this).toggleClass("show-more-rotate show-more-section-rotate")
.next().slideToggle("fast", function () {});
Update
If you want to toggle class after slideToggle is completed:
var $this = $(this);
$this.next().slideToggle("fast", function () {
$this.toggleClass("show-more-rotate show-more-section-rotate")
});

try this:-
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
if($(this).is('.show-more'))
{
$(this).toggleClass("show-more-rotate");
}else
{
$(this).toggleClass("show-more-section-rotate");
}
});
Demo

You can create the handler function and can reuse it in the click handler
$( ".show-more" ).click(showMoreClickHandler);
$( ".show-more-section" ).click(showMoreClickHandler);
function showMoreClickHandler(e) {
e.preventDefault();
$( this ).next().slideToggle( "fast", function() {});
$( this ).toggleClass("");
}
For toggle class, you can add data-toggle-class attribute in HTML and can read the value and perform toggling.
I hope, show-more-rotate and show-more-section-rotate should be applied on it's respective element not on the other.

Remove the comma in the toggleClass:
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {
});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
});

Adding selectmenu on select that's calling functions

I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

Jquery .focus()-loop?

I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)

try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here

According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);

$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me

You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/

how can i add function to jquery event

On mouseover event i want to call function which will do somethig when the mouse will be over on images but i dont know how to write code for it.
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:"mouseover"
});
}
eg:-
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:function(moueover)
{
//do somthing here
}
});
}

You want to use mouseenter:
$('.test').on('mouseenter', function() {
alert( 'mouse is over here' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover here</div>

Let's see if this works for you
$(function() {
$("img.lazy")
.mouseover(function() {
console.log("Mouseover");
});
});

You can d like this
jQuery('#youdomid').hover(function(){
// do your stuff here
//, your mouse has entered
alert(2);
},
function (){
// your mose leave the element
// do the stuff what you want
alert("leaved");
}
)

You can also use .hover function
$( "img.lazy" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});

$(document).ready(function(){
$("img.lazy").lazyload({effect : "fadeIn"}, function() {
mousehover();
});
}
function mousehover(){
//do something mousehover stuff on here
}

You can just use the event mouseenter below:
$('.lazy').on('mouseenter', function() {
console.log('foo');
});

Css function doesn't work

I am writing this code, first toggle function is working but second toggle isn't. Why is that?
<script type="text/javascript">
$(document).ready(function(){
$( ".navicon" ).click(function() {
$( "#menu" ).slideToggle( "medium", function() {
// Animation complete.
});
});
});
$(document).ready(function(){
$('.navicon').toggle(function () {
$("body").css({"overflow": "hidden !important"});
$("#mobile_menu").css({"width": "100% !important"});
});
});
</script>

The toggle() method was deprecated, you need to use an alternative, such as a flag to depict the 'toggled' state.
A loose example:
$('.myclass').click(function() {
if ($(this).hasClass('toggle')) {
doThis;
$(this).removeClass('toggle');
} else {
doThis;
$(this).addClass('toggle');
}
});
And encase all of your functions with $(document).ready() rather than doing it for each individual one.