|
JavaScript - Having Trouble With The Different Versions Of Jquery
I've been trying to get the jquery nivo slider and the lavalamb function to work on the same webpage. From each of the tutorials comes different versions of jquery and they don't both work on the most recent version of jquery.
I left both versions of the jquery attached for now... Am I doing something wrong or is it possible to have them both working on the same page? I'm a noob and my code is pretty messy...but I'm trying to do some simple stuff... Pleeeeese help meeeee!! I'm getting ubber frustrated Here is the website - http://sethwardallison.com/ihome/index.html Here is the menu I made that is working correctly on it's own... - http://sethwardallison.com/ihome/lavalamp/other.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>iHome Preview</title>
<link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
#nav {width:397px; background: url(images/bg2.gif) no-repeat top left; overflow:hidden; margin:0px; padding:10px 0px 13px 20px; color:#fff; position:relative; font: bold 14px arial;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; Palatino, serif; font-size:20px; display:inline; color:#fff; }
#nav li.rounder { position:absolute; left:0px; top:10px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#dfddc0;}
#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}
#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}
#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}
#tr,#br {right:0px;}
#tl,#bl {left:0px;}
#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li a").mouseover(function(){
$("#nav li a").each(function(count){
$(this).css({color:"#fff"});
});
$(this).css({color:"#663300"});
var offL = $(this).offset().left - $("#nav").offset().left;
var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;
$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){
//IE6 1px Fix
var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));
var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));
if(wrapWOff > trOff){
$("#tr,#br").attr("class","rFix");
}
$(".rFix").css({right:"-1px"});
if(wrapHOff > brOff){
$("#br,#bl").attr("class","bFix");
}
$(".bFix").css({bottom:"-1px"});
});
});
});
</script>
</head>
<body>
<center><img src="images/logo.png" alt="" title="Welcome">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="http://youtu.be/4Mh--oqL6ak"><img src="images/randall.png" alt="" title="" /></a>
<a href=""><img src="images/creekwood.png" alt="" title="" /></a>
<a href=""><img src="images/poinsettia.png" alt="" /></a>
<a href="http://youtu.be/fO5q_lG7jKY"><img src="images/cielo.png" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is a<em>House</em> <a href="#">neat</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Contact</a></li>
<li class="rounder">
<div class="cornersWrap">
<div id="tl"><img src="images/rounder.gif" /></div>
<div id="tr"><img src="images/rounder.gif" /></div>
<div id="bl"><img src="images/rounder.gif" /></div>
<div id="br"><img src="images/rounder.gif" /></div>
</div>
</li>
</ul>
</div>
</body>
</html>
Similar Tutorialshi, 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..... Here's what should happen. 1. Get the rel attribute of the clicked link 2. For every div with class 'entry': (i)Get its 'left' position (ii) Calculate its outer height (iii)Loop through all instances of 'a.tag_filter'. If it finds the same string in the 'rel' as the one oringinally clicked on then add 1 to 'V' and break out of the loop. (iv)If 'V' is equal to 0 after the loop we know the same tag isn't present within that '.entry' so fade it out. (v)Once the fadeout has finished loop through all the '.entry' after the faded out one and get their 'left' values. (vi)If the left value of the faded entry = the left value of the current '.entry' then reposition it to the new 'top' value. What is currently happening. It runs through and fades out all the correct '.entry' elements and only after all of them have faded out does it reposition them remaining '.entry' elements. After each element is faded out I would like the repositioning loop to run so it essentially positions the remaining elements one at a time rather than all at once. Here's the development page http://www.redeemercentral.com/index.php/test/grid Here's the code I have so far Code: $('a.tag_filter').click(function(e){
e.preventDefault();
var selectTag = $(this).attr('rel');
$('div.spotlight_entry_container_grid').each(function(i){
var $entry = $(this);
var tagArray = [];
$('a.tag_filter', this).each(function(){
tagArray.push ($(this).attr('rel'));
});
if($.inArray(selectTag,tagArray) == -1){
var leftPos = $entry.css("left");
var topPos = $entry.css("top");
$entry.fadeOut(1000, function(){
var nextLeftPos;
var nextTopPos;
$('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) {
var $laterEntry = $(this);
nextLeftPos = $laterEntry.css("left");
nextTopPos = $laterEntry.css("top");
if(leftPos == nextLeftPos){
$laterEntry.animate({ top: topPos });
}
});
});
}
});
});
I hope that all makes sense. Any help would be very much appreciated. Thanks I currently have to run jQuery.noConflict(); so my other scripts work correctly, examples: Code: prototype.js validation.js And i have this Code: $( document ).ready( function() {
$( window ).scroll( function( e ) {
if( $( window ).scrollTop() > 160 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
} );
} );
witch works when i take jQuery.noConflict(); out, but with it in it dont work and thats my main feature is there anyway round it, thanks. I am going through the example at the bottom of this page: http://api.jquery.com/jQuery.getJSON/ I am using the following code: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<script>
var id=$("#id").attr("value");
$.getJSON("json.php",{id:id},dates);
function dates(datos) {
$("#list").html("Town:"+datos[1].rsTown+"<br>"+"County:"+datos[1].rsCounty);
}
</script>
<div id="id"></div>
<div id="list"></div>
</body>
</html>
and I'm trying to pull my JSON data from my PHP page: http://www.mypubspace.com/dashtest/json.php the JQuery seems to be doing something but nothing is being output to my screen?! project page http://www.mypubspace.com/dashtest/json.html Please help?! It appears Lightbox has a bug in IE when the screen height exceeds 65,505 pixels. I have created two test pages for you to see. One that shows the bug and another that shows it working. The problem seems to be ONLY with Internet Explorer (of any version). In the following test htm pages click the "Click Here" link at the top left corner. You will see a lightbox pop up on screen. The issue is related to the opacity level. When the screen height is <= 65,505 pixels the opacity works fine for IE. But if the height >=65,506 it fails. It is not an IE bug because i tried using filter: alpha(opacity) and it works fine. It seems to be a lightbox bug. Test 1: Opacity Works because Height of Screen is 65,505 pixels: http://fatcatdaily.com/test-works.htm Test 2: Opacity Fails because Height of Screen is 65,506 pixels: http://fatcatdaily.com/test-fail.htm NOTE: You MUST be using Internet Explorer to see the BUG I have this function which rounds up the <p>s, checks their ids, twice, for specific letter combinations and, depending on the combination, changes the class name in one of two ways. It's referencing <p> tags with ids that look like this: <p id="Labaabb6"> , where 'a' could be 'b' & vice versa, '6' any number from 1 to 6, and 'L' is just there to be zero in the character count. Still here? OK, there are six variations, V1() to V6(): these work standalone, but it'd be good to combine them. This is where I'm having some trouble... Here's a breakdown of the first function: Code: Line
1 function V1(){
2 for (i=0; i<elP.length; i++) {
3 if(elP[i].id.charAt(1)=='a' && elP[i].id.charAt(7)=='1') {
4 elP[i].className = 'oV1'}
5 else if(elP[i].id.charAt(1)=='b' && elP[i].id.charAt(7)=='1') {
6 elP[i].className = 'xV1'}
}}
In Lines 3 and 5, the value of elP[i].id.charAt(7) is a variable: it can be '1' to '6', and is always the same value in both lines. In Line 3 elP[i].id.charAt() is a variable, could be (1) to (6), always == a. In Line 5 elP[i].id.charAt() is a variable, could be (1) to (6), always == b. In Line 4, elP[i].className is a variable, could be one of a set of six. In Line 6, elP[i].classNam e is a variable, could be one of a different set of six. For a start, how many variables? I make it three. elP[i].id.charAt(); elP[i].id.charAt(7); or maybe wrapped into 'elP[i].id.charAt()' ? elP[i].className. First draft, don't fully understand how to write variables: function V(charNo, lnNo, newC) { var charNo = elP[i].id.charAt() or elP[i].id.charAt[] ? var lnNo = elP[i].id.charAt(7) var newC = elP[i].className for (i=0; i<elP.length; i++) { do if/else here} } Any help appreciated. 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;
});
});
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?
OK i really hope someone can help me because this has put a complete halt to what I'm doing right now. i have various images in a 12x12 grid with names such as x1y1, x2y2, ect I need to check what x1y1's image SRC is. I have been trying stuff like this: var xpos = 1 var ypos = 1 var IMAGENAME = "x" + xpos + "y" + ypos blah = ('document.' + IMAGENAME + '.src') if (blah == "something.gif") { do what i want } Just doesn't work, nor has the 80 other things I've tried lol. Can anyone help me out? I have a form that does not validate when in a modal. Here is the page: http://www.varsitytrainers.com/purchase1.html It works well. It does not work when viewed on this page: http://www.varsitytrainers.com/bosto...ltrainers.html - Then click "Apply Now" and then click "Featured Membership" then click "Submit" You will see that the validation does not take place. I have been banging my head against the desk for days now. Please help. Hi all, I have created the following page http://kylehouston.com/new/index_new.html I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work. I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen. Anyone got any advice? Thanks in advance! Kyle I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm However, the width of that is 845 px and I wanted it to drop down to 650 px and make the arrows have the same effect as they did with the 845 px. First I moved the 845 to 650 in the css file, then changed the 845 to 650 in the JS files, I have been unable to figure this out though. If someone could please help that would be great! This is the JS file that I tried to edit: http://www.baltimoreravens.com/includes/jsbin/ravens.js This is the css file: http://www.msnsportsnet.com/content/ravens.css Can anyone look at the link below, and tell me why the infoWindow displays the same xml marker node for each marker Thanks Lee http://www.hotels.seotra.com/ All, I have the following code: Code: var http_request = false;
function makePOSTRequest(url, parameters) {
alert(parameters);
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function getjob(obj) {
var poststr = "job_id=" + encodeURI( obj );
makePOSTRequest('getnextjob.php', poststr);
}
I call the getjob but doing the following: echo "<li><a href=\"#\" onclick=\"javascript:getjob($resultsetjob[job_id]); return false;\">$resultsetjob[name]</a></li>"; It's weird, only sometimes does it pass the variable and other times it doesn't. Is there a better way to do this?? Thanks in advance. http://icant.co.uk/sandbox/countdown.html Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown? Someone tell me where I'm going wrong. I'm trying to print out the month/year ? Code: <html><head>
<SCRIPT language=JavaScript>
var dateNow = new Date();
var monthNow = dateNow.getMonth();
var yearNow = dateNow.getYear();
function MakeArray(n) {
this.length = n
return this
}
monthNames = new MakeArray(12)
monthNames[1] = "Janurary"
monthNames[2] = "February"
monthNames[3] = "March"
monthNames[4] = "April"
monthNames[5] = "May"
monthNames[6] = "June"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "Sept."
monthNames[10] = "Oct."
monthNames[11] = "Nov."
monthNames[12] = "Dec."
function customDate(oneDate) {
var theMonth = monthNames[oneDate.getMonth() +1]
}
</SCRIPT>
</head><body><script type="text/javascript">
document.write(theMonth + "/" + yearNow);
</script>
</body></html>
Hi i start of with a some csv data and convert this into an array. The resulting array looks like the following [["Apple", "64"], ["Banana", "20"], ["pear", "12"], ["Orange", "16"]] But i need this to be formatted as below without the quotes around the second value. [["Apple", 64], ["Banana", 20], ["pear", 12], ["Orange", 16]] Im not sure how to achieve this. I guess i need to loop through the array and strip out the quotes but im failing to get this working. Help! |
|||||||