We Keep Coding

jQuery UI tabs show/hide images based on active tab

I'm using the jQuery UI tabs widget and I am trying to show/hide images based on the active widget.
I have a two column layout; left column has the tabs widget with three tabs, right column has the image(s); the image in the right column should swap depending on the active tab. Looking at the api and other posts why wouldn't my code work? How would I do it?
jQuery(function($) {
//turn content into tabs
$( "#tabs" ).tabs();
var active2 = $( "#tabs-2" ).tabs( "option", "active" );
if (active2) {
$(".gala-img1").show();
$(".gala-img2").hide();
$(".gala-img3").hide();
}
});

You can try something like this in your JS :
$( "#tabs" ).tabs({
activate: function (event, ui) {
if (ui.newHeader[0]) {
$(".gala-img" + $(ui.newHeader[0]).attr('data-imgid')).show();
}
},
beforeActivate: function (event, ui) {
if (ui.oldHeader[0]) {
$(".gala-img" + $(ui.oldHeader[0]).attr('data-imgid')).hide();
}
}
});
And put in your tabs-headers the data-imgid of the image you want, like this :
<li data-imgid="X">....</li>

How to store unique function name in array

I was working on my code and wanting to figure out how i can store draggable objects into an array because I am creating a math game that will recognize the draggable element and determine whether the problem is correct which is addition here is my code
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable2" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable3" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable4" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable5" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable6" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable7" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable8" ).draggable();
});
</script>
and then i am trying to put these draggable elements into an array
<div data-role="main" class="ui-content">
<script>
var theimagestwo = new Array();
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";
document.getElementById("pagethree").innerHTML = theimagestwo[1];
</script>
what am i doing wrong? they are just coming up as text

Take a look at this part of your code (I added comments):
// Create a new array
var theimagestwo = new Array();
// Push the strings "#draggable1" and "#draggable2" into the array
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";
// Set inner HTML as theimagestwo[1] (which is "#draggable1")
document.getElementById("pagethree").innerHTML = theimagestwo[1];
So, as you say, the result is "coming up as text" because it is text.
If I understand you correctly you want the contents of #pagethree to be the element #draggable1 (and not the string "#draggable1"). So you should replace the code above with:
var theimagestwo = new Array();
theimagestwo[1] = $("#draggable1");
theimagestwo[2] = $("#draggable2");
$("#pagethree").empty().append(theimagestwo[1]);

you can create a function for that and loop through using .each()
$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
makeItDraggaple($(this));
});
function makeItDraggaple(el){
el.draggable();
$("#pagethree").append(el);
}
Working Demo
or you can use just use .each() without need a function
$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
$(this).draggable();
$("#pagethree").append($(this));
});
Demo

On top of the answer from #Mohamed-Yousef, if you're looking to place all these elements in the "pagethree" container, you can probably do that by adding one line:
$('[id^="draggable"]').each(function(){
makeItDraggaple($(this));
$(this).appendTo("#pagethree");
});
There are some inefficiencies in doing $(this) twice and likely in not caching $("#pagethree") somewhere. But it's an (untested!) start.

jQuery does not apply offset on document.ready

So I am trying to apply a JS function on two events: window.resize and document.ready. The second one just won't work.
When I load the website I want this function to execute and apply the CSS. This is the last JS code before the
I've tried many JS events, but no success.
window.addEventListener("resize", footerMargin);
$( document ).ready(function() { footerMargin(); });
function footerMargin() {
var offset = $( ".section-item--coming-soon").offset();
var novaVar = Math.round(offset.top);
var leftVar = Math.round($( ".footer--section").offset.left);
var heightComingSoon = $( ".section-item--coming-soon").height();
var overall = novaVar + heightComingSoon + 75;
$( ".footer--section").offset({ top: overall, left: leftVar });
}

Upon setting value to leftVar you are using $( ".footer--section").offset.left instead of $( ".footer--section").offset().left.
This Math.round($( ".footer--section").offset.left) will return NaN.
Change that to:
var leftVar = Math.round($( ".footer--section").offset().left);

jquery - Redo on the old values

[Solved]
This script work good during first run. During run second, third etc. script first display old values var wartosc and late display new value var wartosc (uwaga('notice',wartosc);).
I think that I should somehow close function, but I don't think as :D.
$(function() {
$("#player").on('click', 'img', function() {
var zadanie = $( "input[name^='act']:checked:enabled" ).val();
var wartosc = $(this).attr('value');
var kupka = $('.kupka').attr('value');
switch(zadanie){
case '2':
$( "#dialog" ).dialog( "open" );
$('.wybor').click(function (){
$( "#dialog" ).dialog( "close" );
var ukryta = $(this).attr('value');
uwaga('notice',wartosc); // my own function like alert :D
})
break;
}
});
});

Since the click handle is bound in another handle, it may be bound more than once. You should unbind click event before you bind the new click handle.
$('.wybor').unbind('click').click(function (){...

When you use .attr('value') you're getting the value from the HTML, not the current value of the input if it has changed. Use .val() for that:
var wartosc = $(this).val();
var kupka = $('.kupka').val();

Insert element directly into div using Jquery ui Droppable

I have this system to create a list of chosen images by dragging and dropping the image items into a div id="trash".
This system is a copy from the photo manager in the jquery ui page:
Link
What I'm trying to implement is to have a arrow-up icon in each image sample to have it be inserted into the list without having to drag it.
I've managed to append the element but I'm having trouble to call the function deleteImage() so it animates like the animation after you drop the element inside the list.
Here is a JSFIDDLE of the project
This is what I have so far:
$('a.quick_insert').click( function(){
var sample = $("<li />").append($(this).closest($('li')).clone()).html();
$(this).closest($('li')).fadeOut(function(){
$('#trash').append(sample).fadeIn(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$sample.find( "a.ui-icon-trash" ).remove();
$sample.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$sample.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
});
});
});
Thank you

Try change your code in:
// Quick Insertion
$('a.quick_insert').click( function(){
deleteImage( $(this).parent() );
});
so you will reuse the same function of the example by passing the current clicked container as element.
Demo: http://jsfiddle.net/gqSaq/5/
EDIT
To let the recycle work correctly you must delegate its click usin on, because the element is dynamically created.
Code:
// Quick Insertion
$('#gallery li').on('click', 'a.quick_insert', function () {
deleteImage($(this).parent());
});
Demo: http://jsfiddle.net/gqSaq/6/