|
JavaScript - Jquery Toggle Problems
I created an FAQ toggle for my site.
I have the toggle working great. The problem is everytime I click one of the toggle links I am brought to the top of the page. Here it is. Any help is appreciated. Hey, while your there if you want to like my site on facebook, I won't complain. Similar TutorialsIm using the toggle script demonstrated he http://www.sohtanaka.com/web-design/examples/toggle/ It works perfectly, but im wondering if it is possible to have a button to expand all and contract all. Ive been reading through this page: http://api.jquery.com/toggle/ Im having a hard time understanding it, because this is one of the first things I have worked on with jquery. Can anyone help explain how I can do this? Hey there, I'm using the "toggle" method to show/hide a piece of a form. I am trying to update a hidden input field to set a flag whether or not that area should be validated. The element toggle works fine, but I can't get the form value to update the way I would like... Here's what I have, the initial change (from 0 to 1) works, but it doesn't ever change back to 0 when clicked again... Code:
$(document).ready(function() {
$("#change-pwd-button").click(function(event) {
event.preventDefault();
$("#password-table").toggle("slow");
if ($("#changePassFlag").val("0")) {
$("#changePassFlag").val("1");
} else {
$("#changePassFlag").val("0");
}
});
});
Any help would be appreciated. Thanks, TE 1.I found a Slider Toggle thats demonstrated here and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used Code: .fader{opacity:0;display:none;}
but I wanted the slider div to be visible if javascript was disabled so I added Code: jQuery(".fader").hide();
so its now Code: <script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script>
instead of Code: <script type="text/javascript">
$(document).ready(function() {
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script>
<style>
.fader{opacity:0;display:none;}
</style>
will this be fine in browsers or is there a better way to hide the div with javascript so its visible when javascript is disabled? Hi, Im using a toggle script on my site. Im trying to add functionality. Currently, when you click on a toggle, that particular toggle expands and changes the toggle image. Ive made it so when you click the text on the top left, all the toggles open or close. However, the toggle image doesnt change (+ / -) Here is my code: Code: $(document).ready(function(){
$(".toggle_container").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("h2.trigger2").toggle(function(){
$(".toggle_container").slideDown();
}, function () {
$(".toggle_container").slideUp();
});
});
Here is my site: http://www.zombiemod.com/sm/test6.html Just to explain it better. When you click on the center toggles, the background image changes. When you click on "Web Design and Development" on the left, the background images dont change. Im trying to get it so it changes as well. Can anyone help with this? Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! Hi everyone.. I am using the script below to run a rating plugin... it works on all browsers except ie6 and 7.. any help would be greatly appreciated.. thanks in advance.. $.fn.rater = function(options) { var opts = $.extend({}, $.fn.rater.defaults, options); return this.each(function() { var $this = $(this); var $on = $this.find('.ui-rater-starsOn'); var $off = $this.find('.ui-rater-starsOff'); opts.size = $on.height(); if (opts.rating == undefined) opts.rating = $on.width() / opts.size; if (opts.id == undefined) opts.id = $this.attr('id'); $off.mousemove(function(e) { var left = e.clientX - $off.offset().left; var width = $off.width() - ($off.width() - left); width = Math.ceil(width / (opts.size / opts.step)) * opts.size / opts.step; $on.width(width); }).hover(function(e) { $on.addClass('ui-rater-starsHover'); }, function(e) { $on.removeClass('ui-rater-starsHover'); $on.width(opts.rating * opts.size); }).click(function(e) { var r = Math.round($on.width() / $off.width() * (opts.units * opts.step)) / opts.step; $off.unbind('click').unbind('mousemove').unbind('mouseenter').unbind('mouseleave'); $off.css('cursor', 'default'); $on.css('cursor', 'default'); $.fn.rater.rate($this, opts, r); }).css('cursor', 'pointer'); $on.css('cursor', 'pointer'); }); }; $.fn.rater.defaults = { postHref: location.href, guid: 0, units: 5, step: 1, }; $.fn.rater.rate = function($this, opts, rating) { var $on = $this.find('.ui-rater-starsOn'); var $off = $this.find('.ui-rater-starsOff'); $off.fadeTo(600, 0.4, function() { $.ajax({ url: opts.postHref, type: "POST", data: 'id=' + opts.id + '&guid=' + opts.guid + '&rating=' + rating, complete: function(req) { if (req.status == 200) { //success opts.rating = parseFloat(req.responseText); $off.fadeTo(600, 0.1, function() { $on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size); var $count = $this.find('.ui-rater-rateCount'); $count.text(parseInt($count.text()) + 1); $this.find('.ui-rater-rating').text(opts.rating.toFixed(1)); $off.fadeTo(600, 1); $this.attr('title', 'Your rating: ' + rating.toFixed(1)); }); } else { //failure alert(req.responseText); $on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size); $this.rater(opts); $off.fadeTo(2200, 1); } } }); }); }; -Carlos Hi guys, been running into some problems with all IE browsers and my jQuery Gallery from Galleryview. Background: I am using Java to do an image search and build up some HTML including the calls to run the galleryview scripts and return this back to the page using document.write() When I use the simple structure of placing the scripts and parameters into a sample page: Code: <body>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
});
</script>
It works fine. When I try and pull all the scripts out of the page and inject them back in using document.write() I get an error on IE: Code: sb.append("(function(){ document.write('" +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-1.3.2.min.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery.easing.1.3.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js\"></script> " +
" <script type=\"text/javascript\"> " +
" $(document).ready(function(){ " +
" $(\"#photos\").galleryView({ " +
" panel_width: 800, " +
" panel_height: 300, " +
" frame_width: 100, " +
" frame_height: 100 " +
" }); " +
" }); " +
" </script> " +............+
"')})()");
The variable sb is a StringBuffer and is formatted and returned: Code: nextPage.setValue(sb.toString()); nextPage.setEscapeHTML(false); return nextPage; This particular error in this case in IE(8) is: Object expected which I think is referring to the jQuery as the resulting images are displayed just not in Galleryview style. This is really wracking my brains and any and all help is appreciated. D. Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you. FYI: no errors on Firebug, hence I am posting here. Code: $("#filmviewer").mouseup(function(){
alert("t");
});
html Code: <div id="filmviewer" style="width:400px;"> <img src="pic_1.jpg" /> </div> The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong? Jquery, Jcarousel problems - want it to go back to the start and then stop Here is the link - I want it to go from the last - which would be the 3rd image and swoosh back to the beginning and stop. my alternative is already uploaded where I have it just go to the 4th which is the same at the first.. Help it would look nicer with it swooshing back to the beginning and stopping. http://www.macrojump.com/sti_demo/home.php Code: $(document).ready( function() {
function carouselInit(carousel) {
$('.level0-hero-carousel .carousel-control a').bind('click', function() {
carousel.scroll( parseInt( $(this).attr('rel') ) );
carousel.stopAuto();
return false;
});
carousel.clip.hover(function() {
//carousel.stopAuto();
}, function() {
//carousel.startAuto();
});
};
function firstItemAction(carousel, item, idx, state) {
$('.level0-hero-carousel .carousel-control a').removeClass('active').eq(idx-1).addClass('active');
};
$('.level0-hero-carousel').jcarousel({
scroll: 1,
initCallback: carouselInit,
itemFirstInCallback: firstItemAction,
auto: 4,
wrap: 'first',
animation: 1500,
buttonNextHTML: null,
buttonPrevHTML: null
});
if( $('.level0-hero-carousel ul li').size() > 1 )
$('.level0-hero-carousel .carousel-control').show();
$('.level0-hero-carousel .carousel-control a').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
/* Alerts */
$('.level0-alerts ul li').eq(0).show();
var alertsInterval = null;
var alertsIndex = 0;
var alertsIntervalLength = 1500;
var alertsCount = $('.level0-alerts ul li').size();
var expandedSizeClass = 'level0-alerts-expanded-' + alertsCount;
// Update NumAlerts Text
$('.level0-alerts .alerts-toggle span').text(
alertsCount + ' Alerts'
);
$('.level0-alerts .alerts-controls .alerts-toggle').bind('click', function() {
var itemsCount = $('.level0-alerts ul li').size();
if( $('.level0-alerts').hasClass('level0-alerts-expanded') ) {
$('.level0-alerts').removeClass('level0-alerts-expanded');
$('.level0-alerts').removeClass(expandedSizeClass);
switchAlert();
startAlertsInterval();
} else {
$('.level0-alerts').addClass('level0-alerts-expanded');
$('.level0-alerts').addClass(expandedSizeClass);
$('.level0-alerts ul li').show();
stopAlertsInterval();
}
return false;
});
var switchAlert = function() {
$('.level0-alerts ul li').hide();
alertsIndex++;
$('.level0-alerts ul li').eq(alertsIndex % alertsCount).show();
}
var startAlertsInterval = function() {
if(alertsInterval == null)
alertsInterval = setInterval(switchAlert, alertsIntervalLength);
}
var stopAlertsInterval = function() {
if(alertsInterval != null) {
clearInterval(alertsInterval);
alertsInterval = null;
}
}
if(alertsCount > 1) {
$('.level0-alerts .alerts-controls').show();
startAlertsInterval();
}
});
/*
* jQuery Placeholder Plug-in
*
* Copyright (c) 2010 Max Davis
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: 1
* Version: 0.1
*
* v0.1
* - First public release
*
*/
(function($){
$.fn.placeholder = function() {
$(this).each( function() {
if($(this).attr("type") == "password") {
var original_pass_field = $(this);
if(original_pass_field.val() == "") {
$(this).parent().append("<input type=\"text\" value=\""+ $(this).attr("placeholder") +"\" name=\"pass_placeholder\" class=\"form-text placeholder-inactive\" id=\"pass_placeholder\">");
$(this).css("display","none");
}
var original_pass_field = $(this);
$("#pass_placeholder").focus(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","none");
original_pass_field.css("display","");
original_pass_field.focus();
}
});
original_pass_field.blur(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","");
original_pass_field.css("display","none");
}
});
} else {
if($(this).val() === "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass('placeholder-inactive');
}
$(this).focus(function() {
if($(this).val() === $(this).attr("placeholder")) {
$(this).removeClass('placeholder-inactive').addClass('placeholder-active');
$(this).val("");
}
}).blur(function() {
if($(this).val() === "") {
$(this).removeClass('placeholder-active').addClass('placeholder-inactive');
$(this).val($(this).attr("placeholder"));
}
});
}
} )
}
})(jQuery);
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 I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears. Here is the code that I have ended up with so far. Code: $(function() {
$("#textbox1").hide();
$("#wrap").click(function() {
$("#button-top").animate({right: "860px"}, 2000);
$('#textbox1').animate({height: "toggle"}, 2000);
});
});
Hi all, looking for some help. I found this script that does almost everything i need. I have a form that has a small section of two radio buttons when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box. also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled. here is what i have so far. placed in head Code: <SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden"
document.getElementById(group).style.visibility = visSetting
}</script>
part of the form having issues with Code: <span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>
<span class="style30">Send to me to give to the recipant:</span>
<input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
</center>
<input type="hidden" name="price3" value=".00" />
<input type="hidden" name="qty3" value="1" />
<input type="hidden" name="noqty3" value="3" />
<div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173" style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
<td> </td>
</tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
<input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>
please anyone with help will be great Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded. The first toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> The second toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> Here is the referenced page: http://sprintexperts.info/phones/# Thanks in advance! I'm not sure if this is a JS or CSS problem, but I figure I would start here. What is wrong with the "onload" function that makes it so that I can not initialize the class name? I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests. What I expect to happen is that the <blockquote id=...> class names be initialized to hide if and only if JS is available for the toggleClass function to work. Here is what I am doing... Code: <!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
var sel = document.getElementById(IDS); // alert(IDS+' : '+sel.className);
if (sel.className != 'hide') { sel.className = 'hide'; }
else { sel.className = 'show'; }
}
window.onload = function() {
var sel = document.getElementsByTagName('*');
for (var i=0; i<sel[i].length; ++i) {
if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
}
}
//]]>
</script>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
li { list-style-type: none; }
#Schedule { margin:0px; padding:5px; }
#Projects { margin:0px; padding:5px; }
</style>
</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
<li>Current</li>
<li>Past</li>
<li>Future</li>
<li>On-going</li>
</blockquote>
</body>
</html>
I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick. It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected. Here is by code; Javascript; Code: function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
Here is a sample of my a to z table; Code: <table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
</tr></table>
And here is an example of the Brand name div ; Code: <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>
You can view the site on my test page; http://www.dp-development.co.uk/ProteinStop/site/ (Brand menu on the left nav) Thank you for any help you can give 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". I'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online. What I want to do is to toggle a number on a webpage when a user clicks a link. So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400). Would someone be kind enough to help me with this? Thanks |
|||||||