Develop Reference

How to scroll to an element when a button is clicked and also make it hovered?

Might be a duplicate but I cant seem to find the right answer.
I have a button, and when I press it, I want it to scroll to the li item that has an ID of '#li-1', and also have it hovered. I know my code is wrong but not really sure how to fix it (new to jquery). So how do I achieve the desired results?
Here's a jsfiddle link - https://jsfiddle.net/orb1vw28/7/
Thanks in advance
$(document).ready(function(){
$('.button').click(function(){
$('body').scrollTo('#li-1', 200);
$("#li-1").toggleClass("hov");
});
})

Ok, you have some problems in your code, but i made some minor changes and managed it to work.
JSfiddle wans't working for me, so i made you a pen.
http://codepen.io/filipemerker/pen/jbvxyY
The thing is that you need to pass a numeric value to "scrollTo", not a selector. I just calculated the difference between the parent scrolltop minus the LI element scrolltop. I also added an animation for you. Check it out.
$('#event-list').stop().animate({scrollTop:location}, '200', 'linear');

You can calculate the correct target position – the one which you scroll to – with the getScrollTargetPosition() function in this gist (heavily commented, so no need to explain it here).
Based on that and the jQuery.scrollable plugin – which solves cross-browser issues as well as a bunch of scroll-related usability problems –, you'd end up with this code:
$( document ).ready( function () {
$( ".button" ).click( function ( event ) {
var $window = $( window ),
$scrollContainer = $( "#event-list" ),
$target = $( "#li-1" ),
targetPosition = getScrollTargetPosition ( $target, $window );
event.preventDefault();
$scrollContainer.scrollTo( targetPosition, {
complete: function () {
$target.toggleClass( "hov" );
}
} );
} );
} );
To see it in action, check it out in JSBin (result, source).

Creating my own plugin - Not working

I've been working through some tutorials to learn the basics of creating my own plugins.. But it doesn't seem to work.
What I'm trying to do is just create a basic slide toggle drop down (click once to display a div - click again to collapse it)
The content of the plugin I have:
$(document).ready(function () {
(function ($) {
$.fn.dropdown = function () {
$.fn.dropdown = function () {
this.preventDefault();
$('.expanded').slideToggle(1000);
}
return this;
};
}(jQuery));
});
The HTML I have is:
<div class="Btn">Click Here</div>
<div class="expanded">
Here<br/>
Is<br/>
Some<br/>
Extra<br/>
Content<br/>
</div>
And to execute the plugin, I have:
$( ".Btn" ).click(function() {
dropdown();
});
If someone could assist me with where I'm going wrong, it would be appreciated.
Thanks

Check out this jsfiddle: http://jsfiddle.net/yvanavermaet/sc6Bw/1/
$( document ).ready(function() {
$( ".Btn" ).click(function() {
$(this).dropdown();
});
});
(function( $ ) {
$.fn.dropdown = function() {
$('.expanded').slideToggle(1000);
return this;
};
}( jQuery ));
As some people have stated:
don't define $.fn.dropdown twice
don't define it in your document.ready (you should see it as a separate module)
use $(selector).dropdown();
e.preventDefault() doesn't have much effect on a div as it has no default.
Edit:
By the way, try and follow 1 coding standard. When adding the click-event, you're using double quotes and when adding the slideToggle you're using single quotes. Aswell as with the spaces.

To execute the plugin it should be:
$( ".Btn" ).click(function() {
$(this).dropdown();
});

This is a cut down version that works.
A couple of things, for some reason you wrapped $.fn.dropdown inside $.fn.dropdown, not sure why but I removed it. Also jQuery functions don't work like regular javascript functions, they're need $(). before hand, as they're inside jQuery's scope. Finally this.preventDefault won't do anything in this context, as there isn't a default.

why pageshow not call in jquery mobile?

can you please tell me why pageshow event not call in jquery mobile?
http://jsfiddle.net/G7AvE/
$(document).ready(function(){
$("#1").on('pagebeforeshow ', function() {
//YourFunctionCall();
alert('1')
});
});
jQuery( "#1" ).on( "pageshow", function( event ) { alert('1') } )

Refrain from using .ready() in jQuery Mobile, use pageinit instead. Moreover, for page id, don't use plain digits; an id should contain characters.
$(document).on("pageinit", "#pageID", function () {
$("#pageID").on('pagebeforeshow ', function () {
/* run code */
});
});
Demo

At top left, the dropdown below Frameworks and Extensions. Change from onload to No Wrap- in <body>
Updated Fiddle
In jsFiddle this makes sure the libraries are loaded before your code tries to use them.

Working with dynamic jQuery

I was wondering how to make this trigger work as I've tried all I can, but can't seem to find out the problem.
HTML
<div id="testFunc">Change AHref Class</div>
test
JavaScript
$(function () {
$("#testFunc").click(function () {
$('#testLink').removeClass("button");
$('#testLink').addClass("button2");
return false;
});
});
$(function () {
$(".button2").click(function () {
alert('test');
return false;
});
});
Somehow, the upon triggering testFunc which changes the source dynamically which causes the a href class to change from button to button2, it doesn't seem to register when i use button2 click.
Is there anyway to solve this?
Thanks!

Try .on()
Use Event Delegation.
$(document).on('click','.button2',function(){ code here });
Syntax
$( elements ).on( events, selector, data, handler );
Demo Working Fiddle , Problem Fiddle

How to attach "slide" & "slid" events to the Bootstrap toolkit's carousel?

Here's a fiddle with a working Bootstrap carousel.
http://jsfiddle.net/jeykeu/5TDff/
And here's the official documentation which tells nothing about event usage.
http://twitter.github.com/bootstrap/javascript.html#carousel
I thought this would work but no:
$('#carousel').bind('slide',function(){
alert("Slide Event");
});

Based on your fiddle #carousel is wrong. It should be #myCarousel.
Updated Example:
$('#myCarousel').carousel({
interval: 2000
});
// Could be slid or slide (slide happens before animation, slid happens after)
$('#myCarousel').on('slid', function() {
alert("Slide Event");
});​
http://jsfiddle.net/infiniteloops/wPF3n/
With Bootstrap 3
http://jsfiddle.net/infiniteloops/wPF3n/252/

For Bootstrap 3 implementations :
Before event
$('#myCarousel').bind('slide.bs.carousel', function (e) {
console.log('before');
});
After event
$('#myCarousel').bind('slid.bs.carousel', function (e) {
console.log('after');
});

Old post I know, but I wanted to show both slide and slid using the .on function.
So, my 2 cents...
JSFiddle
$('#myCarousel').on('slide.bs.carousel', function (e) {
$( '.carousel' ).removeClass('color-start');
$( '.carousel' ).addClass('color-finish');
$('#bind').html('Sliding!');
});
$('#myCarousel').on('slid.bs.carousel', function (e) {
$( '.carousel' ).removeClass('color-finish');
$( '.carousel' ).addClass('color-start');
$('#bind').html('slid again!');
});
The 'addClass & removeClass' are for the fun of showing something is happening and when. Also, you could use this along with animate.css to add/remove the 'animated' class to elements .on(slide,).
$('#bind').html('Sliding!')
The above is I don't like 'alerts' and showing console.log can be a pain on smaller screens.