We Keep Coding

Making the DIV close icon drag along with the DIV

Here is the Fiddle
Can't figure out how to make the DIV close icon to follow the rest of the DIV when the DIV is dragged.
I seem to think there is something in this part of the code that I am not doing right.
$self = $(this);
$(opts.parent).append($self);
$('span.' + opts.classPrefix + '_oClose').remove();
$('body').append($overlayClose);
$('div.' + opts.classPrefix + '_overlay').remove();
$('body').append($overlay);
$self.draggable();
Appears to be something to do with how elements are appended to HTML body. I tried appending a blank div to body and then adding overlay and overlayClose to that blank div. But that did not even render the dialog. Any ideas?

As per Harrys demo http://jsfiddle.net/hari_shanx/8njzxhvx/3/
Line 24 has the magic :) Appending the close to the overlay then enabling the drag
$self.append($overlayClose);
$self.draggable();

I don't know about your code but I think you need a parent div that would be relatively positioned and a child that is absolutely positioned.
HTML
<div id="test">Hello! Trying to figure how to make the close div icon drag along with the div.
<img class="close" src="https://cdn3.iconfinder.com/data/icons/status/100/close_4-512.png" alt="">
</div>
CSS
#test {
background: lightgrey;
padding: 5px;
position: relative;
top: 100px;
}
img.close {
position: absolute;
right: 0px;
top: 0px;
height: 15px;
width: 15px;
cursor: pointer;
}
For dragging I've used jQuery UI:
$( "#test" ).draggable();
$("img.close").click( function(e){
$("#test").fadeOut();
});
I've made a fiddle that explains this:
FIDDLE

Try something like this:
<div id="test">
Close
Hello! Trying to figure how to make the close div icon drag along with the div.</div>
CSS:
.close{
float: right;
top: -31px;
position: relative;
left: 23px;
background:url()// your close icon
}
This will make your anchor tag draggable along with div and you can fire event on anchor tag for closing purpose

check slideToggle state with if else function & report slideToggle state after each toggle

http://jsfiddle.net/vmKVS/
I am trying to understand the state of slideToggle with a little example.
When I toggle the first time the options element turns green.
I would expect the menu element to turn red when I click toggle again, now the 2nd time, since now the options element goes into not visible state and therefore the else part of the function should run, no?
Also when I check the console the values for the slideToggle state do not change, why? Should they not reflect the state of the element after the click second click, so hidden?
What am I doing wrong? I would like to have for the sake of this example, turn the menu red on the second toggle, since then the options element is not visible any more.
I am new to jQuery and programming, so please forgive my blatant mistakes in logic here. Perhaps I have to rethink this from a different viewpoint. This is where you come in, help me understand this please. Thank you.
HTML
<div id="menu">MENU</div>
<div id="options">OPTIONS</div>
jQuery
$('#menu').click(function(){
$('#options').slideToggle();
var isVisible = $( '#options' ).is( ":visible" );
var isHidden = $( '#options' ).is( ":hidden" );
console.log (isVisible);
console.log (isHidden);
if ($('#options').is(':visible') === true ){
$('#options').css('background', '#16a085');
console.log (isVisible);
}
else {
console.log (isHidden);
$('#menu').css('background', '#8e44ad');
}
});
CSS
#menu {
width: 100%;
height: 100px;
line-height: 100px;
font-size: 200%;
background: #000000;
color: #fff;
text-align: center;
}
#options {
width: 100%;
height: 100px;
line-height: 100px;
font-size: 200%;
background: #ccc;
color: #fff;
text-align: center;
display: none;
}

Check out the documentation for the jQuery :visible and :hidden selectors more thoroughly:
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
The issue is that the :visible selector will return true if the element that is selected consumes space within the layout, and as the width is not zero, this is true.
There are plenty of ways to do what you're after. A nice way is to toggle a class and use that to detect whether the item is toggled:
$('#menu').click(function(){
$('#options').slideToggle().toggleClass('opened');
var isVisible = $( '#options' ).is( ".opened" );
if (isVisible === true ){
$('#options').css('background', '#16a085');
}
else {
$('#menu').css('background', '#8e44ad');
}
});
http://jsfiddle.net/vmKVS/1/

jQuery accordion "heightStyle: fill" with display set to none on page load

My World
jQuery 1.9.1
jQuery UI 1.10.3, although my jsfiddle example uses UI 1.9.2 and seems to work fine.
My Problem
There are many similar questions to this on stackoverflow, but I was unable to find a suitable answer. Basically I've got a jQuery accordion that is not to be displayed when the page loads, and its display can be changed to block via the jQuery .toggle() method. The toggle works fine, but the heightStyle: "fill" does not fill the space appropriately unless the parent div is displayed when the page is loaded, which I don't want.
My Attempts at Solutions
Repositioning the script at the end of the document and in the <head> section.
Rearranging the order in which the toggle happens: there is a second element, #map, which is toggled off at the same time as the accordion is toggled on, and vice versa.
As I am not entirely sure whether the accordion needs a parent container in the first place, I've tried it several ways: toggling the #accordion div, its parent div, and both div's.
For good measure, I've also attempted the .accordion( "refresh" ) method, as well as having a resizable container, on both the parent div and the #accordion. No soup.
Various CSS positioning for the parent container and #accordion.
Getting my hands dirty deep within jQuery.js. Given my fledgling experience with javascript, THAT didn't last long. Seriously, had to look up this thing ===. :)
My, THIS is Interesting
When the toggle button is clicked to hide the accordion and show #map again, you can see the heightStyle: "fill" actually work for a second! I slowed the transition duration in the jsfiddle so that it can be seen more easily.
SO, whatever is enabling the correct height calculation for heightStyle: "fill", that is what I need to have happen all the time. Any suggestions appreciated!
js fiddle: http://jsfiddle.net/Y8B4W/1/
HTML
<div>
<div class="page-header">
<div id="menu">Menu</div>
</div>
<div id="leftpanel">
<div id="accordion">
<h3>Heading 1</h3>
<div>
<p>...</p>
</div>
<!-- ...repeat for three more headings/sections... -->
</div><!--accordion-->
</div><!-- #leftpanel -->
<div id="map"></div>
</div>
CSS
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
color: #000;
}
.page-header {
width: 100%;
height: 3em;
background: gray;
}
#menu {
font-size: 1em;
margin: 0.5em;
font-weight: bold;
cursor: pointer;
}
#leftpanel {
display: none;
background: blue;
padding: 0;
margin: 0;
position: absolute;
top: 3em;
left: 0;
bottom: 0;
width: 100%;
}
#map {
position: absolute;
bottom: 0;
top: 3em;
width: 100%;
background: yellow;
line-height: 1.5em;
}
Javascript
$( "#accordion" ).accordion({
heightStyle: "fill",
collapsible: true
});
$( "#menu" ).click(function() {
$( "#map" ).toggle({
duration: 2000
});
$( "#leftpanel" ).toggle({
duration: 2000
});
$( "#accordion" ).accordion( "refresh" );
});

This is kind of a cheap and cheeky hack, but it works. Basically the height of the parent div, #leftpanel, was not being calculated correctly when the page loaded (which is when jQuery assigns the accordion's height) because of its display:none property. SO, I just grabbed the height myself and assigned it to #accordion manually before the accordion functionality is even added, which works like a dream:
$( "#menu" ).click(function() {
$( "#map" ).toggle( "slow" );
if ($( "#leftpanel" ).css("display") == "none") {
$(function() {
$( "#leftpanel").css("display", "block");
var accordHt = $( "#leftpanel" ).css( "height" );
$( "#accordion").css("height", accordHt);
$( "#accordion" ).accordion({
heightStyle: "fill",
collapsible: true
});
});
};
});
And if you're wondering why the 'if' statement instead of just assigning the property outright, it's because of a media query in which I have #leftpanel being displayed when the page loads on screen widths 800px and up.
Go ahead, fiddle: http://jsfiddle.net/72rw2/

Another way is to call a refresh after display:none changes.
$( "#menu" ).click(function() {
$( "#leftpanel").css("display", "block");
$( "#accordion" ).accordion( "refresh" );
}

Jquery: slideToggle, then scroll to div

I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.
<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has completed?
You can see what I have so far here.
Click on the printables button to see what I'm talking about.
I also created a jsFiddle of the basic functionality, jsfiddle.

$('a').click(function(event){
event.preventDefault();
$(element).slideToggle(250, function(){
window.location.hash = "#content";
});
});
Should work.

Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.
$('a').click(function(event){
event.preventDefault();
$a = $(this);
$(element).slideToggle(250, function(){
$(window).scrollTop($a.offset().top);
});
});

The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.
Below is an example based on your jsFiddle. The JS is the part you need.
$(function() {
$( "#button" ).on( "click", function() { //Click
$( "#content" ).slideToggle( "slow", function(){
if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
$('html,body').animate({ //animate the scroll
scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
}, "slow")
}
});
return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});
/* This is for the example */
#button{
display: block;
margin: auto;
margin-top:130px;
height: 50px;
width: 180px;
background-color: #ccc;
}
#content{
display: none;
margin: 0 auto;
height: 1200px;
width: 170px;
background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to expand content
<div id="content">
</div>

Save Draggable Div Position

i had added a drag and move div to my website, i am using common header for each pages.
my drag and move div code as follows:
Script:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
Div:
<div class="student_avatar_header" id="draggable" title="Drag and Move...">
Some texts...
</div>
CSS:
.student_avatar_header {
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 20px;
border-radius: 250px;
z-index: 9998;
box-shadow: 2px 2px 12px #008abc;
cursor: move;
}
this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,
NOTE: my website have above 35 pages.
any idea.?
thanks...

Have a look on the following code :
$("#draggable").draggable({
stop: function(event, ui) {
$.cookie("elementIDCookie", ui.position);
}
});
To re-position the element when the user returns:
$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });