Develop Reference

Using jQuery / JavaScript to float element to right

Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.

How to specify different duration for slideUp and slideDown in jquery slideToggle?

I want a full width panel to slide down from the top of the browser, that will display my contact details, along with social links etc:
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle();
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
This works a treat, but how can I specify different times for slide up and slidedown?

You can store duration of animation in variable and use it. In function of callback of slideToggle() change duration.
var duration = 500;
$("#flip").click(function() {
$("#panel").slideToggle(duration, function(){
duration = $(this).is(":visible") ? 2000 : 500;
});
});
var duration = 500;
$("#flip").click(function() {
$("#panel").slideToggle(duration, function(){
duration = $(this).is(":visible") ? 2000 : 500;
});
});
#flip {
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
display: none;
width: 100%;
height: 150px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>

EDIT
I have edit my answer to reflect the change in the question.
Use slideDown() and slideUp() instead.
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
In case you want to add different durations to sliding up and down in jQuery then you can simply add a flag and check if the menu is opened or not and then use slideDown() and slideUp() as methods.
That way you could add different durations to the slide.
$(document).ready(function() {
var menuOpened = false;
$("#flip").click(function() {
if (menuOpened === false) {
$("#panel").slideDown(1000, function() {
menuOpened = true;
});
} else {
$("#panel").slideUp(700, function() {
menuOpened = false;
});
}
});
});

Simply just add the time as a parameter to the slideToggle method.
You can see in the docs this:
slideToggle( [duration ] [, complete ] )
duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle(3000);
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
You can read more in the official documentation here.
UPDATE:
If you want to have different durations for slideUp() and slideDown() methods you can do something like this:
$(document).ready(function() {
var check_state = false;
$("#flip").click(function() {
if (check_state === false) {
$("#panel").stop().slideDown(3000);
check_state = true;
} else {
$("#panel").stop().slideUp(1500);
check_state = false;
}
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>

You can specify the time in the first parameter of the function slideToggle:
$("#panel").slideToggle(4000);

You can read about .slideToggle() on jquery documentation
As it say the slideToggle() function accept two parameters:
.slideToggle( [duration ] [, complete ] )
The first is for the duration (in millisecond) and the second is the callback after the animation is complete
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle(5000 /* Here is the duration of the animation in MS */, function() {
//Do what you want here
});
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>

jquery draggable event changing the css of child element

Hi please see this code
$('.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width", 'auto');
},
drag: function() {
$(".new-div").css("width", 'auto');
},
start: function() {
$(".new-div").css("width", 'auto');
},
stop: function() {
$(".new-div").css("width", 'auto');
}
});
$(document).on("click", ".closeButton", function() {
$(this).closest('div').remove();
});
$(".span1").on("click", function(e) {
var mycontent1 = $(this).text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if (mycontent1.trim() === "message") {
$(".span1").text('');
$(this).css("width", "100px");
$(this).css("height", "6%");
$('.new-div').css("width", "100px");
$('.new-div').css("height", "6%");
}
});
$("#font-size").on("change", function() {
var v = $(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({
'font-size': ($('.new-div').height() / 2.3)
});
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
https://jsfiddle.net/felixtm/jaboLc3u/34/
In this when i type message on text box , and resize that time this is working correctly . But after resize the text and drag the text that time resize box is going far from the div . Why this hapen ?

If you want the text box to keep its size when it is dragged, you can remove the following calls in the draggable component event handlers:
$(".new-div").css("width", 'auto');
The resulting code would be:
$(".new-div").draggable({
containment: "#bord"
});
In the code snippet below, I also made changes to the click event handler of the span element, to keep the text box centered when the user types new text. In order to get that behavior, I had to put a non-breaking space in the box. Since that character is selected after clicking on message, the new content typed by the user will overwrite it.
Finally, a focus rectangle was visible in Chrome. This CSS attribute can be used to hide it:
.new-div:focus {
outline: none;
}
Credit: The code for range selection was inspired by this answer given by Tim Down.
$(".new-div").draggable({
containment: "#bord"
});
$(document).on("click", ".closeButton", function () {
$(this).closest("div").remove();
});
$(".span1").on("click", function (e) {
e.preventDefault();
$(".new-div").removeClass("active");
$(this).closest(".new-div").addClass("active");
if ($(this).text().trim() === "message") {
$(this).html(" ");
var range = document.createRange();
range.setStart(this, 0);
range.setEnd(this, 1);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
$(".new-div").focus();
}
});
$("#font-size").on("change", function () {
var v = $(this).val();
$(".new-div").css("font-size", v + "px");
});
$(".resizeButton").draggable({
containment: "#bord",
drag: function () {
$(".new-div").height($(".resizeButton").position().top + 17);
$(".new-div").width($(".resizeButton").position().left + 17);
$(".new-div").width($(".resizeButton").position().left + 17);
$(".new-div").css({ "font-size": ($(".new-div").height() / 2.3) });
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.new-div:focus {
outline: none;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>

I think that main problem is that you type in .closebutton no inside the div ;)
I am not that advanced to repair it fully but...
$( '.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width",'auto');
} ,
drag: function() {
$(".new-div").css("width",'auto');
} ,
start: function() {
$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){
$(".new-div").remove();
});
$(".span1").on("click", function(e){
var mycontent1= $(".span").text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if(mycontent1.trim()==="message"){
$(".span1").text('');
$(this).css("width","100px");
$(this).css("height","6%");
$('.new-div').css("width","100px");
$('.new-div').css("height","6%");
}
});
$("#font-size").on("change",function(){
var v=$(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});
}
});
.new-div {
z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {
max-width: 236px; width: 236px; position: relative; overflow: hidden; }
.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true" >
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
</div>
</div>

Move your contenteditable="true" attribute from
div.new-div (<div class="new-div" contenteditable="true" >)
to
span.span1 (<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">)
So that your code looks something like this...
$('.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width", 'auto');
},
drag: function() {
$(".new-div").css("width", 'auto');
},
start: function() {
$(".new-div").css("width", 'auto');
},
stop: function() {
$(".new-div").css("width", 'auto');
}
});
$(document).on("click", ".closeButton", function() {
$(this).closest('div').remove();
});
$(".span1").on("click", function(e) {
var mycontent1 = $(this).text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if (mycontent1.trim() === "message") {
$(".span1").text('');
$(this).css("width", "100px");
$(this).css("height", "6%");
$('.new-div').css("width", "100px");
$('.new-div').css("height", "6%");
}
});
$("#font-size").on("change", function() {
var v = $(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({
'font-size': ($('.new-div').height() / 2.3)
});
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div">
<span contenteditable="true" data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
It should solve the issue for you ;)

It's about textbox position, it started right justified.

jsPlumb- Drag a clone without replication

I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>

I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.ch{
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch");
$(droppedElement).draggable({containment:
"dropArea"});
droppedElement.appendTo('#dropArea');
}
});
});
</script>
</body>
</html>

.stop on .mouseover or .hover

I can't figure out how to stop and resume the slide on a mouseover or hover occurrence. I basically want to stop all the scripts when .mouseover or .hover is triggered. Can anyone help me on this?
Edit: Code should work if you simply copy paste it, it is all hosted externally
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>

You can trigger a custom event named "stop" on carouFredSel component If you want to stop the slider.
$('#slider').trigger("stop");
And trigger a custom event named "play" with a extra parameter true to resume the slider
$("#slider").trigger("play",true);
For example:
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>
Hope this is helpful for you.