Loading content when switching tab - javascript

I want to recreate a tab like this in the below link so when u for instance click on another tab it remove the content and loading the new with a loading image. In below link try and click under 21 in the tab and u see it slides the content out and show loading image and then show the new content? How can i achieve similar effect?
So far i've tried by using pure css/html tabs however it seems like it cant be done that way.
http://themes.goodlayers.com/realsoccer/fixtures-results/

You can use jquery Tabs
"A single content area with multiple panels, each associated with a header in a list." :
http://jqueryui.com/tabs/

Related

Opening new tab in a div on button click

I am creating an app for network design and I need to be able to load a blank div when the user clicks on the New button.
The JQuery UI has a functionality exactly how I want it to be but it uses text area and if I use this, I won't be able to click and drag into the div.
This is the link.
These are my codes found on liveweave: http://liveweave.com/neFP7y and the following is the screenshot:
I need the tab to open in the blank space. Any idea how I can do this please?
Thanks.
<div> your page
<iframe src="http://www.w3schools.com//" height="400px;"></iframe>
</div>

Sliding panels closing when clicked outsite and linking to an open panel

I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted
Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).

Trying to open some links with an inline modal popup window

I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.

chrome extension - need to show the description on hover of the links as a popup

chrome extension - popup page has links. need to show the description on hover of the links as a popup to the left side of the link(means the description div will come outside of the extension wondow).(popup page has popups)
similar to vertical drop down menu...
should work in the chrome extension.
I tried a lot , but its not working in chrome....
I have an idea for firefox ....
take a main div .
Take 2 more divs inside the main div both of same size and also give the positions properly.
show the links in the 1st div and the descriptions in the 2nd div...
Make the 2nd div's background = transparent. (CSS property)
and on hover of the links show the respective description div in 2nd div in front of the links..
Try it out......
Your link text
You need the TITLE in your links... this will display inside your popup...
"Nothing in the popup can be outside the window." as kinlan said.

Inserting custom tab and Iframe into yahoo mail

I'm working on inserting a tab into Yahoo mail that would display an iframe with meebo in it.
This tab will act the same as the "Home" and "Inbox" tabs. These tabs are defined as tables in the "MainTabControl" div. Each tab controls the absolute position of a div which contains the content for that tab.
I have added a tab by inserting a table into the MainTabControl div using "Customize Your Web" firefox extension. The problem appears to be that yahoo's javascript (used to modify the page) is erasing my tab as well as the div containing the meebo iframe. Anyone tried something like this?
Thanks!
Greasemonkey might give you more options.

Categories

Resources