Develop Reference

how to close or return a loaded div to it's original state

I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.

If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).

How do I keep the current tab active after a page reload?

I'm currently using tabs and want to select the same tab after a user has posted data and the page reloads.
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $items = $('#vtab>ul>li');
$items.mousedown(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(0).mousedown();
});
</script>
Tabs:
<div id="vtab">
<ul>
<li class="user">User</li>
<li class="category">Category</li>
</ul>
<!--user-->
<div>Content</div>
</div>
<!--category-->
<div>Content</div>
</div>
Thank you!

One easy way is to post the data via XMLHttpRequest aka AJAX. That way, your whole page won't redirect. The other solution is to put the active tab in the URL. That has the side benefit of allowing bookmarks to return to the correct tab too. To put the tab in the URL, look at pushstate (and consider a polyfill/backwards compatible approach to work with browsers that do not have pushstate).

Script execution blocked after first execution

In the dashboard from my project, the follow code handle all clicks in hyperlinks:
$('document').ready(function(){
$('#box').draggable();
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
$('a').unbind();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
The content of the pages is opened in this <div>:
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
My problem is: after I "close" the <div> by clicking in 'button', I can't access the other options anymore, because all of them stay blocked. When I refresh the page all back to work.
Someone knows how to solve this?

Ok, after more tryouts I managed to find the problem: happens that the pages I open in the <div> have some included scripts on them. When I remove this scripts, the behaviour in the parent window back to normal. Probably some type of conflict between the two scripts are happening.

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.

I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo

In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)

$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});

We can use an iframe to display the link in the <a> tag.
Here's a fiddle

Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});

jQuery content slider

I am just delving into using jQuery and I want to start off by using good coding logic. I am developing an upload site where users can select "upload from computer" or "upload from url". I have two links above the content where users can choose to upload from their computer or from a url, and I want the content to change with jQuery (with some effects) when the user makes their choice.
Demo of what I want:
http://imgkk.com/
In the content box where it says Upload: Images URL NFO, I want my content to slide like that.
I know how to accomplish this, but I'm not sure if its the correct way. I was going to check which content is visible when the user clicks the link and act accordingly, is this the best way?
Thanks.
EDIT: In response to someones answer:
$(".upload-options a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
alert($target);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
alert('Show: ' + $target);
}
});
Markup:
<p class="upload-options">
Normal upload
URL upload
</p>
<div id="normal-upload">
// normal upload stuff
</div>
<div id="url-upload">
// url upload stuff
</div>
Cheers!

I normally follow a pattern like this:
<div id="links">
Computer
URL
</div>
<div id="panes">
<div id="computer">
</div>
<div id="url">
</div>
</div>
And then the jQuery:
$(function(){
$("#links a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
}
e.preventDefault();
})
});

Checking the visibility is the simplest way to accomplish this.