|
JavaScript - Jquery Hide Element When Something Else Is Focused In On.
What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code.
Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
suggestions.hide();
// On the change of the id_location text search for matching results.
$('#text').keyup(function(){
// Get the value of the id location.
var text = $('#text').val();
// Trim any unnecessary white spaces.
text = jQuery.trim(text);
// Start guessing after the length of text if greater than one.
if (text.length > 1) {
// Create a query string for ajax.
var qry_str = '?suggestion=' + text;
// Send an ajax json request.
$.getJSON('http://example.com/page.html' + qry_str, function(data){
// Empty the suggestions box.
$('#suggestions').empty();
// Show the suggestions box.
$('#suggestions').show();
if (data.length > 1) {
// Start a list for the suggestion.
$('#suggestions').append('<ul class="suggestion_list"></ul>');
// Loop through all the results.
for (i = 1; i < data.length; i++) {
// Get the name.
$('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
}
// If an id selection was made then place its complete text in the box and its id in the id location box.
$('.suggestion').click(function(){
// Get the id from the substring of the html id.
var html_id = $(this).attr("id");
var id = html_id.substring(11);
// Get the name from the text.
var name = $(this).html();
// Alert just to test if you have the id.
alert(id);
// Set the value of the text box to the complete name.
$('#text').val(name);
// Hide and empty the suggestion box.
$('#suggestions').hide();
// Turn the focus back to the text.
$('#text').focus();
});
/* This is the part that messes up the suggestion click function if turned on. */
// Hide the box when focus is else where.
$('#container').focusout(function(){
alert('test');
// $('#suggestions').hide();
});
});
}
});
});
</script>
<div id="container">
<input type="text" id="text" name="text" value="">
<div id="suggestions">
<ul class="suggestion_list">
<li id="suggestion_1" class="suggestion">Option 1</li>
<li id="suggestion_2" class="suggestion">Option 2</li>
<li id="suggestion_3" class="suggestion">Option 3</li>
<li id="suggestion_4" class="suggestion">Option 4</li>
</ul>
</div>
</div>
The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help. Similar TutorialsHey there, I want a div element only to show when you hover over an anchor of the main menu. The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions. That's the menu. This is what should appear when you're hovering one of the items. Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor. Here's the website:www.chabuya.net I already tried hundreds of show/hide scripts, solving this via css but nothing works for me. I'd be grateful for any suggestions. Thanks in advance, Kevin Hi well my problem is.. how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide.. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.. http://development.andrewfopalan.com/devpage/test.html here's the test page.. when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element.. please help.. tried various things.. just a shed of light will do.. thanks Does anyone know what's wrong with this code because when the page loads, the link is not being hidden Code: window.onload = setTarget;
function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}
I kinda new to Javascript, and can get by with most of the basic bits and bods I need to do the day to day work on websites, but I've come across something that is causing me some issues, I could use some help. The situation is, we have a webpage with 2 divs on it, one div has a javascript calculator and the other div sows the calculations in 2 separate tabs, the calc works and the tabs work no worries, the tabs are done in jquery. The issue I've got is I need to hide the 2nd div with the tabs in until the user has done the calculation, I had this working no problem, until we switched to using jquery for the tabs, using a simple Code: window.onload = hide;
function hide() {
document.getElementByID('tabs').style.display = 'none';
}
But now I don't know how or where to put this in the whole load of code for the jquery Code: <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tab_header li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tab_header li").click(function() {
$("ul.tab_header li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
Can anyone give me any guidance at all?? Cheers Hi Guys! I found one great solution for show/hide JQuery but i can't figure out how to make JS,css and html code all together, so please if anybody can make that code together for me and post me here! -Thanks in advance!!! here is code with example: http://jsfiddle.net/9XmVT/14/ Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc. This is my code for jquery show/hide: Code: <script type="text/javascript">
$(document).ready(function(){
$('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
});
$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>
What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show. Much appreciated Coders! hi! i am doing a site using jquery address deep linking and within the content i need to implement a show/hide div function but it doesn't seems to be working. jquery address source: http://www.asual.com/jquery/address/ demo: http://www.asual.com/jquery/address/...tabs/#Overview my show/hide div: <a href="javascript:toggle('clickHere','here' true)">click here</a> <div id="here" style="visibility:hidden; display:none">xxxx</div> function toggle(target,imgname, isOn){ window.onresize = null; obj=document.getElementById(target); obj2=document.getElementById(imgname); if(isOn){ obj.style.visibility='hidden'; obj.style.display='none'; obj2.style.visibility='visible'; obj2.style.display='inline'; } else{ obj.style.visibility='visible'; obj.style.display='inline'; obj2.style.visibility='hidden'; obj2.style.display='none'; } } * the same set of show/hide codes work when the site is not implemented with jquery address (deep linking) * so what could be the issue here? please help! Overview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. Hi all, I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible. I don't even know what this behavior is called so it's hard to get started. Any help or pointers in the right direction will be much appreciated. Anita. Cape Town. Hello, I have this short script he Code: function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array
for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image
var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width
var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height
if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}
if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}
alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}
It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage. Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed. The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder. Thank you, Jared I have a dataTable in which on the keyup event, the cursor focuses to the next field. In IE7, after a field, the next field is not coming into the view. Please help. The occField(2nd attachment) comes into view only after focus moves to next field, i.e LTD Buy up. Code: if (currId.indexOf("Occ") >= 0)
{
if(stdBuyUpSelected){
autoTabFocus("SBuy",index);
}else if(ltdBuyUpSelected){
autoTabFocus("LBuy",index);
}
else if (isStateZipDisp){
autoTabFocus("Zp",index);
}
}
function autoTabFocus(next,index)
{
var focusElem = document.getElementById(next+index);
if (focusElem != null)
{
focusElem.focus();
}
}
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! 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". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
|
|||||||