Develop Reference

Reloading a larger div after a smaller divs are triggered

I created three onclick trigger functions that trigger three separate divs in a larger div "main". For some reason, the function only works after one click, then I have to refresh the page.
For example, if I click to trigger the sports function, I have to refresh the page before I can use the news button. From there I have to refresh the page. How do I get the main div to reload before I trigger a second or third event? I've tried location.reload(), but that doesn't seem to work.
<div id="main">
<div id="news">
<h2 id="newsbtn"> News </h2>
</div>
<div id="interactive">
<h2 id="interactivebtn"> Interactive</h2>
</div>
<div id="sports">
<h2 id="sportsbtn"> Sports </h2>
</div>
</div>
$( "#newsbtn" ).click(function() {
$("#sports").fadeOut( "slow", "linear" ),
$("#interactive").fadeOut( "slow", "linear" );})
$( "sportsbtn" ).click(function() {
$("#interactive").fadeOut( "slow", "linear" ),
$("#news").fadeOut( "slow", "linear" );})
$( "#interactivebtn" ).click(function() {
$("#sports").fadeOut( "slow", "linear" ),
$("#news").fadeOut( "slow", "linear" );})
$( "#news" ).click(function() {
$("#sports").fadeOut( "slow", "linear" ),
$("#interactive").fadeOut( "slow", "linear" );})
;})

It sounds like you are basically trying to make an accordian.
That being the case, you're currently hiding all the other elements when one element is clicked. After that, you cant click one of the other elements because you have hidden them.
Generally, for an accordian, each element would have a container with a header and a content area and only the content area would be hidden leaving the header to be clicked
Here is a simple (and not perfect) example, if this is indeed what you are wanting:
$("#main").on('click', '.selectable-container .header', function() {
var $container=$(this).closest('.selectable-container');
$('.selectable-container').not($container).find('.content').fadeOut("slow", "linear");
$container.find('.content').fadeIn("slow", "linear");
})
.selectable-container .content{
display:none;
}
.selectable-container .header{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="news selectable-container">
<div class="header">news</div>
<div class="content">news content</div>
</div>
<div class="interactive selectable-container">
<div class="header">header</div>
<div class="content">header content</div>
</div>
<div class="sports selectable-container">
<div class="header">sports</div>
<div class="content">sports content</div>
</div>
</div>

jQuery droppable redirect

I am using jQuery droppable and I am trying to redirect to another page once the draggable element is dropped.
Here is my code:
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
window.location.href = 'Section8.php';
}
});
});
</script>
<div id="draggable" class="ui-widget-content">
</div>
<div id="droppable" class="ui-widget-header">
</div>
For some reason this doesn't do anything, anyone know why this is?

You need to use window.location= 'Section8.php' instead of window.location.href= ... The window.location.href property returns the URL of the current page.

how to economize jquery selectors

Probably a stupid question, but I couldn't find a direct answer, so how can I change ":not('#home div, .nav')" in to something like ":not('this div, .nav')"? That would allow me reuse the same function for different objects.
$( "#home" ).click(function() {
$("#content .plates").children(":not('#home div, .nav')" ).fadeOut(700);
});
and here is the HTML if needed:
<div id="wrapper">
<div id="content">
<div id="home" class="plates">
<div class="nav"></div>
<div id="one"></div>
<div id="two"></div>
</div>
<div id="about" class="plates">
<div class="nav"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</div>
Thanks for your help!

In the handler, this will be the clicked element, so you could just use this:
$( "#home" ).click(function() {
$("#wrapper #content .plates").children(":not('#"+this.id+" div, .nav')" ).fadeOut(700);
});

The OP is asking for something generic that can be reused on both the "home" and the "about" divs (and maybe on others to be added later?). But, for each one, excluding the "nav" item from the fadeout. So try this:
function myFunc( clickableItem) {
$(".plates:not(" + clickableItem + ")").children( ":not('.nav')" ).fadeOut(700); }
$( "#home" ).click( function(){
myFunc( "#home");
});
$( "#about" ).click( function(){
myFunc("#about");
});

You are using CSS selector :not(), but you can also use jQuery chained function .not(), which subtracts matched elements from another set of matched elements.
The usage is like this:
$(selector1).not(selector2).fadeOut(700);
Where elements in selector2 will get substracted from set matched by selector1.

Let's start from the top. Provided you follow the spec and IDs are unique on your page (as they should be), your click event selector should be just
$("#home").click(function() {...});
Also, the inner selector should be
$("#content .plates").children(...);
There's no need to stack ID selectors in front of other ID selectors since IDs should be unique and selectors are parsed from right to left.

You can use jQuery not to exclude the clicked element.
Code:
$("#wrapper #content #home").click(function () {
$("#wrapper #content .plates").children(':not(.nav)').not($(this)).fadeOut(700);
});
Demo: http://jsfiddle.net/IrvinDominin/dms6u1ww/

$("#wrapper #content #home" ).click(function() {
$("#wrapper #content .plates").children().not($('div', this)).not('.nav').fadeOut(700);
});

jQuery-UI draggable/droppable Jumping

I'm not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.
I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.
http://www.putoutsystems.com/jtest/
Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4
This is all the code for the app:
<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
#potion { width: 24px; height: 24px; position:relative;}
#tabs { width: 500px; height: 100px;}
#droppable { width: 500px; height: 100px;}
.inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>
//functions
$(function() {
//Dragable Elements
$( ".draggable" ).draggable({ revert: "invalid"});
//Hover Text
$( document ).tooltip();
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
}
});
//Tab Interface
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<!-- Inventory tabs-->
<div id="tabs">
<ul>
<li>Equipment</li>
<li>Consumables</li>
<li>Items</li>
</ul>
<div id="tabs-1" class="inventoryTab" >
</div>
<div id="tabs-2" class="inventoryTab" >
<div id="potion" class="draggable">
<img src="sprites/potion.png" alt="potion" title="Minor Health Potion">
</div>
</div>
<div id="tabs-3" class="inventoryTab" >
</div>
</div>
<br>
<!-- The Bin --->
<h1>The BIN</h1>
<div id="droppable" class="ui-widget-header">
<p>Empty!</p>
</div>
UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
$(ui.draggable).css({
'top': '10px',
'left': '10px'
});
}
});
I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.
JSFIDDLE

It seems like you don't need this line $(ui.draggable).appendTo($(this));
//functions
$(function () {
//Dragable Elements
$(".draggable").draggable({
revert: "invalid"
});
//Hover Text
$(document).tooltip();
//droppable elements
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("FULL!");
//$(ui.draggable).appendTo($(this)); // comment this out
}
});
//Tab Interface
$("#tabs").tabs();
});
JSFIDDLE DEMO

Drag and drop the one div again and again to the next divs

My HTML file is
<div id="dragAnwr" ></div>
<div id="dropimg" > </div>
<div id="dropAnswr1" class="dropbox" ></div>
<div id="dropAnswr2" class="dropbox" ></div>
<div id="dropAnswr3" class="dropbox" ></div>
<div id="dropAnswr4" class="dropbox" ></div>
and My jQuery File is
$( "#dragAnwr" ).draggable({ revert: "invalid",cursor: 'move',containment: "parent", });
$( "#dropAnswr1" ).add( "#dropAnswr2").add( "#dropAnswr3").add( "#dropAnswr3").add( "#dropAnswr4").droppable({
drop: function( event, ui ) {
hoverClass: "drop-hover"
}
});
here i wanna drag the dragAnwr Div into the following Divs
<div id="dropAnswr1" class="dropbox" ></div>
<div id="dropAnswr2" class="dropbox" ></div>
<div id="dropAnswr3" class="dropbox" ></div>
<div id="dropAnswr4" class="dropbox" ></div>
Using my jQuery Code only the one time the dragAnwr div drop into any of other div. here i wanna drag and drop the dragAnwr div again and again to the next divs. so please give a perfect solution. Thanks

I'm not sure what you really want. But I think you want that user may change the answer after dropping the answer flag.
So here is my solution
// HTML
<div id="dragAnwr" >' ' is Answer </div>
<div id="dropAnswr1" class="dropbox" >A</div>
<div id="dropAnswr2" class="dropbox" >B</div>
<div id="dropAnswr3" class="dropbox" >C</div>
<div id="dropAnswr4" class="dropbox" >D</div>
You can add draggable event to elements by select their class and set call back to the drop function
// js
$( "#dragAnwr" ).draggable({
revert: "invalid",
cursor: 'move',
containment: "parent"
});
$( ".dropbox" ).droppable({
drop: function( event, ui ) {
// remove flag class
$(this).siblings().removeClass('selected');
// add class to the dropped element
$(this).addClass('selected');
},
hoverClass: "drop-hover"
});
And some CSS for more info
// css
div {
border-style:solid;
border-width:5px;
}
.selected {
color: red;
}
Hope this help! You can take a look at its fiddle http://jsfiddle.net/DKUg9/5/