|
JavaScript - Frames And Jquery Tabs
Hi,
I have a problem with my script displaying tabs (jquery tabs) in frames. When the scripts (not in frames) are viewed in the browser, the tabs are displayed correctly. I created a script containing frames for existing scripts to be displayed in certain frames. Some scripts display fine in the frames, even some of those that contain tabs. While some may display correctly, I still get some scripts when viewed in the frames script that are not displaying the tabs correctly. Can anyone please give me a solution to this problem. Thank you. Similar TutorialsI am having a problem with a page I am building using jquery tabs. I have basically put a set of tabs within another set. The top level of tab navigation works fine, but then you click on the tabs navigation within the first tab it doesnt work. http://dl.dropbox.com/u/14080718/Final/TabsInTabs.html I cant get it to work and not sure why. I am still learning web design and I am not sure if this is a html/css or jquery problem. I would appreciate any help anyone wants to give. Thanks, Hi Everyone, I hope it was the right decision to post here and not in the Javascript framework forum, as I think my problem is not necessarily related to the use of jQuery, but my lack of Javascript knowledge and how I can make both scripts work together. I am using a jQuery tab plugin that shows a different content div on click of each tab. It also has a fade in (http://www.stilbuero.de/jquery/tabs/...n73#fragment-7) In addition, I am using the scroller scripts from Blueshoes (I also tried another, similar scroller script, but run into the same problem: http://www.dyn-web.com/code/scroll/vert.php). What I want to achieve: Have a simple tab function with up to 6 tabs. Each tab content will have a scrollable div with a custom scrollbar that also scrolls on mouseover. The problem: The tab and scrollbar on initial page load work fine. Once I click on the second or third tab, the tab content loads fine, but the scroller function does not load. I have to click on the tab number again for the scrollbar to appear (I added an onClick event that loads the scrollbar, but this only seems to be activated on the second click, not the first click) I thought I could just reload the page again with an onClick event on the tabs, but this only reloads the page with the first tab active, and the tab content fade in effect doesn't quite show anymore. In addition, I do not know how to change the script so the tab that was been clicked on (e.g. tab2 or tab3) is active on page reload. Please take a look at site, where you can see everything it all in action: http://www.webjungle.com/TESTDEV/ind...s_reduced.html I'd prefer a solution that loads the scroller script immediately onClick of each tab without reloading the page. I tried all kinds of possibilities, and I have been working on this for the past 2 days! My Javascript knowledge is just to limited to grasp what needs to happen. Here is my code, as simplified as possible, with comments in italics: CSS, JAVASCRIPT and LINKS to JS libraries and plugins: Code:
<style type="text/css">
<!--Begin scroller css -->
.scrollingtext {
position:absolute;
width: 480px;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 19px;
}
</style>
<!--End scroller css -->
<!--Begin Tab scripts -->
<script src="scripts/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.tabs.pack.js" type="text/javascript"></script>
<!--tab content fade in -->
<script type="text/javascript">
$(function() {
$('#tabcontainer').tabs({ fxFade: true, fxSpeed: 'fast' });
});
</script>
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<!--End Tab scripts -->
<!--Begin blueshoes scroller scripts -->
<script type="text/javascript" src="scripts/LibCrossBrowser.js"></script>
<script type="text/javascript" src="scripts/EventHandler.js"></script>
<script type="text/javascript" src="scripts/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="scripts/Bs_Slider.class.js"></script>
<script type="text/javascript" src="scripts/Bs_ScrollableDiv.class.js"></script>
<script type="text/javascript" src="scripts/scrollFunction2.js"></script>
<!--End blueshoes scroller scripts -->
HTML: Code: <body onLoad="init();"> <!--init() calls the scroller script -->
<div class="scroller">
<div id="tabcontainer">
<!--TABS -->
<ul>
<li><a href="#tab1" onClick="init();"><span>1</span></a></li> <!--i was hoping to be able to initialize the scroller script with a click, but doesn't work when first clicking on it. Only after a second click the scrollbar shows up -->
<li><a href="#tab2" onClick="init();"><span>2</span></a></li>
<li><a href="#tab3" onClick="init();"><span>3</span></a></li>
</ul>
<!--TAB 1 CONTENT -->
<div id="tab1">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1" onLoad="init();">
<tr>
<td width="499px" valign="top"><div id="divcontainer_1" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_1" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv1"></div></td>
</tr>
</table>
</div>
<!--TAB 2 CONTENT -->
<div id="tab2">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
<tr>
<td width="499px" valign="top"><div id="divcontainer_2" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_2" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv2"></div></td>
</tr>
</table>
</div>
<!--TAB 3 CONTENT -->
<div id="tab3">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
<tr>
<td width="499px" valign="top"><div id="divcontainer_3" class="slidertext" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_3" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv3"></div></td>
</tr>
</table>
</div>
</div> <!-- END tabcontainer *****************-->
</div> <!-- END scroller *****************-->
</body>
P.S. I am using a transitional doctype, which seems to be correct and working with each script on its own... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I would appreciate some hints or tips sooo much!!!! Thank you for reading my essay. So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Hey guys, No clue what the code is for this. I did try creating one but it dramaticly failed. Just wondering what is the code for a box with tabs where if you click the tabs it provides information i the box below. and does not link you to a site. And i need 6 tabs on it. Thanks for people that can provide.
Dear friends, I use this script wich works fine in FF, Opera and Chrome but not in IE! Code: <script type="text/javascript">
function DoAllThese() {
window.open('http://google.com', 'One','_blank');
window.open('http://www.yahoo.com','Two','_blank');
}
</script>
Code: <button onClick="DoAllThese();">Open</button> Is it possible to do it in IE? Good Afternoon, I am new to coding and I am needing help coding a form. I need javascript coding that will give me tabs. I also need the tabs to be greyed out for the users who should not see those tabs. So if i have an analyst, section chief and division chief. I need three tabs. when the analyst is logged in filling out their questions on the form i want the sections cheif and division chief tabs to be greyed out. Can anyone help me with this! Lizz Reply With Quote 12-17-2014, 07:34 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts what do you have so far? I am using this JQuery tabbed viewer - http://flowplayer.org/tools/demos/tabs/skin4.htm on my home page: http://billboardfamily.com/?theme=DeepFocus The issue I am having is that the content on the "Photos" tab is not showing at all. In the "Blog" tab, I am calling some PHP code & it works fine, so that should be the case with the code called in the "Photos" tab, as well, but it's not working. Can anyone help me figure out why? Here is the source code for my home page (the tabbed area) Code: <!-- BEGIN main blog content -->
<?php
$lastposts = get_posts('numberposts=1&category=15');
foreach($lastposts as $post) :
setup_postdata($post);
?>
<div id="mainblog" style="margin-top: 15px;">
<div class="mainblog-content">
<?php endforeach; ?>
</div>
<!-- start tabs-->
<div id="panes">
<div>
<p>
<h2 style="color:#000000;"><a style="color:#000000;" href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's & Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.
</p>
</div>
<div>
<p>
<div id="portfolio-items" class="clearfix">
<?php $allCats = get_categories();
$blogCats = array();
$blogcat = get_cat_ID(get_option('deepfocus_blog_cat'));
foreach ($allCats as $category) {
if (in_subcat($blogcat, $category->cat_ID)) $blogCats[] = $category->cat_ID;
}
$args = array('category__not_in' => $blogCats,
'showposts' => get_option('deepfocus_portfolio_number'));
$i = 1;
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/includes/gallery.php'); ?>
<?php $i++; endwhile; endif; wp_reset_query(); ?>
<div class="clear"></div>
<a href="<?php echo(get_category_link(get_cat_ID(get_option('deepfocus_portfolio_cat')))); ?>" class="readmore entergallery"><span><?php _e('Enter The Gallery','DeepFocus'); ?></span></a>
</div> <!-- end #portfolio-items -->
</p>
</div>
<div>
<p>
Contests & Specials use custom fields
</p>
</div>
<div>
<p>
Connect on Facebook, etc use custom fields
</p>
</div>
<div>
<p>
Comments
</p>
</div>
<div>
<p>
<a href="http:www.billboardfamily.com/rss">Subscribe To Our Blog</a> <br />Also, add mailing list here
</p>
</div>
<div class="clearfix"></div>
</div>
<br clear="all" />
<!-- navigator -->
<div id="nav">
<ul>
<li class="button-1">
<a href="#1">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Blog</strong>
</a>
</li>
<li>
<a href="#2">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Photos</strong>
</a>
</li>
<li>
<a href="#3">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/>
<strong>Contests & Specials</strong>
</a>
</li>
<li>
<a href="#4">
<img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />
<strong>Connect</strong>
</a>
</li>
<li>
<a href="#5">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Comments</strong>
</a>
</li>
<li>
<a href="#6">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Subscribe</strong>
</a>
</li>
</ul>
</div>
<br clear="all" />
<!-- end tabs-->
<!-- END main blog content -->
The same code is used below the tabs, and it works there....so it has something to do with the tabs. Please help. thanks I am using a script I found and trying to make some changes. It is a avatar creating script that will put a face together. The tabs are different parts of the face. The problem is I don't want all the different hair colors and styles to show and in the color tab when you click a color it will bring up the hair styles in that color only in the next tab. I have tried if(isset($_GET['color'])) { but this is only showing the first color style cant it to work. So then tried to use switch like this PHP Code: <p> <span name="color"> <img src="herotmb/color0.png" alt="" /><input name="avatar[color]" type="radio" value="black" id="black" onclick="swapImage(this);" /> <img src="herotmb/color1.png" alt="" /><input name="avatar[color]" type="radio" value="brown" id="brown" onclick="swapImage(this);" /> <img src="herotmb/color2.png" alt="" /><input name="avatar[color]" type="radio" value="darkbrown" id="darkbrown" onclick="swapImage(this);" /> <img src="herotmb/color3.png" alt="" /><input name="avatar[color]" type="radio" value="yellow" id="red" onclick="swapImage(this);" /> <img src="herotmb/color4.png" alt="" /><input name="avatar[color]" type="radio" value="red" id="yellow" onclick="swapImage(this);" /> </span> </p> <?php switch(id){ case 'BLACK': echo ' <p> <img src="heroimg/hair0-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-black" /> <img src="herotmb/hair1-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-black" /> <img src="herotmb/hair2-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-black" /> <img src="herotmb/hair3-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-black" /> <img src="herotmb/hair4-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-black" /> <img src="herotmb/hairNone-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'BROWN': echo ' <p> <img src="herotmb/hair0-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-brown" /> <img src="herotmb/hair1-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-brown" /> <img src="herotmb/hair2-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-brown" /> <img src="herotmb/hair3-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-brown" /> <img src="herotmb/hair4-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-brown" /> <img src="herotmb/hairNone-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'DARKBROWN': echo ' <p> <img src="herotmb/hair0-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-darkbrown" /> <img src="herotmb/hair1-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-darkbrown" /> <img src="herotmb/hair2-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-darkbrown" /> <img src="herotmb/hair3-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-darkbrown" /> <img src="herotmb/hair4-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-darkbrown" /> <img src="herotmb/hairNone-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'RED': echo ' <p> <img src="herotmb/hair0-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-red" /> <img src="herotmb/hair1-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-red" /> <img src="herotmb/hair2-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-red" /> <img src="herotmb/hair3-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-red" /> <img src="herotmb/hair4-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-red" /> <img src="herotmb/hairNone-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'YELLOW': echo ' <p> <img src="herotmb/hair0-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-yellow" /> <img src="herotmb/hair1-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-yellow" /> <img src="herotmb/hair2-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-yellow" /> <img src="herotmb/hair3-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-yellow" /> <img src="herotmb/hair4-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-yellow" /> <img src="herotmb/hairNone-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; } ?> nothing shows up. I have searched and found this and tried it but get more errors because I'm not just using images Code: http://www.codingforums.com/showthread.php?t=205694 How can I get this to work ? hi i try this code it not working beacause its open after one second open new tab javascript query but i have also use php redirect url also . i want javascript new tab url open new tab before page redriect here is code Code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
window.open(
'https://google.com',
'_blank'
);
}, 2000);
});
</script>
<?php
$url='http://yahoo.com';
echo header ('Location:'.$url);
?>
in above code i want page redirect to yahoo.com before open new tab of google.com how to set it please help me I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter. Is there something I can add to the script to force it on top of every other object on the page? I am having some problems with some JS code that does not work cross browsers Here is my code Code: <html>
<head>
<link rel="STYLESHEET" type="text/css" href="../../include/css/tab.css">
<script src="../../include/js/tabpane.js" type="text/javascript"></script>
</head>
<body>
<div name="objBody">
<div id="tabpane">
<div>
<h2>Contact</h2>
<div>
<br>THIS IS CONTACTS TEXT
</div>
</div>
<div>
<h2>Contact2</h2>
<div>
<br>THIS IS CONTACTS TEXT2222
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tp = new TabPane(document.getElementById("tabpane"));
</script>
</body>
</html>
CSS Code: .tab_pane_holder {
width: 100%;
background-color: #336699;
font-family: verdana;
font-size: 8pt;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
}
.tab_normal {
border-right: 1px solid black;
border-left: 1px solid white;
border-bottom: 1px solid black;
border-top: 1px solid white;
padding: 5px;
background-color: #5a7edc;
text-align: center;
/*width: 100px;*/
height: 10px;
color: white;
}
.tab_active {
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
background-color: white;
padding: 5px;
text-align: center;
/*width: 100px;*/
height: 10px;
color: black;
}
.tab_after_active {
border-right: 1px solid black;
border-left: 0px solid black;
border-top: 1px solid white;
border-bottom: 1px solid black;
background-color: #5a7edc;
padding: 5px;
text-align: center;
/*width: 100px;*/
height: 10px;
color: white;
}
.tab_before_active {
border-left: 1px solid white;
border-bottom: 1px solid black;
background-color: #5a7edc;
border-top: 1px solid white;
text-align: center;
padding: 5px;
/*width: 100px;*/
height: 10px;
color: white;
}
JS Code: function TabPane(el)
{
var tmp = this;
this.element = el;
this.tabs = new Array();
this.divs = new Array();
this.selected = null;
for(var i = 0; i < el.childNodes.length; i++)
{
this.tabs[i] = this.element.childNodes[i].childNodes[0].innerHTML;
}
for(var i = 0; i < this.element.childNodes.length; i++)
{
this.divs[i] = this.element.childNodes[i];
}
for(var i = 0; i < this.element.childNodes.length; i++)
{
this.element.childNodes[i].removeChild(this.element.childNodes[i].childNodes[0]);
}
this.tabPane = document.createElement("div");
this.element.insertBefore(this.tabPane,this.element.childNodes[0]);
this.tabPane.className = "tab_pane_holder";
for(var i = 0; i < this.tabs.length; i++)
{
var x = this.tabs[i];
this.tabs[i] = document.createElement("span");
this.tabPane.appendChild(this.tabs[i]);
this.tabs[i].innerHTML = x;
this.tabs[i].className = "tab_normal";
this.tabs[i].style.cursor = "hand";
this.tabs[i].onselectstart = function()
{
return false;
}
this.tabs[i].onclick = function()
{
tmp.showPage(this);
}
}
for(var i = 0; i < this.divs.length; i++)
{
this.divs[i].style.display = "none";
this.divs[i].style.width = this.element.style.width;
this.divs[i].style.height = this.element.style.height;
this.divs[i].style.overflow = "auto";
this.divs[i].style.borderRight = "1px solid black";
this.divs[i].style.borderBottom = "1px solid black";
this.divs[i].style.borderLeft = "1px solid black";
}
this.showPage = function(el)
{
var x,y;
for(var i = 0; i < this.tabs.length; i++)
{
if(el == this.tabs[i])
{
x = i;
}
}
y = ((x-1) < 0)?0:(x-1);
for(var i = 0; i < this.tabs.length; i++)
{
this.tabs[i].className = "tab_normal";
}
this.tabs[y].className = (y == x)?"tab_active":"tab_before_active";
if(this.tabs[y+1])
{
this.tabs[y+1].className = (y == x)?"tab_after_active":"tab_active";
}
if(this.tabs[y+2])
{
this.tabs[y+2].className = (y == x)?this.tabs[y+2].className:"tab_after_active";
}
if(x == 0)
{
this.tabs[x].style.borderLeft = "0px solid black";
}
for(var i = 0; i < this.divs.length; i++)
{
var show = (i == x)?"block":"none";
this.divs[i].style.display = show;
}
}
this.showPage(this.tabs[0])
}
Hello, It is my first post here so hello everybody I am currently building a website and it is the first time I have experimented with ajax, jquery etc etc so forgive me if I come across as a bit of novice in all this but ......... I am. lol I have a column of links that use ajax to load content into the adjacent DIV, and I have used the loadobs function to load the JS and CSS files along with the external file. Now within the external file I have used javascript to create a 3 tab section; when you first load the page it is fine BUT if you navigate away from the page and then try going back and loading the same external page then the tabs stop working and all the content of the tabbed sections stack ontop of one another as though the javacript isnt working? I am completely new to javascript but I think it is fabulous and I am keen to learn the ins and outs and would be really greatful if someone who knows what they are doing could point me in the direction of where I am going wrong or maybe what part of the code could be causing the error. It is a work in progress but the page I am having the problems on can be found at http://www.hm-designs.co.uk/crossland/solo.php if you click on the top link in the left hand column called Tara - Female vocalist you will be able to see where the tabs are. Thank you in advance if anyone may be able to help me Kind Regards, Helen Hi, I have created three tabs to display different content in each. Although I can click and go to the specific tab, but except the first 1 the other two tabs don't display any content or html that I have. Can anyone find any problem in the code? I have attached just the html. please excuse the structure of the code as it needs to be that way. thanks hie everyone plz i want to know how to make tabs using javascript.... i want to make tabs like this website http://traveline.idea-sys.net/CSP/Default.aspx?A=2&P=50 --> (M/S Darakum - Description / GalleryDeck / Plan) can anyone help me plz? |
|||||||