|
JavaScript - Jquery I Must Have A Small Mistake As Works Elsewhere
Hi,
I know this works in principle as I have used it successfully on other pages I am using so I must have a typo or some other small mistake, I have gone over and over it, taken things out, put them back in and I can't for the life of me work out where my mistake is. Another pair of eyes would certainly be appreciated. My code is: Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitnewfestival').click(function(){
var data = $('#publicnewevent').serialize();
$.post ('insertPublicEvent.php',data, function(){
alert("Thank you for adding an event to our calendar.");
$('#publicnewevent').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<form action="" name="publicnewevent" id="publicnewevent" method="post" autocomplete="off" >
<label class="two">Dress Code:</label>
<input type="text" class="input" name="dresscode" id="dresscode" value="Enter Dress Code" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Dress Code':this.value;" size="100" />
<br />
<br />
<input type="button" name="submitnewfestival" id="submitnewfestival" value="Submit" />
</form>
The insertPublicEventForm.php works as I have tested it without JQuery as a direct post. This is a heavily reduced version of the form, but even like this I can not get it to work. Similar TutorialsI am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery. 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 Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John Hi everybody I have a problem I want a header that is a slideshow and use lightbox for other images. No I have this all working but not at the same time. If I use this code in this order only the first script that is the lightbox script works. PHP Code: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> If I use this code so I switched the order only the slideshow works: PHP Code: <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> I also tried this: but then they both did not work PHP Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> Can you help me solve this problem so they both work? Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hi all I'm using the following form validation script - it's a very popular well-known validation method found everywhere... But i don't get any error alerts, the form takes me straight to the page defined in the "action=" :/ Could you help me see what is wrong? The script is: Code: <script type="text/javascript">
function checkWholeForm(theForm) {
var why = "";
why += checkEmail(theForm.HlekDieuthinsi.value);
why += checkPhone(theForm.StatheroTHL.value);
why += checkUsername(theForm.Onoma.value);
// why += isEmpty(theForm.notempty.value);
for (i=0, n=theForm.Koudouni.length; i<n; i++) {
if (theForm.Koudouni[i].checked) {
var checkvalue = theForm.Koudouni[i].value;
break;
}
}
why += checkRadio(checkvalue);
why += checkDropdown(theForm.Orofos.selectedIndex);
if (why != "") {
alert(why);
return false;
}
return true;
}
function checkUsername (strng) {
var error = "";
if (strng == "") {
error = "You didn't enter a username.\n";
}
if ((strng.length < 4) || (strng.length > 10)) {
error = "The username is the wrong length.\n";
}
var illegalChars = /\W/;
if (illegalChars.test(strng)) {
error = "The username contains illegal characters.\n";
}
}
function checkEmail(e){
var emailFilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i;
if (!(emailFilter.test(strng))) {
error = "Please enter a valid email address.\n";
}
var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
if (strng.match(illegalChars)) {
error = "The email address contains illegal characters.\n";
}
}
function checkPhone(strng) {
var stripped = strng.replace(/[\(\)\.\-\ ]/g, '');
if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.";
}
if (!(stripped.length == 10)) {
error = "The phone number is the wrong length.
Make sure you included an area code.\n";
}
}
function isEmpty(strng) {
var error = "";
if (strng.length == 0) {
error = "The mandatory text area has not been filled in.\n"
}
return error;
}
function checkRadio(checkvalue) {
var error = "";
if (!(checkvalue)) {
error = "Please check a radio button.\n";
}
return error;
}
function checkDropdown(choice) {
var error = "";
if (choice == 0) {
error = "You didn't choose an option from the drop-down list.\n";
}
return error;
}
</script>
And the way i'm calling it is: Code: <form method="post" name="registration" action="home.html" id="registration" onsubmit="return checkWholeForm(this)"> I was trying to sum every number in the array and I wrote this function: Code: function sumArray(array) {
var total = 0, i;
for (i = 0; i <= array.length - 1; i++) {
if(typeof array[i] == "number") {
array[i] += total;
}
}
return total;
}
I don't know why but it always returns "0". In other words, the initial value of "total" (if it was 5, it returns 5 etc...). I really can not see what is wrong here, any suggestions? 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". Hello all i've made Contact me form with JS validation , my qs is : i do not want the alert pop up small window a post text the alert in DIV i have read it's innerHTML here the JavaScript Code: function isEmpty( inputStr ) { if ( null == inputStr || "" == inputStr ) { return true; } return false; }
// Vadate name
function checkname (strng){
var error="";
if (strng == ""){
error = "Please Enter your name."
}
return error;
}
//Vadate last name
function checkprename (strng){
var error="";
if (strng == ""){
error = " Please Enter your name"
}
return error;
}
function checkPhone (strng) {
var error = "";
if (strng == "") {
error = "Vous n'avez pas inscrit un numero de telephone.\n";
}
var stripped = strng.replace(/[\(\)\.\-\ ]/g, ''); //strip out acceptable non-numeric characters
if (isNaN(parseInt(stripped))) {
error = "vous entrez le numero de telephone errone.";
}
if (!(stripped.length == 10)) {
error = "vous entrez le numero de telephone errone.\n";
}
return error;
}
//Validate Email
function checkEmail (strng) {
var error="";
if (strng == "") {
error = "Vous n'avez pas entre une adresse email.\n";
}
var emailFilter=/^.+@.+\..{2,3}$/;
if (!(emailFilter.test(strng))) {
error = "S'il vous plait entrer une adresse email valide.\n";
}
else {
//test email for illegal characters
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/
if (strng.match(illegalChars)) {
error = "L'adresse email contient des caracteres illegaux.\n";
}
}
return error;
}
Now here in html Code: function checkWholeForm(theForm) {
var why = "";
why += checkname(theForm.name.value);
why += checkprename(theForm.prename.value);
why += checkEmail(theForm.Email.value);
why += checkPhone(theForm.Phone.value);
if (why != "") {
var leDiv = document.getElementById('errormsg');
var nouveauDiv = document.createElement('div');
var divIdName = 'errormsg';
nouveauDiv.setAttribute('id',divIdName);
nouveauDiv.innerHTML = "u had Enter wrong information bla bla";
leDiv.appendChild(nouveauDiv);
var nouveauDiv2 = document.createElement('div');
var divIdName = 'errormsg';
nouveauDiv2.setAttribute('id',divIdName);
nouveauDiv2.innerHTML = ' ';
leDiv.appendChild(nouveauDiv2);
return false;
}
return true;
}
MY qs is how to let the innerHTML past past each error from the validate.js file which i call it erorr i mean near to input filed of phone it will be div id erorrmsg and in this div will past the error from the validate.js which it code from my start of this post thanks for advance Hey all, I have this code on my site that simply says if we are open or not. Code: <script language="Javascript">
<!--
/*
Credit must stay intact
Visit java-scripts.net or
http://wsabstract.com for this script
*/
now = new Date
if (now.getHours() <21) {
document.write("We are Currently : Open")
}
else if (now.getHours() <9)
{* * document.write("We are currently : Closed")}
else
{ * *document.write("We are currently : Closed")}
//-->
</script>
I wish to know how I can change this code so that I can add some colour and change the size of the font. Any help would be great. Hi all, I got a small problem. Please help me. Below is the code for toggle text. My problem is Whenever I click Toggle div 1 a Contents of div1 opens. I want a code to hide Contents of div1 when I click Toggle div 2(Shows only Contents of div2) or Toggle div 3 (Shows only Contents of div3) and vice versa. Code: <div align="left" id='div1' style='display:none'>Contents of div1</div>
<div align="left" id='div2' style='display:none'>Contents of div2</div>
<div align="left" id='div3' style='display:none'>Contents of div3</div>
<button onclick="toggle(1)">Toggle div 1</button>
<button onclick="toggle(2)">Toggle div 2</button>
<button onclick="toggle(3)">Toggle div 3</button>
<script>
function toggle(x){
var divx = document.getElementById('div'+x)
if (divx.style.display == 'none') {
divx.style.display = 'block'
} else {
divx.style.display = 'none'
}
}
</script>
Hello. I have created a button so that when a person click it, it should turn the text into Bold font weight - Fortunately it works, However i tried adding an alternative which is when the text is already turned into Bold font weight the person could click the button in order to switch the text into normal mode, simply cancel the Bold - Unfortunately it doesn't work at all - Can Some one review my little script and help me solve it out ? PHP Code: <script type="text/javascript"> function bold(id) { if (document.getElementById) { document.getElementById(id).style.fontWeight = 'bold'; } else if (document.all) { document.all[id].style.fontWeight = 'bold'; } } //@@@@@@@@@@@(Now the rest of the code down bellow is what i have added so that i could click an cancel the bold mode or (document.all) { document.all[id].style.fontWeight = 'normal'; } </script> and that's the image code : PHP Code: <img src="Bold.bmp"width="42" height="39" title="Bold Font" onclick="bold('bodytext')" style="cursor:pointer;" /> first of all, hello all i found this forum while running out of ideas and being extremely desperate to fixing a probably small javascript error in a script. the script is supposed to open a small form window that allows the user to input an email address and update it to proceed. the form item is initially unchecked, but as the user clicks it and enter his email address, it updates the value of the email address and the box becomes "checkable". the problem is that with both IE and firefox, the box doesn't close again, doesn't get checkable and basically doesn't work. in the firefox debugging console, I found the following error: Quote: Error: document.getElementById(input_array[i]) is null Source File: sell_item.php Line: 1106 does anyone have an idea what could be wrong? the part responsible in the javascript for this section is: Code: <script language="javascript">
function pg_popup_open(id)
{
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
}
return false;
}
function pg_update_settings(id, input_array)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url = '' + 'ajax_files/direct_payment_box.php';
var action = url + '?id=' + id + '&user_id=' + 100001;
var chk_disabled = false;
for ( var i in input_array )
{
action += '&' + input_array[i] + '=' + document.getElementById(input_array[i]).value;
if (document.getElementById(input_array[i]).value == '')
{
chk_disabled = true;
}
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
}
};
xmlHttp.open("GET", action, true);
xmlHttp.send(null);
document.getElementById('checkbox_' + id).disabled = chk_disabled;
if (chk_disabled == true)
{
document.getElementById('checkbox_' + id).checked = false;
}
document.getElementById(id).style.display = 'none';
return false;
}
</script>
and the html code that is supposed to pop up the box is: Code: <input type="checkbox" name="payment_gateway[]" id="checkbox_pg_paypal" value="1" disabled>
<span class="contentfont"><a href="javascript:;" onclick="pg_popup_open('pg_paypal');">PayPal</a></span>
<script language="javascript"> var array_pg_paypal = new Array(); array_pg_paypal[0] = 'pg_paypal_email';</script>
<div class="smallfont"><b>PayPal Email Address</b><br>
<input type="text" name="pg_paypal_email" id="pg_paypal_email" value="" /></div>
<div align="right"><input type="button" value="Proceed" onclick="pg_update_settings('pg_paypal', array_pg_paypal);" /></div>
i understand this is asking a lot, but if someone has a spare second that is a javascript guru, i promise i will name my first born after you!! lol I have a piece of code that pulls reviews and allows a business owner to drop the reviews on to their website. I need to limit the number of reviews and ideally I'd like to do that with just the snippet the biz owner drops into their site. Is this possible? Here's a sample of the code: <div id="repagent_reviews"></div><script type="text/javascript" src="http://awebsite.com/anotherwebsite/wp-admin/admin-ajax.php?action=repagent_reviews_js&id=1182"></script> thanks! confused Hey guys I need a small help. I am new to Javascript. I want to save data from dropdownlist to XML file. Save function is working but I dont know how to load data list from dropdown to xml file. I can do with input element but dont know how to work with dropdown element. How to do this? Look at my codes below: HTML markup (index.html): FOCUS ON RED <body> <form name="reg" action="index.html" method="get"> Name: <input type="text" name="name_input" /> Pass: <input type="text" name="pass_input" /> <select id="language"> <option name="select_afrikaans">Afrikaans</option> <option name="select_english">English</option> </select> <br /> <input type="button" value="SAVE" onclick="javascriptk_click();" /> </form> </body> Javascript: function ok_click() { var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0"); xmlDoc.async = false; xmlDoc.load("data.xml"); if (xmlDoc.readyState == 4 && xmlDoc.parseError.errorCode == 0) { var root = xmlDoc.documentElement; var _input_name = xmlDoc.createTextNode(document.reg.name_input.value); var _input_pass = xmlDoc.createTextNode(document.reg.pass_input.value); var _select_afrikaans = xmlDoc.createTextNode(document.reg.select_afrikaans.value); var _select_english = xmlDoc.createTextNode(document.reg.select_english.value); var input_name = xmlDoc.createNode(1, "USER", ""); var input_pass = xmlDoc.createNode(1, "PASS", ""); var input_select = xmlDoc.createNode(1, "LANGUAGE", ""); input_name.appendChild(_input_name); input_pass.appendChild(_input_pass); select_afrikaans.appendChild(_select_afrikaans); select_english.appendChild(_select_english); var cust = xmlDoc.createNode(1, "CUST", ""); cust.appendChild(input_name); cust.appendChild(input_pass); cust.appendChild(select_afrikaans); cust.appendChild(select_english); root.appendChild(cust); SaveXML(xmlDoc, "data.xml"); alert("Save!"); } } // It is working fine function SaveXML(xmlDoc, filename) { var outputXML = new String(xmlDoc.xml); var mfObj = new ActiveXObject("Scripting.FileSystemObject"); var absPath = getPath(); var file = mfObj.CreateTextFile(absPath + filename, true); file.Write(outputXML); file.Close(); } //it is working fine function getPath() { var path = document.location; var str = new String(path); var end = str.lastIndexOf("/"); var absolutePath = str.substring(8, end) + "/"; absolutePath = absolutePath.replace(/ /g, " "); return absolutePath; } XML File: <?xml version="1.0"?> <DATA> <CUST> <USER>natalie</USER> <PASS>80</PASS> </CUST> ........ here should display xml data from dropdown list.....how? </DATA> Your help would much appreciated. Thank you very much Regards Natz |
|||||||